inkcite 1.14.0 → 1.15.0

data/lib/inkcite/renderer/button.rb

@@ -148,7 +148,7 @@ module Inkcite
           html << %Q( mobile="fill"}\n)
           html << "{td align=center"
           html << " height=#{cfg.height} valign=middle" if cfg.height > 0
-          html << " font=\"#{cfg.font}\""
+          html << %Q( font="#{cfg.font}" color="none")
           html << " line-height=#{cfg.line_height}" unless cfg.line_height.blank?
           html << %Q( font-size="#{cfg.font_size}") if cfg.font_size > 0
           html << %Q( font-weight="#{cfg.font_weight}") unless cfg.font_weight.blank?

data/lib/inkcite/renderer/carousel.rb

@@ -0,0 +1,245 @@
+module Inkcite
+  module Renderer
+
+    # Interactive image carousel based on FreshInbox's technique
+    # http://freshinbox.com/resources/tools/carousel/
+    #
+    # Usage:
+    #
+    # {carousel width=450 height=280 href="..."}
+    # 	{carousel-img id="..." src="..."}
+    # 	{carousel-img id="..." src="..." href="..."}
+    # 	{carousel-img id="..." src="..."}
+    # {/carousel}
+    #
+    class Carousel < ContainerBase
+
+      class Image < ImageBase
+
+        def render tag, opt, ctx
+
+          # Get a reference to the tag stack that contains these frames
+          tag_stack = ctx.tag_stack :carousel
+
+          # Get the opts held by the parent carousel.
+          carousel_opt = tag_stack.opts
+
+          #opt[:_src] = image_url(opt[:src], opt, ctx, false, false)
+
+          # Initialize the frames array
+          carousel_opt[:frames] << opt
+
+          nil
+        end
+
+      end
+
+      def render tag, opt, ctx
+
+        html = []
+
+        # Get a reference to the tag stack
+        tag_stack = ctx.tag_stack :carousel
+
+        # All the rendering heavylifting is done when the closing tag is encountered
+        # meaning we've indexed each of the carousel-img entries between it and the
+        # opening tag.
+        if tag == '/carousel'
+
+          # Remove the previously opened opts from the tag stack.
+          open_opt = tag_stack.pop
+
+          # Unique ID of this carousel to uniquely identify the classes
+          uuid = open_opt[:uuid]
+
+          # Link ID prefix
+          carousel_id = open_opt[:id]
+
+          # Width of the primary image
+          width = open_opt[:width].to_i
+          height = open_opt[:height].to_i
+          ctx.error('Missing carousel dimensions', { :id => carousel_id, :width => width, :height => height }) if height <= 0 || width <= 0
+
+          # Grab the array of frames and count the total number of frames.
+          frames = open_opt[:frames]
+          total_frames = frames.count
+
+          # This {table} Helper wraps the entire carousel.
+          table = Element.new('table', :width => width, :class => 'crsl', :mobile => :fill)
+
+          # Determine if a background color for the entire carousel has been specified
+          # using either bgcolor or background-color.  If so, pass it on to the table Helper.
+          bgcolor = detect_bgcolor(open_opt)
+          table[:bgcolor] = quote(bgcolor) unless none?(bgcolor)
+
+          html << table.to_helper
+
+          td = Element.new('td')
+          mix_font td, open_opt, ctx
+          html << td.to_s
+
+          html << %q({not-outlook})
+          html << %q(<input type=radio class="crsl-radio" style="display:none !important;" checked>)
+          html << %q({/not-outlook})
+
+          # Div to hold the carousel contents.
+          html << %q({div})
+
+          html << %q({not-outlook})
+          html << Element.new('div', :class => %Q("crsl-wrap crsl-#{uuid}"), :style => {
+                  :width => pct(100), :height => px(0), MAX_HEIGHT => px(0), :overflow => :hidden, TEXT_ALIGN => :center
+              }).to_s
+
+          # Array of hidden radio buttons that manage which thumbnail is selected.
+          total_frames.times do |n|
+            box_index = total_frames - n
+
+            html << %q(<label>)
+            html << %Q(<input type="radio" name="crsl#{uuid}" class="crsl-radio-#{box_index}" style="display:none !important;"#{' checked' if box_index == 1}>)
+            html << %q(<span>)
+
+          end
+
+          total_frames.times do |n|
+            box_index = n + 1
+            frame_opt = frames[n]
+            frame_id = frame_opt[:id] || "#{carousel_id}-#{box_index}"
+
+            href = frame_opt[:href] || open_opt[:href]
+            src = frame_opt[:src]
+
+            caption = frame_opt[:caption]
+            alt = frame_opt[:alt] || caption
+
+            html << %Q(<div class="crsl-content-#{box_index} crsl-content">)
+            html << %Q({a id="#{frame_id}" href="#{href}"}) unless href.blank?
+            html << %Q({img src="#{src}" width=#{width} height=#{height} alt="#{alt}" max-height=0 mobile="fill"})
+            html << %q({/a}) unless href.blank?
+
+            unless caption.blank?
+              caption_div = Element.new('div', :class => 'crsl-caption', :style => { :padding => '5px 0 10px' })
+              mix_font caption_div, open_opt, ctx
+              html << caption_div.to_s
+              html << caption
+              html << '</div>'
+            end
+
+            html << %q(</div>)
+
+          end
+
+          thumbnail_width = 50
+          thumnail_height = (thumbnail_width / width) * height.round(0)
+
+          total_frames.times do |n|
+            box_index = total_frames - n
+            frame_opt = frames[n]
+
+            src = frame_opt[:src]
+
+            html << %q(<span class="crsl-thumb" style="display:none;">)
+            html << %Q({img src="#{src}" width=#{width} height=#{height} max-height=0})
+            html << %q(</span>)
+            html << %q(</span>)
+            html << %q(</label>)
+
+          end
+
+          html << %q(</div>)
+          html << %q({/not-outlook})
+
+          # Fallback
+          fallback_frame_opt = frames[0]
+          fallback_href = fallback_frame_opt[:href] || open_opt[:href]
+          fallback_src = open_opt[OUTLOOK_SRC] || fallback_frame_opt[:src]
+
+          html << %q(<div class="fallback"><div class="crsl-content">)
+          html << %Q({a id="#{carousel_id}" href="#{fallback_href}"}{img src="#{fallback_src}" width=#{width} height=#{height} alt="#{fallback_frame_opt[:caption]}" mobile="fill"}{/a})
+          html << %q(</div></div>)
+
+          html << '{/div}'
+          html << '</td>'
+          html << '{/table}'
+
+          styles = []
+
+          if uuid == 1
+
+            styles << Inkcite::Renderer::Style.new('input', ctx, { :display => :none })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-radio:checked + * .crsl-wrap', ctx, { :'height' => 'auto !important', MAX_HEIGHT => 'none !important;', :'line-height' => 0 })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap span', ctx, { :'font-size' => 0, :'line-height' => 0 })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-radio:checked + * .crsl-wrap .crsl-content', ctx, { :'display' => 'none', MAX_HEIGHT => px(0), :'overflow' => 'hidden' })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap .crsl-thumb', ctx, { :cursor => 'pointer', :display => 'inline-block !important', :width => '17.5%', :margin => '1% 0.61%', :border => "2px solid #{DEFAULT_BORDER_COLOR}" })
+
+            # hide for thunderbird as it doesn't support checkboxes
+            styles << Inkcite::Renderer::Style.new('.moz-text-html .crsl-thumb', ctx, { :display => 'none !important' })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap .crsl-thumb:hover', ctx, { :border => "2px solid #{DEFAULT_HOVER_COLOR}" })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap input:checked + span > span', ctx, { BORDER_COLOR => DEFAULT_HOVER_COLOR })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap .crsl-thumb img', ctx, { :width => '100%', :height => 'auto' })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-wrap img', ctx, { MAX_HEIGHT => 'none !important' })
+
+            styles << Inkcite::Renderer::Style.new('.crsl-radio:checked + * .fallback', ctx, { :display => 'none !important', MAX_HEIGHT => px(0), :height => px(0), :overflow => 'hidden' })
+
+          end
+
+          # Configurable border color
+          border_color = open_opt[BORDER_COLOR]
+          unless border_color.blank?
+            border_color = hex(border_color)
+            styles << Inkcite::Renderer::Style.new(".crsl-#{uuid} .crsl-thumb", ctx, { BORDER_COLOR => border_color }) if DEFAULT_BORDER_COLOR != border_color
+          end
+
+          # Configurable hover color
+          hover_color = open_opt[:'hover-color']
+          unless hover_color.blank?
+            hover_color = hex(hover_color)
+            if DEFAULT_HOVER_COLOR != hover_color
+              styles << Inkcite::Renderer::Style.new(".crsl-#{uuid} input:checked + span > span", ctx, { BORDER_COLOR => hover_color })
+              styles << Inkcite::Renderer::Style.new(".crsl-#{uuid} .crsl-thumb:hover", ctx, { BORDER_COLOR => hover_color })
+            end
+          end
+
+          frame_checked_style_name = total_frames.times.collect { |n| ".crsl-wrap .crsl-radio-#{n + 1}:checked + span .crsl-content-#{n + 1}" }.join(",\n")
+          styles << Inkcite::Renderer::Style.new(frame_checked_style_name, ctx, { :display => 'block !important', MAX_HEIGHT => 'none !important', :overflow => 'visible !important' })
+
+          ctx.styles << styles.join("\n") unless styles.blank?
+
+
+        else
+
+          # Get a unique ID for this carousel
+          opt[:uuid] = uuid = ctx.unique_id :carousel
+
+          # Confirm that a unique ID prefix has been provided by the designer or
+          # inherit one from the unique count.
+          opt[:id] = "crsl#{uuid}" if opt[:id].blank?
+
+          # Initialize the array of frames that will be collected and
+          # assembled when this carousel close tag is encountered.
+          opt[:frames] = []
+
+          # Push this carousel onto the stack as the parent of the
+          # frames that will be enclosed.
+          tag_stack << opt
+
+        end
+
+        html.join("\n")
+      end
+
+      private
+
+      DEFAULT_HOVER_COLOR = '#444444'
+      DEFAULT_BORDER_COLOR = '#bbbbbb'
+
+    end
+  end
+end

data/lib/inkcite/renderer/container_base.rb

@@ -37,6 +37,16 @@ module Inkcite
         element.to_s
       end
 
+      def mix_height element, opt, ctx
+
+        height = opt[:height].to_i
+        element.style[:height] = px(height) if height > 0
+
+        mobile_height = opt[MOBILE_HEIGHT].to_i
+        element.mobile_style[:height] = px(mobile_height) if mobile_height > 0
+
+      end
+
       def mix_width element, opt, ctx
 
         width = opt[:width]

data/lib/inkcite/renderer/div.rb

@@ -9,9 +9,7 @@ module Inkcite
         div = Element.new('div')
 
         mix_width div, opt, ctx
-
-        height = opt[:height].to_i
-        div.style[:height] = px(height) if height > 0
+        mix_height div, opt, ctx
 
         mix_all div, opt, ctx
       end

data/lib/inkcite/renderer/fireworks.rb

@@ -7,16 +7,12 @@ module Inkcite
 
       private
 
-      # Each firework will move this many positions during the
-      # entire animation.
-      TOTAL_POSITIONS = 5
-
       # The number of hue degrees to randomly alter the hue of each spark
       HUE_RANGE = :'hue-range'
 
       # Names of the attributes controlling min and max explosion size.
-      RADIUS_MIN = :'min-radius'
-      RADIUS_MAX = :'max-radius'
+      DIAMETER_MIN = :'min-diameter'
+      DIAMETER_MAX = :'max-diameter'
 
       # Attributes used for color generation
       SATURATION = 100
@@ -26,9 +22,13 @@ module Inkcite
 
         count = sfx.count
 
+        # Make sure the total number of stops (formerly TOTAL_POSITIONS)
+        # is specified as an integer.
+        sfx[:stops] = sfx[:stops].to_i
+
         # Total number of firework instances multiplied by the number
         # of positions each firework will cycle through.
-        position_count = TOTAL_POSITIONS * count
+        position_count = sfx[:stops] * count
         positions = sfx.equal_distribution(sfx.position_range, position_count)
 
         sfx[:x_positions] = positions
@@ -43,22 +43,30 @@ module Inkcite
       def create_explosion_animation n, hue, duration, delay, sfx
 
         # Calculate the radius size for this explosion
-        min_radius = sfx[RADIUS_MIN].to_i
-        max_radius = sfx[RADIUS_MAX].to_i
-        radius_range = (min_radius..max_radius)
-        radius = rand(radius_range).round(0)
-        half_radius = radius / 2.0
+        min_diameter = sfx[DIAMETER_MIN].to_i
+        max_diameter = sfx[DIAMETER_MAX].to_i
+        diameter_range = (min_diameter..max_diameter)
 
         hue_range = (sfx[HUE_RANGE] || 40).to_i
         hue_range_2x = hue_range * 2
 
         sparks = sfx[:sparks].to_i
 
+        angle = 0
+        angle_step = 360 / sparks.to_f
+
         box_shadow = sparks.times.collect do |n|
 
+          # Pick a random angle.
+          angle_radians = angle * PI_OVER_180
+          angle += angle_step
+
+          # Pick a random radius
+          radius = rand(diameter_range) / 2.0
+
           # Pick a random position for this spark to move to
-          x = (rand(radius) - half_radius).round(0)
-          y = (rand(radius) - half_radius).round(0)
+          x = (radius * Math::cos(angle_radians)).round(0)
+          y = (radius * Math::sin(angle_radians)).round(0)
 
           # Randomly pick a slightly different hue for this spark
           _hue = hue + hue_range - rand(hue_range_2x)
@@ -70,7 +78,7 @@ module Inkcite
         anim = Inkcite::Animation.new(sfx.animation_class_name(n, 'bang'), sfx.ctx)
         anim.duration = duration
         anim.delay = delay if delay > 0
-        anim.timing_function = Inkcite::Animation::EASE_OUT
+        anim.timing_function = Inkcite::Animation::EASE_OUT_QUART
         anim.add_keyframe 100, { BOX_SHADOW => box_shadow.join(', ') }
 
         sfx.animations << anim
@@ -78,11 +86,11 @@ module Inkcite
         anim
       end
 
-      def create_gravity_animation sfx
+      def create_decay_animation sfx
 
-        anim = Animation.new('gravity', sfx.ctx)
+        anim = Animation.new(DECAY_ANIMATION_NAME, sfx.ctx)
 
-        # All fireworks fade to zero opacity and size by the end of the gravity cycle.
+        # All fireworks fade to zero opacity and size by the end of the decay cycle.
         keyframe = anim.add_keyframe 100, { :opacity => 0, :width => 0, :height => 0 }
 
         # Check to see if gravity has been specified for the fireworks.  If so
@@ -96,9 +104,7 @@ module Inkcite
 
       def create_position_animation n, duration, delay, sfx
 
-        # This is the percentage amount of the total animation that will
-        # be spent in each position.
-        keyframe_duration = (100 / TOTAL_POSITIONS.to_f)
+        stops = sfx[:stops]
 
         anim = Inkcite::Animation.new(sfx.animation_class_name(n, 'position'), sfx.ctx)
         anim.duration = duration
@@ -108,17 +114,27 @@ module Inkcite
         x_positions = sfx[:x_positions]
         y_positions = sfx[:y_positions]
 
+        # This is the percentage amount of the total animation that will
+        # be spent in each position.
+        keyframe_duration = 100.0 / stops.to_f
+
         percent = 0
-        TOTAL_POSITIONS.times do |n|
+        stops.times do |n|
 
           # Pick a random position for this firework
           top = y_positions.delete_at(rand(y_positions.length))
           left = x_positions.delete_at(rand(x_positions.length))
 
-          keyframe = anim.add_keyframe(percent, { :top => pct(top), :left => pct(left) })
-          keyframe.duration = keyframe_duration - 0.1
+          # Calculate when the next keyframe will trigger.
+          next_keyframe = percent + keyframe_duration
+
+          # Calculate when this frame should end
+          end_percent = n < stops - 1 ? (next_keyframe - 0.1).round(1) : 100
 
-          percent += keyframe_duration
+          keyframe = anim.add_keyframe(percent.round(1), { :top => pct(top), :left => pct(left) })
+          keyframe.end_percent = end_percent
+
+          percent = next_keyframe
         end
 
         sfx.animations << anim
@@ -150,10 +166,10 @@ module Inkcite
         box_shadow = sparks.times.collect { |n| '0 0 #fff' }
         style[BOX_SHADOW] = box_shadow.join(', ')
 
-        # Create the global gravity animation that is consistent for all fireworks.
+        # Create the global decay animation that is consistent for all fireworks.
         # There is no variance in this animation so it is created and added to the
         # context only once.
-        create_gravity_animation(sfx)
+        create_decay_animation(sfx)
 
       end
 
@@ -185,15 +201,15 @@ module Inkcite
         # move through each of its positions.
         position_speed = sfx.rand_speed
 
-        # This is the speed the firework animates it's explosion and gravity
+        # This is the speed the firework animates it's explosion and decay
         # components - which need to repeat n-number of times based on the
         # total number of positions.
-        explosion_speed = (position_speed / TOTAL_POSITIONS.to_f).round(2)
+        explosion_speed = (position_speed / sfx[:stops].to_f).round(2)
 
-        gravity_animation = Inkcite::Animation.new('gravity', sfx.ctx)
+        gravity_animation = Inkcite::Animation.new(DECAY_ANIMATION_NAME, sfx.ctx)
         gravity_animation.duration = explosion_speed
         gravity_animation.delay = delay if n > 0
-        gravity_animation.timing_function = Inkcite::Animation::EASE_IN
+        gravity_animation.timing_function = Inkcite::Animation::EASE_IN_CUBIC
 
         composite_animation = Inkcite::Animation::Composite.new
         composite_animation << create_explosion_animation(n, hue, explosion_speed, delay, sfx)
@@ -202,13 +218,6 @@ module Inkcite
 
         style[:animation] = composite_animation
 
-        # # Each firework consists of three separate animations - one to animate
-        # # the explosion, one to fade out/apply gravity and one to move the
-        # # firework through it's fixed positions.
-        # style[:animation] = "1s bang ease-out infinite, 1s gravity ease-in infinite, #{TOTAL_POSITIONS}s position linear infinite"
-
-        # style[ANIMATION_DURATION] = "#{explosion_speed}s, #{explosion_speed}s, #{position_speed}s"
-
       end
 
       def defaults opt, ctx
@@ -217,15 +226,20 @@ module Inkcite
             :sparks => 50,
             :count => 2,
             :gravity => 200,
-            RADIUS_MIN => 150,
-            RADIUS_MAX => 400,
+            DIAMETER_MIN => 25,
+            DIAMETER_MAX => 200,
             SIZE_MIN => 10,
             SIZE_MAX => 10,
             SPEED_MIN => 5,
             SPEED_MAX => 10,
+            :stops => 5,
         }
       end
 
+      private
+
+      DECAY_ANIMATION_NAME = 'decay'
+
     end
   end
 end