megatron 0.1.26 → 0.1.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d49ef672f2a5da108bc4176b923c941859e1a84e
-  data.tar.gz: 89439c3591c4386a03a4e2bda43bd49b3c7d8365
+  metadata.gz: 2cd450213b9cd53cbdffd9b8b7c0b153f4fecab3
+  data.tar.gz: 5d9d2df16b081a5305690561d8094d8961f78a5f
 SHA512:
-  metadata.gz: 7f3917fe2d5fc87d653d3f8a87370568dfee854c2dca5cf77607b29092b93a97ff12e782139513922a0a5c895d9ec694d9196ed8aae7ff1ec41acd4582a7ff3f
-  data.tar.gz: a0d16880727aac310b0d5ab14e37b934efc05300aa6000816be412788d93b769949aea7fb1fc089f9a0b3a7343fe7457ca5c5b72243c98ea38b1cd7732c34c07
+  metadata.gz: 86485b8fbcdbd10e16025c3c39621971a0d8ac2b42a6b43c36aaf120a68ed7a9e4d53748e6065e50a976ac599dc0bd5635580bc447156bff8def0cdcdc666f78
+  data.tar.gz: a1da662b73b82b8daf49c80b0e84501f27d2d49b9321cf4ac1364137d8f0eaf807a309127c2e8d54e11fdfd16dc757e0cff7777e35fc598680a8fcccc56c89b5

data/Rakefile

@@ -14,58 +14,11 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
-load 'rails/tasks/statistics.rake'
-
 Bundler::GemHelper.install_tasks
 
-desc "Pick a random user as the winner"
-task :sass_watch do
-  require 'listen'
-  listen
-end
-
-def listen
-  listener = Listen.to('app/assets/stylesheets/megatron/', only: /\.scss$/) do |modified, added, removed|
-    output_paths("Changes detected to", modified)
-    output_paths("Added", added)
-    output_paths("Removed", removed)
-
-    build
-  end
-
-  build
-
-  listener.start # not blocking
-  sleep
-end
-
-def output_paths(prefix, paths)
-  unless paths.empty?
-    paths.map! { |p| localize_path(p) }
-    puts "#{prefix}: #{paths.join("\n")}"
-  end
-end
-
-def localize_path(path)
-  path.sub(/#{Dir.pwd}\//, '')
-end
-
-def destination
-  "public/assets/megatron/megatron-#{version}.css"
-end
-
-def build
-  system "sass app/assets/stylesheets/megatron/megatron.scss:#{destination}"
-  system "./node_modules/postcss-cli/bin/postcss --use autoprefixer #{destination} -o #{destination}"
-  puts "Built: #{destination}"
-end
-
-def version
-  Gem.loaded_specs["megatron"].version
-end
-
 namespace :megatron do
   
+  require 'megatron'
   require 's3'
 
   task :upload do
@@ -104,4 +57,58 @@ namespace :megatron do
 
   end
 
+  namespace :css do
+
+    task :watch do
+
+      require 'listen'
+
+      listener = Listen.to('app/assets/stylesheets/megatron/', only: /\.scss$/) do |modified, added, removed|
+        build_css
+      end
+
+      build_css
+
+      puts "Initial CSS build, done. Listening for changes..."
+
+      listener.start # not blocking
+      sleep
+
+    end
+
+  end
+
+  namespace :svg do
+
+    task :watch do
+      require 'listen'
+      require 'esvg'
+
+      listener = Listen.to('app/assets/esvg/megatron/', only: /\.svg$/) do |modified, added, removed|
+        build_svg
+      end
+
+      build_svg
+
+      puts "Initial SVG build, done. Listening for changes..."
+
+      listener.start # not blocking
+      sleep
+
+    end
+
+  end
+
+end
+
+def build_css
+  destination = "public/assets/megatron/megatron-#{Megatron::VERSION}.css"
+  system "sass app/assets/stylesheets/megatron/megatron.scss:#{destination}"
+  system "./node_modules/postcss-cli/bin/postcss --use autoprefixer #{destination} -o #{destination}"
+  puts "Built: #{destination}"
+end
+
+def build_svg
+  puts "building svg..."
+  Esvg::SVG.new(path: 'app/assets/esvg/megatron', output_path: 'app/assets/javascripts/megatron').write
 end

data/app/assets/javascripts/megatron/form.js

@@ -10,7 +10,7 @@ var MegatronForm = module.exports = RemoteForm.extend({
     error: 'Something went wrong.'
   },
 
-  messageFor: function(type){
+  messageFor: function formMessageFor(type){
     if (this.el.dataset[type])
       return this.el.dataset[type]
     else {
@@ -22,15 +22,15 @@ var MegatronForm = module.exports = RemoteForm.extend({
     }
   },
 
-  beforeSend: function(req){
+  beforeSend: function formBeforeSend(req){
     notify.progress(this.messageFor('beforeSend'))
   },
   
-  success: function(body, status, xhr){
+  success: function formSuccessHandler(body, status, xhr){
     notify.success(this.messageFor('success'))
   },
 
-  error: function(xhr, error){
+  error: function formErrorHandler(xhr, error){
     notify.error(this.messageFor('error'))
   }
 })

data/app/assets/javascripts/megatron/link.js

@@ -9,7 +9,7 @@ var DEFAULT_CONTINUE_BUTTON = 'Yes'
 
 function Link(){}
 
-Link.click = function(event){
+Link.click = function linkClick(event){
   event.preventDefault()
   var el = event.currentTarget
   var form = null
@@ -42,7 +42,7 @@ Link.click = function(event){
   }
 }
 
-Link.buildForm = function(el){
+Link.buildForm = function buildForm(el){
   var method = el.dataset.method || 'post'
   var csrfToken = document.querySelector('meta[name=csrf-token]')
   var csrfParam = document.querySelector('meta[name=csrf-param]')

data/app/assets/javascripts/megatron/utils/auto-navigate.js

@@ -4,11 +4,11 @@ var classie = require('classie')
 require('compose-tap-event')
 
 var AutoNavigate = {
-  listen: function(){
+  listen: function autoNavigateListen(){
     bean.on(document, "click", ".auto-navigate", AutoNavigate.trigger)
   },
 
-  trigger: function(event) {
+  trigger: function autoNavigateTrigger(event) {
     var target = event.target
     if (target.tagName.toLowerCase() != 'a') {
       var link = event.currentTarget.querySelector('a.navigate')

data/app/assets/javascripts/megatron/utils/form-notify.js

@@ -2,7 +2,7 @@ var bean = require('bean')
 var notify = require('notify')
 
 module.exports = {
-  notify: function(el, type){
+  notify: function formNotify(el, type){
     if(type == 'success')
       notify.success(this.getMessage(el, 'success'))
     else if(type == 'error')
@@ -11,7 +11,7 @@ module.exports = {
       notify.progress(this.getMessage(el, 'beforeSend'))
   },
 
-  getMessage: function(el, type){
+  getMessage: function formGetMessage(el, type){
     if (el.dataset[type])
       return el.dataset[type]
     else {
@@ -27,7 +27,7 @@ module.exports = {
     }
   },
 
-  listen: function() {
+  listen: function formListen() {
     bean.on(document.querySelector('body'), 'submit', 'form', function(event){
       if(!event.target.dataset['remote']) {
         event.preventDefault()

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

@@ -2,15 +2,15 @@ var request = require('superagent')
 var bean = require('bean')
 
 var Messages = {
-  el: function(){
+  el: function messagesEl(){
     return document.querySelector('.pop-message')
   },
 
-  fetch: function(){
+  fetch: function messagesFetch(){
     request.get('/messages.json').end(this.end.bind(this));
   },
 
-  dismiss: function(event){
+  dismiss: function messagesDismiss(event){
     self = this
     event.preventDefault()
     event.stopPropagation()
@@ -27,7 +27,7 @@ var Messages = {
 
   },
 
-  end: function(error, response) {
+  end: function messagesEnd(error, response) {
     if (error || response.serverError) {
       return
     } else {
@@ -41,7 +41,7 @@ var Messages = {
     }
   },
 
-  messageHTML: function(options){
+  messageHTML: function messagesMessageHTML(options){
     options.style = options.style || ''
     var classnames = "message-content "
     if (options.style) 
@@ -65,11 +65,11 @@ var Messages = {
     return html
   },
 
-  saveMessage: function(content){
+  saveMessage: function messagesSaveMessage(content){
     window.Megatron.accountMessage = content
   },
 
-  showMessage: function(content) {
+  showMessage: function messagesShowMessage(content) {
     if(this.el()) {
       this.el().innerHTML = content
     } else {
@@ -82,7 +82,7 @@ var Messages = {
     }
   },
 
-  load: function(){
+  load: function messagesLoad(){
     if(window.location.hostname.match(/app\.compose\.(io|dev)/)){
       var message = window.Megatron.accountMessage
       if(!message) {

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

@@ -7,7 +7,7 @@
 // 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) {
+var dateToHtml = function dateToHtml(dateString, zone) {
 
   if(isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())) {
     return false
@@ -48,7 +48,7 @@ var dateToHtml = function (dateString, zone) {
   return str
 }
 
-var pad = function(num, pad){
+var pad = function datePad(num, pad){
   pad = pad || 2
   while(String(num).length < pad) {
     num = '0' + num

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

@@ -8,7 +8,7 @@ require('compose-dataset-shim')
 var TimeSwitch = {
 
   // Attach listeners, setup HTML templates
-  setup: function() {
+  setup: function timeSwitchSetup() {
     if(!timeago.browserSupport()) return false
     if(!this.listening)   this.listen()
 
@@ -25,13 +25,13 @@ var TimeSwitch = {
   },
 
   // Attach listeners to toggle time zones whine clicked
-  listen: function() {
+  listen: function timeSwitchListen() {
     bean.on(document, "click", ".time-switch", TimeSwitch.toggle)
     this.listening = true
   },
 
   // Switch between UTC and local time
-  toggle: function(event) {
+  toggle: function timeSwitchToggle(event) {
     var timeEls = document.querySelectorAll('.time-switch')
 
     Array.prototype.forEach.call(timeEls, function(el) {
@@ -45,7 +45,7 @@ var TimeSwitch = {
   //  - date (a date object)
   //  - timeagoPosition, String, either 'before' or 'after'
   //
-  template: function(date, timeagoPosition, timeagoStyle) {
+  template: function timeSwitchTemplate(date, timeagoPosition, timeagoStyle) {
     var utc = dateToHtml(date, 'UTC')
     var local = dateToHtml(date)
     var t = '';
@@ -67,7 +67,7 @@ var TimeSwitch = {
   },
 
   // Converts a date to relative time string wrapped in a span
-  timeagoTemplate: function(date, position, style) {
+  timeagoTemplate: function timeSwitchTimeagoTemplate(date, position, style) {
     var relative = timeago.parse(date, style)
     var dash = "<span class='dash'>&nbsp;-&nbsp;</span>"
     var html = ''

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

@@ -3,7 +3,7 @@
 
 let Timeago = {
   // setup HTML templates
-  setup: function() {
+  setup: function timeagoSetup() {
 
     var timeEls = document.querySelectorAll('.timeago[datetime]')
 
@@ -15,11 +15,11 @@ let Timeago = {
   },
 
   // If a browser can't handle dates, bail.
-  browserSupport: function() {
+  browserSupport: function timeagoBrowserSupport() {
     return !isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())
   },
 
-  parse: function(time, style) {
+  parse: function timeagoParse(time, style) {
 
     style = style || "normal"
     if (typeof(time) == 'string') {

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

@@ -6,19 +6,18 @@ require('compose-tap-event')
 require('compose-dataset-shim')
 
 var Toggler = {
-  listen: function(){
-    bean.on(document, "click", "[data-toggle], [data-show], [data-hide]", Toggler.trigger)
+  listen: function togglerListen(){
+    bean.on(document, "click", "[data-toggle], [data-show], [data-hide], [data-toggle-class], [data-add-class], [data-remove-class]", Toggler.trigger)
     bean.on(document, "change", ".select-toggler", Toggler.trigger)
   },
 
-  refresh: function(){
+  refresh: function togglerRefresh(){
     Toggler.toggleRadios()
     Toggler.toggleCheckboxes()
     Toggler.setupSelects()
   },
 
-  trigger: function(event) {
-
+  trigger: function togglerTrigger(event) {
     var target = event.currentTarget
 
     if (target.tagName.toLowerCase() == 'a' && target.getAttribute('href') == "#") {
@@ -36,16 +35,51 @@ var Toggler = {
       Toggler.dispatch(target, 'hide')
       Toggler.dispatch(target, 'toggle')
       Toggler.dispatch(target, 'show')
+      Toggler.dispatch(target, 'addClass')
+      Toggler.dispatch(target, 'removeClass')
+      Toggler.dispatch(target, 'toggleClass')
     }
   },
 
-  dispatch: function(el, type, force) {
+  dispatch: function togglerDispatch(el, type, force) {
     if (el.dataset[type]){
-      Toggler.setState(el.dataset[type], type)
+      if (type.match(/class/i)){
+        Toggler.setClass(el, type)
+      } else {
+        Toggler.setState(el.dataset[type], type)
+      }
+    }
+  },
+
+  // Add, remove, or toggle classnames, triggered by elements with:
+  //  data-hide-class, data-show-class, and data-toggle-class values
+  //   
+  //  Data value examples:
+  //   - "classname" - add/remove/toggle classname on current element
+  //   - "foo bar"   - multiple classnames, separated by spaces (like html class property)
+  //   - "foo bar; selector" - change classnames on elements matched by selector
+  //   - "foo bar; selector, selector" - match multiple selectors
+  setClass: function (el, action){
+    // Get selector and classnames, format: "classname classname; selector,selector"
+    var settings = el.dataset[action].split(';')
+    var classnames = settings[0].trim()
+
+    // If no slectors are present, use the current el for classnames
+    var matches = document.querySelectorAll(settings[1])
+    if (matches.length == 0) matches = [el]
+
+    if (typeof(action) == 'boolean') {
+      action = (action ? 'addClass' : 'removeClass')
     }
+
+    Array.prototype.forEach.call(matches, function(match){
+      Array.prototype.forEach.call(classnames.split(' '), function(classname) {
+        classie[action](match, classname)
+      })
+    })
   },
 
-  setState: function(selectors, state) {
+  setState: function toggletSetState(selectors, state) {
     var matches = document.querySelectorAll(selectors)
     if (typeof(state) == 'boolean') {
       state = (state ? 'show' : 'hide')
@@ -56,7 +90,7 @@ var Toggler = {
     })
   },
 
-  toggle: function(el) {
+  toggle: function togglerToggle(el) {
 
     if (el.offsetParent === null) {
       Toggler.show(el)
@@ -66,7 +100,7 @@ var Toggler = {
 
   },
 
-  show: function(el) {
+  show: function togglerShow(el) {
     classie.remove(el, 'hidden')
     classie.add(el, 'visible')
     var focusEl = el.querySelector('[data-focus]')
@@ -76,12 +110,12 @@ var Toggler = {
     }
   },
 
-  hide: function(el) {
+  hide: function togglerHide(el) {
     classie.remove(el, 'visible')
     classie.add(el, 'hidden')
   },
 
-  toggleRadios: function(radios) {
+  toggleRadios: function togglerToggleRadio(radios) {
     var radios = radios || 'input[type=radio][data-show]'
 
     Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {
@@ -89,19 +123,19 @@ var Toggler = {
     })
   },
 
-  toggleCheckbox: function(checkbox) {
+  toggleCheckbox: function togglerToggeCheckbox(checkbox) {
     Toggler.setState(checkbox.dataset.hide, !checkbox.checked)
     Toggler.setState(checkbox.dataset.toggle, 'toggle')
     Toggler.setState(checkbox.dataset.show, checkbox.checked)
   },
 
-  toggleSelect: function(select) {
+  toggleSelect: function togglerToggleSelect(select) {
     var option = select.selectedOptions[0]
     Toggler.dispatch(option, 'hide')
     Toggler.dispatch(option, 'show')
   },
 
-  toggleCheckboxes: function() {
+  toggleCheckboxes: function togglerToggleCheckboxes() {
     var checkboxes = 'input[type=checkbox][data-toggle]'
     Array.prototype.forEach.call(document.querySelectorAll(checkboxes), Toggler.toggleCheckbox)
   },
@@ -109,7 +143,7 @@ var Toggler = {
   // 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){
+  setupSelects: function togglerSetupSelects(select){
     Array.prototype.forEach.call(document.querySelectorAll('option[data-show]'), function(option){
       if (!option.dataset.hide) {
 
@@ -133,7 +167,7 @@ var Toggler = {
 
   // Find parent <select> for an option (accounts for option groups)
   //
-  getSelectFromOption: function(el) {
+  getSelectFromOption: function togglerGetSelectFromOption(el) {
     var p = el.parentElement
 
     if (p.tagName.toLowerCase() == 'select') {
@@ -145,13 +179,13 @@ var Toggler = {
 
   // Return an array of all data-show values from elements
   //
-  showAttributes: function(elements) {
+  showAttributes: function togglerShowAttributes(elements) {
     return Array.prototype.map.call(elements, function(el) { 
       return el.dataset.show
     })
   },
 
-  toggleSelects: function(selects) {
+  toggleSelects: function togglerToggleSelects(selects) {
     var selects = selects || 'option[data-show]'
 
     Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {