loading_screen 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0b1577af349d669bc485cb62e2a111ff9f1c2a00
-  data.tar.gz: 11bf56925a36d896cf08d20bbffb89807ed7c5cc
+  metadata.gz: a32c306ec19b16373d852dde3a0855ec4b8ae044
+  data.tar.gz: eb8c2b1160b2ff97146020593752244ec39d9150
 SHA512:
-  metadata.gz: a356322318ee1ffe02816c3a3e13e130f8034bd8324669433f8f851884f3defc6661fbee4434904ec8d837b49ad95eaed118394a00e4d0926c6d72f028ad2d92
-  data.tar.gz: c5484c038a65bdbb5d35aab4d7f416b14013cb56092690b02126e23e734766baaa2fd21612f745a42f10f3a3b1f5a5e1f4a9471115987d162cf927b773ca63aa
+  metadata.gz: 05a08482e0cd0a4dd4abdb04594f45d2acb639bb588cd6349e430e92b801cb30b072d9c258fc53c8899b247a59116f291cb324fce647d0f4557bee0956f743a1
+  data.tar.gz: a0379f6b0c4e6e5b220e77f2450fad95e971fd856f24ca4a0873243bd23e2780e853050733f8386e2a3e53858522998a29ec8c125e709d97a697d6849daae1c5

data/CHANGELOG.md

@@ -1,4 +1,11 @@
 ## Releases
+
+## 0.2.0
+
+### Animation adding
+  * New animation added
+  * exception added
+  
 ## 0.1.2
 
 ### Basic Initializations

data/CONTRIBUTORS.md

@@ -11,5 +11,13 @@ Nodeunit contributors (sorted alphabetically)
   * Documentation building
   * Code reviewer
   
