railslider 0.0.1 → 0.1.0

data/lib/railslider.rb

@@ -1,5 +1,9 @@
-require "railslider/version"
+require 'railslider/version'
+require 'railslider/image'
+require 'railslider/engine'
 
 module Railslider
   # Your code goes here...
 end
+
+

data/lib/railslider/engine.rb

@@ -0,0 +1,9 @@
+# This gem contains an engine class which inherits from Rails::Engine. By doing this, Rails is
+# informed that the directory for this gem may contain assets and the app/assets, lib/assets
+# and vendor/assets directories of this engine are added to the search path of Sprockets.
+# Official reference: http://guides.rubyonrails.org/asset_pipeline.html#adding-assets-to-your-gems
+
+module Railslider
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/railslider/image.rb

@@ -0,0 +1,177 @@
+module Railslider
+  #
+  class Image
+
+    # image use if such is not specified
+    DEMO_IMAGES = ['/assets/demo/1.jpg',
+                   '/assets/demo/2.jpg',
+                   '/assets/demo/3.jpg',
+                   '/assets/demo/4.jpg',
+                   '/assets/demo/5.jpg']
+
+    # class attributes
+    attr_accessor :id,             #  elements id
+                                   #
+                  :images_urls,    #  array holding images urls
+                                   #
+                  :effect          #  initial effect to be used:
+                                   #
+                                   #    flips: flip01, flip02, flip03, flip04
+                                   #    rotations: rotation01, rotation02, rotation03, rotation04, rotation05
+                                   #    multi-flips: multi-flip01, multi-flip02, multi-flip03
+                                   #    cubes: cube01, cube02, cube03, cube04
+                                   #    unfolds: unfold01, unfold02
+                                   #    others: other01, other02, other03 ,other04 ,other05 ,other06 ,other07
+
+    # extracting input parameters and using defaults if necessary
+    def initialize(parameters = {})
+      @id = parameters.fetch(:id, 'demo')
+      @images_urls = parameters.fetch(:images_urls, DEMO_IMAGES)
+
+      @effect = parameters.fetch(:effect, 'flip01')
+    end
+
+    # rendering images without rails slider effects
+    def to_s
+      @result_html = ''
+      @images_urls.each do |url|
+        @result_html += "<img src=\"#{url}\"/>"
+      end
+      @result_html.html_safe
+    end
+
+    # rendering images with rails slider effects
+    def render
+      @result_html = ''
+      @result_html += "<div class=\"rs-container #{self.class.name}\" id=\"#{@id}\">"
+        @result_html += render_controls.gsub("<option value=\"rs-#{@effect}\">",
+                                             "<option value=\"rs-#{@effect}\" selected=\"selected\">")
+        @result_html += "<div class=\"rs-wrapper\">"
+         @result_html += "<div class=\"rs-shadow\"></div>"
+         @result_html += '<div class="rs-images">'
+          @images_urls.each do |url|
+            @result_html += "<img src=\"#{url}\"/>"
+          end
+          @result_html += '</div>'
+          @result_html += '<div class="rs-cover">'
+            @result_html += '<a class="rs-animation-command rs-pause" href="javascript:void(0)">Play/Pause</a>'
+            @result_html += "<img src=\"#{@images_urls.first}\"/>"
+          @result_html += '</div>'
+          @result_html += '<div class="rs-transition">'
+            @result_html += render_flips
+            @result_html += render_multi_flips
+            @result_html += render_cubes
+            @result_html += render_unfolds
+          @result_html += '</div>'
+        @result_html += '</div>'
+      @result_html += render_bullets
+      @result_html += '</div>'
+
+      @result_html.html_safe
+    end
+
+    def render_controls
+      "
+      <div class=\"rs-controls\">
+            <label for=\"rs-effects\">
+                <select class=\"rs-effects\">
+                    <optgroup label=\"rs-flips\">
+                        <option value=\"rs-flip01\">flip 01</option>
+                        <option value=\"rs-flip02\">flip 02</option>
+                        <option value=\"rs-flip03\">flip 03</option>
+                        <option value=\"rs-flip04\">flip 04</option>
+                    </optgroup>
+                    <optgroup label=\"rs-rotations\">
+                        <option value=\"rs-rotation01\">rotation 01</option>
+                        <option value=\"rs-rotation02\">rotation 02</option>
+                        <option value=\"rs-rotation03\">rotation 03</option>
+                        <option value=\"rs-rotation04\">rotation 04</option>
+                        <option value=\"rs-rotation05\">rotation 05</option>
+                    </optgroup>
+                    <optgroup label=\"rs-multi-flips\">
+                        <option value=\"rs-multi-flip01\">multi-flip 01</option>
+                        <option value=\"rs-multi-flip02\">multi-flip 02</option>
+                        <option value=\"rs-multi-flip03\">multi-flip 03</option>
+                    </optgroup>
+                    <optgroup label=\"rs-cubes\">
+                        <option value=\"rs-cube01\">Cube 01</option>
+                        <option value=\"rs-cube02\">Cube 02</option>
+                        <option value=\"rs-cube03\">Cube 03</option>
+                        <option value=\"rs-cube04\">Cube 04</option>
+                    </optgroup>
+                    <optgroup label=\"rs-unfolds\">
+                        <option value=\"rs-unfold01\">Unfold 01</option>
+                        <option value=\"rs-unfold02\">Unfold 02</option>
+                    </optgroup>
+                    <optgroup label=\"rs-others\">
+                        <option value=\"rs-other01\">Other 01</option>
+                        <option value=\"rs-other02\">Other 02</option>
+                        <option value=\"rs-other03\">Other 03</option>
+                        <option value=\"rs-other04\">Other 04</option>
+                        <option value=\"rs-other05\">Other 05</option>
+                        <option value=\"rs-other06\">Other 06</option>
+                        <option value=\"rs-other07\">Other 07</option>
+                    </optgroup>
+                </select>
+            </label>
+            <a class=\"rs-next\" href=\"#\">next</a>
+            <a class=\"rs-prev\" href=\"#\">back</a>
+        </div>
+      "
+    end
+
+    def render_flips
+      "
+      <div class=\"rs-flip rs-card\">
+        <div class=\"rs-front\"></div>
+        <div class=\"rs-back\"></div>
+      </div>
+      "
+    end
+
+    def render_multi_flips
+      @result_html = ''
+      for index in 1 .. 7
+        @result_html +=
+        "
+        <div class=\"rs-multi-flip rs-card rs-flip#{index}\">
+          <div class=\"rs-front\"></div>
+          <div class=\"rs-back\"></div>
+        </div>
+        "
+      end
+      @result_html
+    end
+
+    def render_cubes
+      "
+      <div class=\"rs-cube rs-cube-front rs-cube-face rs-front\"></div>
+      <div class=\"rs-cube rs-cube-top rs-cube-face rs-back\"></div>
+      <div class=\"rs-cube rs-cube-bottom rs-cube-face rs-back\"></div>
+      <div class=\"rs-cube rs-cube-right rs-cube-face rs-back\"></div>
+      <div class=\"rs-cube rs-cube-left rs-cube-face rs-back\"></div>
+      "
+    end
+
+    def render_unfolds
+      "
+      <div class=\"rs-unfold rs-front rs-front1\"></div>
+      <div class=\"rs-unfold rs-front rs-front2\"></div>
+      <div class=\"rs-unfold rs-front rs-front3\"></div>
+      <div class=\"rs-unfold rs-back rs-back1\"></div>
+      <div class=\"rs-unfold rs-back rs-back2\"></div>
+      <div class=\"rs-unfold rs-back rs-back3\"></div>
+      "
+    end
+
+    def render_bullets
+      @result_html = ''
+      @result_html += '<ul class="rs-bullets">'
+
+      @images_urls.each_with_index do |url, index|
+        @result_html += "<li><a data-position=\"#{index+1}\" href=\"#\">hidden text</a></li>"
+      end
+      @result_html += '</ul>'
+    end
+  end
+end

