require 'base64' require 'turnip_formatter/template' require 'turnip_formatter/step/failure' module Gnawrnip module StepScreenshot class << self # # @param [Array] images array of Gnawrnip::Image # def build(images) case images.length when 0 '' when 1 single_image(images.first) else 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"> <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) text + <<-EOS </div> </div> EOS end def single_image(path) text = '<div class="screenshot">' text += Gnawrnip.publisher.single(path) text + '</div>' end end 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: #{Gnawrnip.frame_interval_ms}, autoHeight: "calc", pager: $(this).find('div.nav .pager') }); var nav = $(this).find('div.nav'); var playButton = nav.find('.play'); var pauseButton = nav.find('.pause'); var prevButton = nav.find('.prev'); var nextButton = nav.find('.next'); var setPauseManipulate = function() { playButton.show(); pauseButton.hide(); prevButton.show(); nextButton.show(); }; var setPlayManipulate = function() { playButton.hide(); pauseButton.show(); prevButton.hide(); nextButton.hide(); }; playButton.click(function() { slide.cycle('resume'); }); 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) { setPauseManipulate(); }); slide.on('cycle-resumed', function(event, opts) { setPlayManipulate(); }); }); }); EOS Template.add_scss(<<-EOS) div#steps-statistics section.scenario { ul.steps { div.screenshot { img { max-width: 90%; border: 2px solid black; } } div.screenshot.animation { > div.nav { text-align: center; .pager { margin-left: auto; margin-right: auto; span { font-size: 50px; display: inline; color: #999999; cursor: pointer; &.cycle-pager-active { color: red; } } } .manipulate { margin-bottom: 1em; i { color: black; cursor: pointer; margin-left: 0.3em; margin-right: 0.3em; &:hover { color: #aa0000; } } } } } } } EOS Step::Failure.add_template Gnawrnip::StepScreenshot do example.metadata[:gnawrnip][:screenshot] || [] end end