megatron 0.0.3 → 0.0.4

data/app/assets/javascripts/megatron/utils/time/date-to-html.js

@@ -0,0 +1,59 @@
+// Converts a simple date string into Date + Time + Timezone wrapped in HTML
+//
+// Input:
+// - String, compatible with JS date parsing e.g. "2014-10-20" or "2014-05-21 10:63"
+// - String, timezone: "UTC", "CST", etc.
+//
+// Returns: HTML which is "2014-01-28 18:00:00 CST", separated and wrapped with spans
+// with classnames: date, time and timezone
+//
+var dateToHtml = function (dateString, zone) {
+
+  if(isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())) {
+    return false
+  }
+  
+  var date = new Date(dateString)
+  var zone = zone || date.getTimezoneOffset()/-60
+
+  if(zone === 'UTC') {
+    var y  = date.getUTCFullYear()
+    var mo = pad(date.getUTCMonth() + 1)
+    var d  = pad(date.getUTCDate())
+    var h  = pad(date.getUTCHours())
+    var m  = pad(date.getUTCMinutes())
+    var s  = pad(date.getUTCSeconds())
+  } else {
+    var y  = date.getFullYear()
+    var mo = pad(date.getMonth() + 1)
+    var d  = pad(date.getDate())
+    var h  = pad(date.getHours())
+    var m  = pad(date.getMinutes())
+    var s  = pad(date.getSeconds())
+    
+    var tz = String(date).match(/\((.+)\)$/)
+
+    if(tz) {
+      var zone = tz[1]
+    } else {
+      var zone = "GMT " 
+          zone += ((zone > 0) ? '+' : '')
+          zone += " "+ pad(zone*100, 4)
+    }
+  }
+
+  str  = '<span class="date">'+y+'-'+mo+'-'+d+'</span>'
+  str += ' <span class="time">'+h+':'+m+':'+s+'</span>'
+  str += ' <span class="timezone">'+zone+'</span>'
+  return str
+}
+
+var pad = function(num, pad){
+  pad = pad || 2
+  while(String(num).length < pad) {
+    num = '0' + num
+  }
+  return num
+}
+
+module.exports = dateToHtml

data/app/assets/javascripts/megatron/utils/time/time-switch.js

@@ -0,0 +1,87 @@
+var timeago = require('./timeago')
+var dateToHtml = require('./date-to-html')
+var classie = require('classie')
+var bean = require('bean')
+
+require('compose-dataset-shim')
+
+var TimeSwitch = {
+
+  // Attach listeners, setup HTML templates
+  setup: function() {
+    if(!timeago.browserSupport()) return false
+    if(!this.listening)   this.listen()
+
+    var timeEls = document.querySelectorAll('.time-switch[datetime]')
+
+    Array.prototype.forEach.call(timeEls, function(el) {
+      var datetime = el.getAttribute('datetime')
+      var timeagoPosition = el.dataset.timeago
+      var timeagoStyle = el.dataset.timeagoStyle
+      el.innerHTML = TimeSwitch.template(datetime, timeagoPosition, timeagoStyle)
+      classie.add(el, 'time-switch')
+      el.setAttribute('title', 'toggle timezones')
+    })
+  },
+
+  // Attach listeners to toggle time zones whine clicked
+  listen: function() {
+    bean.on(document, "click", ".time-switch", TimeSwitch.toggle)
+    this.listening = true
+  },
+
+  // Switch between UTC and local time
+  toggle: function(event) {
+    var timeEls = document.querySelectorAll('.time-switch')
+
+    Array.prototype.forEach.call(timeEls, function(el) {
+      classie.toggle(el, 'alt-zone')
+    })
+  },
+
+  // Supply HTML for UTC and local datetime
+  //
+  // Input:
+  //  - date (a date object)
+  //  - timeagoPosition, String, either 'before' or 'after'
+  //
+  template: function(date, timeagoPosition, timeagoStyle) {
+    var utc = dateToHtml(date, 'UTC')
+    var local = dateToHtml(date)
+    var t = '';
+
+    if (timeagoPosition === 'before') {
+      t += this.timeagoTemplate(date, timeagoPosition, timeagoStyle)
+    }
+
+    t += "<span class='utc'><span class='clock_line_icon'></span> "
+    t += utc + "</span>"
+    t += "<span class='local'><span class='clock_fill_icon'></span> "
+    t += local + "</span>"
+
+    if (timeagoPosition === 'after') {
+      t += this.timeagoTemplate(date, timeagoPosition, timeagoStyle)
+    }
+
+    return t
+  },
+
+  // Converts a date to relative time string wrapped in a span
+  timeagoTemplate: function(date, position, style) {
+    var relative = timeago.parse(date, style)
+    var dash = "<span class='dash'>&nbsp;-&nbsp;</span>"
+    var html = ''
+
+    if(relative) {
+      if (position === 'after') html += dash
+      html += "<span class='timeago'>"+ relative +"</span> "
+      return html
+    } else {
+      return ''
+    }
+  }
+
+}
+
+module.exports = TimeSwitch
+

