express_ui 0.1.0.rc1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 3aba4d25bce3a9b4dad5029c100a38467f15c305
+  data.tar.gz: d99847094ecdb814e7a25718cbd09e23b265f7fc
+SHA512:
+  metadata.gz: '0362895f696cd259db5f153335668a32af3cd688a0d2a76c5ab402f05696b60b7a92a65593842fa62ea00596d0745d799bf1f5c146e6e335362b6ad1f3db2ba0'
+  data.tar.gz: 485aeecd0951c2ee20a9d67e129480a4e95ba072263e27cc7c1270c6d05f53db3af040087772cc0d20d3c93d570518a5fa01f72d2af105988bfb3c181504cfb5

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Steven Talcott Smith
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,38 @@
+Express UI
+==========
+
+User interface library for AppExpress components.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'express_ui'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install express_ui
+```
+
+## Usage
+
+Start the dummy Rails app:
+
+```
+cd test/dummy
+bin/rails s
+```
+
+Visit `http://localhost:3000/express_ui`.
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'ExpressUi'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/config/express_ui_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/express_ui .js
+//= link_directory ../stylesheets/express_ui .css

data/app/assets/javascripts/express_ui/application.js

@@ -0,0 +1 @@
+//= require_tree .

data/app/assets/javascripts/express_ui/copy_code.js

@@ -0,0 +1,63 @@
+function testCopyComand() {
+  try {
+    document.execCommand("copy")
+    return true
+  }
+  catch (error) {
+    return false
+  }
+}
+
+function addClickToCopyButton(codeBlocks) {
+  codeBlocks.map(function(codeBlock, index){
+    var clickToCopyButton = createButton()
+    codeBlock.appendChild(clickToCopyButton)
+    clickToCopyButton.addEventListener('click', function(e) {
+      selectElementRange(this.parentNode)
+    })
+  })
+}
+
+function selectElementRange(copyElementSelect) {
+  var range = document.createRange()
+  range.selectNode(copyElementSelect)
+  window.getSelection().removeAllRanges()
+  window.getSelection().addRange(range)
+  document.execCommand("copy")
+  window.getSelection().removeAllRanges()
+}
+
+function createButton() {
+  var copyButton = document.createElement('button')
+  copyButton.className = 'ae-btn ae-btn-primary click-to-copy'
+  copyButton.data = 'Click to copy'
+  var clipboard = document.createElement('i')
+  clipboard.className = 'fa fa-clipboard'
+  copyButton.appendChild(clipboard)
+  return copyButton
+}
+
+function addClickToCopyText() {
+  var codeBlockButtons = Array.prototype.slice.call(document.querySelectorAll('.ae-code-block .ae-btn'))
+
+  codeBlockButtons.map(function(button, index) {
+    var pre = button.closest('pre')
+    button.setAttribute('data-tooltip', 'Click to copy')
+    button.addEventListener('click', function(e){
+      button.setAttribute('data-tooltip', 'Copied!')
+      setTimeout(function(){
+        button.setAttribute('data-tooltip', 'Click to copy')},
+      500)
+    })
+  })
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  if (testCopyComand()) {
+    var codeBlocks = Array.prototype.slice.call(document.querySelectorAll(".ae-code-block"))
+
+    addClickToCopyButton(codeBlocks)
+    addClickToCopyText()
+  }
+})
+

data/app/assets/javascripts/express_ui/search.js

@@ -0,0 +1,103 @@
+function hasClass(element, cls) {
+  return element.classList.contains(cls)
+}
+
+function addMatch(matchedElements, node) {
+  if (node.nodeType !== Node.TEXT_NODE) {
+    if (matchedElements.includes(node) == false){
+      matchedElements.push(node)
+    }
+  }
+}
+
+function addNextElements(elements, matchedElements) {
+  elements.map(function(index, item){
+    if (matchedElements.includes(item) == false){
+      matchSubElements(item, matchedElements, null)
+    }
+  })
+}
+
+function checkItemIsHeader($item) {
+  return $item.is(':header') //h1, h2, h3, etc
+}
+
+function matchSubElements(element, matchedElements, header, isHeader) {
+  var $subElements = $(element.children)
+
+  if (isHeader) {
+    matchedElements.push($subElements[0])
+  } else {
+    $subElements.map(function(index, item){
+      var itemIsHeader = checkItemIsHeader($(item)) ? true : false
+      matchSubElements(item, matchedElements, header, itemIsHeader)
+    })
+  }
+
+  matchedElements.push(element)
+}
+
+function matchHeader(header, matchedElements) {
+  matchSubElements(header, matchedElements, null, true)
+}
+
+function matchElement(header, matchedElements, regexp){
+  var directSibElement = $(header).nextUntil(header.tagName)[0]
+  var $elements = []
+
+  if (directSibElement){
+    $elements = $(directSibElement.children)
+  }
+
+  if (header.textContent.match(regexp)){
+    matchHeader(header, matchedElements)
+
+    if (directSibElement) {addMatch(matchedElements, directSibElement) }
+
+    addNextElements($elements, matchedElements)
+  } else {
+    if (!!$elements.length) {
+      for (var i = 0; i < $elements.length; i++){
+        if ($elements[i].textContent.match(regexp)){
+          matchSubElements($elements[i], matchedElements, header)
+          addMatch(matchedElements, directSibElement)
+          matchHeader(header, matchedElements)
+        }
+      }
+    }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+
+  if (!document.querySelector('#ae-search-box')) { return; }
+  document.querySelector("#ae-search-box").addEventListener("input", function(event) {
+
+    var searchTerm = this.value
+    var headers = Array.prototype.slice.call(document.querySelector('.js-anchorific-content').querySelectorAll("h2"))
+    var regexp = new RegExp(searchTerm, "igm")
+    var allElements = document.querySelector('.js-anchorific-content').querySelectorAll('*')
+    var allElementsArray = Array.prototype.slice.call(allElements)
+    var matchedElements = []
+    var unmatchedElements = []
+
+    for (var i = 0; i < headers.length; i++) {
+      if (matchedElements.includes(headers[i]) == false){
+        matchElement(headers[i], matchedElements, regexp)
+      }
+    }
+
+    unmatchedElements = allElementsArray.filter(function(element, index) {
+      return matchedElements.indexOf(element) === -1
+    })
+
+    unmatchedElements.map(function(item, index) {
+      item.style.display = "none"
+    })
+
+    matchedElements.map(function(item, index) {
+      item.style.display = ""
+    })
+  })
+})
+

data/app/assets/javascripts/express_ui/styleguide.js

@@ -0,0 +1,90 @@
+//= require jquery
+//= require jquery_ujs
+//= require anchorific
+//= require resizable
+
+$(function() {
+
+  $('.ae-sidebar-right').resizable({
+    handles: 'w',
+    minWidth: 100,
+    maxWidth: $('.ae-sidebar-right').parent().width() * 0.4,
+    containment: '.ae-template-master-detail-fixed',
+    resize: function(event, ui){
+      var siblingMain = ui.element.siblings('.ae-content')
+      var siblingSidebar = ui.element.siblings('.ae-sidebar')
+      var parent = ui.element.parent()
+      ui.size.height = ui.originalSize.height
+      siblingMain.width(parent.width() - (siblingSidebar.width() + ui.size.width) - 100)
+    },
+    stop: function(event, ui){
+      ui.element.css('left', '')
+    }
+  })
+
+  var rightCaretIcon = "<i class='fa fa-caret-right'></i>"
+
+  $(".js-anchorific-content").anchorific({
+    headers: ':header:not(.ae-demo-container :header)'
+  });
+
+  $(".anchorific ul > li").each(function(index, item) {
+    $(item).has("ul").children("a").prepend(rightCaretIcon)
+  });
+
+  $('.anchorific a').on('click', function(e){
+    $(e.target).closest('li[data-tag]').children('ul').toggle()
+    $(e.target).find('i').toggleClass('fa-caret-right fa-caret-down')
+
+    $('html, body').animate({
+        scrollTop: $('[id="' + $.attr($(e.target).closest('a')[0], 'href').substr(1) + '"]').offset().top
+    }, 500);
+    return false;
+  });
+
+  $('body').append("<a href='#' class='ae-btn ae-btn-secondary ae-btn-sm back-to-top'>Back to top &nbsp;<i class='fa fa-long-arrow-up'></i></a>");
+  $('.back-to-top').css('display', 'none')
+
+  // Freeze body when scrolling over sidebar
+  // $(".ae-sidebar-overlay").on("mouseover", function() {
+  //   $("body").css("overflow-y", "hidden");
+  //   $(this).css('z-index', '-1');
+  // });
+
+  // $(".js-ae-sidebar").on("mouseleave", function() {
+  //   $("body").css("overflow-y", "auto");
+  //   $(this).css('z-index', '1');
+  // });
+
+  $(window).scroll(function() {
+    if ($(this).scrollTop() >= 100) {        // If page is scrolled more than 100px
+        $('.back-to-top').fadeIn(200);    // Fade in the arrow
+      } else {
+        $('.back-to-top').fadeOut(100);   // Else fade out the arrow
+      }
+    });
+
+  $('.back-to-top').click(function() {
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+    return false;
+  });
+
+
+  //demo tabs
+  $('.ae-demo-container').on('click', '.ae-tab', function(e){
+    $clickedTab = $(this)
+    $parentContainer = $clickedTab.parents('.ae-demo-container')
+    tabContent = $clickedTab.data('tab')
+
+    $parentContainer.find('.ae-tab.active-tab').removeClass('active-tab')
+    $clickedTab.addClass('active-tab')
+    $parentContainer.find('.ae-tab-content.active-tab').removeClass('active-tab')
+    $parentContainer.find('#' + tabContent).addClass('active-tab')
+  });
+});
+
+$( document ).ready(function() {
+  $("ul li[data-tag='2']").children("ul").css("display", "none");
+});
+
+

data/app/assets/stylesheets/express_ui/atoms/_animations.sass

@@ -0,0 +1,35 @@
+@mixin easeInOut
+  -moz-transition: all 0.3s ease-in-out
+  -o-transition: all  0.3s ease-in-out
+  -webkit-transition: all 0.3s ease-in-out
+  transition: all 0.3s ease-in-out
+
+@mixin animate($n)
+  transition: all $n ease-out
+
+@mixin scale
+  transform: scale(1.1)
+
+.ae-fade-in
+  &:hover
+    animation: fadeIn 1s linear
+
+.ae-fade-out
+  &:hover
+    animation: fadeOut 1s linear
+
+.ae-ease-in-out
+  &:hover
+    @include easeInOut
+
+@keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+  100%
+    opacity: 0

data/app/assets/stylesheets/express_ui/atoms/_buttons.sass

@@ -0,0 +1,119 @@
+@mixin button
+  @include border-radius(3px !important)
+  padding: 0.5em
+  margin: 0.25em 0.25em 0 0
+  border: 0
+  cursor: pointer
+
+.ae-btn
+  @include easeInOut
+  @include button
+  display: inline-block
+  text-decoration: none
+  text-transform: uppercase
+  box-shadow: none
+  vertical-align: middle
+  @include body-font
+
+  &:hover, &-hover
+    @include box-shadow(0, 0px, 5px, 0, $border-dark)
+
+  &:active, &-active
+    @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
+
+  &:focus, &-focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
+    outline-color: $primary-color
+
+
+.ae-btn-default
+  background: $secondary-color
+  border: 1px solid $secondary-color
+  color: $icon-color !important
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 20%))
+
+.ae-btn-primary
+  background: $primary-color
+  border: 1px solid $primary-color
+  color: #fff !important
+
+  *
+    color: #fff !important
+
+  &.ae-btn-border
+    color: $primary-color !important
+
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($primary-color, 20%))
+
+.ae-btn-secondary
+  background: $secondary-color
+  border: 1px solid $secondary-color
+  color: #fff !important
+
+  *
+    color: #fff !important
+
+  &.ae-btn-border
+    color: $secondary-color !important
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
+
+.ae-btn-success
+  background: $success
+  border: 1px solid $success
+  color: #fff !important
+
+  *
+    color: #fff !important
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($success, 20%))
+
+.ae-btn-danger
+  background: $cancelled
+  border: 1px solid $cancelled
+  color: #fff !important
+
+  *
+    color: #fff !important
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($cancelled, 20%))
+
+
+.ae-btn-sm
+  padding-top: 0.25em
+  padding-bottom: 0.25em
+  @include h6
+
+.ae-btn-md
+  padding-top: 0.45em
+  padding-bottom: 0.45em
+  @include h5
+
+.ae-btn-lg
+  padding-top: 0.5em
+  padding-bottom: 0.5em
+  @include h4
+
+.ae-btn-border
+  border-style: solid
+  border-width: 1px
+  background: none
+
+  &:active
+    @include box-shadow(inset, 2px, 2px, 2px, lighten($secondary-color, 15%))
+
+.ae-btn-disabled, button:disabled
+  background: lighten($secondary-color, 30%)
+  color: #ccc
+  cursor: not-allowed
+  border-color: lighten($secondary-color, 30%)
+
+  &:hover
+    box-shadow: none