tao_on_rails 0.2.0 → 0.3.0

data/lib/assets/javascripts/polyfills/htmlelement-instanceof.js

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+(function() {
+  'use strict';
+
+  // patch all built-in subclasses of HTMLElement to inherit from the new HTMLElement
+  // See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
+
+  /** @const */
+  var htmlElementSubclasses = [
+  	'Button',
+  	'Canvas',
+  	'Data',
+  	'Head',
+  	'Mod',
+  	'TableCell',
+  	'TableCol',
+    'Anchor',
+    'Area',
+    'Base',
+    'Body',
+    'BR',
+    'DataList',
+    'Details',
+    'Dialog',
+    'Div',
+    'DList',
+    'Embed',
+    'FieldSet',
+    'Form',
+    'Heading',
+    'HR',
+    'Html',
+    'IFrame',
+    'Image',
+    'Input',
+    'Keygen',
+    'Label',
+    'Legend',
+    'LI',
+    'Link',
+    'Map',
+    'Media',
+    'Menu',
+    'MenuItem',
+    'Meta',
+    'Meter',
+    'Object',
+    'OList',
+    'OptGroup',
+    'Option',
+    'Output',
+    'Paragraph',
+    'Param',
+    'Picture',
+    'Pre',
+    'Progress',
+    'Quote',
+    'Script',
+    'Select',
+    'Slot',
+    'Source',
+    'Span',
+    'Style',
+    'TableCaption',
+    'Table',
+    'TableRow',
+    'TableSection',
+    'Template',
+    'TextArea',
+    'Time',
+    'Title',
+    'Track',
+    'UList',
+    'Unknown',
+  ];
+
+  for (var i = 0; i < htmlElementSubclasses.length; i++) {
+    var ctor = window['HTML' + htmlElementSubclasses[i] + 'Element'];
+    if (ctor) {
+      ctor.prototype.__proto__ = window.HTMLElement.prototype;
+    }
+  }
+})();

data/lib/assets/javascripts/polyfills/native-shim.coffee

@@ -0,0 +1,93 @@
+
+if window.customElements && !customElements.polyfilled
+  eval '''
+    (() => {
+      'use strict';
+
+      const NativeHTMLElement = window.HTMLElement;
+      const nativeDefine = window.customElements.define;
+      const nativeGet = window.customElements.get;
+
+      /**
+       * Map of user-provided constructors to tag names.
+       *
+       * @type {Map<Function, string>}
+       */
+      const tagnameByConstructor = new Map();
+
+      /**
+       * Map of tag anmes to user-provided constructors.
+       *
+       * @type {Map<string, Function>}
+       */
+      const constructorByTagname = new Map();
+
+
+      /**
+       * Whether the constructors are being called by a browser process, ie parsing
+       * or createElement.
+       */
+      let browserConstruction = false;
+
+      /**
+       * Whether the constructors are being called by a user-space process, ie
+       * calling an element constructor.
+       */
+      let userConstruction = false;
+
+      window.HTMLElement = function() {
+        if (!browserConstruction) {
+          const tagname = tagnameByConstructor.get(this.constructor);
+          const fakeClass = nativeGet.call(window.customElements, tagname);
+
+          // Make sure that the fake constructor doesn't call back to this constructor
+          userConstruction = true;
+          const instance = new (fakeClass)();
+          return instance;
+        }
+        // Else do nothing. This will be reached by ES5-style classes doing
+        // HTMLElement.call() during initialization
+        browserConstruction = false;
+      };
+
+      window.HTMLElement.prototype = Object.create(NativeHTMLElement.prototype);
+      window.HTMLElement.prototype.constructor = window.HTMLElement;
+
+      window.customElements.define = (tagname, elementClass) => {
+        const elementProto = elementClass.prototype;
+        const StandInElement = class extends NativeHTMLElement {
+          constructor() {
+            // Call the native HTMLElement constructor, this gives us the
+            // under-construction instance as `this`:
+            super();
+
+            // The prototype will be wrong up because the browser used our fake
+            // class, so fix it:
+            Object.setPrototypeOf(this, elementProto);
+
+            if (!userConstruction) {
+              // Make sure that user-defined constructor bottom's out to a do-nothing
+              // HTMLElement() call
+              browserConstruction = true;
+              // Call the user-defined constructor on our instance:
+              elementClass.call(this);
+            }
+            userConstruction = false;
+          }
+        };
+        const standInProto = StandInElement.prototype;
+        StandInElement.observedAttributes = elementClass.observedAttributes;
+        standInProto.connectedCallback = elementProto.connectedCallback;
+        standInProto.disconnectedCallback = elementProto.disconnectedCallback;
+        standInProto.attributeChangedCallback = elementProto.attributeChangedCallback;
+        standInProto.adoptedCallback = elementProto.adoptedCallback;
+
+        tagnameByConstructor.set(elementClass, tagname);
+        constructorByTagname.set(tagname, elementClass);
+        nativeDefine.call(window.customElements, tagname, StandInElement);
+      };
+
+      window.customElements.get = (tagname) => constructorByTagname.get(tagname);
+
+    })();
+  '''

data/lib/assets/javascripts/polyfills/polyfills.coffee

@@ -0,0 +1,4 @@
+#= require ./es6
+#= require ./custom-elements
+#= require ./native-shim
+#= require ./htmlelement-instanceof

data/{vendor → lib}/assets/javascripts/tao/application.coffee

@@ -6,7 +6,7 @@ class TaoApplication extends TaoModule
     @_initGon()
     @_initI18n()
     @_initUjs()
-    @_bind()
+    @_initTurbolinks()
 
   _initGon: ->
     $.extend @, window.gon
@@ -21,7 +21,7 @@ class TaoApplication extends TaoModule
       $(@).removeClass 'disabled'
 
   _initI18n: ->
-    I18n.locale = @locale
+    I18n?.locale = @locale
 
   _initIcons: ($page) ->
     $icons = $page.siblings('#tao-icons')
@@ -31,7 +31,7 @@ class TaoApplication extends TaoModule
   _initPage: ($page) ->
     window.currentPage = @currentPage = $page[0]
 
-  _bind: ->
+  _initTurbolinks: ->
     $(document).on 'turbolinks:before-visit', (e) =>
       if @currentPage.trigger('before-leave') == false
         e.preventDefault()
@@ -46,8 +46,8 @@ class TaoApplication extends TaoModule
       @trigger 'page-visit', [e.originalEvent?.data.url]
 
     .on 'turbolinks:before-cache', (e) =>
-      @currentPage.trigger 'before-cache'
       @trigger 'before-page-cache', [@currentPage]
+      @currentPage.prepareCache?()
       window.currentPage = @currentPage = null
 
     .on 'turbolinks:request-end', (e) =>

data/{vendor → lib}/assets/javascripts/tao/component.coffee

@@ -1,6 +1,5 @@
 #= require lodash
-#= require custom-elements
-#= require native-shim
+#= require polyfills/polyfills
 
 components = {}
 
@@ -39,28 +38,41 @@ TaoComponentBasedOn = (superClass = 'HTMLElement') ->
         set: setMethod
         configurable: true
 
-    @property: (name, observed) ->
+    @property: (name, options = {}) ->
       attrName = _.kebabCase(name)
-      @get name, -> @getAttribute attrName
+      @get name, ->
+        if @hasAttribute attrName
+          @getAttribute(attrName) || true
+        else
+          false
       @set name, (val) ->
         if val == true
           @setAttribute attrName, ''
-        else if val == false
+        else if val != false
           @setAttribute attrName, val
         else
           @removeAttribute attrName
-      @observedAttributes.push(attrName) if observed
+      @observedAttributes.push(attrName) if options.observe
+
+    @tag: '' # to be set by child class
+
+    @register: (componentClass) ->
+      return unless componentClass.tag
+      customElements.define componentClass.tag, componentClass
 
     @observedAttributes: []
 
     connectedCallback: ->
+      @connected = true
+      @classList.add 'tao-component'
       @_init()
 
     disconnectedCallback: ->
+      @connected = false
       @_destroy()
 
     attributeChangedCallback: (attrName, oldValue, newValue) ->
-      @["#{_.camelCase attrName}Changed"]?(newValue, oldValue)
+      @["_#{_.camelCase attrName}Changed"]?(newValue, oldValue)
 
     on: (args...) ->
       $(@).on args...
@@ -77,8 +89,11 @@ TaoComponentBasedOn = (superClass = 'HTMLElement') ->
     _init: ->
       # to be implemented
 
-    _destory: ->
+    _destroy: ->
       # to be implemented
 
+    prepareCache: ->
+      # called before turbolinks cache pages
+
 window.TaoComponentBasedOn = TaoComponentBasedOn
 window.TaoComponent = TaoComponentBasedOn 'HTMLElement'

data/lib/assets/javascripts/tao/icons.coffee

@@ -0,0 +1,2 @@
+# generate this file by exec command in project:
+#   rake tao:generate_icons

data/{vendor → lib}/assets/javascripts/tao/module.coffee

@@ -40,3 +40,5 @@ class TaoModule
 
   one: (args...) ->
     $(@).one args...
+
+window.TaoModule = TaoModule

data/{vendor → lib}/assets/javascripts/tao/page.coffee

@@ -4,10 +4,9 @@ class TaoPage extends TaoComponent
 
   @property 'layout'
 
-  _init: ->
-    # to be implemented
-
-  _destroy: ->
-    # to be implemented
+  prepareCache: ->
+    $(@).find('.tao-component').each (i, el) =>
+      el.prepareCache?()
+      null
 
 window.TaoPage = TaoPage

data/{vendor → lib}/assets/javascripts/tao.coffee

@@ -5,9 +5,9 @@
 #= require i18n
 
 #= require_self
-#= require_tree tao/application
-#= require_tree tao/page
-#= require_tree tao/helpers
-#= require_tree tao/icons
+#= require tao/application
+#= require tao/page
+#= require tao/helpers
+#= require tao/icons
 
 window.tao = {}

data/{vendor → lib}/assets/stylesheets/tao/icons.scss

@@ -1,25 +1,15 @@
-@import 'base';
 
 @keyframes spin {
   from { transform:rotate(0deg); }
   to { transform:rotate(360deg); }
 }
 
-#tao-icons {
-  symbol {
-    .zhiren_icon,
-    .Main {
-      fill: inherit;
-    }
-  }
-}
-
 .icon {
   display: inline-block;
   width: 24px;
   height: 24px;
   vertical-align: middle;
-  fill: $color-light-text;
+  fill: #9b9b9b;
 
   &.spin {
     animation: spin 1s infinite linear;

data/{vendor → lib}/assets/stylesheets/tao.scss

@@ -1,2 +1,2 @@
 //= require normalize-rails
-//= require_tree tao/icons
+//= require tao/icons

data/lib/tao_on_rails/rails/engine.rb

@@ -1,4 +1,7 @@
+require 'turbolinks'
 require 'jquery-rails'
+require 'lodash-rails'
+require 'normalize-rails'
 
 module TaoOnRails
   module Rails

data/lib/tao_on_rails/rails/version.rb

@@ -1,5 +1,5 @@
 module TaoOnRails
   module Rails
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

data/lib/tasks/tao_icons.rake

@@ -33,6 +33,7 @@ namespace :tao do
       .gsub(/id=/,'class=')
       .gsub(/<svg.+?>/, %Q{<svg id="icon-#{name}" #{dimensions(content)}>})
       .gsub(/svg/,'symbol')
+      .gsub(/\sfill=".+?"/,'')
       .gsub(/\n/, '') # Remove endlines
       .gsub(/\s{2,}/, ' ') # Remove whitespace
       .gsub(/>\s+</, '><') # Remove whitespace between tags
@@ -40,15 +41,7 @@ namespace :tao do
 
   def dimensions(content)
     dimension = content.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten
-    viewbox = dimension.first
-    #coords = dimension.last.split(' ')
-
-    #width = coords[2].to_i - coords[0].to_i
-    #height = coords[3].to_i - coords[1].to_i
-    #hack android svg
-    width = '100%'
-    height = '100%'
-    %Q{#{viewbox} width="#{width}" height="#{height}"}
+    %Q{#{dimension.first} width="100%" height="100%"}
   end
 
 end

data/tao_on_rails.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
   spec.authors       = ["Siyuan Liu", "Terry Tai"]
   spec.email         = ["farthinker@mycolorway.com", "t@mycolorway.com"]
 
-  spec.summary       = %q{The missing frontend solucation for Rails project}
-  spec.description   = %q{The missing frontend solucation for Rails project}
+  spec.summary       = %q{The missing frontend solution for Rails project}
+  spec.description   = %q{Ruby on Rails lacks a recommended way to structure your frontend code for many years. Tao on Rails is the framework to fill the gap which will modularize your page with the new Custom Elements v1 API.}
   spec.homepage      = "https://github.com/mycolorway/tao_on_rails"
   spec.license       = "MIT"
 
@@ -21,15 +21,14 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_dependency "rails", "~> 5.0"
-  spec.add_dependency "jquery-rails", "~> 4.2"
-  spec.add_dependency "lodash-rails", "~> 4.16"
-  spec.add_dependency "normalize-rails", "~> 4.1"
-  spec.add_dependency "turbolinks", "~> 5.0"
-  spec.add_dependency "i18n-js", "~> 3.0.0.rc14"
-  spec.add_dependency "gon", "~> 6.0"
+  spec.add_runtime_dependency "turbolinks", "~> 5.0"
+  spec.add_runtime_dependency "jquery-rails", "~> 4.2"
+  spec.add_runtime_dependency "lodash-rails", "~> 4.16"
+  spec.add_runtime_dependency "normalize-rails", "~> 4.1"
+  spec.add_runtime_dependency "rails", '~> 5.0'
 
   spec.add_development_dependency "bundler", "~> 1.13"
   spec.add_development_dependency "rake", "~> 10.0"
-  spec.add_development_dependency "rspec", "~> 3.0"
+  spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_development_dependency "blade", "~> 0.7.0"
 end