+* **[Swakhar Dey](https://github.com/Swakhar)**
+
+  * Css design
+  * Animations designing with css
+  * Code reviewer
+  
+  
+  
 **[Full contributors list](https://github.com/mujadded/loading_screen/contributors).**
 

data/README.md

@@ -35,13 +35,22 @@ After that add this line in application.css
 ```
  *= require loading_screen
 ```
-
-We are all set, now to use it in any view file ( for e.g.: index.html.erb) just add:
+### Using available CSS animations
+We are all set, to use it with default `rotating_square` animation in any view file ( for e.g.: index.html.erb) just add:
 ```
 <%= loading_screen %>
 ```
 
-Or if you want to add custom gif as the loading screen just download a gif and put it inside the assets/images/
+There are also other loading animation available for you to choose from, like:
+
+```
+<%= loading_screen style: :double_bounce %> 
+```
+Other animations will be available shortly...
+
+### Using custom gif images
+
+if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add: 
 ```
 <%= loading_screen gif: 'your gif file name witout ".gif" ' %>
 ```

data/app/helpers/loading_screen/loading_screen_helper.rb

@@ -1,14 +1,47 @@
 module LoadingScreen::LoadingScreenHelper
 
   def loading_screen(options={})
+    options[:style] = :default unless options[:style].present?
+
     content_tag :div, '', class: 'loading_screen-spinner' do
       if options[:gif].present?
-        content_tag :div do
-          image_tag(options[:gif], id: 'loading_screen-spinner-image')
-        end
+        gif_handler options
+      else
+        css_handler options
+      end
+    end
+  end
+
+  private
+
+  def gif_handler(options)
+    content_tag :div, '', class: 'loading_screen-gif' do
+      image_tag(options[:gif])
+    end
+  rescue Sprockets::Rails::Helper::AssetNotFound => e
+    raise LoadingScreen::InvalidOptionError.new "'#{options[:gif]}' file does not exist"
+  end
+
+  def css_handler(options)
+    content_tag :div, '', class: 'loading_screen-css' do
+      if options[:style] == :double_bounce
+        load_double_bounce
+      elsif options[:style] == :default
+        load_rotate_square
       else
-        content_tag :div, '', id: 'loading_screen-spinner-css'
+        raise LoadingScreen::InvalidOptionError.new "Wrong style name: '#{options[:style]}'"
       end
     end
   end
+
+  def load_double_bounce
+    [].tap do |array|
+      array << content_tag(:div, '', id: 'loading_screen-double_bounce1')
+      array << content_tag(:div, '', id: 'loading_screen-double_bounce2')
+    end.join.html_safe
+  end
+
+  def load_rotate_square
+    content_tag :div, '', id: 'loading_screen-rotating-square'
+  end
 end

data/lib/loading_screen/exceptions.rb

@@ -0,0 +1,7 @@
+module LoadingScreen
+  class InvalidOptionError < StandardError
+    def initialize(msg = "Some options were mistaken")
+      super(msg)
+    end
+  end
+end

data/lib/loading_screen.rb

@@ -1,4 +1,5 @@
 require "loading_screen/engine"
+require "loading_screen/exceptions"
 
 module LoadingScreen
 end

data/loading_screen.gemspec

@@ -4,12 +4,12 @@ require "loading_screen/version"
 
 Gem::Specification.new do |spec|
   spec.name          = "loading_screen"
-  spec.version       = '0.1.2'
+  spec.version       = '0.2.0'
   spec.authors       = ["Mujadded Al Rabbani Alif", "Yearsin Ar Rahman", "Swakhar Dey"]
   spec.email         = ["Mujadded.alif@gmail.com"]
 
   spec.summary       = "Loading screen for time-consuming background task"
-  spec.description   = "It loads up a animation until the full page is loaded in the browser. Not only default css animation but you can also add custom gif to show in the loading screen"
+  spec.description   = "It loads up a animation until the full page is loaded in the browser. It can load provided css animation and you can also add custom gif to show in the loading screen"
   spec.homepage      = "https://github.com/Mujadded/loading_screen"
   spec.license       = "MIT"
 

data/vendor/assets/javascripts/loading_screen.js

@@ -1,16 +1,24 @@
-$( window ).bind('load',function() {
-
-    // hide spinner
-    $(".loading_screen-spinner").fadeOut();
-
-    // show spinner on AJAX start
-    $(document).ajaxStart(function(){
-        $(".loading_screen-spinner").show();
+$(document).ready(function(){
+    $(document).keyup(function(e) {
+        if (e.keyCode == 27) { // escape key maps to keycode `27`
+            $(".loading_screen-spinner").fadeOut();
+        }
     });
 
-    // hide spinner on AJAX stop
-    $(document).ajaxStop(function(){
+    $( window ).bind('load',function() {
+
+        // hide spinner
         $(".loading_screen-spinner").fadeOut();
-    });
 
+        // show spinner on AJAX start
+        $(document).ajaxStart(function(){
+            $(".loading_screen-spinner").show();
+        });
+
+        // hide spinner on AJAX stop
+        $(document).ajaxStop(function(){
+            $(".loading_screen-spinner").fadeOut();
+        });
+
+    });
 });

data/vendor/assets/stylesheets/loading_screen-default.css

@@ -0,0 +1,31 @@
+#loading_screen-rotating-square {
+    width: 100%;
+    height: 100%;
+    background-color: orange;
+
+    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+    animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+    0% { -webkit-transform: perspective(120px) }
+    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+    0% {
+        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    }
+
+    50% {
+        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    }
+
+    100% {
+        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    }
+}

data/vendor/assets/stylesheets/loading_screen-double_bounce.css

@@ -0,0 +1,32 @@
+#loading_screen-double_bounce1, #loading_screen-double_bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: orange;
+    opacity: 0.6;
+    position: fixed;
+    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+#loading_screen-double_bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+    0%, 100% { -webkit-transform: scale(0.0) }
+    50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+    0%, 100% {
+      transform: scale(0.0);
+      -webkit-transform: scale(0.0);
+    }
+
+    50% {
+      transform: scale(1.0);
+      -webkit-transform: scale(1.0);
+    }
+}

data/vendor/assets/stylesheets/loading_screen.css

@@ -1,42 +1,24 @@
-.loading_screen-spinner{
+@import url("loading_screen-default.css");
+@import url("loading_screen-double_bounce.css");
+
+.loading_screen-spinner {
     position: fixed;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: rgb(249,249,249);
 }
-.loading_screen-spinner > div:first-child{
-    position: absolute;
-    top:40%;
-    left:45%;
-}
 
-#loading_screen-spinner-css {
-    width: 80px;
-    height: 80px;
-    background-color: orange;
-
-    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
-    animation: sk-rotateplane 1.2s infinite ease-in-out;
-}
-
-@-webkit-keyframes sk-rotateplane {
-    0% { -webkit-transform: perspective(120px) }
-    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+.loading_screen-spinner > div {
+    position: fixed;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
 }
 
-@keyframes sk-rotateplane {
-    0% {
-        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-    } 50% {
-          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-      } 100% {
-            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-        }
-}
+.loading_screen-css {
+    height:90px;
+    width: 90px;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: loading_screen
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Mujadded Al Rabbani Alif
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-01-25 00:00:00.000000000 Z
+date: 2018-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -75,8 +75,8 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 4.3.1
 description: It loads up a animation until the full page is loaded in the browser.
-  Not only default css animation but you can also add custom gif to show in the loading
-  screen
+  It can load provided css animation and you can also add custom gif to show in the
+  loading screen
 email:
 - Mujadded.alif@gmail.com
 executables: []
@@ -94,10 +94,13 @@ files:
 - app/helpers/loading_screen/loading_screen_helper.rb
 - lib/loading_screen.rb
 - lib/loading_screen/engine.rb
+- lib/loading_screen/exceptions.rb
 - lib/loading_screen/version.rb
 - loading_screen.gemspec
 - vendor/assets/images/.keep
 - vendor/assets/javascripts/loading_screen.js
+- vendor/assets/stylesheets/loading_screen-default.css
+- vendor/assets/stylesheets/loading_screen-double_bounce.css
 - vendor/assets/stylesheets/loading_screen.css
 homepage: https://github.com/Mujadded/loading_screen
 licenses: