index.html

---
layout: default
body_class: home
custom_js:
- /js/widget.js
---

{% include navbar.html %}

<div class="content">

  {% include widget.html %}

  <div class="container">
    <br/>
    <p class="text-center">
      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#embedModal">
        Embed this widget
      </button>
    </p>

    <div class="modal fade" id="embedModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Embed search widget</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <textarea id="embed-code" class="form-control" rows="8" readonly>
&#x3C;div id=&#x22;propertyvalues-za&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22; src=&#x22;https://cdnjs.cloudflare.com/ajax/libs/pym/1.2.0/pym.v1.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
&#x3C;script&#x3E;
  var pymParent = new pym.Parent(&#x27;propertyvalues-za&#x27;, &#x27;{{ site.url }}/embed.html&#x27;, {});
&#x3C;/script&#x3E;</textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-clipboard-target="#embed-code" data-placement="bottom" title="Copied!">Copy Embed Code</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  </div><!-- /.container -->

</div>

<!-- Copy embed code to clipboard -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>
<script type="text/javascript">
  window.onload = function() {
    $('#embedModal').on('shown.bs.modal', function (e) {
      $('#embedModal textarea').select();
    });

    clipboard = new Clipboard('#embedModal .btn-primary');
    clipboard.on('success', function(e) {
      $('#embedModal .btn-primary').tooltip();
      $('#embedModal .btn-primary').tooltip('show');
    });
    $('#embedModal .btn-primary').on('mouseleave', function () {
      $('#embedModal .btn-primary').tooltip('destroy');
    });
    
  };
</script>

{% include footer.html %}