fron 0.2.0rc1 → 1.0.0rc1

data/spec/dom/element_spec.rb

@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 describe DOM::Element do
-  subject  { described_class.new 'div' }
+  subject  { described_class.new 'div[tabindex=0]' }
   let(:el) { subject.instance_variable_get('@el') }
   let(:a)  { described_class.new 'a' }
   let(:a2) { described_class.new 'a' }
@@ -54,6 +54,17 @@ describe DOM::Element do
     end
   end
 
+  describe '#tabindex' do
+    it 'should return tabindex' do
+      subject.tabindex.should eq '0'
+    end
+
+    it 'should set tabindex' do
+      subject.tabindex = 1
+      subject[:tabindex].should eq '1'
+    end
+  end
+
   describe '#disabled' do
     it 'should return the disabled state of the element' do
       `#{el}.disabled = true`

data/spec/dom/modules/classlist_spec.rb

@@ -2,17 +2,16 @@ require 'spec_helper'
 
 describe DOM::ClassList do
   let(:element) { DOM::Element.new 'div' }
-  subject { element['class'] }
 
   describe '#add_class' do
     it 'should add a class' do
       element.add_class 'test'
-      subject.should eq 'test'
+      element['class'].should eq 'test'
     end
 
     it 'should add multiple classes' do
       element.add_class 'test', 'help'
-      subject.should eq 'test help'
+      element['class'].should eq 'test help'
     end
   end
 
@@ -23,12 +22,12 @@ describe DOM::ClassList do
 
     it 'should add a class' do
       element.remove_class 'test'
-      subject.should eq 'help'
+      element['class'].should eq 'help'
     end
 
     it 'should add multiple classes' do
       element.remove_class 'test', 'help'
-      subject.should eq nil
+      element['class'].should eq nil
     end
   end
 
@@ -50,22 +49,22 @@ describe DOM::ClassList do
 
     it 'should remove class if the element has the given class' do
       element.toggle_class 'test'
-      subject.should eq nil
+      element['class'].should eq nil
     end
 
     it 'should add class if the element does not have the given class' do
       element.toggle_class 'help'
-      subject.should eq 'test help'
+      element['class'].should eq 'test help'
     end
 
     it 'should add class if the second argument is true' do
       element.toggle_class 'help', true
-      subject.should eq 'test help'
+      element['class'].should eq 'test help'
     end
 
     it 'should remove class if the second argument if false' do
       element.toggle_class 'test', false
-      subject.should eq nil
+      element['class'].should eq nil
     end
   end
 end

data/spec/dom/modules/dimensions_spec.rb

@@ -81,7 +81,8 @@ describe DOM::Dimensions do
     end
 
     context 'not in viewport' do
-      height, width = `window.innerHeight`, `window.innerWidth`
+      height = `window.innerHeight`
+      width = `window.innerWidth`
       [
         [-80, -100],     # Top Left
         [-80, 0],        # Top

data/spec/dom/modules/events_spec.rb

@@ -2,35 +2,38 @@ require 'spec_helper'
 
 describe DOM::Events do
   let(:element) { DOM::Element.new 'div' }
-  subject { element.instance_variable_get '@listeners' }
 
   describe '#on' do
-    async 'should register for event' do
+    it 'should register for event' do
+      promise = Promise.new
       listener = element.on 'click' do
-        run_async do
-          subject.should_not be nil
-          subject[:click].should_not be nil
-          subject[:click].length.should eq 1
-          subject[:click].include?(listener).should eq true
-          element.off 'click'
-        end
+        listeners = element.instance_variable_get '@listeners'
+        listeners.should_not be nil
+        listeners[:click].should_not be nil
+        listeners[:click].length.should eq 1
+        listeners[:click].include?(listener).should eq true
+        promise.resolve
+        element.off 'click'
       end
       element.trigger 'click'
+      promise
     end
   end
 
   describe '#on!' do
-    async 'should register for event' do
+    it 'should register for event' do
+      promise = Promise.new
       listener = element.on! 'click' do
-        run_async do
-          subject.should_not be nil
-          subject[:click].should_not be nil
-          subject[:click].length.should eq 1
-          subject[:click].include?(listener).should eq true
-          element.off 'click'
-        end
+        listeners = element.instance_variable_get '@listeners'
+        listeners.should_not be nil
+        listeners[:click].should_not be_nil
+        listeners[:click].length.should eq 1
+        listeners[:click].include?(listener).should eq true
+        promise.resolve
+        element.off 'click'
       end
       element.trigger 'click'
+      promise
     end
   end
 
@@ -38,50 +41,58 @@ describe DOM::Events do
     context 'two arguments' do
       it 'should unregister for event' do
         listener = element.on 'click' do end
-        subject[:click].include?(listener).should eq true
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq true
         element.off 'click', listener
-        subject[:click].include?(listener).should eq false
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq false
       end
     end
 
     context 'one argument' do
       it 'should unregister all events for type' do
         listener = element.on 'click' do end
-        subject[:click].include?(listener).should eq true
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq true
         element.off 'click'
-        subject[:click].include?(listener).should eq false
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq false
       end
     end
 
     context 'no argument' do
       it 'should unregister all events' do
         listener = element.on 'click' do end
-        subject[:click].include?(listener).should eq true
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq true
         element.off
-        subject[:click].include?(listener).should eq false
+        element.instance_variable_get('@listeners')[:click]
+          .include?(listener).should eq false
       end
     end
   end
 
   describe '#delegate' do
-    async 'should call the listener if the element matches the selector' do
+    it 'should call the listener if the element matches the selector' do
+      promise = Promise.new
       element.delegate 'click', 'div' do
-        run_async do
-          element.off 'click'
-        end
+        promise.resolve
+        element.off 'click'
       end
       element.trigger 'click'
+      promise
     end
   end
 
   describe '#trigger' do
-    async 'should trigger the event' do
+    it 'should trigger the event' do
+      promise = Promise.new
       element.on 'click' do
-        run_async do
-          element.off 'click'
-        end
+        promise.resolve
+        element.off 'click'
       end
       element.trigger 'click'
+      promise
     end
   end
 end

data/spec/dom/style_spec.rb

@@ -23,7 +23,7 @@ describe DOM::Style do
     end
   end
 
-  describe '[]'do
+  describe '[]' do
     it 'should return with the value of the given style' do
       `#{el}.style.display = 'block'`
       subject.style['display'].should eq 'block'

data/spec/spec_helper.rb

@@ -1,4 +1,3 @@
-require 'rspec_coverage_helper'
 require 'js/mocks'
 require 'fron'
 require 'fron/event_mock'

data/spec/utils/drag_spec.rb

@@ -2,8 +2,8 @@ require 'spec_helper'
 require 'fron/utils/drag'
 
 describe Fron::Drag do
-  let(:event)    { double(pageX: 0, pageY: 0, preventDefult: true, stop: true, target: true) }
-  let(:base)     { DOM::Element.new 'div'   }
+  let(:event)    { double(page_x: 0, page_y: 0, preventDefult: true, stop: true, target: true) }
+  let(:base)     { DOM::Element.new 'div' }
   let(:position) { double }
 
   subject        { described_class.new base }

data/spec/utils/keyboard_spec.rb

@@ -7,7 +7,10 @@ class TestKeyboard < Fron::Keyboard
 end
 
 describe TestKeyboard do
-  let(:event) { DOM::Event.new `{ctrlKey: true, altKey: true, shiftKey: true, keyCode: 38}` }
+  let(:event) {
+    DOM::Event.new `{ ctrlKey: true, altKey: true, shiftKey: true,
+                      metaKey: false, keyCode: 38 }`
+  }
 
   describe Fron::Keyboard do
     it 'should work on its own' do

data/website/application.rb

@@ -0,0 +1,4 @@
+require 'setup'
+
+DOM::Document.body << Main.new
+DOM::Window.trigger :popstate

data/website/config.ru

@@ -0,0 +1,30 @@
+require 'fron'
+require 'active_support/core_ext/string/inflections'
+
+# Proxy
+class Proxy
+  def initialize(app)
+    @app = app
+  end
+
+  def call(env)
+    env['PATH_INFO'] = '/' if !(env['PATH_INFO'] =~ /\..*$/) && !(env['PATH_INFO'] =~ /^\/(pages)/)
+    @app.call env
+  end
+end
+
+use Proxy
+
+module Helpers
+  def example(klass)
+    source = File.read(File.join(File.dirname(__FILE__), "examples/#{klass.underscore}.rb"))
+    "<example class='#{klass}'></example>\n```ruby\n#{source}\n```"
+  end
+end
+
+run Opal::Server.new { |s|
+  s.append_path 'website'
+  s.source_map = false
+  s.main = 'application'
+  s.sprockets.context_class.send(:include, Helpers)
+}

data/website/examples/content_editable.rb

@@ -0,0 +1,29 @@
+# We start a by extending from Fron::Component
+class ContentEditable < Fron::Component
+  # Set the tag
+  tag 'content-editable'
+
+  # When the element is blurred call the change method
+  on :blur, :change
+
+  # Set styles
+  style background: '#F9F9F9',
+        borderRadius: 5.px,
+        display: :block,
+        padding: 10.px
+
+  # Initializes the compontent:
+  # * Sets the contenteditable attribute to true
+  # * Sets the spellcheck to false
+  def initialize
+    super
+    self.contenteditable = true
+    self.spellcheck = false
+    self.text = 'Some default content...'
+  end
+
+  # Run on the blur event
+  def change
+    logger.info "The content is now: #{text}"
+  end
+end

data/website/examples/converter.rb

@@ -0,0 +1,49 @@
+# Celsius to Fahrenheit Converter
+class Converter < Fron::Component
+  # Celsius part
+  component :celcius, :div do
+    component :label, 'label', text: 'Celsius: '
+    component :input, 'input', value: 0
+  end
+
+  # Fahrenheit part
+  component :fahrenheit, :div do
+    component :label, 'label', text: 'Fahrenheit:'
+    component :result, 'span', text: '32'
+  end
+
+  # Button
+  component :button, 'button', text: 'Convert'
+
+  # We will convert on click of the button
+  on :click, 'button', :convert
+  # or on change of the input
+  on :change, :convert
+
+  # Styling
+  style background: '#F9F9F9',
+        alignItems: 'flex-end',
+        display: :flex,
+        padding: 10.px,
+        label: { display: :block },
+        div: { flexDirection: :column,
+               marginRight: 5.px,
+               display: :flex },
+        button: { position: :relative,
+                  height: 30.px,
+                  top: -1.px },
+        'input, span' => {
+          display: 'inline-block',
+          border: '1px solid #ddd',
+          lineHeight: 20.px,
+          fontSize: 14.px,
+          padding: 5.px,
+          height: 30.px,
+          width: 200.px
+        }
+
+  # Converting Logic
+  def convert
+    @fahrenheit.result.text = @celcius.input.value.to_i * 9 / 5 + 32
+  end
+end

data/website/examples/icon_button.rb

@@ -0,0 +1,20 @@
+# Extend MyButton
+class IconButton < MyButton
+  extend Forwardable
+
+  # Set the tag
+  tag 'icon-button'
+
+  # Add child components
+  component :icon, :icon
+  component :span, :span
+
+  # Delegate methods
+  def_delegators :span, :text=, :text
+
+  # Style the icon, everything else is inherited
+  style 'icon:before' => { fontFamily: 'FontAwesome',
+                           display: 'inline-block',
+                           marginRight: 10.px,
+                           content: '"\f0f4"' }
+end

data/website/examples/image_paragraph.rb

@@ -0,0 +1,33 @@
+# Paragraph component with an image.
+class ImageParagraph < Fron::Component
+  tag 'image-paragraph'
+
+  # Define components
+  component :image,   :img
+  component :content, :content
+
+  # Set Styling
+  style border: '1px solid #EEE',
+        display: :block,
+        padding: 20.px,
+        img: { float: :left,
+               marginRight: 20.px },
+        '&:after' => { display: :block,
+                       content: '""',
+                       clear: :both }
+
+  # Set data
+  def initialize
+    super
+    @image[:src] = 'http://placehold.it/180/f9f9f9/666'
+    @content.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing
+                     elit. Vivamus molestie placerat sem a ultrices.
+                     Cras ultricies enim luctus enim aliquam convallis.
+                     Sed et felis volutpat, suscipit urna et, malesuada
+                     tellus. Nunc et tellus fringilla, tristique eros
+                     et, aliquam nisi. Quisque faucibus porta odio non
+                     mollis. Donec volutpat convallis blandit. Donec
+                     non nisl elit. Quisque orci neque, consequat
+                     interdum elit eu, auctor elementum magna.'
+  end
+end

data/website/examples/my_blue_box.rb

@@ -0,0 +1,9 @@
+# My sweet red box is gone....NOOOOOOOO!!!
+class MyBlueBox < MyBox
+  tag 'my-blue-box'
+
+  # This is only needed if no style DSL is used
+  ensure_styles!
+
+  style background: :blue
+end