lib/gnawrnip/step_screenshot.rb in gnawrnip-0.2.2 vs lib/gnawrnip/step_screenshot.rb in gnawrnip-0.2.3

@@ -4,31 +4,33 @@
 
 module Gnawrnip
   module StepScreenshot
     class << self
       #
-      # @param  [Array] png_base64_list  array of base64 encoded image
+      # @param  [Array] images  array of Gnawrnip::Image
       #
-      def build(png_base64_list)
-        case png_base64_list.length
+      def build(images)
+        case images.length
         when 0
           ''
         when 1
-          single_image(png_base64_list.first)
+          single_image(images.first)
         else
-          animation_image(png_base64_list)
+          animation_image(images)
         end
       end
 
       def animation_image(paths)
         text = <<-EOS
           <div class="screenshot animation">
               <div class="nav">
                   <div class="pager"></div>
                   <div class="manipulate">
-                      <span class="play selected">&#9654;</span>
-                      <span class="stop">&#9632;</span>
+                      <i class="fa fa-2x fa-step-backward prev"></i>
+                      <i class="fa fa-2x fa-play play"></i>
+                      <i class="fa fa-2x fa-pause pause"></i>
+                      <i class="fa fa-2x fa-step-forward next"></i>
                   </div>
               </div>
               <div class="slides">
         EOS
         text += Gnawrnip.publisher.animation(paths)
@@ -47,47 +49,58 @@
   end
 end
 
 module TurnipFormatter
   Template.add_js_file('http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js')
+  Template.add_css_file('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
 
   Template.add_js(<<-EOS)
     $(function() {
         $('.screenshot.animation').each(function() {
             var slide = $(this).find('.slides').cycle({
-                timeout: 1000,
-                autoHeight: "container",
+                timeout: #{Gnawrnip.frame_interval_ms},
+                autoHeight: "calc",
                 pager: $(this).find('div.nav .pager')
             });
 
             var nav = $(this).find('div.nav');
-            var playButton = nav.find('.play');
-            var stopButton = nav.find('.stop');
+            var playButton  = nav.find('.play');
+            var pauseButton = nav.find('.pause');
+            var prevButton  = nav.find('.prev');
+            var nextButton  = nav.find('.next');
 
-            var coloringOfStopped = function() {
-                playButton.removeClass("selected");
-                stopButton.addClass("selected");
+            var setPauseManipulate = function() {
+                playButton.show();
+                pauseButton.hide();
+                prevButton.show();
+                nextButton.show();
             };
 
-            var coloringOfPlaying = function() {
-                playButton.addClass("selected");
-                stopButton.removeClass("selected");
+            var setPlayManipulate = function() {
+                playButton.hide();
+                pauseButton.show();
+                prevButton.hide();
+                nextButton.hide();
             };
 
             playButton.click(function() { slide.cycle('resume'); });
-            stopButton.click(function() { slide.cycle('pause'); });
+            pauseButton.click(function() { slide.cycle('pause'); });
+            prevButton.click(function() { slide.cycle('prev'); });
+            nextButton.click(function() { slide.cycle('next'); });
 
+            setPlayManipulate();
+
             slide.on('cycle-pager-activated', function(event, opts) {
                 slide.cycle('pause');
             });
 
             slide.on('cycle-paused', function(event, opts) {
-                coloringOfStopped();
+                setPauseManipulate();
             });
 
             slide.on('cycle-resumed', function(event, opts) {
-                coloringOfPlaying();
+                setPlayManipulate();
             });
         });
     });
   EOS
 
@@ -120,16 +133,19 @@
                             }
                         }
                     }
 
                     .manipulate {
-                        span {
+                        margin-bottom: 1em;
+
+                        i {
                             color: black;
-                            font-size: 30px;
                             cursor: pointer;
+                            margin-left: 0.3em;
+                            margin-right: 0.3em;
 
-                            &.selected {
-                                color: red;
+                            &:hover {
+                                color: #aa0000;
                             }
                         }
                     }
                 }
             }