data/app/assets/javascripts/megatron/utils/time/timeago.js

@@ -0,0 +1,95 @@
+// Timeago by Brandon Mathis, based on JavaScript Pretty Date Copyright (c) 2011 John Resig
+// Returns relative time
+
+let Timeago = {
+  // setup HTML templates
+  setup: function() {
+
+    var timeEls = document.querySelectorAll('.timeago[datetime]')
+
+    Array.prototype.forEach.call(timeEls, function(el) {
+      var datetime = el.attributes.datetime.value
+      var style = el.dataset.timeagoStyle
+      el.innerHTML = Timeago.parse(datetime, style)
+    })
+  },
+
+  // If a browser can't handle dates, bail.
+  browserSupport: function() {
+    return !isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())
+  },
+
+  parse: function(time, style) {
+
+    style = style || "normal"
+    if (typeof(time) == 'string') {
+      time = new Date(time)
+    }
+
+    if (style === 'short')
+    var say = {
+      just_now:    "now",
+      minute_ago:  "1m",
+      minutes_ago: "m",
+      hour_ago:    "1h",
+      hours_ago:   "h",
+      yesterday:   "1d",
+      days_ago:    "d",
+      last_week:   "1w",
+      weeks_ago:   "w"
+    }
+
+    if (style === 'normal')
+    var say = {
+      just_now:    "just now",
+      minute_ago:  "1 minute",
+      minutes_ago: " minutes",
+      hour_ago:    "1 hour",
+      hours_ago:   " hours",
+      yesterday:   "1 day",
+      days_ago:    " days",
+      last_week:   "1 week",
+      weeks_ago:   " weeks"
+    }
+
+    if (style === 'long')
+    var say = {
+      just_now:    "just now",
+      minute_ago:  "1 minute ago",
+      minutes_ago: " minutes ago",
+      hour_ago:    "1 hour ago",
+      hours_ago:   " hours ago",
+      yesterday:   "1 day ago",
+      days_ago:    " days ago",
+      last_week:   "1 week ago",
+      weeks_ago:   " weeks ago"
+    }
+
+    var secs   = ((new Date().getTime() - new Date(time).getTime()) / 1000)
+    var mins   = Math.floor(secs / 60)
+    var hours  = Math.floor(secs / 3600)
+    var days   = Math.floor(secs / 86400)
+    var weeks  = Math.floor(days / 7)
+    var months = Math.floor(days / 30)
+
+    if(isNaN(secs) || days < 0) {
+      return false
+    }
+
+    if(days === 0) {
+      if     (secs < 60)   return say.just_now
+      else if(secs < 120)  return say.minute_ago 
+      else if(secs < 3600) return mins + say.minutes_ago 
+      else if(secs < 7200) return say.hour_ago
+      else                 return hours + say.hours_ago
+    } else {
+      if(days === 1)       return say.yesterday
+      else if(days < 7)    return days + say.days_ago
+      else if(weeks === 1) return say.last_week
+      else                 return weeks + say.weeks_ago
+    }
+  }
+}
+
+module.exports = Timeago
+

data/app/assets/javascripts/megatron/utils/toggler.js

