flms 0.0.3 → 0.1.0

data/app/view_objects/flms/layer_view_object.rb

@@ -0,0 +1,72 @@
+module Flms
+
+  # Create DOM for this layer, including all the necessary 'data-*' attributes to
+  # animate it as desired  via skrollr.
+  class LayerViewObject
+
+    def initialize(layer)
+      @layer = layer
+    end
+
+    def view_partial_name
+      "flms/elements/#{ @layer.class.name.demodulize.underscore }"
+    end
+
+    def self.link_path_for(block, layer)
+      link_path = Flms::Engine.routes.url_helpers.edit_block_image_layer_path(block, layer) if layer.is_a? Flms::ImageLayer
+      link_path = Flms::Engine.routes.url_helpers.edit_block_text_layer_path(block, layer) if layer.is_a? Flms::TextLayer
+      link_path = Flms::Engine.routes.url_helpers.edit_block_paragraph_layer_path(block, layer) if layer.is_a? Flms::ParagraphLayer
+      link_path = Flms::Engine.routes.url_helpers.edit_block_embed_layer_path(block, layer) if layer.is_a? Flms::EmbedLayer
+      link_path = Flms::Engine.routes.url_helpers.edit_block_animation_layer_path(block, layer) if layer.is_a? Flms::AnimationLayer
+      link_path
+    end
+
+    # Generate a hash of data to be provided to skrollr that describes the keyframe animation for this layer
+    def keyframe_data_hash(scroll_offset = 0)
+      data = { }
+      data['data-anchor-target'] = '#skrollr-body'
+      data[:style] = "z-index: #{ @layer.z_index };"
+
+      initial_pos = calculate_scroll_position(:initial, scroll_offset)
+      target_start_pos = calculate_scroll_position(:target_start, scroll_offset)
+      target_end_pos = calculate_scroll_position(:target_end, scroll_offset)
+      final_pos = calculate_scroll_position(:final, scroll_offset)
+
+      start_view_object = Flms::KeyframeViewObject.new(@layer.start_state_keyframe)
+      target_view_object = Flms::KeyframeViewObject.new(@layer.target_state_keyframe)
+      end_view_object = Flms::KeyframeViewObject.new(@layer.end_state_keyframe)
+
+      data['data-0'] = 'display:none;'
+      data["data-#{initial_pos}"] = 'display:block; ' + start_view_object.styles(style_data_for_keyframes)
+      data["data-#{target_start_pos}"] = target_view_object.styles(style_data_for_keyframes)
+      data["data-#{target_end_pos}"] = target_view_object.styles(style_data_for_keyframes)
+      data["data-#{final_pos}"] = end_view_object.styles(style_data_for_keyframes)
+      data["data-#{final_pos + 1}"] = 'display:none; opacity: 0;' if @layer.dom_remove
+
+      data
+    end
+
+    protected
+
+    def calculate_scroll_position(state, offset)
+      case state
+        when :initial
+          @layer.start_state_keyframe.scroll_start + offset
+        when :target_start
+          @layer.target_state_keyframe.scroll_start + offset
+        when :target_end
+          @layer.end_state_keyframe.scroll_start + offset
+        when :final
+          @layer.end_state_keyframe.scroll_start + @layer.end_state_keyframe.scroll_duration + offset
+        else
+          raise 'unknown state!'
+      end
+    end
+
+    def style_data_for_keyframes
+      { width: @layer.width,
+        height: @layer.height }
+    end
+
+  end
+end

data/app/view_objects/flms/paragraph_layer_view_object.rb

@@ -0,0 +1,19 @@
+module Flms
+  class ParagraphLayerViewObject < Flms::LayerViewObject
+
+    def attributes(scroll_offset = 0)
+      attributes = keyframe_data_hash(scroll_offset)
+      attributes[:id] = @layer.name
+      attributes[:style] += "color: \##{ @layer.color };"
+      attributes
+    end
+
+  protected
+
+    def style_data_for_keyframes
+      { width: @layer.width,
+        free_height: true }
+    end
+
+  end
+end

data/app/view_objects/flms/text_layer_view_object.rb

