dom-rb 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7bea94521028abe3b88220fd369b2ed399d49094
+  data.tar.gz: 2fd651272b2923fb793a1b38d2c46ce814ce6856
+SHA512:
+  metadata.gz: 2c72e3408c30567670e74eecd2461bc22b4d72606b19dcfb282664451c5feba2abbbf34b408633875c5cd0c09ee91dfce4a1779a2754484127ba7e9c6bf948af
+  data.tar.gz: ee2775001232bf81ea60da2d4b5c0b985b38857384369efeba9eccab04a501fb6d3f1ef6a232a3a9125fe581c73e94ea3171a2218680c637e4ecf98de27538e1

data/csr/dom/browser_ext/node.rb

@@ -0,0 +1,101 @@
+require 'opal-browser'
+
+# Add binding management to Browser::DOM::Node
+
+class Browser
+  class DOM
+    class Document
+      def active_element
+        el = `#@native.activeElement()`
+        if el
+          Browser::DOM::Node.new(el)
+        end
+      end
+    end
+  end
+end
+
+class Browser
+  class DOM
+    class Element
+    end
+  end
+end
+
+class Browser
+  class DOM
+    class Node
+      # requires jquery and bootstrap.js - will fail otherwise
+      def check_jquery
+        %x(
+          if (typeof jQuery === 'undefined') {
+            throw new Error('Bootstrap\'s JavaScript requires jQuery')
+          }
+        )
+      end
+
+      def check_bootstrap
+        %x(
+          if (typeof($.fn.tooltip) === 'undefined') {
+            throw new Error('Bootstrap.js not loaded')
+          }
+        )
+      end
+
+      # TODO: replicate this for all Bootstrap js features
+      # TODO: refactor all bootstrap stuff to separate module
+      # arg may be:
+      # 0. nil - attaches tooltip to node
+      # 1. hash of options and attaches tooltip to node
+      # 2. 'show'
+      # 3. 'hide'
+      # 4. 'toggle'
+      # 4. 'destroy'
+      # see http://getbootstrap.com/javascript/#tooltips
+      def tooltip(arg=nil)
+        check_bootstrap
+        `$(#@native).tooltip(#{arg.to_n})`
+      end
+
+      def popover(arg=nil)
+        check_bootstrap
+        `$(#@native).popover(#{arg.to_n})`
+      end
+
+      def bindings=(bindings)
+        # store bindings in js element
+        `#@native.voltBindings = #{bindings}`
+      end
+
+      def bindings
+        # bindings stored in js element
+        b = `#@native.voltBindings`
+        `b === undefined` ? nil : b
+      end
+
+      # bindings set (if required) by Paggio::HTML::Element
+      def start_bindings
+        if bindings
+          bindings.each do |b|
+            # cannot use self as self is transient
+            b.start(self.id)
+          end
+        end
+      end
+
+      def stop_bindings
+        if bindings
+          bindings.each do |b|
+            b.stop
+          end
+        end
+      end
+
+      def bindings_count
+        b = bindings
+        b ? b.size : 0
+      end
+
+    end
+  end
+end

data/csr/dom/builder/base.rb

