shipyard-framework 0.5.81 → 0.5.82

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84bba4d9d29150b6e1f2dd9182d0111032b8f542379c53b0737a86febdb7ee6a
-  data.tar.gz: abaab7f264f6c7eedb8e9de91f872347ad176b67bd5d53f9cf3e120c9f70b242
+  metadata.gz: 27e61f49bdbd5ae0eeba8e929285f5cfaeda2a52df04b9a91a24bbce7b386b20
+  data.tar.gz: 6148ea0dd24160e5416f2990fd36960edfbb901140c689579073ab44a2233236
 SHA512:
-  metadata.gz: 542ca4978afa92443c5e42c065b9c8e1ca883b9f6dab4c9e8d216dd00681a6ac5d5aeca0fc4333b7054de85c6d0164cf1653267814cf50a8b717b9f6dcdb3741
-  data.tar.gz: 0be7b4235f28af8dbb48a71fb337379a68cfb45d82f2b81772f80c565c9ad4c0fb4b3608215347cffeff4aa061f9fbdc6b2bb6fbb3cc6a905475cff1e2506e42
+  metadata.gz: af369bcfb123990a1996bbb1a29f63ecd582f653d06bbacc9b735284cbcb537b00d87a0c6067fd7421c5fe889ffb739ec566e2f51232ceff553575a6a774826f
+  data.tar.gz: 77dcacad8a505853a62b8d2fc09fc56275b89038c807bc1fe423ddefea3df11c935465b3f140b0fc9f56122241f381c4bd8f7b728804599bac11ef1899a69609

data/assets/javascripts/shipyard.es6

@@ -2,13 +2,15 @@
 //= require ./shipyard/scroll
 //= require ./shipyard/hamburger
 //= require ./shipyard/alert
+//= require ./shipyard/alert-timer
 //= require ./shipyard/accordion
+//= require ./shipyard/accordion-trigger
 //= require ./shipyard/modal
 //= require ./shipyard/modal-trigger
 
-var shipyard = new Shipyard('html')
-var windowScroll = new Scroll(window)
-var hamburger = new Hamburger('[shipyard=hamburger]')
-var shipyardAlert = new Alert('[shipyard=alert]')
-var modalTrigger = new ModalTrigger('[modal-trigger]')
-var accordion = new Accordion('[accordion]')
+var shipyard = new Shipyard(document.documentElement)
+shipyard.windowScroll = new Scroll(window)
+shipyard.hamburger = new Shipyard('[shipyard=hamburger]', Hamburger)
+shipyard.alerts = new Shipyard('[shipyard=alert]', Alert)
+shipyard.modalTriggers = new Shipyard('[modal-trigger]', ModalTrigger)
+shipyard.accordionTriggers = new Shipyard('[accordion]', AccordionTrigger)

data/assets/javascripts/shipyard/accordion-trigger.es6

@@ -0,0 +1,7 @@
+class AccordionTrigger extends Shipyard {
+  constructor (el) {
+    super(el)
+    this.accordion = new Accordion(this.attr('accordion'))
+    this.on('click', (e) => { this.accordion.trigger('toggle') })
+  }
+}

data/assets/javascripts/shipyard/accordion.es6

