opal-ferro 0.10.1 → 0.10.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0cf34d1239b6886601737690e639cadd7e0fd9971a73cb233eed18faf78ba764
-  data.tar.gz: 9d6f89cbc0c4fc22c095d0b3d057e1255ccbc28f2b6ae8da7cdca3222d6fae39
+  metadata.gz: f2d8c1d43bb035ec89c3ec3b1508845063b0b941f4384d353de5cfd496349f93
+  data.tar.gz: 3090d75958d6331a6957cd7e92406bf4e718ece68ee9b2dc0e7e92d1d0e64052
 SHA512:
-  metadata.gz: 4e92a9b4a555a1a8c9ae937b222a43880b3d650aefb5400fe08766cb8cdf7f4e3f95351ba8b267c3f7f6e1d08dc5967c465056bf911572cd2fd2c6a1c94b3e4d
-  data.tar.gz: 7de1f758372345527f612eeb744727c4c97282f706154979edc439f230f00a4fa043403c2785570dee947f625212b9041c9e691c8019c03ee8a34704074b386a
+  metadata.gz: ed7efe3c96aaede6364c1c9c8519ebd071e8d8b6c5643134a55064ea5156600961fd2acd007da5e2faddce2bd6962712c351e790cfe99ca5997c0b2016450e41
+  data.tar.gz: ecd0acb39193f98faabb31da93383d9de08b1fccfb03cde7c34784661d3eaa2ff292aa4f069c7456f3ab2a786c330b832fe99797145c584e55d52c8e1d64962c

data/CHANGELOG.md

@@ -1,3 +1,10 @@
+# 0.10.2 - June 1, 2018
+
+[0.10.2]: https://github.com/easydatawarehousing/opal-ferro/compare/v0.10.1...v0.10.2
+
+- Added the style compositor to map Ruby classnames to CSS classnames
+- Fixed: don't add clicks on an anchor to the browser history when the href is empty
+
 # 0.10.1 - March 31, 2018
 
 - Added documentation (using Yard)

data/README.md

