<!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>

  <script type="text/html" id="change-theme-template">
    <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 justify-content-center">
              <div class="col-auto">
                <h4>Color</h4>
                <% _.each(color, function (info, name) { %>
                  <div>
                    <input id="<%- name %>" name="<%- name %>" type="color" value="<%- info.value %>">
                    <label for="<%- name %>"><%- info.title  %></label>
                  </div>
                <% }) %>
              </div>
              <div class="col-auto">
                <h4>Font family</h4>
                <% _.each(font, function (info, name) { %>
                  <div class="mb-4">
                    <label for="<%- name %>"><%- info.title %></label>
                    <select class="form-control form-control-sm" name="<%- name %>">
                      <% _.each(info.options, function (fontinfo, fontname) { %>
                        <option value="<%- fontname %>"><%- fontinfo %></option>
                      <% }) %>
                    </select>
                  </div>
                <% }) %>
                <h4>Font size</h4>
                <% _.each(fontsize, function (info, name) { %>
                  <div class="form-group row mb-0">
                    <div class="col-sm-4">
                      <input class="form-control form-control-sm" id="<%- name %>" name="<%- name %>" value="<%- info.value %>">
                    </div>
                    <label class="col-sm-8 col-form-label-sm" for="<%- name %>"><%- info.title %></label>
                  </div>
                <% }) %>
              </div><!-- .theme-fonts -->
              <div class="col-auto">
                <h4>Style</h4>
                <table class="table table-sm table-borderless">
                  <% console.log(toggle) %>
                  <% _.each(toggle, function (info, name) { %>
                    <tr>
                      <td><label class="my-1 ml-n1" for="<%- name %>"><%- info.title %></label></td>
                      <td>
                        <select class="form-control form-control-sm" name="<%- name %>">
                          <% _.each(['false', 'true'], function (val) { %>
                            <option <%= val == info.value ? 'selected' : '' %>><%= val %></option>
                          <% }) %>
                        </select>
                      </td>
                    </tr>
                  <% }) %>
                </table>
                <h4 class="mt-3">Theme</h4>
                <% _.each(theme, function (info, name) { %>
                  <div>
                    <a 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 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><!-- .modal -->
  </script><!-- #change-theme-template -->

  <div class="pt-2 m-1">&nbsp;</div>
  <div class="container-fluid component d-flex">
    <template id="toc-nav-template">
      <nav id="toc-nav" class="mt-3 nav" id="toc-nav">
        <% _.each(toc, function (entry) { %>
          <a class="nav-link" data-level="<%- entry.level %>" href="<%- entry.href %>"><%- entry.name %></a>
        <% }) %>
      </nav>
    </template>
    <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/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>
    /* globals Noty */
    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 = q[name] || info.default })
    _.each(config.theme, function(info) { info.href = '?' + $.param(info) })
    config.cssurl = '../ui/bootstraptheme.css' + location.search
    $('#change-theme-template').template(config)
    $('[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}
    })
    $('#toc-nav-template').template({toc: toctree})
  </script>
  <script>
    $('body').urlfilter()

    // 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>
