Skip to content

Commit 4d4eb05

Browse files
pablof7zpablof7z
committed
Initial commit
0 parents  commit 4d4eb05

15 files changed

+569
-0
lines changed

‎Gemfile

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
source 'https://rubygems.org'
2+
3+
gem 'rake'
4+
gem 'coffee-script'
5+
gem 'uglifier'
6+
gem 'sass'

‎Gemfile.lock

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
coffee-script (2.2.0)
5+
coffee-script-source
6+
execjs
7+
coffee-script-source (1.6.2)
8+
execjs (1.4.0)
9+
multi_json (~> 1.0)
10+
multi_json (1.7.2)
11+
rake (10.0.4)
12+
sass (3.2.7)
13+
uglifier (1.3.0)
14+
execjs (>= 0.3.0)
15+
multi_json (~> 1.0, >= 1.0.2)
16+
17+
PLATFORMS
18+
ruby
19+
20+
DEPENDENCIES
21+
coffee-script
22+
rake
23+
sass
24+
uglifier

‎LICENSE

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Copyright 2013 Pablo Fernandez
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Chardin.js
2+
3+
**Simple overlay instructions for your apps.**
4+

‎Rakefile

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
require 'bundler'
2+
3+
Bundler.setup
4+
5+
require 'uglifier'
6+
7+
desc "Compile"
8+
task :compile do
9+
Dir.glob("**/*.coffee").each do |file|
10+
system("bundle exec coffee -c #{file}")
11+
end
12+
13+
Dir.glob("**/*.scss").each do |file|
14+
css_name = file.sub(/\.scss/, ".css")
15+
system("bundle exec sass --scss #{file} > #{css_name}")
16+
end
17+
18+
File.open('chardinjs.min.js', 'w') { |f| f.write Uglifier.compile(File.read('chardinjs.js')) }
19+
end
20+
21+
desc "Watch"
22+
task :watch do
23+
files = Dir.glob("**/*.coffee").join(' ')
24+
system("bundle exec coffee -wc #{files}")
25+
end

‎chardinjs.coffee

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
(($, window) ->
2+
# Define the plugin class
3+
class chardinJs
4+
constructor: (el) -> @$el = $(el)
5+
6+
start: ->
7+
return false if @._overlay_visible()
8+
@._add_overlay_layer()
9+
@._show_element(el) for el in @$el.find('*[data-intro]')
10+
11+
@$el.trigger 'chardinJs:start'
12+
13+
toggle: () ->
14+
if not @._overlay_visible()
15+
@.start()
16+
else
17+
@.stop()
18+
19+
stop: () ->
20+
@$el.find(".chardinjs-overlay").fadeOut -> @.remove()
21+
22+
@$el.find('.chardinjs-helper-layer').remove()
23+
24+
@$el.find('.chardinjs-show-element').removeClass('chardinjs-show-element')
25+
26+
if window.removeEventListener
27+
window.removeEventListener "keydown", @_onKeyDown, true
28+
#IE
29+
else document.detachEvent "onkeydown", @_onKeyDown if document.detachEvent
30+
31+
@$el.trigger 'chardinJs:stop'
32+
33+
_overlay_visible: ->
34+
@$el.find('.chardinjs-overlay').length != 0
35+
36+
_add_overlay_layer: () ->
37+
return false if @._overlay_visible()
38+
overlay_layer = document.createElement("div")
39+
styleText = ""
40+
41+
overlay_layer.className = "chardinjs-overlay"
42+
43+
#check if the target element is body, we should calculate the size of overlay layer in a better way
44+
if @$el.prop('tagName') is "BODY"
45+
styleText += "top: 0;bottom: 0; left: 0;right: 0;position: fixed;"
46+
overlay_layer.setAttribute "style", styleText
47+
else
48+
element_position = @._get_offset()
49+
if element_position
50+
styleText += "width: " + element_position.width + "px; height:" + element_position.height + "px; top:" + element_position.top + "px;left: " + element_position.left + "px;"
51+
overlay_layer.setAttribute "style", styleText
52+
@$el.get()[0].appendChild overlay_layer
53+
54+
overlay_layer.onclick = => @.stop()
55+
56+
setTimeout ->
57+
styleText += "opacity: .8;"
58+
overlay_layer.setAttribute "style", styleText
59+
, 10
60+
61+
_get_position: (element) -> element.getAttribute('data-position') or 'bottom'
62+
63+
_place_tooltip: (element, tooltip_layer) ->
64+
tooltip_layer_position = @._get_offset(tooltip_layer)
65+
66+
#reset the old style
67+
tooltip_layer.style.top = null
68+
tooltip_layer.style.right = null
69+
tooltip_layer.style.bottom = null
70+
tooltip_layer.style.left = null
71+
72+
switch @._get_position(element)
73+
when "top", "bottom"
74+
target_element_position = @._get_offset(element)
75+
target_width = target_element_position.width
76+
my_width = $(tooltip_layer).width()
77+
tooltip_layer.style.left = "#{(target_width/2)-(tooltip_layer_position.width/2)}px"
78+
when "left", "right"
79+
target_element_position = @._get_offset(element)
80+
target_height = target_element_position.height
81+
my_height = $(tooltip_layer).height()
82+
tooltip_layer.style.top = "#{(target_height/2)-(tooltip_layer_position.height/2)}px"
83+
84+
switch @._get_position(element)
85+
when "left" then tooltip_layer.style.left = "-" + (tooltip_layer_position.width - 34) + "px"
86+
when "right" then tooltip_layer.style.right = "-" + (tooltip_layer_position.width - 34) + "px"
87+
when "bottom" then tooltip_layer.style.bottom = "-" + (tooltip_layer_position.height) + "px"
88+
when "top" then tooltip_layer.style.top = "-" + (tooltip_layer_position.height) + "px"
89+
90+
_show_element: (element) ->
91+
element_position = @._get_offset(element)
92+
helper_layer = document.createElement("div")
93+
tooltip_layer = document.createElement("div")
94+
helper_layer.setAttribute "data-id", element.id if element.id
95+
helper_layer.className = "chardinjs-helper-layer chardinjs-#{@._get_position(element)}"
96+
helper_layer.setAttribute "style", "width: #{element_position.width}px; height:#{element_position.height}px; top:#{element_position.top}px; left: #{element_position.left}px;"
97+
98+
@$el.get()[0].appendChild helper_layer
99+
tooltip_layer.className = "chardinjs-tooltip chardinjs-#{@._get_position(element)}"
100+
tooltip_layer.innerHTML = "<div class='chardinjs-tooltiptext'>#{element.getAttribute('data-intro')}</div>"
101+
helper_layer.appendChild tooltip_layer
102+
103+
@._place_tooltip element, tooltip_layer
104+
105+
element.className += " chardinjs-show-element"
106+
107+
current_element_position = ""
108+
if element.currentStyle #IE
109+
current_element_position = element.currentStyle["position"]
110+
#Firefox
111+
else current_element_position = document.defaultView.getComputedStyle(element, null).getPropertyValue("position") if document.defaultView and document.defaultView.getComputedStyle
112+
113+
current_element_position = current_element_position.toLowerCase()
114+
115+
element.className += " chardinjs-relative-position" if current_element_position isnt "absolute" and current_element_position isnt "relative"
116+
117+
_get_offset: (element) ->
118+
element_position =
119+
width: element.offsetWidth
120+
height: element.offsetHeight
121+
122+
_x = 0
123+
_y = 0
124+
while element and not isNaN(element.offsetLeft) and not isNaN(element.offsetTop)
125+
_x += element.offsetLeft
126+
_y += element.offsetTop
127+
element = element.offsetParent
128+
129+
element_position.top = _y
130+
element_position.left = _x
131+
element_position
132+
133+
$.fn.extend chardinJs: (option, args...) ->
134+
$this = $(this[0])
135+
data = $this.data('chardinJs')
136+
if !data
137+
$this.data 'chardinJs', (data = new chardinJs(this, option))
138+
if typeof option == 'string'
139+
data[option].apply(data, args)
140+
data
141+
) window.jQuery, window

‎chardinjs.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.chardinjs-overlay {
2+
position: absolute;
3+
z-index: 999999;
4+
background-color: #000;
5+
opacity: 0;
6+
-webkit-transition: all 0.3s ease-out;
7+
-moz-transition: all 0.3s ease-out;
8+
-ms-transition: all 0.3s ease-out;
9+
-o-transition: all 0.3s ease-out;
10+
transition: all 0.3s ease-out; }
11+
12+
.chardinjs-helper-layer {
13+
position: absolute;
14+
z-index: 9999998;
15+
color: white;
16+
-webkit-transition: all 0.3s ease-out;
17+
-moz-transition: all 0.3s ease-out;
18+
-ms-transition: all 0.3s ease-out;
19+
-o-transition: all 0.3s ease-out;
20+
transition: all 0.3s ease-out; }
21+
.chardinjs-helper-layer.chardinjs-left {
22+
border-left: solid white 1px;
23+
margin-left: -10px; }
24+
.chardinjs-helper-layer.chardinjs-right {
25+
border-right: solid white 1px;
26+
padding-right: 10px; }
27+
.chardinjs-helper-layer.chardinjs-bottom {
28+
border-bottom: solid white 1px;
29+
padding-bottom: 10px; }
30+
.chardinjs-helper-layer.chardinjs-top {
31+
border-top: solid white 1px;
32+
padding-top: 10px; }
33+
34+
.chardinjs-tooltip {
35+
position: absolute;
36+
-webkit-transition: opacity 0.1s ease-out;
37+
-moz-transition: opacity 0.1s ease-out;
38+
-ms-transition: opacity 0.1s ease-out;
39+
-o-transition: opacity 0.1s ease-out;
40+
transition: opacity 0.1s ease-out;
41+
max-width: 200px; }
42+
.chardinjs-tooltip.chardinjs-left {
43+
margin-left: -135px;
44+
padding-right: 10px; }
45+
.chardinjs-tooltip.chardinjs-right {
46+
margin-right: -135px;
47+
padding-left: 10px; }
48+
.chardinjs-tooltip.chardinjs-bottom {
49+
margin-bottom: -50px;
50+
padding-top: 10px; }
51+
.chardinjs-tooltip.chardinjs-top {
52+
margin-top: -50px;
53+
padding-bottom: 10px; }
54+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
55+
content: ".";
56+
display: inline-block;
57+
background-color: white;
58+
height: 1px;
59+
overflow: hidden;
60+
position: absolute; }
61+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after {
62+
width: 100px;
63+
top: 50%; }
64+
.chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
65+
width: 1px;
66+
height: 50px;
67+
left: 50%; }
68+
.chardinjs-tooltip.chardinjs-bottom:before {
69+
top: -50px; }
70+
.chardinjs-tooltip.chardinjs-top:after {
71+
bottom: -50px; }
72+
.chardinjs-tooltip.chardinjs-right:before {
73+
left: -100px; }
74+
.chardinjs-tooltip.chardinjs-left:after {
75+
right: -100px; }
76+
77+
.chardinjs-show-element {
78+
z-index: 9999999;
79+
opacity: 0.8; }
80+
81+
.chardinjs-relative-position {
82+
position: relative; }

‎chardinjs.scss

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.chardinjs-overlay {
2+
position: absolute;
3+
z-index: 999999;
4+
background-color: #000;
5+
opacity: 0;
6+
-webkit-transition: all 0.3s ease-out;
7+
-moz-transition: all 0.3s ease-out;
8+
-ms-transition: all 0.3s ease-out;
9+
-o-transition: all 0.3s ease-out;
10+
transition: all 0.3s ease-out;
11+
}
12+
13+
.chardinjs-helper-layer {
14+
position: absolute;
15+
z-index: 9999998;
16+
color: white;
17+
-webkit-transition: all 0.3s ease-out;
18+
-moz-transition: all 0.3s ease-out;
19+
-ms-transition: all 0.3s ease-out;
20+
-o-transition: all 0.3s ease-out;
21+
transition: all 0.3s ease-out;
22+
23+
&.chardinjs-left { border-left: solid white 1px; margin-left: -10px; }
24+
&.chardinjs-right { border-right: solid white 1px; padding-right: 10px; }
25+
&.chardinjs-bottom { border-bottom: solid white 1px; padding-bottom: 10px; }
26+
&.chardinjs-top { border-top: solid white 1px; padding-top: 10px; }
27+
}
28+
29+
.chardinjs-tooltip {
30+
position: absolute;
31+
-webkit-transition: opacity 0.1s ease-out;
32+
-moz-transition: opacity 0.1s ease-out;
33+
-ms-transition: opacity 0.1s ease-out;
34+
-o-transition: opacity 0.1s ease-out;
35+
transition: opacity 0.1s ease-out;
36+
37+
max-width: 200px;
38+
39+
&.chardinjs-left { margin-left: -135px; padding-right: 10px; }
40+
&.chardinjs-right { margin-right: -135px; padding-left: 10px; }
41+
&.chardinjs-bottom { margin-bottom: -50px; padding-top: 10px; }
42+
&.chardinjs-top { margin-top: -50px; padding-bottom: 10px; }
43+
44+
&.chardinjs-right:before, &.chardinjs-left:after, &.chardinjs-bottom:before, &.chardinjs-top:after {
45+
content: ".";
46+
display: inline-block;
47+
background-color: white;
48+
height: 1px;
49+
overflow: hidden;
50+
position: absolute;
51+
}
52+
53+
&.chardinjs-right:before, &.chardinjs-left:after {
54+
width: 100px;
55+
top: 50%;
56+
}
57+
58+
&.chardinjs-bottom:before, &.chardinjs-top:after {
59+
width: 1px;
60+
height: 50px;
61+
left: 50%;
62+
}
63+
64+
&.chardinjs-bottom:before { top: -50px; }
65+
&.chardinjs-top:after { bottom: -50px; }
66+
&.chardinjs-right:before { left: -100px; }
67+
&.chardinjs-left:after { right: -100px; }
68+
}
69+
70+
.chardinjs-show-element {
71+
z-index: 9999999;
72+
opacity: 0.8;
73+
}
74+
75+
.chardinjs-relative-position {
76+
position: relative;
77+
}

‎example/css/bootstrap-responsive.min.css

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/css/bootstrap.min.css

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)