|
|
@@ -0,0 +1,340 @@
|
|
|
1
|
+ /**
|
|
|
2
|
+ * jQuery aSimpleTour
|
|
|
3
|
+ *
|
|
|
4
|
+ * @description Tour web
|
|
|
5
|
+ * @author alvaro.veliz@gmail.com
|
|
|
6
|
+ * @servedby perkins (http://p.erkins.com)
|
|
|
7
|
+ *
|
|
|
8
|
+ * Dependencies :
|
|
|
9
|
+ * - jQuery scrollTo
|
|
|
10
|
+ *
|
|
|
11
|
+ * This idea is based on http://tympanus.net/codrops/2010/12/21/website-tour/ by Manoela Lic (https://twitter.com/#!/crnacura)
|
|
|
12
|
+ */
|
|
|
13
|
+
|
|
|
14
|
+(function( $ ) {
|
|
|
15
|
+
|
|
|
16
|
+ var settings = {
|
|
|
17
|
+ data : [],
|
|
|
18
|
+ autoStart : false,
|
|
|
19
|
+ controlsPosition : 'TR',
|
|
|
20
|
+ welcomeMessage : '<h2>Tour</h2><p>Welcome to the Tour Plugin</p>',
|
|
|
21
|
+ buttons : {
|
|
|
22
|
+ next : 'Next',
|
|
|
23
|
+ prev : 'Previous',
|
|
|
24
|
+ start : 'Start',
|
|
|
25
|
+ end : 'End'
|
|
|
26
|
+ },
|
|
|
27
|
+ controlsColors : {
|
|
|
28
|
+ background: 'rgba(8, 68, 142, 0.80)',
|
|
|
29
|
+ color: '#fff'
|
|
|
30
|
+ },
|
|
|
31
|
+ tooltipColors : {
|
|
|
32
|
+ background: 'rgba(0, 0, 0, 0.70)',
|
|
|
33
|
+ color: '#fff'
|
|
|
34
|
+ },
|
|
|
35
|
+ endCallback: $.noop()
|
|
|
36
|
+ };
|
|
|
37
|
+
|
|
|
38
|
+ var options, step, steps;
|
|
|
39
|
+ var ew, eh, el, et;
|
|
|
40
|
+ var started = false;
|
|
|
41
|
+ var direction = 'f';
|
|
|
42
|
+
|
|
|
43
|
+ var $tooltip = $('<div>',{
|
|
|
44
|
+ id : 'tourtip',
|
|
|
45
|
+ className : 'tourtip',
|
|
|
46
|
+ html : ''
|
|
|
47
|
+ }).css({
|
|
|
48
|
+ 'display' : 'none',
|
|
|
49
|
+ 'padding' : '10px 20px',
|
|
|
50
|
+ 'position' : 'absolute',
|
|
|
51
|
+ 'font-family' : 'sans-serif',
|
|
|
52
|
+ 'border-radius' : '5px',
|
|
|
53
|
+ 'font-size' : '12px',
|
|
|
54
|
+ 'box-sizing' : 'border-box'
|
|
|
55
|
+ });
|
|
|
56
|
+
|
|
|
57
|
+ var methods = {
|
|
|
58
|
+ init : function( opts ) {
|
|
|
59
|
+ if (started == false ) {
|
|
|
60
|
+ started = true;
|
|
|
61
|
+ options = $.extend(settings, opts);
|
|
|
62
|
+
|
|
|
63
|
+ controls = '<div id="tourControls">\
|
|
|
64
|
+ <div id="tourText">'+options.welcomeMessage+'</div>\
|
|
|
65
|
+ <div id="tourButtons">\
|
|
|
66
|
+ <button id="tourPrev" style="display:none">'+options.buttons.prev+'</button>\
|
|
|
67
|
+ <button id="tourNext">'+options.buttons.start+'</button>\
|
|
|
68
|
+ <a href="javascript:void(0);" id="tourEnd" style="display:block;">'+options.buttons.end+'</a>\
|
|
|
69
|
+ </div>\
|
|
|
70
|
+ </div>';
|
|
|
71
|
+ $controlsCss = { 'display' : 'block', 'position': 'fixed', 'width' : '200px', 'padding' : '10px 20px', 'border-radius' : '10px', 'font-family' : 'sans-serif' };
|
|
|
72
|
+ $controls = $(controls).css($controlsCss).css(options.controlsColors);
|
|
|
73
|
+ $cpos = methods.getControlPosition(options.controlsPosition);
|
|
|
74
|
+ $controls.css($cpos);
|
|
|
75
|
+ $('body').append($controls);
|
|
|
76
|
+
|
|
|
77
|
+ $tooltip.css(options.tooltipColors);
|
|
|
78
|
+
|
|
|
79
|
+ step = -1;
|
|
|
80
|
+ steps = options.data.length;
|
|
|
81
|
+ $('body').prepend($tooltip);
|
|
|
82
|
+ }
|
|
|
83
|
+ },
|
|
|
84
|
+ next : function() {
|
|
|
85
|
+ direction = 'f';
|
|
|
86
|
+ step++;
|
|
|
87
|
+
|
|
|
88
|
+ if (step == steps) {
|
|
|
89
|
+ options.endCallback();
|
|
|
90
|
+ methods.destroy();
|
|
|
91
|
+ }
|
|
|
92
|
+ else {
|
|
|
93
|
+ $tooltip.hide();
|
|
|
94
|
+ stepData = options.data[step];
|
|
|
95
|
+
|
|
|
96
|
+ if (step <= steps) {
|
|
|
97
|
+ $('#tourPrev').show();
|
|
|
98
|
+ $('#tourEnd').show();
|
|
|
99
|
+ $('#tourNext').show().html(options.buttons.next);
|
|
|
100
|
+ }
|
|
|
101
|
+
|
|
|
102
|
+ methods.setTooltip(stepData);
|
|
|
103
|
+ }
|
|
|
104
|
+ },
|
|
|
105
|
+ prev : function() {
|
|
|
106
|
+ direction = 'b';
|
|
|
107
|
+
|
|
|
108
|
+ $tooltip.hide();
|
|
|
109
|
+
|
|
|
110
|
+ if (step < steps) {
|
|
|
111
|
+ $('#tourNext').show().html(options.buttons.next);
|
|
|
112
|
+ }
|
|
|
113
|
+
|
|
|
114
|
+ if (step <= 0) {
|
|
|
115
|
+ $('#tourPrev').hide();
|
|
|
116
|
+ $('#tourEnd').hide();
|
|
|
117
|
+ $('#tourNext').html(options.buttons.start);
|
|
|
118
|
+ step--;
|
|
|
119
|
+ }
|
|
|
120
|
+ else {
|
|
|
121
|
+ step--;
|
|
|
122
|
+ stepData = options.data[step];
|
|
|
123
|
+
|
|
|
124
|
+ methods.setTooltip(stepData);
|
|
|
125
|
+ }
|
|
|
126
|
+ },
|
|
|
127
|
+ setTooltip : function(stepData) {
|
|
|
128
|
+ $element = $(stepData.element);
|
|
|
129
|
+
|
|
|
130
|
+ if (stepData.controlsPosition) {
|
|
|
131
|
+ methods.setControlsPosition(stepData.controlsPosition);
|
|
|
132
|
+ }
|
|
|
133
|
+
|
|
|
134
|
+ if (stepData.tooltip) {
|
|
|
135
|
+ $tooltip.html(stepData.tooltip);
|
|
|
136
|
+ text = (typeof stepData.text != 'undefined') ? stepData.text : stepData.tooltip;
|
|
|
137
|
+ $('#tourText').html(text);
|
|
|
138
|
+
|
|
|
139
|
+ tooltipPos = (typeof stepData.position == 'undefined') ? 'BL' : stepData.position;
|
|
|
140
|
+ $pos = methods.getTooltipPosition(tooltipPos, $element);
|
|
|
141
|
+
|
|
|
142
|
+ $tooltip.css({ 'top': $pos.top+'px', 'left': $pos.left+'px' });
|
|
|
143
|
+ $tooltip.show('fast');
|
|
|
144
|
+
|
|
|
145
|
+ $.scrollTo($tooltip, 400, { offset : -100});
|
|
|
146
|
+ }
|
|
|
147
|
+
|
|
|
148
|
+ if (typeof stepData.tooltipCallback != 'undefined') {
|
|
|
149
|
+ stepData.tooltipCallback();
|
|
|
150
|
+ }
|
|
|
151
|
+
|
|
|
152
|
+
|
|
|
153
|
+ if (typeof stepData.callback != 'undefined') {
|
|
|
154
|
+ if (stepData.callback == 'click') {
|
|
|
155
|
+ urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
|
|
|
156
|
+ urlslugRegex = /^[a-z0-9-]+$/;
|
|
|
157
|
+
|
|
|
158
|
+ if (urlRegex.test($element.attr('href')) || urlslugRegex.test($element.attr('href')) ) {
|
|
|
159
|
+ location.href = $element.attr('href');
|
|
|
160
|
+ }
|
|
|
161
|
+ else {
|
|
|
162
|
+ $element.trigger('click');
|
|
|
163
|
+ }
|
|
|
164
|
+ }
|
|
|
165
|
+ else {
|
|
|
166
|
+ if (typeof eval(stepData.callback) == 'function') {
|
|
|
167
|
+ eval(stepData.callback);
|
|
|
168
|
+ }
|
|
|
169
|
+ }
|
|
|
170
|
+ }
|
|
|
171
|
+
|
|
|
172
|
+ if (stepData.next === true) {
|
|
|
173
|
+ if (direction == 'f') {
|
|
|
174
|
+ methods.next();
|
|
|
175
|
+ }
|
|
|
176
|
+ else {
|
|
|
177
|
+ methods.prev();
|
|
|
178
|
+ }
|
|
|
179
|
+ }
|
|
|
180
|
+
|
|
|
181
|
+ },
|
|
|
182
|
+ setControlsPosition : function(pos) {
|
|
|
183
|
+ chtml = $controls.html();
|
|
|
184
|
+ $controls.remove();
|
|
|
185
|
+ $controls = $(controls).html(chtml);
|
|
|
186
|
+ $controls = $controls.css($controlsCss).css(options.controlsColors);
|
|
|
187
|
+ position = methods.getControlPosition(pos);
|
|
|
188
|
+ $controls.css(position);
|
|
|
189
|
+ $('body').append($controls);
|
|
|
190
|
+ },
|
|
|
191
|
+ getTooltipPosition : function(pos, $e) {
|
|
|
192
|
+ ew = $element.outerWidth();
|
|
|
193
|
+ eh = $element.outerHeight();
|
|
|
194
|
+ el = $element.offset().left;
|
|
|
195
|
+ et = $element.offset().top;
|
|
|
196
|
+ tw = $tooltip.width() + parseInt($tooltip.css('padding-left')) + parseInt($tooltip.css('padding-right'));
|
|
|
197
|
+ th = $tooltip.height() + parseInt($tooltip.css('padding-top')) + + parseInt($tooltip.css('padding-bottom'));
|
|
|
198
|
+
|
|
|
199
|
+ $('.tourArrow').remove();
|
|
|
200
|
+ tbg = $tooltip.css('background-color');
|
|
|
201
|
+
|
|
|
202
|
+ $upArrow = $('<div class="tourArrow"></div>').css({ 'position' : 'absolute', 'display' : 'block', 'width' : '0', 'height' : '0', 'border-left' : '5px solid transparent', 'border-right' : '5px solid transparent', 'border-bottom' : '5px solid '+tbg });
|
|
|
203
|
+ $downArrow = $('<div class="tourArrow"></div>').css({ 'position' : 'absolute', 'display' : 'block', 'width' : '0', 'height' : '0', 'border-left' : '5px solid transparent', 'border-right' : '5px solid transparent', 'border-top' : '5px solid '+tbg });
|
|
|
204
|
+ $rightArrow = $('<div class="tourArrow"></div>').css({ 'position' : 'absolute', 'display' : 'block', 'width' : '0', 'height' : '0', 'border-top' : '5px solid transparent', 'border-bottom' : '5px solid transparent', 'border-left' : '5px solid '+tbg });
|
|
|
205
|
+ $leftArrow = $('<div class="tourArrow"></div>').css({ 'position' : 'absolute', 'display' : 'block', 'width' : '0', 'height' : '0', 'border-top' : '5px solid transparent', 'border-bottom' : '5px solid transparent', 'border-right' : '5px solid '+tbg });
|
|
|
206
|
+ switch (pos) {
|
|
|
207
|
+ case 'BL' :
|
|
|
208
|
+ position = { 'left' : el, 'top' : et + eh + 10 };
|
|
|
209
|
+ $upArrow.css({ top: '-5px', left: '48%' });
|
|
|
210
|
+ $tooltip.prepend($upArrow);
|
|
|
211
|
+ break;
|
|
|
212
|
+
|
|
|
213
|
+ case 'BR' :
|
|
|
214
|
+ position = { 'left' : el + ew - tw, 'top' : et + eh + 10 };
|
|
|
215
|
+ $upArrow.css({ top: '-5px', left: '48%' });
|
|
|
216
|
+ $tooltip.prepend($upArrow);
|
|
|
217
|
+ break;
|
|
|
218
|
+
|
|
|
219
|
+ case 'TL' :
|
|
|
220
|
+ position = { 'left' : el, 'top' : (et - th) -10 };
|
|
|
221
|
+ $downArrow.css({ top: th, left: '48%' });
|
|
|
222
|
+ $tooltip.append($downArrow);
|
|
|
223
|
+ break;
|
|
|
224
|
+
|
|
|
225
|
+ case 'TR' :
|
|
|
226
|
+ position = { 'left' : (el + ew) - tw, 'top' : et - th -10 };
|
|
|
227
|
+ $downArrow.css({ top: th, left: '48%' });
|
|
|
228
|
+ $tooltip.append($downArrow);
|
|
|
229
|
+ break;
|
|
|
230
|
+
|
|
|
231
|
+ case 'RT' :
|
|
|
232
|
+ position = { 'left' : el + ew + 10, 'top' : et };
|
|
|
233
|
+ $leftArrow.css({ left: '-5px' });
|
|
|
234
|
+ $tooltip.prepend($leftArrow);
|
|
|
235
|
+ break;
|
|
|
236
|
+
|
|
|
237
|
+ case 'RB' :
|
|
|
238
|
+ position = { 'left' : el + ew + 10, 'top' : et + eh - th };
|
|
|
239
|
+ $leftArrow.css({ left: '-5px' });
|
|
|
240
|
+ $tooltip.prepend($leftArrow);
|
|
|
241
|
+ break;
|
|
|
242
|
+
|
|
|
243
|
+ case 'LT' :
|
|
|
244
|
+ position = { 'left' : (el - tw) - 10, 'top' : et };
|
|
|
245
|
+ $rightArrow.css({ right: '-5px' });
|
|
|
246
|
+ $tooltip.prepend($rightArrow);
|
|
|
247
|
+ break;
|
|
|
248
|
+
|
|
|
249
|
+ case 'LB' :
|
|
|
250
|
+ position = { 'left' : (el - tw) - 10, 'top' : et + eh - th};
|
|
|
251
|
+ $rightArrow.css({ right: '-5px' });
|
|
|
252
|
+ $tooltip.prepend($rightArrow);
|
|
|
253
|
+ break;
|
|
|
254
|
+
|
|
|
255
|
+ case 'B' :
|
|
|
256
|
+ position = { 'left' : el + ew/2 - tw/2, 'top' : (et + eh) + 10 };
|
|
|
257
|
+ $upArrow.css({ top: '-5px', left: '48%' });
|
|
|
258
|
+ $tooltip.prepend($upArrow);
|
|
|
259
|
+ break;
|
|
|
260
|
+
|
|
|
261
|
+ case 'L' :
|
|
|
262
|
+ position = { 'left' : (el - tw) - 10, 'top' : et + eh/2 - th/2 };
|
|
|
263
|
+ $rightArrow.css({ right: '-5px' });
|
|
|
264
|
+ $tooltip.prepend($rightArrow);
|
|
|
265
|
+ break;
|
|
|
266
|
+
|
|
|
267
|
+ case 'T' :
|
|
|
268
|
+ position = { 'left' : el + ew/2 - tw/2, 'top' : (et - th) - 10 };
|
|
|
269
|
+ $downArrow.css({ top: th, left: '48%' });
|
|
|
270
|
+ $tooltip.append($downArrow);
|
|
|
271
|
+ break;
|
|
|
272
|
+
|
|
|
273
|
+ case 'R' :
|
|
|
274
|
+ position = { 'left' : (el + ew) + 10, 'top' : et + eh/2 - th/2 };
|
|
|
275
|
+ $leftArrow.css({ left: '-5px' });
|
|
|
276
|
+ $tooltip.prepend($leftArrow);
|
|
|
277
|
+ break;
|
|
|
278
|
+ }
|
|
|
279
|
+ return position;
|
|
|
280
|
+ },
|
|
|
281
|
+ getControlPosition: function(pos) {
|
|
|
282
|
+ switch (pos)
|
|
|
283
|
+ {
|
|
|
284
|
+ case 'TR':
|
|
|
285
|
+ pos = { 'top' : '10px', 'right' : '10px' };
|
|
|
286
|
+ break;
|
|
|
287
|
+
|
|
|
288
|
+ case 'TL':
|
|
|
289
|
+ pos = { 'top' : '10px', 'left' : '10px' };
|
|
|
290
|
+ break;
|
|
|
291
|
+
|
|
|
292
|
+ case 'BL':
|
|
|
293
|
+ pos = { 'bottom' : '10px', 'left' : '10px' };
|
|
|
294
|
+ break;
|
|
|
295
|
+
|
|
|
296
|
+ case 'BR':
|
|
|
297
|
+ pos = { 'bottom' : '10px', 'right' : '10px' };
|
|
|
298
|
+ break;
|
|
|
299
|
+ }
|
|
|
300
|
+ return pos;
|
|
|
301
|
+ },
|
|
|
302
|
+ destroy : function() {
|
|
|
303
|
+ $('#tourControls').remove();
|
|
|
304
|
+ $('#tourtip').remove();
|
|
|
305
|
+ $tooltip.css({ 'display' : 'none' }).html('');
|
|
|
306
|
+ step = -1;
|
|
|
307
|
+ started = false;
|
|
|
308
|
+ }
|
|
|
309
|
+ };
|
|
|
310
|
+
|
|
|
311
|
+ $('#tourNext').live('click', function() {
|
|
|
312
|
+ methods.next();
|
|
|
313
|
+ });
|
|
|
314
|
+
|
|
|
315
|
+ $('#tourPrev').live('click', function() {
|
|
|
316
|
+ methods.prev();
|
|
|
317
|
+ });
|
|
|
318
|
+
|
|
|
319
|
+ $('#tourEnd').live('click', function() {
|
|
|
320
|
+ options.endCallback();
|
|
|
321
|
+ methods.destroy();
|
|
|
322
|
+ })
|
|
|
323
|
+
|
|
|
324
|
+ $.fn.aSimpleTour = function( method )
|
|
|
325
|
+ {
|
|
|
326
|
+ if ( methods[method] ) {
|
|
|
327
|
+ return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
|
|
328
|
+ }
|
|
|
329
|
+ else if ( typeof method === 'object' || ! method ) {
|
|
|
330
|
+ return methods.init.apply( this, arguments );
|
|
|
331
|
+ }
|
|
|
332
|
+ else {
|
|
|
333
|
+ $.error( 'Method ' + method + ' does not exist on jQuery.aSimpleTour' );
|
|
|
334
|
+ }
|
|
|
335
|
+ };
|
|
|
336
|
+
|
|
|
337
|
+})(jQuery);
|
|
|
338
|
+
|
|
|
339
|
+// Direct Access
|
|
|
340
|
+$.aSimpleTour = function(opts) { $.fn.aSimpleTour(opts); }
|
Bastien Sevajol