Skip to content
This repository was archived by the owner on Nov 8, 2017. It is now read-only.

Commit 7dd6dff

Browse files
author
Artur Sapek
committed
Refactor tooltip logic into new file
1 parent 97e7bcf commit 7dd6dff

File tree

8 files changed

+87
-64
lines changed

8 files changed

+87
-64
lines changed

‎build.yml

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ src: !!omap
8181
- error-reporting
8282
- afk
8383
- topui
84+
- tooltips
8485
- swatch
8586
- swatch-duo
8687
- snapping

‎build/app/mondrian.appcache

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
CACHE MANIFEST
2-
# Revision 2bfa08fe9959885a1a6e0dcb90cb88b52ae3d015
2+
# Revision bfa08fe9959885a1a6e0dcb90cb88b52ae3d015
33
/assets/vendor/jquery-2.1.0.min.js
44
/assets/vendor/md5.min.js
55
/assets/vendor/jquery.tinysort.min.js

‎build/index.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -133,52 +133,52 @@
133133

134134
<!-- Side application tool palette -->
135135
<div id="tool-palette">
136-
<div class="tool-button blue" id="cursor-btn">
136+
<div class="tool-button blue" tool="cursor">
137137
<div class="tool-info">Cursor
138138
<div class="shortcut">V</div>
139139
</div>
140140
</div>
141-
<div class="tool-button red" id="pen-btn">
141+
<div class="tool-button red" tool="pen">
142142
<div class="tool-info">Pen
143143
<div class="shortcut">P</div>
144144
</div>
145145
</div>
146-
<div class="tool-button blue" id="crayon-btn">
146+
<div class="tool-button blue" tool="crayon">
147147
<div class="tool-info">Crayon
148148
<div class="shortcut">C</div>
149149
</div>
150150
</div>
151-
<div class="tool-button yellow" id="ellipse-btn">
151+
<div class="tool-button yellow" tool="ellipse">
152152
<div class="tool-info">Ellipse
153153
<div class="shortcut">L</div>
154154
</div>
155155
</div>
156-
<div class="tool-button blue" id="rectangle-btn">
156+
<div class="tool-button blue" tool="rectangle">
157157
<div class="tool-info">Rectangle
158158
<div class="shortcut">M</div>
159159
</div>
160160
</div>
161-
<div class="tool-button yellow" id="line-btn">
161+
<div class="tool-button yellow" tool="line">
162162
<div class="tool-info">Line
163163
<div class="shortcut">\</div>
164164
</div>
165165
</div>
166-
<div class="tool-button red" id="type-btn">
166+
<div class="tool-button red" tool="type">
167167
<div class="tool-info">Text
168168
<div class="shortcut">T</div>
169169
</div>
170170
</div>
171-
<div class="tool-button yellow" id="rotate-btn">
171+
<div class="tool-button yellow" tool="rotate">
172172
<div class="tool-info">Rotate
173173
<div class="shortcut">R</div>
174174
</div>
175175
</div>
176-
<div class="tool-button red" id="eyedropper-btn">
176+
<div class="tool-button red" tool="eyedropper">
177177
<div class="tool-info">Eyedropper
178178
<div class="shortcut">I</div>
179179
</div>
180180
</div>
181-
<div class="tool-button blue" id="zoom-btn">
181+
<div class="tool-button blue" tool="zoom">
182182
<div class="tool-info">Zoom
183183
<div class="shortcut">Z</div>
184184
</div>

‎src/coffee/tools/tool.coffee

+1-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ class Tool
1919
ui.hotkeys.sets.app.down[@hotkey] = (e) =>
2020
e.preventDefault()
2121
ui.switchToTool @
22-
# Hide tooltip
23-
ui.topUI._$tooltipVisible?.hide()
24-
ui.topUI._$tooltipVisible = undefined
22+
ui.tooltips.hideVisible()
2523

2624
tearDown: ->
2725

‎src/coffee/ui/tooltips.coffee

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
###
2+
3+
Tooltips
4+
______ ___________
5+
| | | | |
6+
| |x| | | Pen P |
7+
|_____| |___________|
8+
9+
###
10+
11+
ui.tooltips =
12+
FADEIN_DELAY: 500
13+
FADEOUT_DELAY: 300
14+
FADE_DURATION: 50
15+
16+
_showTimeout: undefined
17+
_hideTimeout: undefined
18+
_$visible: undefined
19+
20+
$elemFor: (tool) ->
21+
$(".tool-button[tool=\"#{tool}\"] .tool-info")
22+
23+
activate: (tool) ->
24+
$tooltip = @$elemFor(tool)
25+
26+
if @_$visible? and @_$visible.text() == $tooltip.text()
27+
return clearTimeout @_hideTimeout
28+
29+
if @_$visible?
30+
clearTimeout @_hideTimeout
31+
@_$visible.hide()
32+
$tooltip.show()
33+
@_$visible = $tooltip
34+
else
35+
clearTimeout @_showTimeout
36+
@_showTimeout = setTimeout =>
37+
$tooltip.fadeIn(@FADE_DURATION)
38+
@_$visible = $tooltip
39+
, @FADEIN_DELAY
40+
41+
42+
deactivate: (tool) ->
43+
$tooltip = @$elemFor(tool)
44+
45+
if @_$visible?
46+
if @_$visible.text() == $tooltip.text()
47+
@_hideTimeout = setTimeout =>
48+
$tooltip.fadeOut(@FADE_DURATION)
49+
@_$visible = undefined
50+
, @FADEOUT_DELAY
51+
else
52+
clearTimeout @_showTimeout
53+
54+
hideVisible: (tool) ->
55+
clearTimeout @_showTimeout
56+
@_$visible?.hide()
57+
@_$visible = undefined

‎src/coffee/ui/topui.coffee

+5-38
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,12 @@ ui.topUI =
2121
@[event]["#" + e.target.id]?(e)
2222

2323
hover:
24-
"slider knob": (e) ->
25-
2624
".tool-button": (e) ->
27-
$tooltip = $(e.target).find(".tool-info")
28-
$visible = ui.topUI._$tooltipVisible
29-
30-
if $visible? and $visible.text() == $tooltip.text()
31-
return clearTimeout ui.topUI._tooltipHideTimeout
32-
33-
if $visible?
34-
clearTimeout ui.topUI._tooltipHideTimeout
35-
$visible.hide()
36-
$tooltip.show()
37-
ui.topUI._$tooltipVisible = $tooltip
38-
else
39-
clearTimeout ui.topUI._tooltipShowTimeout
40-
ui.topUI._tooltipShowTimeout = setTimeout =>
41-
$tooltip.fadeIn(50)
42-
ui.topUI._$tooltipVisible = $tooltip
43-
, 500
25+
ui.tooltips.activate(e.target.getAttribute("tool"))
4426

4527
unhover:
46-
"slider knob": ->
47-
4828
".tool-button": (e) ->
49-
$tooltip = $(e.target).find(".tool-info")
50-
$visible = ui.topUI._$tooltipVisible
51-
52-
if $visible?
53-
if $visible.text() == $tooltip.text()
54-
ui.topUI._tooltipHideTimeout = setTimeout =>
55-
$tooltip.fadeOut(50)
56-
ui.topUI._$tooltipVisible = undefined
57-
, 300
58-
else
59-
clearTimeout ui.topUI._tooltipShowTimeout
29+
ui.tooltips.deactivate(e.target.getAttribute("tool"))
6030

6131
click:
6232
".swatch": (e) ->
@@ -75,12 +45,9 @@ ui.topUI =
7545
ui.utilities.color.setting.getAttribute("type"))
7646

7747
".tool-button": (e) ->
78-
ui.switchToTool tools[e.target.id.replace("-btn", "")]
79-
# Don't show the tooltip if the user selects the tool,
80-
# or hide the tooltip if it has already come up.
81-
clearTimeout ui.topUI._tooltipShowTimeout
82-
ui.topUI._$tooltipVisible?.hide()
83-
ui.topUI._$tooltipVisible = undefined
48+
tool = e.target.getAttribute('tool')
49+
ui.switchToTool tools[tool]
50+
ui.tooltips.hideVisible()
8451

8552
".slider": (e) ->
8653
$(e.target).trigger("release")

‎src/coffee/ui/ui.coffee

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ window.ui =
183183
# in the UI. Update those buttons unless we're just temporarily
184184
# activating the paw.
185185
q(".tool-button[selected]")?.removeAttribute('selected')
186-
q("##{tool.id}-btn")?.setAttribute('selected', '')
186+
q(".tool-button[tool=\"#{tool.id}\"]")?.setAttribute('selected', '')
187187

188188
# A hack, somewhat. Changing the document cursor offset in the CSS
189189
# fires a mousemove so if we're changing to a tool with a different

‎src/less/ui.less

+11-11
Original file line numberDiff line numberDiff line change
@@ -179,47 +179,47 @@ div#tool-palette {
179179
margin-bottom: 5px;
180180
position: relative;
181181

182-
&#cursor-btn{
182+
&[tool="cursor"]{
183183
background-image: url('/assets/images/cursors/cursor.png')!important;
184184
background-position: 14px 10px;
185185
}
186-
&#pen-btn{
186+
&[tool="pen"]{
187187
background-image: url('/assets/images/cursors/type-a.png')!important;
188188
background-position: 13px 8px;
189189
}
190-
&#crayon-btn{
190+
&[tool="crayon"]{
191191
background-image: url('/assets/images/cursors/crayon.png')!important;
192192
background-position: 12px 8px;
193193
}
194-
&#ellipse-btn{
194+
&[tool="ellipse"]{
195195
background-image: url('/assets/images/cursors/ellipse.png')!important;
196196
background-position: 10px 9px;
197197
}
198-
&#rectangle-btn{
198+
&[tool="rectangle"]{
199199
background-image: url('/assets/images/cursors/rectangle.png')!important;
200200
background-position: 10px 9px;
201201
}
202-
&#line-btn{
202+
&[tool="line"]{
203203
background-image: url('/assets/images/cursors/line.png')!important;
204204
background-position: 10px 9px;
205205
}
206-
&#rotate-btn{
206+
&[tool="rotate"]{
207207
background-image: url('/assets/images/cursors/rotate.png')!important;
208208
background-position: 10px 9px;
209209
}
210-
&#type-btn{
210+
&[tool="type"]{
211211
background-image: url('/assets/images/cursors/olivetti.png')!important;
212212
background-position: 8px 9px;
213213
}
214-
&#eyedropper-btn{
214+
&[tool="eyedropper"]{
215215
background-image: url('/assets/images/cursors/eyedropper.png')!important;
216216
background-position: 10px 9px;
217217
}
218-
&#zoom-btn{
218+
&[tool="zoom"]{
219219
background-image: url('/assets/images/cursors/loupe.png')!important;
220220
background-position: 10px 9px;
221221
}
222-
&#eyedropper-btn{
222+
&[tool="eyedropper"]{
223223
background-image: url('/assets/images/cursors/eyedropper.png')!important;
224224
background-position: 10px 9px;
225225
}

0 commit comments

Comments
 (0)