@@ -1,10 +1,10 @@
 class Accordion extends Shipyard {
   constructor (el) {
     super(el)
-    this.on('click', this.toggle)
+    this.on('toggle', () => { this.toggle() })
   }
 
-  toggle (event, el) {
-    document.querySelector(el.getAttribute('accordion')).classList.toggle('accordion-closed')
+  toggle () {
+    this.toggleClass('accordion-closed')
   }
 }

data/assets/javascripts/shipyard/alert-timer.es6

@@ -0,0 +1,17 @@
+class AlertTimer extends Shipyard {
+  constructor (el, alert) {
+    super(el)
+    this.alert = alert
+    this.duration = this.data('duration')
+    if (this.duration) this.css('animation-duration', `${this.duration}s`)
+    this.on('start', () => { this.start() })
+  }
+
+  start () {
+    setTimeout(() => { this.end() }, this.duration * 1000)
+  }
+
+  end () {
+    this.alert.trigger('close')
+  }
+}

data/assets/javascripts/shipyard/alert.es6

@@ -1,13 +1,28 @@
 class Alert extends Shipyard {
   constructor (el) {
     super(el)
-    this.el.forEach((el) => {
-      el.querySelector('[shipyard=alert-close]')
-        .addEventListener('click', () => { this.close(el) })
-    })
+    this.on('show', (e) => { this.show(e) })
+    this.on('close', (e) => { this.close(e) })
+    this.on('click', '[shipyard=alert-close]', (e) => { this.close(e) })
+
+    // Initiate the Alert Timer if it exists.
+    this.timer = this.child('.alert-timer')
+    if (this.timer) this.timer = new AlertTimer(this.timer, this)
+  }
+
+  options(options) {
+    this.on('afterClose', options.afterClose)
+  }
+
+  show (e) {
+    this.options(e.detail)
+    this.removeClass('alert-closed')
+    if (this.timer) this.timer.trigger('start')
   }
 
-  close (el) {
-    el.classList.add('alert-closed')
+  close (e) {
+    e.preventDefault()
+    this.addClass('alert-closed')
+    this.trigger('afterClose')
   }
 }

data/assets/javascripts/shipyard/core.es6

@@ -1,45 +1,90 @@
 class Shipyard {
-  constructor (el) {
-    this.el = typeof el === 'string' ? document.querySelectorAll(el) : [el]
-    this.html = document.documentElement
+  constructor (el, subClass) {
+    if (subClass) {
+      this.els = []
+      document.querySelectorAll(el).forEach((el) => {
+        this.els.push(new subClass(el))
+      })
+    } else if (typeof el === 'string') {
+      this.el = document.querySelector(el)
+    } else {
+      this.el = el
+    }
     return this
   }
 
-  on (events, callback) {
-    this.el.forEach((el) => {
+  on (events, selector, callback) {
+    if (typeof selector != 'string') callback = selector
+    let objects = (typeof selector === 'string') ? this.find(selector) : [this]
+
+    objects.forEach((obj) => {
       events.split(' ').forEach((eventName) => {
-        el.addEventListener(eventName, (e) => {
-          callback(e, el)
-        })
+        obj.el.addEventListener(eventName, callback)
       })
     })
     return this
   }
 
-  trigger (events) {
-    this.el.forEach((el) => {
-      events.split(' ').forEach((eventName) => {
-        el.dispatchEvent(new Event(eventName))
-      })
+  trigger () {
+    let events = arguments[0]
+    events.split(' ').forEach((eventName) => {
+      this.el.dispatchEvent(
+        new CustomEvent(eventName, { detail: arguments[1] })
+      )
     })
     return this
   }
 
-  css (el, value) {
-    return window.getComputedStyle(el).getPropertyValue(value)
+  find (selector) {
+    let els = []
+    this.el.querySelectorAll(selector).forEach((el) => {
+      els.push(new Shipyard(el))
+    })
+    return els
+  }
+
+  filter (selector) {
+    let els = this.els.filter(obj => obj.el == document.querySelector(selector))
+    return els[0]
+  }
+
+  child (selector) {
+    return this.el.querySelector(selector)
+  }
+
+  data (name) {
+    return this.el.dataset[name]
+  }
+
+  html (value) {
+    this.el.innerHTML = value
+    return this
+  }
+
+  css (property, value) {
+    if (value) {
+      this.el.style[property] = value
+    } else {
+      return window.getComputedStyle(this.el).getPropertyValue(property)
+    }
+  }
+
+  attr (name) {
+    return this.el.getAttribute(name)
   }
 
   addClass(className) {
-    this.el.forEach((el) => {
-      el.classList.add(className)
-    })
+    this.el.classList.add(className)
     return this
   }
 
   removeClass(className) {
-    this.el.forEach((el) => {
-      el.classList.remove(className)
-    })
+    this.el.classList.remove(className)
+    return this
+  }
+
+  toggleClass(className, condition) {
+    this.el.classList.toggle(className, condition)
     return this
   }
 }

data/assets/javascripts/shipyard/hamburger.es6

@@ -1,10 +1,11 @@
 class Hamburger extends Shipyard {
   constructor (el) {
     super(el)
-    this.on('click', () => { this.onClick() })
+    this.on('click', this.toggle)
   }
 
-  onClick () {
-    this.html.classList.toggle('hamburger-button-clicked')
+  toggle (e) {
+    e.preventDefault()
+    shipyard.toggleClass('hamburger-button-clicked')
   }
 }

data/assets/javascripts/shipyard/modal-trigger.es6

@@ -1,13 +1,7 @@
 class ModalTrigger extends Shipyard {
   constructor (el) {
     super(el)
-    this.on('click', () => { this.open() })
-    this.el.forEach((el) => {
-      this.modal = new Modal(`[modal=${el.getAttribute('modal-trigger')}]`)
-    })
-  }
-
-  open () {
-    this.modal.open()
+    this.modal = new Modal(`[modal=${el.getAttribute('modal-trigger')}]`)
+    this.on('click', (e) => { this.modal.trigger('open') })
   }
 }

data/assets/javascripts/shipyard/modal.es6

@@ -1,20 +1,17 @@
 class Modal extends Shipyard {
   constructor (el) {
     super(el)
+    this.on('open', () => { this.open() })
+    this.on('click', '[modal-close]', () => { this.close() })
   }
 
   open () {
     this.removeClass('display-none')
-    this.html.classList.add('modal-open')
-    this.el.forEach((el) => {
-      el.querySelectorAll('[modal-close]').forEach((btn) => {
-        btn.addEventListener('click', () => { this.close() })
-      })
-    })
+    shipyard.addClass('modal-open')
   }
 
   close () {
     this.addClass('display-none')
-    this.html.classList.remove('modal-open')
+    shipyard.removeClass('modal-open')
   }
 }

data/assets/javascripts/shipyard/scroll.es6

@@ -1,12 +1,12 @@
 class Scroll extends Shipyard {
   constructor (el) {
     super(el)
-    this.on('scroll resize', () => { this.scroll() }).trigger('scroll')
+    this.on('scroll resize', this.scroll).trigger('scroll')
   }
 
   scroll () {
-    this.html.classList.toggle('scrolling', window.pageYOffset > 0)
-    this.html.classList.toggle('scroll-top', window.pageYOffset <= 0)
-    this.html.classList.toggle('scroll-bottom', window.pageYOffset + window.innerHeight >= document.body.scrollHeight)
+    shipyard.toggleClass('scrolling', window.pageYOffset > 0)
+    shipyard.toggleClass('scroll-top', window.pageYOffset <= 0)
+    shipyard.toggleClass('scroll-bottom', window.pageYOffset + window.innerHeight >= document.body.scrollHeight)
   }
 }

data/assets/stylesheets/shipyard/core/_animations.sass

@@ -15,3 +15,9 @@
     transform: translateX(-7px) translateY(0)
   87.5%
     transform: translateX(3px) translateY(0)
+
+@keyframes slide-in-from-left
+  from
+    transform: translatex(-100%)
+  to
+    transform: translatex(0%)

data/lib/shipyard-framework/jekyll/tags/alert_tag.rb

@@ -5,17 +5,21 @@ module Shipyard
     class Alert < Liquid::Block
       include Shipyard::AlertHelper
 
-      def initialize(tag_name, type, options)
+      def initialize(tag_name, params, options)
         super
-        @type = type.strip.tr(':','').to_sym unless type.blank?
+        @params = params.strip.split(',').map(&:strip)
+        @args = []
+        @params.each do |param|
+          if param.start_with?(':')
+            @args << param.tr(':','').to_sym
+          else
+            @args << eval("{#{param}}")
+          end
+        end
       end
 
       def render(context)
-        if @type
-          flash_alert @type, super
-        else
-          flash_alert super
-        end
+        flash_alert(*@args, super)
       end
     end
   end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.81'
+  VERSION = '0.5.82'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.81)
+    shipyard-framework (0.5.82)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 

data/styleguide/_assets/js/application.es6

@@ -1,2 +1,6 @@
 //= require shipyard
+//= require views/components/alert-trigger
 //= require views/utilities/colors
+
+shipyard.alertTriggers = new Shipyard('[alert-trigger]', AlertTrigger)
+shipyard.colors = new Shipyard('[shade-color]', ShadeColor)

data/styleguide/_assets/js/views/components/alert-trigger.es6

@@ -0,0 +1,20 @@
+class AlertTrigger extends Shipyard {
+  constructor (el) {
+    super(el)
+    this.alert = shipyard.alerts.filter(this.attr('alert-trigger'))
+    this.on('click', (e) => { this.click(e) })
+  }
+
+  click (e) {
+    e.preventDefault()
+    this.addClass('btn-loading')
+    this.el.blur()
+    this.alert.trigger('show', {
+      afterClose: () => { this.reset() }
+    })
+  }
+
+  reset () {
+    this.removeClass('btn-loading')
+  }
+}

data/styleguide/_assets/js/views/utilities/colors.es6

@@ -1,12 +1,7 @@
-class ShadeList extends Shipyard {
+class ShadeColor extends Shipyard {
   constructor (el) {
     super(el)
-
-    this.el.forEach((list) => {
-      list.querySelectorAll('[shade-color]').forEach((shade) => {
-        shade.innerHTML = this.rgbToHex(this.css(shade, 'background-color'))
-      })
-    })
+    this.html(this.rgbToHex(this.css('background-color')))
   }
 
   rgbToHex (rgb) {
@@ -17,5 +12,3 @@ class ShadeList extends Shipyard {
     return `#${hex}`;
   }
 }
-
-new ShadeList('[shade-list]')

data/styleguide/components/alerts.md

@@ -7,6 +7,31 @@ description: Alerts should be used to grab a user's attention before proceeding
 
 ---
 
+### Timed Alerts
+Useful when you want to display an alert for a predetermined amount of time.
+{: .section-description }
+
+{% alert :success, :dismissible, id: 'timed-alert-5s', class: 'alert-closed' %}
+  Pack your bags! You'll be on the next flight to Hawaii.
+  <div class="alert-timer alert-timer-on" data-duration="5"></div>
+{% endalert %}
+
+{% alert :success, :dismissible, id: 'timed-alert-10s', class: 'alert-closed' %}
+  Pack your bags! You'll be on the next flight to Tahiti.
+  <div class="alert-timer alert-timer-on" data-duration="10"></div>
+{% endalert %}
+
+{% alert :success, :dismissible, id: 'timed-alert-15s', class: 'alert-closed' %}
+  Pack your bags! You'll be on the next flight to Corsica.
+  <div class="alert-timer alert-timer-on" data-duration="15"></div>
+{% endalert %}
+
+<button class="btn btn-primary margin-right-xs" alert-trigger="#timed-alert-5s">5 Seconds</button>
+<button class="btn btn-primary margin-right-xs" alert-trigger="#timed-alert-10s">10 Seconds</button>
+<button class="btn btn-primary" alert-trigger="#timed-alert-15s">15 Seconds</button>
+
+---
+
 ### Dismissible
 Used to display notes, tips, and other non-critical information.
 {: .section-description }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.81
+  version: 0.5.82
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-06 00:00:00.000000000 Z
+date: 2017-12-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -202,7 +202,9 @@ files:
 - assets/images/arrows/down.svg
 - assets/images/checkmark.svg
 - assets/javascripts/shipyard.es6
+- assets/javascripts/shipyard/accordion-trigger.es6
 - assets/javascripts/shipyard/accordion.es6
+- assets/javascripts/shipyard/alert-timer.es6
 - assets/javascripts/shipyard/alert.es6
 - assets/javascripts/shipyard/core.es6
 - assets/javascripts/shipyard/hamburger.es6
@@ -318,6 +320,7 @@ files:
 - styleguide/_assets/img/arrows/down.svg
 - styleguide/_assets/img/checkmark.svg
 - styleguide/_assets/js/application.es6
+- styleguide/_assets/js/views/components/alert-trigger.es6
 - styleguide/_assets/js/views/utilities/colors.es6
 - styleguide/_config.yml
 - styleguide/_data/breakpoints.yml