@@ -0,0 +1,163 @@
+var bean = require('bean')
+var classie = require('classie')
+var _ = require('lodash')
+
+require('compose-tap-event')
+require('compose-dataset-shim')
+
+var Toggler = {
+  listen: function(){
+    bean.on(document, "click", "[data-toggle], [data-show], [data-hide]", Toggler.trigger)
+    bean.on(document, "change", ".select-toggler", Toggler.trigger)
+  },
+
+  refresh: function(){
+    Toggler.toggleRadios()
+    Toggler.toggleCheckboxes()
+    Toggler.setupSelects()
+  },
+
+  trigger: function(event) {
+
+    var target = event.currentTarget
+
+    if (target.tagName.toLowerCase() == 'a' && target.getAttribute('href') == "#") {
+      event.preventDefault()
+      event.stop()
+    } 
+
+    if (target.type == 'radio') {
+      Toggler.toggleRadios('input[name="'+ target.name +'"]')
+    } else if (target.type == 'checkbox') {
+      Toggler.toggleCheckbox(target)
+    } else if (target.tagName.toLowerCase() == 'select') {
+      Toggler.toggleSelect(target)
+    } else {
+      Toggler.dispatch(target, 'hide')
+      Toggler.dispatch(target, 'toggle')
+      Toggler.dispatch(target, 'show')
+    }
+  },
+
+  dispatch: function(el, type, force) {
+    if (el.dataset[type]){
+      Toggler.setState(el.dataset[type], type)
+    }
+  },
+
+  setState: function(selectors, state) {
+    var matches = document.querySelectorAll(selectors)
+    if (typeof(state) == 'boolean') {
+      state = (state ? 'show' : 'hide')
+    }
+
+    Array.prototype.forEach.call(matches, function(match){
+      Toggler[state](match)
+    })
+  },
+
+  toggle: function(el) {
+
+    if (el.offsetParent === null) {
+      Toggler.show(el)
+    } else {
+      Toggler.hide(el)
+    }
+
+  },
+
+  show: function(el) {
+    classie.remove(el, 'hidden')
+    classie.add(el, 'visible')
+    var focusEl = el.querySelector('[data-focus]')
+
+    if (focusEl) {
+      focusEl.focus()
+    }
+  },
+
+  hide: function(el) {
+    classie.remove(el, 'visible')
+    classie.add(el, 'hidden')
+  },
+
+  toggleRadios: function(radios) {
+    var radios = radios || 'input[type=radio][data-show]'
+
+    Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {
+      Toggler.setState(radio.dataset.show, radio.checked)
+    })
+  },
+
+  toggleCheckbox: function(checkbox) {
+    Toggler.setState(checkbox.dataset.hide, !checkbox.checked)
+    Toggler.setState(checkbox.dataset.toggle, 'toggle')
+    Toggler.setState(checkbox.dataset.show, checkbox.checked)
+  },
+
+  toggleSelect: function(select) {
+    var option = select.selectedOptions[0]
+    Toggler.dispatch(option, 'hide')
+    Toggler.dispatch(option, 'show')
+  },
+
+  toggleCheckboxes: function() {
+    var checkboxes = 'input[type=checkbox][data-toggle]'
+    Array.prototype.forEach.call(document.querySelectorAll(checkboxes), Toggler.toggleCheckbox)
+  },
+
+  // Add data-hide to each <option> containing the selectors from other
+  // option's data-show. This makes the toggling of elements exclusive.
+  //
+  setupSelects: function(select){
+    Array.prototype.forEach.call(document.querySelectorAll('option[data-show]'), function(option){
+      if (!option.dataset.hide) {
+
+        var select = Toggler.getSelectFromOption(option)
+        classie.add(select, 'select-toggler')
+        var options = select.querySelectorAll('option')
+        var selectors = Toggler.showAttributes(options)
+
+        Array.prototype.forEach.call(options, function(o) {
+          option.dataset.hide = _.compact(selectors.filter(function(selector){
+            return option.dataset.show != selector && selector != ""
+          })).join(',')
+        })
+
+        // Ensure that currently selected option is toggled properly
+        //
+        Toggler.toggleSelect(select)
+      }
+    })
+  },
+
+  // Find parent <select> for an option (accounts for option groups)
+  //
+  getSelectFromOption: function(el) {
+    var p = el.parentElement
+
+    if (p.tagName.toLowerCase() == 'select') {
+      return p
+    } else {
+      return Toggler.getSelectFromOption(p)
+    }
+  },
+
+  // Return an array of all data-show values from elements
+  //
+  showAttributes: function(elements) {
+    return Array.prototype.map.call(elements, function(el) { 
+      return el.dataset.show
+    })
+  },
+
+  toggleSelects: function(selects) {
+    var selects = selects || 'option[data-show]'
+
+    Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {
+      Toggler.setState(radio.dataset.show, radio.checked)
+    })
+  }
+}
+
+module.exports = Toggler

data/app/assets/stylesheets/_example.scss

@@ -0,0 +1,76 @@
+.demo {
+  margin: 1.6em 0;
+}
+.demo-header {
+  overflow: hidden;
+  margin: 1.2em 0;
+}
+
+.demo-heading {
+  display: inline-block;
+  font-weight: normal;
+  vertical-align: bottom;
+  float: left;
+  margin: 0;
+}
+
+.demo-source-toggle {
+  float: right;
+  vertical-align: bottom;
+}
+
+.demo-box {
+  list-style: none;
+  position: relative;
+  margin-bottom: $block-margin;
+  border: 1px solid $page-border;
+  background: #fafafa;
+  margin-top: $block-margin + 2em;
+  
+  &-row {
+    padding: 10px;
+    border-bottom: 1px solid #e5e5e5;
+    position: relative;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &.padded {
+    @include pad_box;
+    pre {
+      padding: 0;
+    }
+  }
+
+  .heading-anchor:after {
+    top: -.8em;
+    left: -.8em;
+  }
+
+  .demo-header {
+    position: absolute;
+    top: -30px;
+    left: -1px;
+    right: -1px;
+    padding: 0 1em;
+    margin: 0;
+    border: 1px solid #e5e5e5;
+    background: #f5f5f5;
+    font-family: Helvetica, Arial, sans-serif;
+    line-height: 30px;
+    font-size: 13px;
+    z-index: 2;
+    color: $light-text-color;
+  }
+
+  .demo-heading {
+    font-size: 1em;
+  }
+
+  pre {
+    border: none;
+    margin: 0;
+  }
+}