thumbnail_hover_effect 0.0.1 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.idea/.name +1 -0
- data/.idea/.rakeTasks +7 -0
- data/CHANGEDLOG.md +3 -0
- data/README.md +176 -9
- data/lib/generators/templates/effects.css.sass.erb +421 -0
- data/lib/generators/templates/fonts/fontello.css +2100 -0
- data/lib/generators/templates/fonts/fontello.eot +0 -0
- data/lib/generators/templates/fonts/fontello.svg +2059 -0
- data/lib/generators/templates/fonts/fontello.ttf +0 -0
- data/lib/generators/templates/fonts/fontello.woff +0 -0
- data/lib/generators/templates/thumbnail.rb +38 -0
- data/lib/generators/thumbnail_generator.rb +70 -0
- data/lib/thumbnail_hover_effect/engine.rb +11 -0
- data/lib/thumbnail_hover_effect/image.rb +72 -0
- data/lib/thumbnail_hover_effect/version.rb +1 -1
- data/lib/thumbnail_hover_effect.rb +3 -1
- data/thumbnail_hover_effect.gemspec +8 -7
- data/vendor/assets/images/no-image-found.jpg +0 -0
- metadata +20 -5
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# encoding: utf-8
|
|
2
|
+
|
|
3
|
+
class <%= get_class_name %> < ThumbnailHoverEffect::Image
|
|
4
|
+
|
|
5
|
+
# Provide a default URL as a default if there hasn't been a correct one
|
|
6
|
+
# IMAGE_NOT_FOUND = '/images/no-image-found.jpg'
|
|
7
|
+
|
|
8
|
+
# returns the html template
|
|
9
|
+
def get_template(effect_number)
|
|
10
|
+
"
|
|
11
|
+
<div class=\"view-<%= get_file_name %> effect0#{effect_number ||= <%= default_effect %>}\">
|
|
12
|
+
<div>
|
|
13
|
+
<span style=\"position: absolute;right: 5px;top: 10px;\" class=\"icon-thumbs-up\">##likes##</span>
|
|
14
|
+
<span style=\"position: absolute;right: 5px;top: 30px;\"class=\"icon-thumbs-down\">##dislikes##</span>
|
|
15
|
+
<a style=\"position: absolute;bottom: 10px;right: 5px;\" href=\"##url##\">
|
|
16
|
+
<span aria-hidden=\"true\" class=\"icon-print\"></span>
|
|
17
|
+
</a>
|
|
18
|
+
</div>
|
|
19
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
20
|
+
<span class=\"overlay\"></span>
|
|
21
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
22
|
+
<span class=\"overlay\"></span>
|
|
23
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
24
|
+
<span class=\"overlay\"></span>
|
|
25
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
26
|
+
<span class=\"overlay\"></span>
|
|
27
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
28
|
+
<span class=\"overlay\"></span>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
"
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
end
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
class ThumbnailGenerator < Rails::Generators::Base
|
|
2
|
+
source_root File.expand_path('../templates', __FILE__)
|
|
3
|
+
|
|
4
|
+
desc 'Generates ruby class and css classes for thumbnail 3D hover effects'
|
|
5
|
+
|
|
6
|
+
argument :name, type: 'string', required: true,
|
|
7
|
+
desc: 'specifies generated ruby class and css class names'
|
|
8
|
+
|
|
9
|
+
class_option :width, type: 'numeric', default: 300, aliases: '-w',
|
|
10
|
+
desc: 'specifies image width'
|
|
11
|
+
|
|
12
|
+
class_option :height, type: 'numeric', default: 216, aliases: '-h',
|
|
13
|
+
desc: 'specifies image height'
|
|
14
|
+
|
|
15
|
+
class_option :effects, type: 'string', default: '1,2,3,4', aliases: '-e',
|
|
16
|
+
desc: 'specifies for which of the effects css classes are generated'
|
|
17
|
+
|
|
18
|
+
class_option :icons, type: 'boolean', default: true, aliases: '-i',
|
|
19
|
+
desc: 'disables icons files generation'
|
|
20
|
+
|
|
21
|
+
def generate_layout
|
|
22
|
+
|
|
23
|
+
# core functionality
|
|
24
|
+
template 'thumbnail.rb', "app/thumbnails/#{get_file_name}.rb"
|
|
25
|
+
template 'effects.css.sass.erb', "vendor/assets/stylesheets/thumbnails/#{get_file_name}/#{get_file_name}.css.sass"
|
|
26
|
+
|
|
27
|
+
# additional functionality - generation font icons
|
|
28
|
+
if options[:icons]
|
|
29
|
+
copy_file 'fonts/fontello.css',
|
|
30
|
+
'vendor/assets/stylesheets/thumbnails/fontello.css'
|
|
31
|
+
copy_file 'fonts/fontello.eot',
|
|
32
|
+
'vendor/assets/fonts/thumbnails/fontello.eot'
|
|
33
|
+
copy_file 'fonts/fontello.svg',
|
|
34
|
+
'vendor/assets/fonts/thumbnails/fontello.svg'
|
|
35
|
+
copy_file 'fonts/fontello.ttf',
|
|
36
|
+
'vendor/assets/fonts/thumbnails/fontello.ttf'
|
|
37
|
+
copy_file 'fonts/fontello.woff',
|
|
38
|
+
'vendor/assets/fonts/thumbnails/fontello.woff'
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
private
|
|
43
|
+
|
|
44
|
+
def get_file_name
|
|
45
|
+
name.underscore
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def get_class_name
|
|
49
|
+
name.camelize
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
def get_width
|
|
53
|
+
options[:width]
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
def get_height
|
|
57
|
+
options[:height]
|
|
58
|
+
end
|
|
59
|
+
|
|
60
|
+
def should_be_effect_rendered(param)
|
|
61
|
+
effects = (options[:effects].split(',') & ('1'...'5').to_a).any? ? options[:effects].split(',') : ('1'...'5').to_a
|
|
62
|
+
effects.include? param.to_s
|
|
63
|
+
end
|
|
64
|
+
|
|
65
|
+
def default_effect
|
|
66
|
+
min_effect = options[:effects].split(',').min.to_s
|
|
67
|
+
(('1'...'5').to_a.include? min_effect) ? min_effect : '1'
|
|
68
|
+
end
|
|
69
|
+
|
|
70
|
+
end
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# This gem contains an engine class which inherits from Rails::Engine. By doing this, Rails is
|
|
2
|
+
# informed that the directory for this gem may contain assets and the app/assets, lib/assets
|
|
3
|
+
# and vendor/assets directories of this engine are added to the search path of Sprockets.
|
|
4
|
+
# Official reference: http://guides.rubyonrails.org/asset_pipeline.html#adding-assets-to-your-gems
|
|
5
|
+
|
|
6
|
+
module ThumbnailHoverEffect
|
|
7
|
+
class Engine < ::Rails::Engine
|
|
8
|
+
end
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
module ThumbnailHoverEffect
|
|
2
|
+
#
|
|
3
|
+
class Image
|
|
4
|
+
|
|
5
|
+
# image use if such is not specified
|
|
6
|
+
IMAGE_NOT_FOUND = '/images/no-image-found.jpg'
|
|
7
|
+
|
|
8
|
+
# class attributes
|
|
9
|
+
attr_accessor :url, # image source url
|
|
10
|
+
:attributes # data attributes
|
|
11
|
+
|
|
12
|
+
# validating input parameters and using defaults if necessary
|
|
13
|
+
def initialize(parameters = {})
|
|
14
|
+
@url = parameters.fetch(:url, IMAGE_NOT_FOUND)
|
|
15
|
+
@attributes = parameters.fetch(:attributes, {})
|
|
16
|
+
|
|
17
|
+
@url = IMAGE_NOT_FOUND unless File.extname(@url) =~/^(.png|.gif|.jpg|.jpeg|.bmp)$/
|
|
18
|
+
@attributes = {} unless @attributes.is_a?(Hash)
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
# rendering image without thumbnail effect
|
|
22
|
+
def to_s
|
|
23
|
+
"<img src=#{@url} #{@attributes.map{|key,value| "data-#{key}=#{value}" }.join(' ')}/>"
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
# rendering image with thumbnail effect applied
|
|
27
|
+
def render(parameters = {})
|
|
28
|
+
|
|
29
|
+
has_thumbnail = parameters.fetch(:has_thumbnail, true)
|
|
30
|
+
effect_number = parameters.fetch(:effect_number, false)
|
|
31
|
+
thumbnail_template = self.get_template(effect_number)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
if has_thumbnail
|
|
35
|
+
@attributes.map { |key, value| thumbnail_template["###{key}##"] &&= value }
|
|
36
|
+
thumbnail_template.gsub!('##url##', @url).html_safe
|
|
37
|
+
else
|
|
38
|
+
self.to_s.html_safe
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
# returns the html template
|
|
43
|
+
def get_template(effect_number)
|
|
44
|
+
"
|
|
45
|
+
<div class=\"view-image effect0#{1 unless effect_number}\">
|
|
46
|
+
<div>
|
|
47
|
+
<span class=\"icon-emo-happy\">##title##</span>
|
|
48
|
+
<span class=\"icon-emo-happy\">##description##</span>
|
|
49
|
+
<a href=\"##url##\"><span aria-hidden=\"true\" class=\"icon-emo-happy\"></span></a>
|
|
50
|
+
</div>
|
|
51
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
52
|
+
<span class=\"overlay\"></span>
|
|
53
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
54
|
+
<span class=\"overlay\"></span>
|
|
55
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
56
|
+
<span class=\"overlay\"></span>
|
|
57
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
58
|
+
<span class=\"overlay\"></span>
|
|
59
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
60
|
+
<span class=\"overlay\"></span>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
"
|
|
68
|
+
end
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
end
|
|
72
|
+
end
|
|
@@ -4,14 +4,15 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
|
4
4
|
require 'thumbnail_hover_effect/version'
|
|
5
5
|
|
|
6
6
|
Gem::Specification.new do |spec|
|
|
7
|
-
spec.name =
|
|
7
|
+
spec.name = 'thumbnail_hover_effect'
|
|
8
8
|
spec.version = ThumbnailHoverEffect::VERSION
|
|
9
|
-
spec.authors = [
|
|
10
|
-
spec.email = [
|
|
11
|
-
spec.description = 'Simple image hover effects
|
|
12
|
-
spec.summary = '
|
|
13
|
-
|
|
14
|
-
spec.
|
|
9
|
+
spec.authors = ['gotqn']
|
|
10
|
+
spec.email = ['george_27@abv.bg']
|
|
11
|
+
spec.description = 'Simple image hover css 3D effects for your application'
|
|
12
|
+
spec.summary = 'Introduces simple image thumbnail 3D image hover effects using CSS 3D transforms.
|
|
13
|
+
The idea is inspired by http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/.'
|
|
14
|
+
spec.homepage = 'https://github.com/gotqn/thumbnail_hover_effect'
|
|
15
|
+
spec.license = 'MIT'
|
|
15
16
|
|
|
16
17
|
spec.files = `git ls-files`.split($/)
|
|
17
18
|
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
Binary file
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: thumbnail_hover_effect
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 0.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- gotqn
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-
|
|
11
|
+
date: 2014-06-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -38,7 +38,7 @@ dependencies:
|
|
|
38
38
|
- - '>='
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '0'
|
|
41
|
-
description: Simple image hover effects
|
|
41
|
+
description: Simple image hover css 3D effects for your application
|
|
42
42
|
email:
|
|
43
43
|
- george_27@abv.bg
|
|
44
44
|
executables: []
|
|
@@ -46,20 +46,34 @@ extensions: []
|
|
|
46
46
|
extra_rdoc_files: []
|
|
47
47
|
files:
|
|
48
48
|
- .gitignore
|
|
49
|
+
- .idea/.name
|
|
50
|
+
- .idea/.rakeTasks
|
|
49
51
|
- .idea/encodings.xml
|
|
50
52
|
- .idea/misc.xml
|
|
51
53
|
- .idea/modules.xml
|
|
52
54
|
- .idea/scopes/scope_settings.xml
|
|
53
55
|
- .idea/thumbnail_hover_effect.iml
|
|
54
56
|
- .idea/vcs.xml
|
|
57
|
+
- CHANGEDLOG.md
|
|
55
58
|
- Gemfile
|
|
56
59
|
- LICENSE.txt
|
|
57
60
|
- README.md
|
|
58
61
|
- Rakefile
|
|
62
|
+
- lib/generators/templates/effects.css.sass.erb
|
|
63
|
+
- lib/generators/templates/fonts/fontello.css
|
|
64
|
+
- lib/generators/templates/fonts/fontello.eot
|
|
65
|
+
- lib/generators/templates/fonts/fontello.svg
|
|
66
|
+
- lib/generators/templates/fonts/fontello.ttf
|
|
67
|
+
- lib/generators/templates/fonts/fontello.woff
|
|
68
|
+
- lib/generators/templates/thumbnail.rb
|
|
69
|
+
- lib/generators/thumbnail_generator.rb
|
|
59
70
|
- lib/thumbnail_hover_effect.rb
|
|
71
|
+
- lib/thumbnail_hover_effect/engine.rb
|
|
72
|
+
- lib/thumbnail_hover_effect/image.rb
|
|
60
73
|
- lib/thumbnail_hover_effect/version.rb
|
|
61
74
|
- thumbnail_hover_effect.gemspec
|
|
62
|
-
|
|
75
|
+
- vendor/assets/images/no-image-found.jpg
|
|
76
|
+
homepage: https://github.com/gotqn/thumbnail_hover_effect
|
|
63
77
|
licenses:
|
|
64
78
|
- MIT
|
|
65
79
|
metadata: {}
|
|
@@ -82,5 +96,6 @@ rubyforge_project:
|
|
|
82
96
|
rubygems_version: 2.0.3
|
|
83
97
|
signing_key:
|
|
84
98
|
specification_version: 4
|
|
85
|
-
summary:
|
|
99
|
+
summary: Introduces simple image thumbnail 3D image hover effects using CSS 3D transforms.
|
|
100
|
+
The idea is inspired by http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/.
|
|
86
101
|
test_files: []
|