@@ -0,0 +1,210 @@
+require 'opal-browser'
+require 'dom/globals'
+require 'dom/builder/binding'
+require 'dom/browser_ext/node'
+require 'dom/util'
+require 'dom/debug'
+
+module CSR
+  module DOM
+    module Builder
+      include CSR::DOM::Globals
+      include CSR::DOM::Util
+      include CSR::DOM::Debug
+
+      module_function
+
+      def br
+        tag(:br)
+      end
+
+      def div(attributes: nil, content: nil)
+        tag(:div, attributes: attributes, content: content)
+      end
+
+      # Any attribute or content which is a BoundProc will be
+      # converted to bindings. See CSR::DOM::Binding.
+      # Any attributes or content which is a Proc will be
+      # resolved by proc.call.
+      def tag(name, attributes: nil, content: nil)
+        # self.debug_level = 3
+        attributes = attributes ? attributes : {}
+        namespace = attributes[:namespace]
+        element = document.create_element(name, {namespace: namespace})
+        id = attributes.delete(:id) || attributes.delete('id')
+        if id
+          id = id.call if Proc === id
+          element.id = id
+        end
+        bindings = []
+        attributes.each do |key, value|
+          if key == :style
+            value = resolve_value(element, value, bindings, id, :style, name)
+            if value
+              value = normalize_style(value)
+              element.style(value)
+            end
+          elsif key[0,2] == 'on'
+            # event stuff is in browser/event/base.rb
+            event = key[2..-1]
+            element.on(event, &value)
+          else
+            value = resolve_value(element, value, bindings, id, key, name)
+            if value
+              key = sanitize_attribute(key)
+              element[key] = value
+            end
+          end
+        end
+        content = resolve_value(element, content, bindings, id, :content, name)
+        if content
+          content = sanitize_content(content)
+          element << content
+        end
+        if bindings
+          element.bindings = bindings
+        end
+        element
+      end
+
+      def bind(proc=nil, &block)
+        BoundProc.new(proc, &block)
+      end
+
+      def resolve_value(element, value, bindings, id, attr, tag_name)
+        # debug 1, ->{[ __FILE__, __LINE__, __method__, "tag=#{tag_name} value=#{value} bindings=#{bindings} id=#{id} attr=#{attr}" ]}
+        result = case value
+          when BoundProc
+            # debug 1, ->{[ __FILE__, __LINE__, __method__, "BoundProc===value" ]}
+            binding = Binding.new(
+              # This proc was set in bind and should expect a Binding as argument
+              # It can set up a watch, and should immediately set the binding value.
+              value.proc,
+              # this is local proc to update element with new value
+              -> (value) {
+                update_element(element, id, attr, value)
+              }
+            )
+            bindings << binding
+            # value proc should have set value in binding
+            binding.value
+          when Proc
+            # debug 1, ->{[ __FILE__, __LINE__, __method__, "Proc===value" ]}
+            value.call
+          else
+            # debug 1, ->{[ __FILE__, __LINE__, __method__, "value=#{value}" ]}
+            value
+        end
+        # debug 1, ->{[ __FILE__, __LINE__, __method__, "result=#{result}" ]}
+        result
+      end
+
+      def sanitize_attribute(key)
+        # key.to_s.gsub(/_([a-z])/) {|v| v[1].upcase}
+        key.to_s.gsub(/_/, '-')
+      end
+
+      def sanitize_content(content)
+        debug 3, ->{[ __FILE__, __LINE__, __method__, "content.class=#{content.class}" ]}
+        case content
+          when Browser::DOM::Element
+            content
+          when Enumerable
+            content.map {|e| sanitize_content(e)}
+          else
+            content.to_s
+        end
+      end
+
+      def update_element(element, id, attr, value)
+        debug 2, ->{[ __FILE__, __LINE__, __method__, "element=#{element} id=#{id} attr=#{attr} value=#{value}" ]}
+        case attr
+          when :content
+            content = sanitize_content(value)
+            debug 2, ->{[ __FILE__, __LINE__, __method__, "content=#{content}"]}
+            element.clear
+            element << content
+          when :style
+            debug 2, ->{[ __FILE__, __LINE__, __method__ ]}
+            element.style(normalize_style(value || {}))
+          else
+            debug 2, ->{[ __FILE__, __LINE__, __method__ ]}
+            element[attr] = value
+        end
+      end
+
+      def <<(*args, &block)
+        debug 1, ->{[ __FILE__, __LINE__, __method__, "size=#{args.size} args=#{args}" ]}
+        if block
+          self << block.call
+        else
+          if args.size == 1
+            dom_root << case args[0]
+              when Hash
+                name = args[0].delete(:tag)
+                tag(name, args[0])
+              else
+                args[0]
+            end
+          end
+        end
+      end
+
+      alias_method :add, :<<
+
+      # Returns a Browser::DOM::Element with given id or nil.
+      def element(id)
+        document[id.to_s]
+      end
+
+      alias_method :el, :element
+      alias_method :[], :element
+
+      def remove(element)
+        fail "#{self.class.name}##{__method__} not implemented"
+      end
+
+      def replace(element)
+        fail "#{self.class.name}##{__method__} not implemented"
+      end
+
+      def traverse_dom(node_or_nodeset = nil, &block)
+        node_or_nodeset ||= dom_root
+        (NodeSet === node_or_nodeset ? node_or_nodeset : [node_or_nodeset]).each do |node|
+          yield DOM(node)
+          node.children.each do |child|
+            traverse_dom(DOM(child), &block)
+          end
+        end
+      end
+
+      def stop_bindings(id = nil)
+        switch_bindings(id, start: false)
+      end
+
+      def start_bindings(id = nil)
+        switch_bindings(id, start: true)
+      end
+
+      def switch_bindings(id = nil, start: true)
+        first = nil
+        if id
+          first = self[id]
+          unless first
+            fail "#{self.class.name}##{__method__}:#{__LINE_} : no element with id '#{id}'"
+          end
+        end
+        traverse_dom(first) do |node|
+          start ? node.start_bindings : node.stop_bindings
+        end
+      end
+
+      def shutdown
+        stop_bindings
+        clear_interval
+      end
+
+
+    end
+  end
+end

