thumbnail_hover_effect 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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: []
|