<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Gramex UI Components</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.write('<link rel="stylesheet" href="../ui/bootstraptheme.css' + location.search + '">')</script>
  <link rel="stylesheet" href="../ui/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../ui/noty/lib/noty.css">
  <link rel="stylesheet" href="../ui/daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="../ui/select2/dist/css/select2.min.css">
  <link rel="stylesheet" href="../ui/tether-shepherd/dist/css/shepherd-theme-arrows.css">
  <link rel="stylesheet" href="../ui/tether-shepherd/dist/css/shepherd-theme-dark.css">
  <link rel="stylesheet" href="../ui/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="../node_modules/prismjs/themes/prism-okaidia.css">
  <link rel="stylesheet" href="style.css?v=3.25">
  <script src="../ui/jquery/dist/jquery.min.js"></script>
  <script src="../ui/tether-shepherd/dist/js/tether.js"></script>
  <script src="../ui/tether-shepherd/dist/js/shepherd.min.js"></script>
</head>
<body class="show-source" data-spy="scroll" data-target="#toc-nav" data-offset="80">
  <nav class="navbar navbar-dark bg-dark fixed-top w-100 top-nav">
    <h1 class="h5 m-0 text-light" href=".">Gramex UI Components</h1>
    <form class="form-inline">
      <button class="btn btn-sm btn-light ml-2 toggle-source" type="button">Toggle source</button>
      <button class="btn btn-sm btn-light ml-2" type="button" data-toggle="modal" data-target="#change-theme" aria-expanded="false" aria-controls="change-theme">Change theme</button>
    </form>
  </nav>

<div id="change-theme" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <form class="modal-content">
      <!-- htmllint label-req-for="false" -->
      <div class="modal-body">
        <div class="row">
          <div class="col-auto">
            <h4>Color</h4>
            <div v-for="(info, name) in color">
              <input v-bind:id="name" v-bind:name="name" type="color" v-bind:value="info.value">
              <label v-bind:for="name">${ info.title }</label>
            </div>
          </div>
          <div class="col-auto">
            <h4>Font family</h4>
            <div v-for="(info, name) in font" class="mb-4">
              <label v-bind:for="name">${ info.title }</label>
              <select class="form-control form-control-sm" v-bind:name="name" v-model="info.value">
                <option v-for="(fontinfo, fontname) in info.options" v-bind:value="fontname">
                  ${ fontinfo }
                </option>
              </select>
            </div>
            <h4>Font size</h4>
            <div v-for="(info, name) in fontsize" class="form-group row mb-0">
              <div class="col-sm-4">
                <input class="form-control form-control-sm" v-bind:id="name" v-bind:name="name" v-bind:value="info.value">
              </div>
              <label class="col-sm-8 col-form-label-sm" v-bind:for="name">${ info.title }</label>
            </div>
          </div><!-- .theme-fonts -->
          <div class="col-auto">
            <h4>Style</h4>
            <div v-for="(info, name) in toggle">
              <label>
                <input v-bind:name="name" type="checkbox" v-model="info.value"> ${ info.title }
              </label>
            </div>
            <h4 class="mt-3">Theme</h4>
            <div v-for="(info, name) in theme">
              <a v-bind:href="info.href">${ name }</a>
            </div>
          </div>
        </div><!-- .row -->
      </div><!-- .modal-body -->
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Apply theme</button>
        <a v-bind:href="cssurl" class="btn btn-light">Link to CSS</a>
      </div><!-- .modal-footer -->
      <!-- htmllint label-req-for="true" -->
    </form><!-- .modal-content -->
  </div><!-- .modal-dialog -->
</div><!-- #change-theme -->


  <div class="pt-2 m-1">&nbsp;</div>
  <div class="container-fluid component d-flex">
    <nav class="mt-3 nav" id="toc-nav">
      <a v-for="entry in toc"
        class="nav-link"
        v-bind:data-level="entry.level"
        v-bind:href="entry.href">${ entry.name }</a>
    </nav>
    <main role="main" class="ml-3">
      <h1 class="toc">Introduction</h1>
      <p>The Gramex UI component library is a set of UI components that extend
        <a href="https://getbootstrap.com/" target="_blank">Bootstrap 4</a>.
        These are to be used in all Gramex projects.
      </p>
      {% from guide_ui_app import only_source, view_source, config_file, ui_config_file %}
      {% import gramex.cache, json %}
      {% set config = gramex.cache.open(config_file, 'config') %}
      {% set ui_config = gramex.cache.open(ui_config_file, 'config') %}
      {% include 'ui-about.html' %}
      {% include 'ui-custom.html' %}
      {% include 'ui-fonts.html' %}
      {% include 'ui-sass.html' %}
      {% include 'ui-libraries.html' %}

      <h1 class="toc">Utilities</h1>
      {% include 'ui-colors.html' %}
      {% include 'ui-hover.html' %}
      {% include 'ui-cursor.html' %}
      {% include 'ui-round.html' %}
      {% include 'ui-ripple.html' %}
      {% include 'ui-border.html' %}
      {% include 'ui-shadow.html' %}
      {% include 'ui-text.html' %}
      {% include 'ui-zindex.html' %}
      {% include 'ui-tours.html' %}
      {% include 'ui-underline.html' %}

      <h1 class="toc">Backgrounds</h1>
      {% include 'ui-background.html' %}
      {% include 'ui-height.html' %}
      {% include 'ui-gradient.html' %}
      {% include 'ui-opacity.html' %}

      <h1 class="toc">Positioning</h1>
      {% include 'ui-overlay.html' %}
      {% include 'ui-position.html' %}

      <h1 class="toc">Components</h1>
      {% include 'ui-arrow.html' %}
      {% include 'ui-divider.html' %}
      {% include 'ui-tail.html' %}

      <h1 class="toc">Inputs</h1>
      {% include 'ui-select.html' %}
      {% include 'ui-slider.html' %}
      {% include 'ui-switch.html' %}
      {% include 'ui-upload.html' %}

      <h1 class="toc">Bootstrap</h1>
      {% include 'ui-accordion.html' %}
      {% include 'ui-alert.html' %}
      {% include 'ui-button.html' %}
      {% include 'ui-card.html' %}
      {% include 'ui-dashboards.html' %}
      {% include 'ui-date-picker.html' %}
      {% include 'ui-dropdown.html' %}
      {% include 'ui-forms.html' %}
      {% include 'ui-grid.html' %}
      {% include 'ui-input.html' %}
      {% include 'ui-loading.html' %}
      {% include 'ui-login.html' %}
      {% include 'ui-modal.html' %}
      {% include 'ui-panel.html' %}
      {% include 'ui-table.html' %}
      {% include 'ui-tooltip.html' %}
    </main>
  </div><!-- .container-fluid -->

  <!-- Modal -->
  <div class="modal fade" id="source-modal" tabindex="-1" role="dialog" aria-labelledby="source-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="source-modal-label">Component source code</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <pre><code class="language-html source-content"></code></pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="../ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../ui/noty/lib/noty.min.js"></script>
  <script src="../ui/moment/min/moment-with-locales.min.js"></script>
  <script src="../ui/daterangepicker/daterangepicker.js"></script>
  <script src="../ui/url-search-params/build/url-search-params.js"></script>
  <script src="../ui/lodash/lodash.min.js"></script>
  <script src="../ui/g1/dist/g1.min.js"></script>
  <script src="../ui/select2/dist/js/select2.min.js"></script>
  <script src="../ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
  <script>
  // https://github.com/snapappointments/bootstrap-select/issues/2107
  $.fn.selectpicker.Constructor.BootstrapVersion = '4'
  </script>
  <script src="../node_modules/clipboard/dist/clipboard.min.js"></script>
  <script src="../node_modules/prismjs/prism.js"></script>
  <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script>
    /* globals Vue, Noty */
    /* exported app, toc */
    var config = {% raw json.dumps(config, ensure_ascii = True, indent = 2) %}
    var q = g1.url.parse(location).searchKey
    // Set values based on inputs
    _.each(config.color, function(info, name) { info.value = q[name] || info.default })
    _.each(config.font, function(info, name) { info.value = q[name] || info.default })
    _.each(config.fontsize, function(info, name) { info.value = q[name] || info.default })
    _.each(config.toggle, function(info, name) { info.value = Object.keys(q).length > 0 ? (q[name] || '') : info.default })
    _.each(config.theme, function(info) { info.href = '?' + $.param(info) })
    config.cssurl = '../ui/bootstraptheme.css' + location.search
    var app = new Vue({el: '#change-theme', data: config, delimiters: ['${', '}']})
    $('[data-spy="scroll"]').scrollspy('refresh')

    // Toggle view source
    $('body').on('click', '.toggle-source', function() {
      $('body').toggleClass('show-source')
    })

    // copy code block
    var clipboard = new Clipboard('.copy-button', {
      text: function() {
        return document.querySelector('.upload-container').innerHTML
      }
    })
    clipboard.on('success', function() {
      new Noty({type: 'success', text: 'Copied!'}).show()
    })
    var toctree = $('.toc').map(function() {
      var text = $(this).text()
      var slug = text.trim().toLowerCase().replace(/[^a-z0-9_]+/gi, '-')
      $(this).attr('id', slug)
      return {level: 'l' + this.tagName[1], name: text, href: '#' + slug}
    })
    var toc = new Vue({el: '#toc-nav', data: {toc: toctree}, delimiters: ['${', '}']})
  </script>
  <script>
    // Click on top nav to scroll to the top
    $('.top-nav').on('click', function(e) {
      if ($(e.target).is('.top-nav'))
        $(window).scrollTop(0)
    })

    /* Prism copy to clipboard for all pre with viewsource class */
    // ref: https://stackoverflow.com/a/34198183
    $('pre.viewsource').each(function () {
      var $this = $(this)
      var $button = $('<button class="btn-sm" type="button">Copy</button>')
      $this.wrap('<div/>').removeClass('viewsource')
      var $wrapper = $this.parent()
      $wrapper.addClass('viewsource-wrapper').css({position: 'relative'})
      $button.css({position: 'absolute', top: 10, right: 10}).appendTo($wrapper).addClass('viewsource btn btn-light')
      var copyCode = new Clipboard('button.viewsource', {
        target: function (trigger) {
          return trigger.previousElementSibling
        }
      })
      copyCode.on('success', function (event) {
        event.clearSelection()
        event.trigger.textContent = 'Copied'
        window.setTimeout(function () {
          event.trigger.textContent = 'Copy'
        }, 2000)
      })
      copyCode.on('error', function (event) {
        event.trigger.textContent = 'Press "Ctrl + C" to copy'
        window.setTimeout(function () {
          event.trigger.textContent = 'Copy'
        }, 2000)
      })
    })
  </script>
</body>
</html>