data/csr/dom/builder/binding.rb

@@ -0,0 +1,44 @@
+# Usage
+#
+# tag(
+#   'h3',
+#   content: bind do |binding|
+#     # set up the watch
+#     -> {
+#       binding.value = user.name
+#     }.watch!
+#   end
+# )
+
+module CSR
+  module DOM
+    class BoundProc
+      attr_reader :proc
+
+      def initialize(proc=nil, &block)
+        @proc = proc || block
+      end
+    end
+
+    class Binding
+
+      attr_reader :value
+
+      def initialize(value_proc, action_proc)
+        @value_proc = value_proc
+        @action_proc = action_proc
+        @value = nil
+        @value_proc.call(self)
+      end
+
+      # TODO: make equality checking optional?
+      def value=(arg)
+        unless @value == arg
+          @value = arg
+          @action_proc.call(arg)
+        end
+      end
+
+    end
+  end
+end

data/csr/dom/builder/helpers.rb

@@ -0,0 +1,343 @@
+require 'dom/builder/base'
+
+# adds helper to CSR::DOM::Builder
+
+module CSR
+  module DOM
+    module Builder
+
+      module_function
+
+      def icon(name, callback: nil, css: nil, float: nil, margins: nil, style: nil)
+        _style = {
+          text_align: 'center',
+          vertical_align: 'middle',
+          color: 'inherit',
+          background_color: 'inherit',
+          cursor: 'pointer',
+        }
+        if margins
+          _style =_style.merge(margins)
+        elsif float
+          _style = _style.merge(
+            case float.to_sym
+            when :left
+              { margin_right: '0.5em' } # { margin_top: '0.2em', margin_right: '0.5em' }
+            when :right
+              { margin_left: '0.5em' } # { margin_top: '0.2em', margin_right: '0.5em' }
+            else
+               {  } # { margin_top: '0.2em', margin_right: '0.5em' }
+            end
+          )
+        end
+        # arg style overrides any defaults
+        _style = _style.merge(style) if style
+        _class = iconify(name)
+        _class = "#{_class} #{css}" if css
+        _class = "#{_class} pull-#{float}" if float
+        attributes = {
+          class: _class,
+          style: _style
+        }.merge(
+          callback ? { onclick: callback } : {}
+        )
+        tag(
+          :span,
+          attributes: attributes
+        )
+      end
+
+      def icon_with_anchor(icon_name, href, float: nil, margins: nil, icon_css: nil, anchor_css: nil, icon_style: nil, anchor_style: nil)
+        _icon = icon(icon_name, css: icon_css, float: float, margins: margins, style: icon_style)
+        tag(
+          :a,
+          attributes: {
+            href: href,
+            style: anchor_style,
+            class: anchor_css || '',
+          },
+          content: _icon
+        )
+      end
+
+      def plus_sign_icon(href = nil)
+        icon_with_anchor(
+          :plus_sign,
+          href,
+          icon_style: { color: 'lightgreen'}
+        )
+      end
+
+      def remove_sign_icon(callback = nil)
+        icon(
+          :remove_sign,
+          callback: callback,
+          style: {color: 'red'}
+        )
+      end
+
+      def refresh_icon(callback = nil)
+        icon(
+          :refresh,
+          callback: callback,
+          style: {color: 'inherit'}
+        )
+      end
+
+      def save_icon(callback = nil)
+        icon(
+          :save,
+          callback: callback,
+          style: {color: 'inherit'}
+        )
+      end
+
+      def hamburger_icon(callback = nil)
+        icon(
+          :menu_hamburger,
+          callback: callback,
+          style: {color: 'inherit'}
+        )
+      end
+
+      # Returns a span element with icon and dropdown menu
+      #
+      # 1. icon: is the name of the (bootstrap) icon
+      # 2. items: should be hashes containing menu items
+      #    e.g. { callback: ->{}, href: '#', content: 'list item'}
+      # 3. content: of the div (apart from the icon)
+      # 4. pull: which side of div to pull the span, 'right' or 'left'
+      # 5. style: any additional styling fro the span/icon
+      def drop_down_icon(icon: 'menu-hamburger', items: [], pull: 'right', style: {})
+        pull = pull.to_s
+        right = pull == 'right'
+        tag(
+          :span,
+          attributes: {
+            class: "pull-#{pull}"
+          },
+          content: tag(
+            :div,
+            attributes: {
+              class: 'dropdown',
+            },
+            content: [
+              tag(
+                :div,
+                attributes: {
+                  class: 'dropdown-toggle',
+                  # type: 'button',
+                  data_toggle: 'dropdown',
+                  style: {
+                    font_size: 'smaller',
+                    # margin_top: '0.2em',
+                    # margin_bottom: '0.1em',
+                    margin_left: right ? '0.5em' : '0.3em',
+                    margin_right: right ? '0.3em' : '0.5em',
+                    vertical_align: 'middle',
+                    color: 'inherit',
+                    background_color: 'inherit',
+                  }.merge(
+                    style
+                  )
+                },
+                content: icon(
+                  icon,
+                  style: {
+                    font_size: 'smaller',
+                    # margin_top: '0.2em',
+                    margin_bottom: '0.2em',
+                    margin_left: right ? '0.5em' : '0.3em',
+                    margin_right: right ? '0.3em' : '0.5em',
+                    vertical_align: 'middle',
+                    color: 'inherit',
+                    background_color: 'inherit',
+                  }.merge(
+                    style
+                  )
+                )
+              ),
+              tag(
+                :ul,
+                attributes: {
+                  class: "dropdown-menu#{right ? ' dropdown-menu-right' : nil}"
+                },
+                content: items.map { |item|
+                  content = item[:content]
+                  `console.log(#{"#{__FILE__}[#{__LINE__}]: adding item #{content} to menu icon #{icon}"})`
+                  if content == 'divider' || content == 'separator'
+                    tag(
+                      :li,
+                      attributes: {
+                        role: 'separator',
+                        class: 'divider',
+                      }
+                    )
+                  else
+                    attrs = {}
+                    attrs[:href] = item[:href] if item[:href]
+                    attrs[:onclick] = item[:callback] if item[:callback]
+                    tag(
+                      :li,
+                      content: tag(
+                        :div,
+                        content: content,
+                        attributes: attrs
+                      )
+                    )
+                  end
+                }
+              )
+            ]
+          )
+        )
+      end
+
+      def plain_anchor(content, href)
+        tag(
+          :a,
+          attributes: {
+            href: href,
+            style: { color: 'inherit', background_color: 'inherit'}
+          },
+          content: content
+        )
+      end
+
+      def div_with_icon(callback, icon: nil, pull: nil, attributes: nil, content: nil, icon_style: {}, tooltip: nil, popover: nil)
+        icon ||= 'question-sign'
+        pull ||= 'left'
+        pull = pull.to_s
+        icon = tag(
+          :span,
+          attributes: {
+            onclick: callback,
+            class: "glyphicon glyphicon-#{icon} pull-#{pull}",
+            style: {
+               font_size: 'smaller',
+               margin_left: '0.5em',
+               margin_right: '0.5em',
+               vertical_align: 'middle',
+               color: 'inherit',
+               background_color: 'inherit',
+            }.merge(
+              icon_style # argument style overrides default
+            )
+          }
+        )
+        debug 1, ->{[__FILE__, __LINE__, __method__, "tooltip=#{tooltip} popover=#{popover}"]}
+        if tooltip
+          icon.tooltip(tooltip)
+        elsif popover
+          icon.popover(popover)
+        end
+        tag(
+          :div,
+          attributes: {
+            style: { cursor: 'pointer' }
+          }.merge(attributes || {}),
+          content: arrify(content, icon)
+        )
+      end
+
+      def div_with_sort_icon(callback, direction: 0, content: nil)
+        if direction != 0
+          tag(
+            :div,
+            attributes: {
+              onclick: callback,
+              style: { cursor: 'pointer' }
+            },
+            content: arrify(content) + [
+              tag(:span,
+                attributes: {
+                  class: "glyphicon glyphicon-triangle-#{direction > 0 ? 'top' : 'bottom'}",
+                  style: {
+                     font_size: 'smaller',
+                     margin_left: '0.5em',
+                     vertical_align: 'middle',
+                     color: 'inherit',
+                     background_color: 'inherit',
+                  }
+                }
+              )
+            ]
+          )
+        else
+          tag(
+            :div,
+            attributes: {
+              onclick: callback,
+              style: { cursor: 'pointer' }
+            },
+            content: content
+          )
+        end
+      end
+
+      def div_with_menu_up_down(callback, up: true, down: false, content: nil, pull: 'left')
+        div_with_up_down_icon(callback, which: :menu, up: up, down: down, content: content, pull: pull)
+      end
+
+      def div_with_collapse_up_down(callback, up: true, down: false, content: nil, pull: 'left')
+        div_with_up_down_icon(callback, which: :collapse, up: up, down: down, content: content, pull: pull)
+      end
+
+      # which can be :collapse or :menu (or string equivalents)
+      def div_with_up_down_icon(callback, which: :menu, up: true, down: false, content: nil, pull: 'left')
+        up = up && !down
+        pull = pull.to_s
+        left = pull == 'left'
+        tag(
+          :div,
+          attributes: {
+            onclick: callback,
+            style: { cursor: 'pointer' }
+          },
+          content: [
+            tag(
+              :span,
+              attributes: {
+                class: "glyphicon glyphicon-#{which}-#{up ? 'up' : 'down'} pull-#{pull}",
+                style: {
+                  font_size: 'smaller',
+                  margin_top: '0.2em',
+                  margin_left: left ? '0.3em' : '0.5em',
+                  margin_right: left ? '0.5em' : '0.3em',
+                  vertical_align: 'middle',
+                  color: 'inherit',
+                  background_color: 'inherit',
+                }
+              }
+            )
+          ] + arrify(content)
+        )
+      end
+
+      # Returns a div element with given content and an icon to left or right.
+      #
+      # 1. icon: is the name of the (bootstrap) icon
+      # 2. items: should be hashes containing menu items
+      #    e.g. { callback: ->{}, href: '#', content: 'list item'}
+      # 3. content: of the div (apart from the icon)
+      # 4. pull: which side of div to pull the icon, 'right' or 'left'
+      def div_with_dropdown_icon(icon: 'menu-hamburger', items: [], content: nil, pull: 'right')
+        tag(
+          :div,
+          content: arrify(
+            drop_down_icon(icon: icon, items: items, pull: pull),
+            content
+          )
+        )
+      end
+
+      # TODO: generalize from bootstrap
+      def iconify(icon_name)
+        "glyphicon glyphicon-#{icon_name.to_s.gsub('_', '-')}"
+      end
+
+    end
+
+  end
+end
+

data/csr/dom/builder.rb

@@ -0,0 +1,7 @@
+require 'dom/builder/base'
+require 'dom/builder/helpers'
+
+if $dom
+  fail "##{__FILE__}[#{__LINE__}] : $dom already defined as '#{$dom}'"
+end
+$dom = CSR::DOM::Builder