volt-slider 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a332f2dd2e682d9cb1c093cbbf1ef52fe4ad5cab
-  data.tar.gz: cc61f9ade3e1d6707bf1b31c3f103a00f21443e2
+  metadata.gz: 8ef829bfe555ab6c22f84211fd2bb304f57cb4ea
+  data.tar.gz: 06c9a3b5c4a4f733344d56d3de7185514292a9f5
 SHA512:
-  metadata.gz: 8df6cec1d5c7357447da7b17ed748926624d8c9889603daa952fc816867cb7f980caa831be46dec9773b5f64ef4d3f07b2ac017b85d690142727132108fa5bd1
-  data.tar.gz: 2094eea3acbcf0558cd6b9cb9823b75dc73811855d9af3daaeb8245e19aaa3167312f3e1db703a662d35437ef7e7b9865a6b4aa746aad7279944748d01569019
+  metadata.gz: 10d653723bf5ae2c964b3ca4fd1a06b89a3af2b4b1adc8bc96cad160cc31533465668e7e6ec5c906e7134af4c6bfb6e1dafcdd055274ac9616b8cf215919e040
+  data.tar.gz: c23bef4815834ef64546446738ecafcbcaf2a674569294149f3b12be1f09bdf672aac63a1d245e31b6de05ca422d00300d64af82987e075085305058e10751b5

data/.gitignore

@@ -16,4 +16,6 @@ test/tmp
 test/version_tmp
 tmp
 .idea
-.idea/*
+.idea/*
+.ruby-gemset
+.ruby-version

data/README.md

@@ -6,6 +6,10 @@ Simple slider of any content for Volt framework.
 
 .slider-viewport with fixed width and overflow: hidden, inside it .slider-container with much longer width, it's moving inside .slider-viewport by jquery.animate on it's left property
 
+## Changelog
+
+0.2.0 Added prev/next buttons
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -57,7 +61,7 @@ defaults:
     css_visible_width: 800
     css_visible_height: 260px
     css_container_length: 9999
-
+    show_prev_next_icons: true
 
 ## Contributing
 

data/app/slider/assets/css/slider.sass

@@ -7,3 +7,36 @@
   left: 0px
   height: 100%
 
+.icon
+  display: inline-block
+  width: 1em
+  height: 1em
+  fill: currentColor
+  opacity: 0.1
+  z-index: 999
+  transition: opacity .25s ease-in-out
+  -moz-transition: opacity .25s ease-in-out
+  -webkit-transition: opacity .25s ease-in-out
+
+.slider-viewport:hover .icon
+  opacity: 0.9
+
+.icon-circle-right:hover, .icon-circle-left:hover
+  cursor: pointer
+
+.icon-circle-right
+  position: absolute
+  right: 0px
+  font-size: 32px
+  color: black
+  background-size: contain
+  background-image: asset-url("../images/circle-right.png")
+
+.icon-circle-left
+  position: absolute
+  left: 0px
+  font-size: 32px
+  color: black
+  background-size: contain
+  background-image: asset-url("../images/circle-left.png")
+

data/app/slider/controllers/main_controller.rb

@@ -14,7 +14,8 @@ module Slider
             stop_on_mouseover: true,
             css_visible_width: 800,
             css_visible_height: 260,
-            css_container_length: 9999
+            css_container_length: 9999,
+            show_prev_next_icons: true
           }
         end
 
@@ -23,25 +24,44 @@ module Slider
         end
 
         def create_options_vars(options)
-
-#          options.each { |k,v| puts "@#{k}" + (( (attrs.send(k) == '') ? nil : attrs.send(k) )  || v).to_s }
+          options.each { |k,v| puts "@#{k}" + (( (attrs.send(k) == '') ? nil : attrs.send(k) )  || v).to_s }
           options.each { |k,v| instance_variable_set("@#{k}", (( (attrs.send(k) == '') ? nil : attrs.send(k) )|| v)) } #instance variables from attrs
+
+          (@show_prev_next_icons == true or @show_prev_next_icons == 'true') ? @show_prev_next_icons = true : @show_prev_next_icons = false
+          (@stop_on_mouseover==true or @stop_on_mouseover=='true') ? @stop_on_mouseover = true : @stop_on_mouseover = false
+        end
+
+        def show_icons?
+          (@show_prev_next_icons == true or @show_prev_next_icons == 'true') ? true :  false
         end
 
+
         def move
           if RUBY_PLATFORM == 'opal'
             el = Element.find('.slider-container')
             moveto = el.css('left').to_i - @css_visible_width.to_i
             if moveto < @leftmost_point.to_i
+              @leftmost_point_set = moveto + @css_visible_width.to_i
               moveto = 0
             end
-            el.animate({left: moveto, speed: @transition_time })
+            el.animate({left: moveto, speed:  @transition_time.to_i })
+          end
+        end
+
+        def prev
+          if RUBY_PLATFORM == 'opal'
+            el = Element.find('.slider-container')
+            moveto = el.css('left').to_i + @css_visible_width.to_i
+            if moveto > 0
+              moveto = @leftmost_point_set || @leftmost_point
+            end
+            el.animate({left: moveto, speed:  @transition_time.to_i })
           end
         end
 
         def index_ready
           if RUBY_PLATFORM == 'opal'
-            if @stop_on_mouseover==true or @stop_on_mouseover=="true"
+            if @stop_on_mouseover
               el = Element.find('.slider-viewport')
 
               el.on :mouseover do

data/app/slider/views/main/index.html

@@ -1,8 +1,12 @@
-
 <:Body>
   <div class="slider-viewport" style="height: {{ @css_visible_height }}px; width: {{ @css_visible_width }}px;">
-    <div class="slider-container" style="width: {{ @css_container_length }}px;">
+    {{ if show_icons? }}
 
+        <span class="icon icon-circle-right" style="top: {{ @css_visible_height.to_i / 2 }}px;"  e-click="move"></span>
+        <span class="icon icon-circle-left" style="top: {{ @css_visible_height.to_i / 2 }}px;"  e-click="prev"></span>
+
+    {{ end }}
+    <div class="slider-container" style="width: {{ @css_container_length }}px;">
 
       {{ yield }}
 

data/lib/volt/slider/version.rb

@@ -1,5 +1,5 @@
 module Volt
   module Slider
-    VERSION = "0.1.2"
+    VERSION = "0.2.0"
   end
 end

data/volt-slider.gemspec

@@ -36,6 +36,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'volt-user_templates', '~> 0.4.0'
   spec.add_development_dependency 'thin', '~> 1.6.0'
 
+
   spec.add_runtime_dependency 'opal-jquery', '~> 0.4'
 
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: volt-slider
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Kostafun
@@ -220,6 +220,8 @@ files:
 - README.md
 - Rakefile
 - app/slider/assets/css/slider.sass
+- app/slider/assets/images/circle-left.png
+- app/slider/assets/images/circle-right.png
 - app/slider/config/dependencies.rb
 - app/slider/config/initializers/boot.rb
 - app/slider/config/routes.rb