@@ -0,0 +1,30 @@
+module Flms
+  class TextLayerViewObject < Flms::LayerViewObject
+
+    def attributes(scroll_offset = 0)
+      attributes = keyframe_data_hash(scroll_offset)
+      attributes[:id] = @layer.name
+      attributes[:style] += "color: \##{ @layer.color };"
+      keyframe_font_sizes(scroll_offset).each { |attr, style| attributes[attr] += style }
+      attributes
+    end
+
+    # Generate font sizes based on scale factors in keyframe
+    def keyframe_font_sizes(scroll_offset = 0)
+      data = { }
+
+      initial_pos = calculate_scroll_position(:initial, scroll_offset)
+      target_start_pos = calculate_scroll_position(:target_start, scroll_offset)
+      target_end_pos = calculate_scroll_position(:target_end, scroll_offset)
+      final_pos = calculate_scroll_position(:final, scroll_offset)
+
+      data["data-#{initial_pos}"] = " font-size: #{ @layer.font_size * @layer.start_state_keyframe.scale }em;"
+      data["data-#{target_start_pos}"] = " font-size: #{ @layer.font_size * @layer.target_state_keyframe.scale }em;"
+      data["data-#{target_end_pos}"] = " font-size: #{ @layer.font_size * @layer.target_state_keyframe.scale }em;"
+      data["data-#{final_pos}"] = " font-size: #{ @layer.font_size * @layer.end_state_keyframe.scale }em;"
+
+      data
+    end
+
+  end
+end

data/app/views/flms/animation_layers/_form.html.haml

@@ -0,0 +1,56 @@
+= form_for [@block, @layer], html: {class: 'form-horizontal'} do |f|
+  %fieldset
+    %legend= caption
+
+    - if @layer.errors.any?
+      #error_explanation
+        %h2= "#{pluralize(@layer.errors.count, "error")} prohibited this layer from being saved:"
+        %ul
+          - @layer.errors.full_messages.each do |msg|
+            %li= msg
+
+  = render partial: 'flms/layers/common_fields', locals: { form_block: f }
+
+  %fieldset
+    %legend
+      Animation Image
+    .control-group
+      = f.label :image, class: 'control-label'
+      .controls
+        = f.file_field :image
+        = f.hidden_field :image_cache
+        - if @layer.image?
+          .image-preview
+            = image_tag @layer.image.small.url
+            %br
+            = @layer.uploaded_filename
+
+    .control-group
+      = f.label :frame_rate, class: 'control-label'
+      .controls
+        .input-append
+          = f.text_field :frame_rate
+          %span.add-on pixels / frame
+
+    .control-group
+      = f.label :frame_count, class: 'control-label'
+      .controls
+        .input-append
+          = f.text_field :frame_count
+          %span.add-on frames
+
+    .control-group
+      = f.label :image_display_mode, class: 'control-label'
+      .controls
+        .input-append
+          = f.select :image_display_mode, Flms::Layer::IMAGE_DISPLAY_MODES
+
+
+  = render partial: 'flms/layers/keyframe_fields', locals: { form_block: f }
+
+  .control-group
+    .controls
+      .actions
+        = f.submit class: 'btn btn-primary'
+             
+        = link_to 'Cancel', edit_block_path(@block)

data/app/views/flms/animation_layers/edit.html.haml

@@ -0,0 +1 @@
+= render partial: 'form', locals: {caption: 'Update animation layer'}

data/app/views/flms/animation_layers/new.html.haml

@@ -0,0 +1 @@
+= render partial: 'form', locals: {caption: 'Create a new animation layer'}

data/app/views/flms/blocks/_form.html.haml

@@ -1,25 +1,39 @@
-= form_for [@page, @block], html: {class: 'form-horizontal'} do |f|
+= form_for @block, html: {class: 'form-horizontal'} do |f|
   %fieldset
     %legend= caption
 
-  - if @block.errors.any?
-    #error_explanation
-      %h2= "#{pluralize(@block.errors.count, "error")} prohibited this block from being saved:"
-      %ul
-        - @block.errors.full_messages.each do |msg|
-          %li= msg
+    - if @block.errors.any?
+      #error_explanation
+        %h2= "#{pluralize(@block.errors.count, "error")} prohibited this block from being saved:"
+        %ul
+          - @block.errors.full_messages.each do |msg|
+            %li= msg
 
-  .control-group
-    = f.label :name, class: 'control-label'
-    .controls
-      = f.text_field :name, autofocus: true
-      %span.help-inline The internal name of this block.
+    .control-group
+      = f.label :name, class: 'control-label'
+      .controls
+        = f.text_field :name, autofocus: true
+        %span.help-inline The internal name of this block. (Must be a valid CSS name.)
 
-  .control-group
-    .controls
-      .actions
-        = f.submit class: 'btn btn-primary'
-             
-        = link_to 'Back', pages_path
+    .control-group
+      = f.label :title, class: 'control-label'
+      .controls
+        = f.text_field :title
+        %span.help-inline The 'pretty' title of the block used externally.
 
+    .control-group
+      = f.label :thumbnail, class: 'control-label'
+      .controls
+        = f.file_field :thumbnail
+        - if @block.thumbnail?
+          .image-preview
+            = image_tag @block.thumbnail.small.url
+            %br
+            = @block.thumbnail_uploaded_filename
 
+    .control-group
+      .controls
+        .actions
+          = f.submit class: 'btn btn-primary'
+               
+          = link_to 'Back', blocks_path(@page)

data/app/views/flms/blocks/edit.html.haml

@@ -1,3 +1,62 @@
-.login.container
-  = render partial: 'form', locals: {caption: 'Update block'}
+= render partial: 'form', locals: {caption: 'Update block'}
 
+%fieldset
+  %legend Layers in block '#{@block.name}'
+
+  %table.table.table-striped.table-hover
+    %thead
+      %tr
+        %th Name
+        %th Thumbnail
+        %th Starts
+        %th Ends
+        %th Z-Index
+        %th Actions
+
+    %tbody.layer_list
+      - @block.layers.ordered_by_scroll_start.each do |layer|
+        %tr.ui-state-default{'data-layer-id' => layer.id}
+
+          %td.name
+            = "#{ layer.name } #{ layer.active ? '' : '(disabled)' }"
+
+          %td.thumb
+            = image_tag layer.image.thumb.url if layer.image?
+
+          %td.starts
+            = layer.scroll_start
+
+          %td.ends
+            = layer.scroll_end
+
+          %td.z-index
+            = layer.z_index
+
+          %td.action
+            = link_to Flms::LayerViewObject.link_path_for(@block, layer), class: 'btn edit', id: "edit-layer-#{ layer.id }", title: 'edit' do
+              %i.icon-pencil
+
+            = link_to block_layer_path(@block, layer), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn delete', id: "delete-layer-#{ layer.id }", title: 'delete' do
+              %i.icon-trash
+
+  %br
+
+  = link_to new_block_image_layer_path(@block), class: 'btn btn-success' do
+    %i.icon-plus.icon-white
+    Add Image Layer
+
+  = link_to new_block_text_layer_path(@block), class: 'btn btn-success' do
+    %i.icon-plus.icon-white
+    Add Text Layer
+
+  = link_to new_block_paragraph_layer_path(@block), class: 'btn btn-success' do
+    %i.icon-plus.icon-white
+    Add Paragraph Layer
+
+  = link_to new_block_embed_layer_path(@block), class: 'btn btn-success' do
+    %i.icon-plus.icon-white
+    Add Embed Layer
+
+  = link_to new_block_animation_layer_path(@block), class: 'btn btn-success' do
+    %i.icon-plus.icon-white
+    Add Animation Layer

data/app/views/flms/blocks/index.html.haml

@@ -1,46 +1,37 @@
-- content_for :js do
-  :javascript
-    $(function() {
-      new BlocksIndexPage();
-    });
-
 %br
-%h4 Blocks on page '#{@page.url}'
+%h4 Blocks
 
 %table.table.table-striped.table-hover
   %thead
     %tr
-      %th Active
+      %th Thumbnail
       %th Name
       %th Actions
 
   %tbody.block_list
-    - @page.ordered_blocks_pages.each do |blocks_page|
-      - block = blocks_page.block
+    - @blocks.each do |block|
       %tr.ui-state-default{'data-block-id' => block.id}
 
-        -# "Active" switch.
-        %td.action
-          .switch.switch-mini
-            - if blocks_page.active
-              %input{id: "active_#{block.id}", type: 'checkbox', checked: 'checked'}
-            - else
-              %input{id: "active_#{block.id}", type: 'checkbox'}
+        %th.thumb
+          - if block.thumbnail?
+            = image_tag block.thumbnail.thumb.url
 
         %td.name
-          = link_to block.name, page_block_path(@page, block)
+          = block.name
 
         %td.action
-          = link_to edit_page_block_path(@page, block), class: 'btn', title: 'edit' do
+          = link_to edit_block_path(block), class: 'btn', id: "edit-block-#{block.id}", title: 'edit' do
             %i.icon-pencil
 
-        %td.action
-          = link_to page_block_path(@page, block), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn', title: 'delete' do
+          = link_to block_path(block), class: 'btn', id: "show-block-#{block.id}", title: 'preview' do
+            %i.icon-eye-open
+
+          = link_to block_path(block), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', id: "delete-block-#{block.id}", title: 'delete' do
             %i.icon-trash
 
 %br
 
-= link_to new_page_block_path(@page), class: 'btn btn-success' do
+= link_to new_block_path, class: 'btn btn-success' do
   %i.icon-plus.icon-white
   New Block
 

data/app/views/flms/blocks/show.html.haml

@@ -1,35 +1,12 @@
-
-
-
-%h4 Layers in block '#{@block.name}'
-
-%table.table.table-striped.table-hover
-  %thead
-    %tr
-      %th Name
-      %th Actions
-
-  %tbody.layer_list
-    - @block.layers.each do |layer|
-      %tr.ui-state-default{'data-layer-id' => layer.id}
-
-        %td.name
-          = layer.name
-          -# = image_tag layer.image_url if layer.image?
-
-        %td.action
-          = link_to edit_page_block_image_layer_path(@page, @block, layer), class: 'btn edit', title: 'edit' do
-            %i.icon-pencil
-
-          = link_to page_block_layer_path(@page, @block, layer), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn delete', title: 'delete' do
-            %i.icon-trash
-
-%br
-
-= link_to new_page_block_image_layer_path(@page, @block), class: 'btn btn-success' do
-  %i.icon-plus.icon-white
-  Add Image Layer
-
-%button#save.btn.btn-primary
-  %i.icon-hdd.icon-white
-  Save
+- content_for :title do
+  = "#{ Flms.application_name } | #{ @block.name }"
+
+#skrollr-body
+  #page
+    = render partial: 'flms/elements/block', locals: { block: @block, scroll_offset: 0 }
+
+= javascript_include_tag 'application.js'
+:javascript
+  $(document).ready(function(){
+    skrollr.init()
+  });

data/app/views/flms/elements/_animation_layer.html.haml

@@ -0,0 +1,2 @@
+.animation-layer{ layer.view_object.attributes(scroll_offset) }
+  .animation-frames{ layer.view_object.frames_attributes(scroll_offset) }

data/app/views/flms/elements/_block.html.haml

@@ -0,0 +1,3 @@
+.block{ id: block.name }
+  - block.layers.is_active.ordered_by_scroll_start.each do |layer|
+    = render partial: layer.view_object.view_partial_name, locals: { layer: layer, scroll_offset: scroll_offset }

data/app/views/flms/elements/_embed_layer.html.haml

@@ -0,0 +1,2 @@
+.embed-layer{ layer.view_object.attributes(scroll_offset) }
+  != layer.view_object.embed_code

data/app/views/flms/elements/_image_layer.html.haml

@@ -0,0 +1,2 @@
+.image-layer{ layer.view_object.attributes(scroll_offset) }
+  .image-div{ layer.view_object.inner_attributes }

data/app/views/flms/elements/_page.html.haml

@@ -0,0 +1,11 @@
+#skrollr-body
+  #page
+    - page.blocks_to_display_with_offsets.each do |item|
+      = render partial: 'flms/elements/block', locals: { block: item[:block], scroll_offset: item[:scroll_offset] }
+
+  #blocknav
+    %ul
+      - page.blocks_to_display_with_offsets.each do |item|
+        %li{ id: item[:block].name, style: block_thumbnail_div_background_style(item[:block]) }
+          .name{ id: item[:block].name }= item[:block].title
+          %a{ href: "\##{ item[:block].name }", id: item[:block].name, data: { scrollpos: item[:scroll_offset] } }