data/lib/railslider/version.rb

@@ -1,3 +1,3 @@
 module Railslider
-  VERSION = "0.0.1"
+  VERSION = '0.1.0'
 end

data/railslider.gemspec

@@ -8,9 +8,9 @@ Gem::Specification.new do |spec|
   spec.version       = Railslider::VERSION
   spec.authors       = ['gotqn']
   spec.email         = ['george_27@abv.bg']
-  spec.description   = 'Do not download it - just reserving the name'
-  spec.summary       = 'The first version will be released soon'
-  spec.homepage      = ''
+  spec.description   = 'Introduces simple image slider for rails applications using CSS3 animations for image transitions.'
+  spec.summary       = 'The idea is inspired by [this great codedrops article] (http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/).'
+  spec.homepage      = 'https://github.com/gotqn/railslider'
   spec.license       = 'MIT'
 
   spec.files         = `git ls-files`.split($/)

data/vendor/assets/javascripts/railslider.js

@@ -0,0 +1,290 @@
+//Checking if jQuery function is loaded
+(function IsjQueryLoaded(){
+
+    if(window.jQuery){
+
+        $(function(){
+
+            //Checking if "RailSlider" class is already created
+            if(typeof RailSlider === 'undefined' || jQuery.isEmptyObject(RailSlider.prototype)){
+
+                // constructor function
+                RailSlider = function(params){
+
+                    this.containerID = params['containerID'];
+                    this.teWrapper = $('#' + this.containerID + ' .rs-wrapper');
+                    this.rsCover = $('#' + this.containerID + ' div.rs-cover');
+                    this.rsImages = $('#' + this.containerID + ' div.rs-images > img');
+                    this.imagesCount = $(this.rsImages).length;
+                    this.currentImg = 0;
+                    this.navNext = $('#' + this.containerID + ' .rs-next');
+                    this.navPrev = $('#' + this.containerID + ' .rs-prev');
+                    //holds all animation options
+                    this.rsEffect = $('#' + this.containerID + ' .rs-effects');
+                    //holds selection animation option
+                    this.type= $(this.rsEffect).val();
+                    //holds animation option used during transition
+                    this.rsTransition = $('#' + this.containerID + ' .rs-transition');
+                    //flag pointing if transition is active
+                    this.animated = false;
+                    //bullets
+                    this.bullets = $('#' + this.containerID + ' .rs-bullets a');
+                    //auto sliding settings
+                    this.isAutoSlidingEnabled = true;
+                    this.direction = "next"; //"next" or "prev"
+                    this.timeInterval = 5000; // time interval im milliseconds
+                    this.isAutoSlidingOn = false;
+                    this.autoSlidingID = null; // "id" returned by "setInterval()" function
+                    //others
+                    this.controls = $('#' + this.containerID + ' .rs-controls');
+                    this.effectSelector = '';
+                };
+
+                RailSlider.prototype = {
+
+                    constructor: RailSlider,
+                    hasPerspective: Modernizr.csstransforms3d,
+
+                    init: function(){
+
+                        //set transition animation option
+                        this.rsTransition.addClass(this.type);
+
+                        this.navNext.on('click', $.proxy(function(){
+
+                            //checking if browser supports 3D animations and an animation is not already running
+                            if(!(this.hasPerspective && this.animated)){
+                                this.animated = true;
+                                this.showNext('next');
+                            }
+
+                            //calling "event.stopPropagation()" and "event.preventDefault()"
+                            return false;
+
+                        }, this));
+
+                        this.navPrev.on('click', $.proxy(function(){
+
+                            //checking if browser supports 3D animations and an animation is not already running
+                            if(!(this.hasPerspective && this.animated)){
+                                this.animated = true;
+                                this.showNext('prev');
+                            }
+
+                            //calling "event.stopPropagation()" and "event.preventDefault()"
+                            return false;
+
+                        }, this));
+
+                        if(this.hasPerspective){
+
+                            this.teWrapper.on({
+
+                                'animationstart webkitAnimationStart oAnimationStart MSAnimationStart': $.proxy(function(event){
+
+                                    //ignoring "play" and "pause" buttons animations
+                                    if(event.originalEvent.animationName == 'play-button-in' || event.originalEvent.animationName == 'pause-button-in'){
+                                        return false;
+                                    }else{
+                                        this.rsEffect.prop('disabled', true);
+                                        return false;
+                                    }
+                                }, this),
+                                'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd': $.proxy(function(event){
+
+                                    //ignoring "play" and "pause" buttons animations
+                                    if(event.originalEvent.animationName == 'play-button-in' || event.originalEvent.animationName == 'pause-button-in'){
+                                        return false;
+                                    }else{
+
+                                        if((this.type === 'rs-unfold01' && event.originalEvent.animationName !== 'rs-unfold1_3Back')||(this.type === 'rs-unfold02' && event.originalEvent.animationName !== 'rs-unfold2_3Back')){
+                                            return false;
+                                        }
+
+                                        this.rsCover.removeClass('rs-hide');
+                                        this.rsTransition.removeClass('rs-show');
+                                        this.animated = false;
+                                        this.rsEffect.prop('disabled', false);
+
+                                        return false;
+                                    }
+
+                                }, this)
+                            });
+                        }
+
+                        //update "transition" animation option
+                        $(this.rsEffect).on('change.RailSlider', $.proxy(function(event) {
+                            if(this.animated){
+                                $(event.currentTarget).val(this.type);
+                            }else{
+                                this.type = $(event.currentTarget).val();
+                                this.rsTransition.removeClass().addClass('rs-transition').addClass(this.type);
+                                this.effectSelector = this.effectsSelector();
+                            }
+                        }, this));
+
+                        //handling bullets events
+                        for(var index = 0; index < this.bullets.length; index++){
+
+                            this.bullets.eq(index).on('click', $.proxy(function(event){
+
+                                var currentElementPosition = $(event.target).attr('data-position');
+
+                                //checking if browser supports 3D animations and an animation is not already running
+                                if(!(this.hasPerspective && this.animated) && this.currentImg + 1 != currentElementPosition){
+
+                                    this.animated = true;
+                                    this.changeBullet(currentElementPosition - 1);
+                                    this.showNext(currentElementPosition);
+                                }
+
+                                //calling "event.stopPropagation()" and "event.preventDefault()"
+                                return false;
+
+                            }, this));
+                        }
+
+                        this.changeBullet(this.currentImg);
+
+                        //handling commands ("play" and "pause") events
+                        this.rsCover.on('click','.rs-animation-command',$.proxy(function(event) {
+                            this.toggleAnimation();
+                            if($(event.target).hasClass('rs-pause')){
+                                $(event.target).removeClass('rs-pause');
+                                $(event.target).addClass('rs-play');
+                            }else{
+                                $(event.target).removeClass('rs-play');
+                                $(event.target).addClass('rs-pause');
+                            }
+                        }, this));
+
+                        //starting auto sliding if needed
+                        if(this.isAutoSlidingEnabled){
+                            this.toggleAnimation();
+                        }
+
+                        //initializing selector depending on selected effect type
+                        this.effectSelector = this.effectsSelector();
+                    },
+
+                    changeBullet:function(index){
+                        this.bullets.removeClass('shown').eq(index).addClass('shown');
+                    },
+
+                    showNext:function(direction){
+
+                        if (this.hasPerspective) {
+
+                            this.rsTransition.addClass('rs-show');
+                            this.rsCover.addClass('rs-hide');
+                        }
+
+                        this.updateImages(direction);
+                    },
+
+                    updateImages:function(direction){
+
+                        // "direction" can be "prev", "next" or number pointing exact image
+                        var $last_img = this.rsImages.eq(this.currentImg);
+
+                        switch(direction){
+                            case 'next':{
+                                if(this.currentImg === this.imagesCount - 1){
+                                    this.currentImg = 0;
+                                }else{
+                                    this.currentImg++;
+                                }
+                                break;
+                            }
+                            case 'prev':{
+                                if(this.currentImg === 0){
+                                    this.currentImg = this.imagesCount - 1;
+                                }else{
+                                    this.currentImg--;
+                                }
+                                break;
+                            }
+                            default:{
+
+                                if(direction > 0 && direction <= this.imagesCount) {
+                                    this.currentImg = --direction ;
+                                }
+
+                                break;
+                            }
+                        }
+
+                        var $currentImg = this.rsImages.eq(this.currentImg);
+
+                        this.rsTransition.find(this.effectSelector + '.rs-front').empty().append('<img src="' + $last_img.attr('src') + '">');
+                        this.rsTransition.find(this.effectSelector + '.rs-back').empty().append('<img src="' + $currentImg.attr('src') + '">');
+
+                        this.rsCover.find('img').attr('src', $currentImg.attr('src'));
+
+                        this.changeBullet(this.currentImg);
+                    },
+
+                    toggleNavigation:function(){
+                        $('#' + this.containerID + ' .rs-controls').toggle();
+                    },
+
+                    toggleAnimation:function(){
+                        if(this.isAutoSlidingOn){
+                            clearInterval(this.autoSlidingID);
+                            this.isAutoSlidingOn = false;
+                        }else{
+                            this.autoSlidingID = setInterval($.proxy(function(event){this.simulatedClick(this)}, this),this.timeInterval);
+                            this.isAutoSlidingOn = true;
+                        }
+                    },
+
+                    simulatedClick:function(){
+                        if(this.direction == 'next'){
+                            this.navNext.trigger('click');
+                        } else {
+                            this.navPrev.trigger('click');
+                        }
+                    },
+
+                    effectsSelector:function(){
+                        var currentGroup = this.rsEffect.find('option:selected').closest('optgroup').prop('label');
+
+                        switch(currentGroup){
+                            case 'rs-flips': currentGroup = '.rs-flip ';break;
+                            case 'rs-rotations': currentGroup = '.rs-flip ';break;
+                            case 'rs-multi-flips': currentGroup = '.rs-multi-flip ';break;
+                            case 'rs-cubes': currentGroup = '.rs-cube';break;
+                            case 'rs-unfolds': currentGroup = '.rs-unfold';break;
+                            case 'rs-others': currentGroup = '';break;
+                        }
+
+                        return currentGroup;
+                    }
+                };
+            }
+        });
+
+    }else{
+        setTimeout(IsjQueryLoaded(),100);
+    }
+})();
+
+
+/* Example call
+
+    //Checking if jQuery function is loaded
+    (function IsjQueryLoaded(){
+        if(window.jQuery){
+            //Waiting for all elements to be rendered
+            $(document).ready(function(){
+                //Creating new instance of "RailSlider"
+                test = new RailSlider({'containerID':'test'});
+                test.init();
+            });
+        }else{
+            setTimeout(IsjQueryLoaded(),100);
+        }
+    })();
+
+*/