@@ -1,7 +1,7 @@
 # Opal-Ferro
 
 [![Documentation](http://img.shields.io/badge/docs-rdoc.info-blue.svg)](http://rubydoc.org/gems/opal-ferro)
-[![Gem Version](https://img.shields.io/badge/gem%20version-0.10.1-blue.svg)](https://github.com/easydatawarehousing/opal-ferro/releases)
+[![Gem Version](https://img.shields.io/badge/gem%20version-0.10.2-blue.svg)](https://github.com/easydatawarehousing/opal-ferro/releases)
 [![License](http://img.shields.io/badge/license-MIT-yellowgreen.svg)](#license)
 
 Ferro is a small Ruby library on top of [Opal](http://opalrb.com/)

data/docs/GettingStarted.md

@@ -15,6 +15,7 @@ just beautiful and simple Ruby code. Front-End-Ruby-ROcks!
 * [Creation lifecycle](#lifecycle)
 * [Navigating the Master Object Model](#navigating)
 * [Styling Ferro elements](#styling)
+* [Using a compositor to style elements](#compositor)
 * [More information](#more)
 
 <a name="ferro"></a>
@@ -174,6 +175,48 @@ one for its Ruby superclass `FerroFormButton`.
 These classnames are _dasherized_. In CSS you can reference these
 classnames as `demo-button` and `ferro-form-button`.
 
+<a name="compositor"></a>
+
+## Using a compositor to style elements
+
+There is alternative way to add styling to generated DOM objects.
+In your `Document` you can set a `Compositor` object.
+A compositor maps Ruby class names to a list of CSS class names.
+When a Ferro object is created its class name is looked up in the
+compositor mapping. If found the list of CSS classes will be added
+to the corresponding DOM element.  
+The mapping is simply a Ruby Hash. The keys are Ruby class names,
+the values are CSS class names.  
+Optionally you can use the theme parameter to create different
+mappings per theme. Use the `Document.switch_compositor_theme`
+method to switch themes at run time.  
+Add the compositor like this:
+
+    class Document < Ferro::Document
+      def before_create
+        @compositor = AppCompositor.new :dark
+      end
+    end
+
+The theme parameter is optional. A simple mapping might look like this:
+
+    class MyCompositor < Ferro::Compositor
+
+      def map(theme)
+        m = {
+          'Document' => %w{black bg-white sans-serif},
+          'Banner'   => %w{w-100},
+        }
+        
+        if theme == :dark
+          m['Document'] = %w{white bg-black sans-serif}
+        end
+
+        m
+      end
+    end
+
+
 <a name="more"></a>
 
 ## More information

data/lib/opal-ferro/version.rb

@@ -8,6 +8,6 @@ module Opal
     # compatibility with the Opal version with that same number.
     # So Ferro 0.10.x should be compatible with and dependant
     # on Opal 0.10.x.
-    VERSION = "0.10.1"
+    VERSION = "0.10.2"
   end
 end

data/opal/opal-ferro/elements/ferro_inline.js.rb

@@ -26,6 +26,8 @@ module Ferro
     # elements. Leave option blank to create <ul> elements.
     class List < BaseElement
 
+      attr_reader :items
+
       # Internal method.
       def _before_create
         @domtype = @options.has_key?(:type) ? :ol : :ul
@@ -98,11 +100,22 @@ module Ferro
       def _before_create
         @domtype = :a
         @href = @options[:href]
+        @push = @href.to_s != ''
       end
 
       # Internal method.
       def _after_create
-        `#{@element}.addEventListener("click",function(e){e.preventDefault();history.pushState(null,null,#{@href});#{clicked};document.activeElement.blur();})`
+        `#{@element}.addEventListener("click", function(e) {
+          e.preventDefault();
+
+          if (#{@push}) {
+            history.pushState(null, null, #{@href});
+          }
+
+          #{clicked};
+
+          document.activeElement.blur();
+        })`
       end
 
       # Set a new html reference for this item.

data/opal/opal-ferro/ferro_base_element.js.rb

@@ -86,7 +86,11 @@ module Ferro
     # @param [String] state The state name to add to the element
     # @param [value] value The initial enabled/disabled state value
     def add_state(state, value = false)
-      @states[state] = [factory.dasherize(state), value]
+      @states[state] = [
+        factory.composite_state(self.class.name, state),
+        value
+      ]
+
       classify_state @states[state]
     end
 
@@ -121,9 +125,13 @@ module Ferro
     # @param [String] state The state name
     def classify_state(state)
       if state[1]
-        `#{element}.classList.add(#{state[0]})`
+        state[0].each do |name|
+          `#{element}.classList.add(#{name})`
+        end
       else
-        `#{element}.classList.remove(#{state[0]})`
+        state[0].each do |name|
+          `#{element}.classList.remove(#{name})`
+        end
       end
     end
 

data/opal/opal-ferro/ferro_compositor.js.rb

@@ -0,0 +1,77 @@
+module Ferro
+  # Composite styling for DOM objects.
+  class Compositor
+
+    attr_reader :current_theme
+
+    # Create the style compositor.
+    #
+    # @param [Symbol] theme Optional styling theme
+    def initialize(theme = nil)
+      @current_theme = theme
+    end
+
+    # Override this method to define a hash containing the mapping
+    # of Ruby classnames to an array of css classnames.  
+    # To use the same styling on multiple objects: return the name
+    # of the object containing the styling as a String
+    # (see css_classes_for method).
+    #
+    # This hash may also contain the mapping for states.
+    # A state name is: <Ruby class name>::<state>.
+    # For instance 'MenuLink::active'.
+    def map
+      raise NotImplementedError
+    end
+
+    # Map a Ruby classname to an array of css classnames.
+    # If the mapping result is a string: recursively lookup
+    # the mapping for that string.
+    #
+    # @param [String] classname Ruby classname
+    # @return [Array] A list of CSS class names
+    def css_classes_for(classname)
+      css_classes_for_map classname, mapping
+    end
+
+    # Internal method to get mapping from selected map.
+    def css_classes_for_map(classname, map)
+      css = map[classname]
+      css.class == String ? css_classes_for_map(css, map) : (css || [])
+    end
+
+    # Internal method to switch to a new theme.
+    def switch_theme(root_element, theme)
+      old_map = @mapping
+      new_map = map(theme)
+
+      root_element.each_child do |e|
+        old_classes = css_classes_for_map e.class.name, old_map
+        new_classes = css_classes_for_map e.class.name, new_map
+        update_element_css_classes(e, old_classes, new_classes)
+
+        old_classes = css_classes_for_map e.class.superclass.name, old_map
+        new_classes = css_classes_for_map e.class.superclass.name, new_map
+        update_element_css_classes(e, old_classes, new_classes)
+      end
+
+      @mapping = new_map
+    end
+
+    # Internal method to add/remove CSS classes for an object.
+    def update_element_css_classes(obj, old_classes, new_classes)
+      (old_classes - new_classes).each do |name|
+        `#{obj.element}.classList.remove(#{name})`
+      end
+
+      (new_classes - old_classes).each do |name|
+        `#{obj.element}.classList.add(#{name})`
+      end
+    end
+
+    # Internal method to cache the mapping.
+    def mapping
+      @mapping ||= map(@current_theme)
+    end
+  end
+end

data/opal/opal-ferro/ferro_document.js.rb

@@ -12,10 +12,14 @@ module Ferro
 
     include Elementary
 
+    attr_reader :sym, :children, :compositor
+
     # Create the document and start the creation
     # process (casading).
     def initialize
-      @children = {}
+      @compositor = nil
+      @sym        = :document
+      @children   = {}
       creation
     end
 
@@ -31,7 +35,7 @@ module Ferro
 
     # Returns the one and only instance of the factory.
     def factory
-      @factory ||= Factory.new
+      @factory ||= Factory.new(self, @compositor)
     end
 
     # The document class is the root element.
@@ -44,6 +48,20 @@ module Ferro
       self
     end
 
+    # Returns the domtype of the document instance.
+    def domtype
+      :body
+    end
+
+    # Switch to a new theme for the compositor,
+    # this will remove/add CSS classes for all
+    # elements as needed.
+    #
+    # param [Symbol] theme The new theme name
+    def switch_compositor_theme(theme)
+      @compositor.switch_theme(self, theme) if @compositor
+    end
+
     # Returns the one and only instance of the router.
     def router
       @router ||= Router.new(method(:page404))

data/opal/opal-ferro/ferro_elementary.js.rb

@@ -97,6 +97,20 @@ module Ferro
       @children.delete(sym)
     end
 
+    # Recursively iterate all child elements
+    #
+    # param [Block] block A block to execute for every child element
+    #                     and the element itself
+    def each_child(&block)
+      if block_given?
+        block.call self
+
+        @children.each do |_, child|
+          child.each_child(&block)
+        end
+      end
+    end
+
     # Remove a DOM element.
     def destroy
       `#{parent.element}.removeChild(#{element})`

data/opal/opal-ferro/ferro_factory.js.rb

@@ -6,14 +6,19 @@ module Ferro
 
     # Creates the factory. Do not create a factory directly, instead
     # call the 'factory' method that is available in all Ferro classes
-    def initialize
+    #
+    # @param [Object] target The Ruby class instance
+    # @param [Compositor] compositor A style-compositor object or nil
+    def initialize(target, compositor)
+      @compositor = compositor
       @body = `document.body`
       `while (document.body.firstChild) {document.body.removeChild(document.body.firstChild);}`
+      composite_classes(target, @body, false)
     end
 
     # Create a DOM element.
     #
-    # @param [String] target The Ruby class instance
+    # @param [Object] target The Ruby class instance
     # @param [String] type Type op DOM element to create
     # @param [String] parent The Ruby parent element
     # @param [Hash] options Options to pass to the element.
@@ -38,6 +43,9 @@ module Ferro
         `#{element}.classList.add(#{dasherize(target.class.superclass.name)})`
       end
 
+      # Add classes defined by compositor
+      composite_classes(target, element, target.class.superclass != BaseElement)
+
       # Set ruby object_id as default element id
       if !options.has_key?(:id)
         `#{element}.id = #{target.object_id}`
@@ -79,5 +87,38 @@ module Ferro
       return class_name if class_name !~ /-/
       class_name.gsub(/(?:-|(\/))([a-z\d]*)/) { "#{$1}#{$2.capitalize}" }.strip
     end
+
+    # Convert a state-name to a list of CSS class names.
+    #
+    # @param [String] class_name Ruby class name
+    # @param [String] state State name
+    # @return [String] A list of CSS class names
+    def composite_state(class_name, state)
+      if @compositor
+        list = @compositor.css_classes_for("#{class_name}::#{state}")
+        return list if !list.empty?
+      end
+
+      [ dasherize(state) ]
+    end
+
+    # Internal method
+    # Composite CSS classes from Ruby class name
+    def composite_classes(target, element, add_superclass)
+      if @compositor
+        composite_for(target.class.name, element)
+
+        if add_superclass
+          composite_for(target.class.superclass.name, element)
+        end
+      end
+    end
+
+    # Internal method
+    def composite_for(classname, element)
+      @compositor.css_classes_for(classname).each do |name|
+        `#{element}.classList.add(#{name})`
+      end
+    end
   end
 end

data/opal/opal-ferro.rb

@@ -1,6 +1,7 @@
 require 'opal'
 require 'opal-ferro/ferro_elementary'
 require 'opal-ferro/ferro_base_element'
+require 'opal-ferro/ferro_compositor'
 require 'opal-ferro/ferro_document'
 require 'opal-ferro/ferro_factory'
 require 'opal-ferro/ferro_router'

data/opal-ferro.gemspec

@@ -12,6 +12,12 @@ Gem::Specification.new do |s|
   s.summary       = %q{Simplifying web-development: no more html, just beautiful and simple Ruby code.}
   s.description   = %q{Ferro is a small Ruby library on top of Opal that enables an object-oriented programming style for creating code that runs in the webbrowser. No more distractions like HTML and searching for DOM elements, just beautiful and simple Ruby code. Front-End-Ruby-ROcks!}
   s.homepage      = 'https://github.com/easydatawarehousing/opal-ferro'
+  s.metadata    = {
+    "homepage_uri"    => "https://github.com/easydatawarehousing/opal-ferro/",
+    "changelog_uri"   => "https://github.com/easydatawarehousing/opal-ferro/blob/master/CHANGELOG.md",
+    "source_code_uri" => "https://github.com/easydatawarehousing/opal-ferro/",
+    "bug_tracker_uri" => "https://github.com/easydatawarehousing/opal-ferro/issues",
+  }
   s.license       = 'MIT'
 
   s.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: opal-ferro
 version: !ruby/object:Gem::Version
-  version: 0.10.1
+  version: 0.10.2
 platform: ruby
 authors:
 - Ivo Herweijer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-28 00:00:00.000000000 Z
+date: 2018-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -110,6 +110,7 @@ files:
 - opal/opal-ferro/elements/ferro_inline.js.rb
 - opal/opal-ferro/elements/ferro_misc.js.rb
 - opal/opal-ferro/ferro_base_element.js.rb
+- opal/opal-ferro/ferro_compositor.js.rb
 - opal/opal-ferro/ferro_document.js.rb
 - opal/opal-ferro/ferro_elementary.js.rb
 - opal/opal-ferro/ferro_factory.js.rb
@@ -119,7 +120,11 @@ files:
 homepage: https://github.com/easydatawarehousing/opal-ferro
 licenses:
 - MIT
-metadata: {}
+metadata:
+  homepage_uri: https://github.com/easydatawarehousing/opal-ferro/
+  changelog_uri: https://github.com/easydatawarehousing/opal-ferro/blob/master/CHANGELOG.md
+  source_code_uri: https://github.com/easydatawarehousing/opal-ferro/
+  bug_tracker_uri: https://github.com/easydatawarehousing/opal-ferro/issues
 post_install_message: 
 rdoc_options: []
 require_paths: