1677 lines
49 KiB
JavaScript
1677 lines
49 KiB
JavaScript
"use strict";
|
|
(function(factory){
|
|
// AMD
|
|
if(typeof define === 'function' && define.amd) {
|
|
define(['jquery', './jquery.enjoyhint.js', 'jquery.scrollto'], factory);
|
|
}
|
|
// CommonJS
|
|
else if (typeof require === 'function' && typeof exports === 'object') {
|
|
module.exports = factory(require('jquery'), require('./jquery.enjoyhint.js'), require('jquery.scrollto'));
|
|
}
|
|
// Global
|
|
else {
|
|
window.EnjoyHint = factory(jQuery)
|
|
}
|
|
})(function($){
|
|
var EnjoyHint = function(configs) {
|
|
var $event_element;
|
|
var that = this;
|
|
var _options = configs || {};
|
|
var BTN_NEXT_TEXT = _options.btnNextText;
|
|
var BTN_SKIP_TEXT = _options.btnSkipText;
|
|
|
|
var SHAPE_BACKGROUND_COLOR = _options.backgroundColor || "rgba(0,0,0,0.6)";
|
|
|
|
var body = "body"; // TODO: Is it possible case when we need to define enjoyhint somewhere else?
|
|
|
|
var defaults = {
|
|
onStart: function() {},
|
|
|
|
onEnd: function() {},
|
|
|
|
onSkip: function() {},
|
|
|
|
onNext: function() {}
|
|
};
|
|
|
|
var options = $.extend(defaults, _options);
|
|
var data = [];
|
|
var current_step = 0;
|
|
|
|
var $body = $(body);
|
|
|
|
/********************* PRIVATE METHODS ***************************************/
|
|
|
|
var init = function() {
|
|
if ($(".enjoyhint")) {
|
|
$(".enjoyhint").remove();
|
|
}
|
|
|
|
$body.css({ overflow: "hidden" });
|
|
|
|
$(document).on("touchmove", lockTouch);
|
|
|
|
$body.enjoyhint({
|
|
onResetClick: function(){
|
|
resetStep();
|
|
},
|
|
onNextClick: function() {
|
|
nextStep();
|
|
},
|
|
onPrevClick: function(){
|
|
prevStep();
|
|
},
|
|
onSkipClick: function() {
|
|
options.onSkip();
|
|
skipAll();
|
|
},
|
|
fill: SHAPE_BACKGROUND_COLOR
|
|
});
|
|
};
|
|
|
|
var lockTouch = function(e) {
|
|
e.preventDefault();
|
|
};
|
|
|
|
var destroyEnjoy = function() {
|
|
$(".enjoyhint").remove();
|
|
$body.css({ overflow: "auto" });
|
|
$(document).off("touchmove", lockTouch);
|
|
};
|
|
|
|
that.clear = function() {
|
|
var $nextBtn = $(".enjoyhint_next_btn");
|
|
var $skipBtn = $(".enjoyhint_skip_btn");
|
|
var $prevBtn = $(".enjoyhint_prev_btn");
|
|
var $resetBtn = $(".enjoyhint_reset_btn");
|
|
|
|
$prevBtn.removeClass(that.prevUserClass);
|
|
$nextBtn.removeClass(that.nextUserClass);
|
|
$nextBtn.text(BTN_NEXT_TEXT);
|
|
$skipBtn.removeClass(that.skipUserClass);
|
|
$skipBtn.text(BTN_SKIP_TEXT);
|
|
};
|
|
|
|
function hideCurrentHint(){
|
|
$body.enjoyhint("render_circle", []);
|
|
$("#enjoyhint_label").remove();
|
|
$("#enjoyhint_arrpw_line").remove();
|
|
$body.enjoyhint("hide_prev");
|
|
$body.enjoyhint("hide_next");
|
|
$body.enjoyhint("hide_skip");
|
|
};
|
|
|
|
var stepAction = function() {
|
|
if (!(data && data[current_step])) {
|
|
$body.enjoyhint("hide");
|
|
options.onEnd();
|
|
destroyEnjoy();
|
|
return;
|
|
}
|
|
|
|
options.onNext();
|
|
|
|
var $enjoyhint = $(".enjoyhint");
|
|
|
|
$enjoyhint.removeClass("enjoyhint-step-" + current_step);
|
|
$enjoyhint.removeClass("enjoyhint-step-" + (current_step + 1));
|
|
$enjoyhint.removeClass("enjoyhint-step-" + (current_step + 2));
|
|
$enjoyhint.addClass("enjoyhint-step-" + (current_step + 1));
|
|
|
|
var step_data = data[current_step];
|
|
|
|
var scrollSpeed = step_data.scrollAnimationSpeed;
|
|
|
|
if (
|
|
step_data.onBeforeStart &&
|
|
typeof step_data.onBeforeStart === "function"
|
|
) {
|
|
step_data.onBeforeStart();
|
|
}
|
|
|
|
var timeout = step_data.timeout || 0;
|
|
|
|
setTimeout(function() {
|
|
if (!step_data.selector) {
|
|
for (var prop in step_data) {
|
|
if (step_data.hasOwnProperty(prop) && prop.split(" ")[1]) {
|
|
step_data.selector = prop.split(" ")[1];
|
|
step_data.event = prop.split(" ")[0];
|
|
|
|
if (
|
|
prop.split(" ")[0] == "next" ||
|
|
prop.split(" ")[0] == "auto" ||
|
|
prop.split(" ")[0] == "custom"
|
|
) {
|
|
step_data.event_type = prop.split(" ")[0];
|
|
}
|
|
|
|
step_data.description = step_data[prop];
|
|
}
|
|
}
|
|
}
|
|
|
|
setTimeout(function() {
|
|
that.clear();
|
|
}, 250);
|
|
|
|
var isHintInViewport = $(step_data.selector).get(0).getBoundingClientRect();
|
|
if(isHintInViewport.top < 0 || isHintInViewport.bottom > (window.innerHeight || document.documentElement.clientHeight)){
|
|
hideCurrentHint();
|
|
$(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200});
|
|
}
|
|
else {
|
|
// if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default
|
|
scrollSpeed = 250;
|
|
}
|
|
|
|
setTimeout(function() {
|
|
var $element = $(step_data.selector);
|
|
var event = makeEventName(step_data.event);
|
|
$body.enjoyhint("show");
|
|
$event_element = $element;
|
|
|
|
if (step_data.event_selector) {
|
|
$event_element = $(step_data.event_selector);
|
|
}
|
|
|
|
$event_element.off(event)
|
|
$element.off("keydown");
|
|
|
|
if (!step_data.event_type && step_data.event == "key") {
|
|
$element.keydown(function(event) {
|
|
if (event.which == step_data.keyCode) {
|
|
current_step++;
|
|
stepAction();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (step_data.showNext !== true) {
|
|
$body.enjoyhint("hide_next");
|
|
} else {
|
|
$body.enjoyhint("show_next");
|
|
}
|
|
|
|
$body.enjoyhint("hide_prev");
|
|
|
|
if(current_step !== 0) {
|
|
$body.enjoyhint("show_prev");
|
|
}
|
|
|
|
if (step_data.showPrev == false) {
|
|
$body.enjoyhint("hide_prev");
|
|
}
|
|
|
|
if (step_data.showSkip == false) {
|
|
$body.enjoyhint("hide_skip");
|
|
} else {
|
|
$body.enjoyhint("show_skip");
|
|
}
|
|
|
|
|
|
if (step_data.nextButton) {
|
|
var $nextBtn = $(".enjoyhint_next_btn");
|
|
|
|
$nextBtn.addClass(step_data.nextButton.className || "");
|
|
$nextBtn.text(step_data.nextButton.text || "Next");
|
|
that.nextUserClass = step_data.nextButton.className;
|
|
}
|
|
|
|
if (step_data.prevButton) {
|
|
var $prevBtn = $(".enjoyhint_prev_btn");
|
|
|
|
$prevBtn.addClass(step_data.prevButton.className || "");
|
|
$prevBtn.text(step_data.prevButton.text || "Previous");
|
|
that.prevUserClass = step_data.prevButton.className;
|
|
}
|
|
|
|
if (step_data.skipButton) {
|
|
var $skipBtn = $(".enjoyhint_skip_btn");
|
|
|
|
$skipBtn.addClass(step_data.skipButton.className || "");
|
|
$skipBtn.text(step_data.skipButton.text || "Skip");
|
|
that.skipUserClass = step_data.skipButton.className;
|
|
}
|
|
|
|
if (step_data.event_type) {
|
|
switch (step_data.event_type) {
|
|
case "auto":
|
|
$element[step_data.event]();
|
|
|
|
switch (step_data.event) {
|
|
case "click":
|
|
break;
|
|
}
|
|
current_step++;
|
|
stepAction();
|
|
return;
|
|
|
|
case "custom":
|
|
on(step_data.event, function() {
|
|
current_step++;
|
|
off(step_data.event);
|
|
stepAction();
|
|
});
|
|
|
|
break;
|
|
|
|
case "next":
|
|
$body.enjoyhint("show_next");
|
|
break;
|
|
}
|
|
} else {
|
|
$event_element.on(event, function(e) {
|
|
if (step_data.keyCode && e.keyCode != step_data.keyCode) {
|
|
return;
|
|
}
|
|
|
|
current_step++;
|
|
stepAction(); // clicked
|
|
});
|
|
}
|
|
|
|
var max_habarites = Math.max(
|
|
$element.outerWidth(),
|
|
$element.outerHeight()
|
|
);
|
|
var radius = step_data.radius || Math.round(max_habarites / 2) + 5;
|
|
var offset = $element.offset();
|
|
var w = $element.outerWidth();
|
|
var h = $element.outerHeight();
|
|
var shape_margin =
|
|
step_data.margin !== undefined ? step_data.margin : 10;
|
|
|
|
var coords = {
|
|
x: offset.left + Math.round(w / 2),
|
|
y: offset.top + Math.round(h / 2) - $(document).scrollTop()
|
|
};
|
|
|
|
var shape_data = {
|
|
enjoyHintElementSelector: step_data.selector,
|
|
center_x: coords.x,
|
|
center_y: coords.y,
|
|
text: step_data.description,
|
|
arrowColor: step_data.arrowColor,
|
|
top: step_data.top,
|
|
bottom: step_data.bottom,
|
|
left: step_data.left,
|
|
right: step_data.right,
|
|
margin: step_data.margin,
|
|
scroll: step_data.scroll
|
|
};
|
|
|
|
var customBtnProps = {
|
|
nextButton: step_data.nextButton,
|
|
prevButton: step_data.prevButton
|
|
}
|
|
|
|
if (shape_data.center_x === 0 && shape_data.center_y === 0) {
|
|
$body.enjoyhint("hide");
|
|
destroyEnjoy();
|
|
return console.log("Error: Element position couldn't be reached");
|
|
}
|
|
|
|
if (step_data.shape && step_data.shape == "circle") {
|
|
shape_data.shape = "circle";
|
|
shape_data.radius = radius;
|
|
} else {
|
|
shape_data.radius = 0;
|
|
shape_data.width = w + shape_margin;
|
|
shape_data.height = h + shape_margin;
|
|
}
|
|
|
|
$body.enjoyhint("render_label_with_shape", shape_data, that.stop, customBtnProps);
|
|
|
|
}, scrollSpeed + 20 || 270);
|
|
}, timeout);
|
|
};
|
|
|
|
var nextStep = function() {
|
|
current_step++;
|
|
stepAction();
|
|
};
|
|
|
|
var prevStep = function() {
|
|
current_step--;
|
|
stepAction();
|
|
};
|
|
|
|
var resetStep = function() {
|
|
current_step = 0;
|
|
stepAction();
|
|
};
|
|
|
|
var skipAll = function() {
|
|
var step_data = data[current_step];
|
|
var $element = $(step_data.selector);
|
|
|
|
off(step_data.event);
|
|
$element.off(makeEventName(step_data.event));
|
|
|
|
destroyEnjoy();
|
|
};
|
|
|
|
var makeEventName = function(name, is_custom) {
|
|
return name + (is_custom ? "custom" : "") + ".enjoy_hint";
|
|
};
|
|
|
|
var on = function(event_name, callback) {
|
|
$body.on(makeEventName(event_name, true), callback);
|
|
};
|
|
|
|
var off = function(event_name) {
|
|
$body.off(makeEventName(event_name, true));
|
|
};
|
|
|
|
/********************* PUBLIC METHODS ***************************************/
|
|
|
|
window.addEventListener(
|
|
"resize",
|
|
function() {
|
|
if ($event_element != null) {
|
|
$body.enjoyhint(
|
|
"redo_events_near_rect",
|
|
$event_element[0].getBoundingClientRect()
|
|
);
|
|
}
|
|
},
|
|
false
|
|
);
|
|
|
|
that.stop = function() {
|
|
skipAll();
|
|
};
|
|
|
|
that.reRunScript = function(cs) {
|
|
current_step = cs;
|
|
stepAction();
|
|
};
|
|
|
|
that.runScript = function() {
|
|
current_step = 0;
|
|
options.onStart();
|
|
stepAction();
|
|
};
|
|
|
|
that.resumeScript = function() {
|
|
stepAction();
|
|
};
|
|
|
|
that.setCurrentStep = function(cs) {
|
|
current_step = cs;
|
|
};
|
|
|
|
that.getCurrentStep = function() {
|
|
return current_step;
|
|
};
|
|
|
|
that.trigger = function(event_name) {
|
|
switch (event_name) {
|
|
case "next":
|
|
nextStep();
|
|
break;
|
|
|
|
case "skip":
|
|
skipAll();
|
|
break;
|
|
|
|
default: $body.trigger(makeEventName(event_name, true));
|
|
}
|
|
};
|
|
|
|
that.setScript = function(_data) {
|
|
if (!(_data instanceof Array) && _data.length < 1) {
|
|
throw new Error("Configurations list isn't correct.");
|
|
}
|
|
|
|
data = _data;
|
|
};
|
|
|
|
//support deprecated API methods
|
|
/**
|
|
* Configure data list
|
|
*/
|
|
that.set = function(_data) {
|
|
that.setScript(_data);
|
|
};
|
|
|
|
that.setSteps = function(_data) {
|
|
that.setScript(_data);
|
|
};
|
|
|
|
that.run = function() {
|
|
that.runScript();
|
|
};
|
|
|
|
that.resume = function() {
|
|
that.resumeScript();
|
|
};
|
|
|
|
init();
|
|
};
|
|
return EnjoyHint;
|
|
})
|
|
|
|
|
|
;CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
|
|
if (w < 2 * r) r = w / 2;
|
|
if (h < 2 * r) r = h / 2;
|
|
this.beginPath();
|
|
this.moveTo(x + r, y);
|
|
this.arcTo(x + w, y, x + w, y + h, r);
|
|
this.arcTo(x + w, y + h, x, y + h, r);
|
|
this.arcTo(x, y + h, x, y, r);
|
|
this.arcTo(x, y, x + w, y, r);
|
|
this.closePath();
|
|
return this;
|
|
};
|
|
|
|
(function(factory) {
|
|
'use strict';
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD
|
|
define(['jquery', 'kinetic'], factory);
|
|
} else if (typeof module !== 'undefined' && module.exports) {
|
|
// CommonJS
|
|
module.exports = factory(require('jquery'), require('kinetic'));
|
|
} else {
|
|
// Global
|
|
factory(jQuery, Kinetic);
|
|
}
|
|
})(function($, Kinetic) {
|
|
var that;
|
|
var originalLabelLeft, originalLabelTop;
|
|
var originalArrowLeft, originalArrowTop;
|
|
var originalCenterX, originalCenterY;
|
|
var originalSkipbuttonLeft, originalSkipbuttonTop;
|
|
var prevWindowWidth, prevWindowHeight;
|
|
var originalWidth = window.innerWidth,
|
|
originalHeight = window.innerHeight;
|
|
|
|
var methods = {
|
|
init: function(options) {
|
|
return this.each(function() {
|
|
var defaults = {
|
|
onNextClick: function() {},
|
|
onSkipClick: function() {},
|
|
onPrevClick: function() {},
|
|
|
|
animation_time: 800
|
|
};
|
|
|
|
this.enjoyhint_obj = {};
|
|
that = this.enjoyhint_obj;
|
|
|
|
that.resetComponentStuff = function() {
|
|
originalLabelLeft = null;
|
|
originalLabelTop = null;
|
|
originalArrowLeft = null;
|
|
originalArrowTop = null;
|
|
originalCenterX = null;
|
|
originalCenterY = null;
|
|
originalSkipbuttonLeft = null;
|
|
originalSkipbuttonTop = null;
|
|
prevWindowWidth = null;
|
|
prevWindowHeight = null;
|
|
originalWidth = window.innerWidth;
|
|
originalHeight = window.innerHeight;
|
|
};
|
|
|
|
var $that = $(this);
|
|
that.options = $.extend(defaults, options);
|
|
|
|
//general classes
|
|
that.gcl = {
|
|
chooser: "enjoyhint"
|
|
};
|
|
|
|
// classes
|
|
that.cl = {
|
|
enjoy_hint: "enjoyhint",
|
|
hide: "enjoyhint_hide",
|
|
disable_events_element: "enjoyhint_disable_events",
|
|
btn: "enjoyhint_btn",
|
|
skip_btn: "enjoyhint_skip_btn",
|
|
close_btn: "enjoyhint_close_btn",
|
|
reset_btn: "enjoyhint_reset_btn",
|
|
next_btn: "enjoyhint_next_btn",
|
|
previous_btn: "enjoyhint_prev_btn",
|
|
main_canvas: "enjoyhint_canvas",
|
|
main_svg: "enjoyhint_svg",
|
|
svg_wrapper: "enjoyhint_svg_wrapper",
|
|
svg_transparent: "enjoyhint_svg_transparent",
|
|
kinetic_container: "kinetic_container"
|
|
};
|
|
|
|
function makeSVG(tag, attrs) {
|
|
var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
|
|
|
|
for (var k in attrs) {
|
|
el.setAttribute(k, attrs[k]);
|
|
}
|
|
|
|
return el;
|
|
}
|
|
|
|
// =======================================================================
|
|
// ========================---- enjoyhint ----==============================
|
|
// =======================================================================
|
|
|
|
that.canvas_size = {
|
|
w: $(window).width() * 1.4,
|
|
h: $(window).height() * 1.4
|
|
};
|
|
|
|
var canvas_id = "enj_canvas";
|
|
|
|
that.enjoyhint = $("<div>", {
|
|
class: that.cl.enjoy_hint + " " + that.cl.svg_transparent
|
|
}).appendTo($that);
|
|
that.enjoyhint_svg_wrapper = $("<div>", {
|
|
class: that.cl.svg_wrapper + " " + that.cl.svg_transparent
|
|
}).appendTo(that.enjoyhint);
|
|
that.$stage_container = $(
|
|
'<div id="' + that.cl.kinetic_container + '">'
|
|
).appendTo(that.enjoyhint);
|
|
that.$canvas = $(
|
|
'<canvas id="' +
|
|
canvas_id +
|
|
'" width="' +
|
|
that.canvas_size.w +
|
|
'" height="' +
|
|
that.canvas_size.h +
|
|
'" class="' +
|
|
that.cl.main_canvas +
|
|
'">'
|
|
).appendTo(that.enjoyhint);
|
|
that.$svg = $(
|
|
'<svg style="position: absolute; z-index: 99999999999999999999999;" width="' +
|
|
that.canvas_size.w +
|
|
'" height="' +
|
|
that.canvas_size.h +
|
|
'" class="' +
|
|
that.cl.main_canvas +
|
|
" " +
|
|
that.cl.main_svg +
|
|
'">'
|
|
).appendTo(that.enjoyhint_svg_wrapper);
|
|
|
|
var defs = $(makeSVG("defs"));
|
|
var marker = $(
|
|
makeSVG("marker", {
|
|
id: "arrowMarker",
|
|
viewBox: "0 0 36 21",
|
|
refX: "21",
|
|
refY: "10",
|
|
markerUnits: "strokeWidth",
|
|
orient: "auto",
|
|
markerWidth: "16",
|
|
markerHeight: "12"
|
|
})
|
|
);
|
|
var polilyne = $(
|
|
makeSVG("path", {
|
|
style: "fill:none; stroke:rgb(255,255,255); stroke-width:2",
|
|
d: "M0,0 c30,11 30,9 0,20",
|
|
id: "poliline"
|
|
})
|
|
);
|
|
|
|
defs.append(marker.append(polilyne)).appendTo(that.$svg);
|
|
|
|
that.kinetic_stage = new Kinetic.Stage({
|
|
container: that.cl.kinetic_container,
|
|
width: that.canvas_size.w,
|
|
height: that.canvas_size.h,
|
|
scaleX: 1
|
|
});
|
|
|
|
that.layer = new Kinetic.Layer();
|
|
|
|
that.rect = new Kinetic.Rect({
|
|
fill: options.fill,
|
|
width: that.canvas_size.w,
|
|
height: that.canvas_size.h
|
|
});
|
|
|
|
var $top_dis_events = $("<div>", {
|
|
class: that.cl.disable_events_element
|
|
}).appendTo(that.enjoyhint);
|
|
var $bottom_dis_events = $top_dis_events
|
|
.clone()
|
|
.appendTo(that.enjoyhint);
|
|
var $left_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);
|
|
var $right_dis_events = $top_dis_events
|
|
.clone()
|
|
.appendTo(that.enjoyhint);
|
|
|
|
var stopPropagation = function(e) {
|
|
e.stopImmediatePropagation();
|
|
};
|
|
|
|
$("button").focusout(stopPropagation);
|
|
$top_dis_events.click(stopPropagation);
|
|
$bottom_dis_events.click(stopPropagation);
|
|
$left_dis_events.click(stopPropagation);
|
|
$right_dis_events.click(stopPropagation);
|
|
|
|
that.$skip_btn = $("<div>", { class: that.cl.skip_btn })
|
|
.appendTo(that.enjoyhint)
|
|
.html("Skip")
|
|
.click(function(e) {
|
|
that.hide();
|
|
that.options.onSkipClick();
|
|
});
|
|
|
|
that.$next_btn = $("<div>", { class: that.cl.next_btn })
|
|
.appendTo(that.enjoyhint)
|
|
.html("Next")
|
|
.click(function(e) {
|
|
that.options.onNextClick();
|
|
});
|
|
|
|
that.$close_btn = $("<div>", { class: that.cl.close_btn })
|
|
.appendTo(that.enjoyhint)
|
|
.html("")
|
|
.click(function(e) {
|
|
that.hide();
|
|
that.options.onSkipClick();
|
|
});
|
|
|
|
that.$reset_btn = $("<div>", { class: that.cl.reset_btn })
|
|
.appendTo(that.enjoyhint)
|
|
.html("Reset")
|
|
.click(function(e) {
|
|
that.hide();
|
|
that.options.onResetClick();
|
|
});
|
|
|
|
that.$prev_btn = $("<div>", { class: that.cl.previous_btn })
|
|
.appendTo(that.enjoyhint)
|
|
.html("Previous")
|
|
.click(function(e) {
|
|
that.options.onPrevClick();
|
|
});
|
|
|
|
|
|
that.$canvas.mousedown(function(e) {
|
|
$("canvas").css({ left: "4000px" });
|
|
|
|
var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
|
|
$("canvas").css({ left: "0px" });
|
|
|
|
$(BottomElement).click();
|
|
|
|
return false;
|
|
});
|
|
|
|
var circle_r = 0;
|
|
var shape_init_shift = 130;
|
|
|
|
that.shape = new Kinetic.Shape({
|
|
radius: circle_r,
|
|
center_x: -shape_init_shift,
|
|
center_y: -shape_init_shift,
|
|
width: 0,
|
|
height: 0,
|
|
sceneFunc: function(context) {
|
|
var ctx = this.getContext("2d")._context;
|
|
var pos = this.pos;
|
|
var def_comp = ctx.globalCompositeOperation;
|
|
ctx.globalCompositeOperation = "destination-out";
|
|
ctx.beginPath();
|
|
|
|
var x = this.attrs.center_x - Math.round(this.attrs.width / 2);
|
|
var y = this.attrs.center_y - Math.round(this.attrs.height / 2);
|
|
ctx.roundRect(
|
|
x,
|
|
y,
|
|
this.attrs.width,
|
|
this.attrs.height,
|
|
this.attrs.radius
|
|
);
|
|
|
|
ctx.fill();
|
|
|
|
ctx.globalCompositeOperation = def_comp;
|
|
}
|
|
});
|
|
|
|
that.shape.radius = circle_r;
|
|
that.layer.add(that.rect);
|
|
that.layer.add(that.shape);
|
|
that.kinetic_stage.add(that.layer);
|
|
|
|
var doit;
|
|
|
|
$(window).on("resize", function() {
|
|
clearTimeout(doit);
|
|
$('.enjoyhint_next_btn').css('visibility', 'hidden');
|
|
$('.enjoyhint_prev_btn').css('visibility', 'hidden');
|
|
$('.enjoyhint_skip_btn').css('visibility', 'hidden');
|
|
$('.enjoyhint_reset_btn').css('visibility', 'hidden');
|
|
$('.enjoy_hint_label').remove()
|
|
$("#enjoyhint_arrpw_line").remove()
|
|
if (!$(that.stepData.enjoyHintElementSelector).is(":visible")) {
|
|
that.stopFunction();
|
|
$(window).off("resize");
|
|
return;
|
|
}
|
|
|
|
var boundingClientRect = $(
|
|
that.stepData.enjoyHintElementSelector
|
|
)[0].getBoundingClientRect();
|
|
|
|
that.shape.attrs.center_x = Math.round(
|
|
boundingClientRect.left + boundingClientRect.width / 2
|
|
);
|
|
that.shape.attrs.center_y = Math.round(
|
|
boundingClientRect.top + boundingClientRect.height / 2
|
|
);
|
|
that.shape.attrs.width = boundingClientRect.width + 11;
|
|
that.shape.attrs.height = boundingClientRect.height + 11;
|
|
|
|
function renderAfterResize(){
|
|
var newDataCoords = $(that.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect();
|
|
|
|
that.stepData.center_x = newDataCoords.left + newDataCoords.width/2;
|
|
that.stepData.center_y = newDataCoords.top + newDataCoords.height/2;
|
|
that.stepData.width = newDataCoords.width + 11;
|
|
that.stepData.height = newDataCoords.height + 11;
|
|
|
|
that.renderLabelWithShape(that.stepData, that.customBtnProps);
|
|
$('.enjoyhint_next_btn').css('visibility', 'visible');
|
|
$('.enjoyhint_reset_btn').css('visibility', 'visible');
|
|
$('.enjoyhint_prev_btn').css('visibility', 'visible');
|
|
$('.enjoyhint_skip_btn').css('visibility', 'visible');
|
|
}
|
|
|
|
doit = setTimeout(function() {
|
|
if(boundingClientRect.top < 0 || boundingClientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)){
|
|
$(document.body).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize});
|
|
}
|
|
else renderAfterResize();
|
|
}, 150);
|
|
|
|
|
|
var newWidth = window.innerWidth;
|
|
var newHeight = window.innerHeight;
|
|
var scaleX = newWidth / originalWidth;
|
|
var scaleY = newHeight / originalHeight;
|
|
|
|
that.kinetic_stage.setAttr("width", originalWidth * scaleX);
|
|
that.kinetic_stage.setAttr("height", originalHeight * scaleY);
|
|
|
|
that.rect = new Kinetic.Rect({
|
|
fill: options.fill,
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
});
|
|
|
|
that.layer.removeChildren();
|
|
that.layer.add(that.rect);
|
|
that.layer.add(that.shape);
|
|
that.kinetic_stage.draw();
|
|
});
|
|
|
|
var enjoyhint_elements = [
|
|
that.enjoyhint,
|
|
$top_dis_events,
|
|
$bottom_dis_events,
|
|
$left_dis_events,
|
|
$right_dis_events
|
|
];
|
|
|
|
that.show = function() {
|
|
that.enjoyhint.removeClass(that.cl.hide);
|
|
};
|
|
|
|
that.hide = function() {
|
|
that.enjoyhint.addClass(that.cl.hide);
|
|
|
|
var tween = new Kinetic.Tween({
|
|
node: that.shape,
|
|
duration: 0.002,
|
|
center_x: -shape_init_shift,
|
|
center_y: -shape_init_shift
|
|
});
|
|
|
|
tween.play();
|
|
};
|
|
|
|
that.hide();
|
|
|
|
that.hideNextBtn = function() {
|
|
that.$next_btn.addClass(that.cl.hide);
|
|
that.nextBtn = "hide";
|
|
};
|
|
|
|
that.hidePrevBtn = function() {
|
|
that.$prev_btn.addClass(that.cl.hide);
|
|
that.prevBtn = "hide";
|
|
};
|
|
|
|
that.showPrevBtn = function() {
|
|
that.$prev_btn.removeClass(that.cl.hide);
|
|
that.prevBtn = "show";
|
|
};
|
|
|
|
that.showNextBtn = function() {
|
|
that.$next_btn.removeClass(that.cl.hide);
|
|
that.nextBtn = "show";
|
|
};
|
|
|
|
that.hideSkipBtn = function() {
|
|
that.$skip_btn.addClass(that.cl.hide);
|
|
};
|
|
|
|
that.showSkipBtn = function() {
|
|
that.$skip_btn.removeClass(that.cl.hide);
|
|
};
|
|
|
|
that.renderCircle = function(data) {
|
|
var r = data.r || 0;
|
|
var x = data.x || 0;
|
|
var y = data.y || 0;
|
|
|
|
var tween = new Kinetic.Tween({
|
|
node: that.shape,
|
|
duration: 0.2,
|
|
center_x: x,
|
|
center_y: y,
|
|
width: r * 2,
|
|
height: r * 2,
|
|
radius: r
|
|
});
|
|
|
|
tween.play();
|
|
|
|
var left = x - r;
|
|
var right = x + r;
|
|
var top = y - r;
|
|
var bottom = y + r;
|
|
var margin = 20;
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
left: left,
|
|
right: right,
|
|
top: top,
|
|
bottom: bottom,
|
|
conn: {
|
|
left: {
|
|
x: left - margin,
|
|
y: y
|
|
},
|
|
right: {
|
|
x: right + margin,
|
|
y: y
|
|
},
|
|
top: {
|
|
x: x,
|
|
y: top - margin
|
|
},
|
|
bottom: {
|
|
x: x,
|
|
y: bottom + margin
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
that.renderRect = function(data, timeout) {
|
|
var r = data.r || 0;
|
|
var x = data.x || 0;
|
|
var y = data.y || 0;
|
|
var w = data.w || 0;
|
|
var h = data.h || 0;
|
|
var margin = 20;
|
|
|
|
var tween = new Kinetic.Tween({
|
|
node: that.shape,
|
|
duration: timeout,
|
|
center_x: x,
|
|
center_y: y,
|
|
width: w,
|
|
height: h,
|
|
radius: r
|
|
});
|
|
|
|
tween.play();
|
|
|
|
var half_w = Math.round(w / 2);
|
|
var half_h = Math.round(h / 2);
|
|
var left = x - half_w;
|
|
var right = x + half_w;
|
|
var top = y - half_h;
|
|
var bottom = y + half_h;
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
left: left,
|
|
right: right,
|
|
top: top,
|
|
bottom: bottom,
|
|
conn: {
|
|
left: {
|
|
x: left - margin,
|
|
y: y
|
|
},
|
|
right: {
|
|
x: right + margin,
|
|
y: y
|
|
},
|
|
top: {
|
|
x: x,
|
|
y: top - margin
|
|
},
|
|
bottom: {
|
|
x: x,
|
|
y: bottom + margin
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
that.renderLabel = function(data) {
|
|
var x = data.x || 0;
|
|
that.originalElementX = x;
|
|
var y = data.y || 0;
|
|
var text = data.text || 0;
|
|
|
|
var label = that.getLabelElement({
|
|
x: x,
|
|
y: y,
|
|
text: data.text
|
|
});
|
|
|
|
var label_w = label.width();
|
|
var label_h = label.height();
|
|
var label_left = label.offset().left;
|
|
var label_right = label.offset().left + label_w;
|
|
var label_top = label.offset().top - $(document).scrollTop();
|
|
var label_bottom = label.offset().top - $(document).scrollTop() + label_h;
|
|
|
|
var margin = 10;
|
|
|
|
var conn_left = {
|
|
x: label_left - margin,
|
|
y: label_top + Math.round(label_h / 2)
|
|
};
|
|
|
|
var conn_right = {
|
|
x: label_right + margin,
|
|
y: label_top + Math.round(label_h / 2)
|
|
};
|
|
|
|
var conn_top = {
|
|
x: label_left + Math.round(label_w / 2),
|
|
y: label_top - margin
|
|
};
|
|
|
|
var conn_bottom = {
|
|
x: label_left + Math.round(label_w / 2),
|
|
y: label_bottom + margin
|
|
};
|
|
|
|
label.detach();
|
|
|
|
setTimeout(function() {
|
|
$("#enjoyhint_label").remove();
|
|
label.appendTo(that.enjoyhint);
|
|
}, that.options.animation_time / 2);
|
|
|
|
return {
|
|
label: label,
|
|
left: label_left,
|
|
right: label_right,
|
|
top: label_top,
|
|
bottom: label_bottom,
|
|
conn: {
|
|
left: conn_left,
|
|
right: conn_right,
|
|
top: conn_top,
|
|
bottom: conn_bottom
|
|
}
|
|
};
|
|
};
|
|
|
|
that.setMarkerColor = function(color){
|
|
|
|
function isValidColor(value) {
|
|
const temp = new Option().style;
|
|
temp.color = value;
|
|
return temp.color !== '';
|
|
}
|
|
|
|
if (isValidColor(color)){
|
|
return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function(element){
|
|
element.css("stroke", color);
|
|
});
|
|
}
|
|
|
|
$("#poliline").css("stroke", "rgb(255,255,255)")
|
|
console.log("Error: invalid color name property - " + color);
|
|
}
|
|
|
|
that.renderArrow = function(data) {
|
|
var x_from = data.x_from || 0;
|
|
var y_from = data.y_from || 0;
|
|
var x_to = data.x_to || 0;
|
|
var y_to = data.y_to || 0;
|
|
var by_top_side = data.by_top_side;
|
|
var control_point_x = 0;
|
|
var control_point_y = 0;
|
|
|
|
if (by_top_side === 'hor') {
|
|
control_point_x = x_to
|
|
control_point_y = y_from
|
|
}
|
|
else {
|
|
control_point_x = x_from
|
|
control_point_y = y_to
|
|
}
|
|
|
|
that.enjoyhint.addClass(that.cl.svg_transparent);
|
|
|
|
setTimeout(function() {
|
|
$("#enjoyhint_arrpw_line").remove();
|
|
|
|
var d =
|
|
"M" +
|
|
x_from +
|
|
"," +
|
|
y_from +
|
|
" Q" +
|
|
control_point_x +
|
|
"," +
|
|
control_point_y +
|
|
" " +
|
|
x_to +
|
|
"," +
|
|
y_to;
|
|
that.$svg.append(
|
|
makeSVG("path", {
|
|
style: "fill:none; stroke:rgb(255,255,255); stroke-width:3",
|
|
"marker-end": "url(#arrowMarker)",
|
|
d: d,
|
|
id: "enjoyhint_arrpw_line"
|
|
})
|
|
);
|
|
|
|
if(that.stepData.arrowColor) {
|
|
that.setMarkerColor(that.stepData.arrowColor)
|
|
} else {
|
|
$("#poliline").css("stroke", "rgb(255, 255, 255)");
|
|
}
|
|
|
|
that.enjoyhint.removeClass(that.cl.svg_transparent);
|
|
}, that.options.animation_time / 2);
|
|
};
|
|
|
|
that.getLabelElement = function(data) {
|
|
return $("<div>", {
|
|
class: "enjoy_hint_label",
|
|
id: "enjoyhint_label"
|
|
})
|
|
.css({
|
|
top: data.y + "px",
|
|
left: data.x + "px"
|
|
})
|
|
.html(data.text)
|
|
.appendTo(that.enjoyhint);
|
|
};
|
|
|
|
that.disableEventsNearRect = function(rect) {
|
|
$top_dis_events
|
|
.css({
|
|
top: "0",
|
|
left: "0"
|
|
})
|
|
.height(rect.top);
|
|
|
|
$bottom_dis_events.css({
|
|
top: rect.bottom + "px",
|
|
left: "0"
|
|
});
|
|
|
|
$left_dis_events
|
|
.css({
|
|
top: "0",
|
|
left: 0 + "px"
|
|
})
|
|
.width(rect.left);
|
|
|
|
$right_dis_events.css({
|
|
top: "0",
|
|
left: rect.right + "px"
|
|
});
|
|
};
|
|
|
|
(function($) {
|
|
$.event.special.destroyed = {
|
|
remove: function(o) {
|
|
if (o.handler) {
|
|
o.handler();
|
|
}
|
|
}
|
|
};
|
|
})($);
|
|
|
|
that.renderLabelWithShape = function(data, customBtnProps) {
|
|
that.stepData = data;
|
|
that.customBtnProps = customBtnProps;
|
|
|
|
function findParentDialog(element) {
|
|
if (element.tagName === "MD-DIALOG") {
|
|
return element;
|
|
} else if (typeof element.tagName == "undefined") {
|
|
return null;
|
|
} else {
|
|
return findParentDialog($(element).parent()[0]);
|
|
}
|
|
}
|
|
|
|
var dialog = findParentDialog(
|
|
$(that.stepData.enjoyHintElementSelector)[0]
|
|
);
|
|
|
|
if (dialog != null) {
|
|
$(dialog).on("dialogClosing", function() {
|
|
that.stopFunction();
|
|
return;
|
|
});
|
|
}
|
|
|
|
that.resetComponentStuff();
|
|
|
|
var shape_type = data.shape || "rect";
|
|
var shape_data = {};
|
|
|
|
var half_w = 0;
|
|
var half_h = 0;
|
|
|
|
var shape_offsets = {
|
|
top: data.top || 0,
|
|
bottom: data.bottom || 0,
|
|
left: data.left || 0,
|
|
right: data.right || 0
|
|
};
|
|
|
|
switch (shape_type) {
|
|
case "circle":
|
|
half_w = half_h = data.radius;
|
|
|
|
var sides_pos = {
|
|
top: data.center_y - half_h + shape_offsets.top,
|
|
bottom: data.center_y + half_h - shape_offsets.bottom,
|
|
left: data.center_x - half_w + shape_offsets.left,
|
|
right: data.center_x + half_w - shape_offsets.right
|
|
};
|
|
|
|
var width = sides_pos.right - sides_pos.left;
|
|
var height = sides_pos.bottom - sides_pos.top;
|
|
data.radius = Math.round(Math.min(width, height) / 2);
|
|
|
|
//new half habarites
|
|
half_w = half_h = Math.round(data.radius / 2);
|
|
|
|
var new_half_w = Math.round(width / 2);
|
|
var new_half_h = Math.round(height / 2);
|
|
|
|
//new center_x and center_y
|
|
data.center_x = sides_pos.left + new_half_w;
|
|
data.center_y = sides_pos.top + new_half_h;
|
|
|
|
shape_data = that.renderCircle({
|
|
x: data.center_x,
|
|
y: data.center_y,
|
|
r: data.radius
|
|
});
|
|
|
|
break;
|
|
|
|
case "rect":
|
|
half_w = Math.round(data.width / 2);
|
|
half_h = Math.round(data.height / 2);
|
|
|
|
var sides_pos = {
|
|
top: data.center_y - half_h + shape_offsets.top,
|
|
bottom: data.center_y + half_h - shape_offsets.bottom,
|
|
left: data.center_x - half_w + shape_offsets.left,
|
|
right: data.center_x + half_w - shape_offsets.right
|
|
};
|
|
|
|
data.width = sides_pos.right - sides_pos.left;
|
|
data.height = sides_pos.bottom - sides_pos.top;
|
|
|
|
half_w = Math.round(data.width / 2);
|
|
half_h = Math.round(data.height / 2);
|
|
|
|
//new center_x and center_y
|
|
data.center_x = sides_pos.left + half_w;
|
|
data.center_y = sides_pos.top + half_h;
|
|
|
|
shape_data = that.renderRect(
|
|
{
|
|
x: data.center_x,
|
|
y: data.center_y,
|
|
w: data.width,
|
|
h: data.height,
|
|
r: data.radius
|
|
},
|
|
0.2
|
|
);
|
|
|
|
break;
|
|
}
|
|
|
|
var body_size = {
|
|
w: that.enjoyhint.width(),
|
|
h: that.enjoyhint.height()
|
|
};
|
|
|
|
var label = that.getLabelElement({
|
|
x: 0,
|
|
y: 0,
|
|
text: data.text
|
|
});
|
|
|
|
var label_width = label.outerWidth();
|
|
var label_height = label.outerHeight();
|
|
label.remove();
|
|
var top_offset = data.center_y - half_h;
|
|
var bottom_offset = body_size.h - (data.center_y + half_h);
|
|
var left_offset = data.center_x - half_w;
|
|
var right_offset = body_size.w - (data.center_x + half_w);
|
|
|
|
var label_shift = window.innerHeight < 670 ? 130 : 150;
|
|
var label_margin = window.innerHeight < 670 ? 0 : 40;
|
|
var label_shift_with_label_height =
|
|
label_shift + label_height + label_margin;
|
|
var label_ver_offset = half_h + label_shift;
|
|
|
|
var areas_for_label = [
|
|
{name: 'right_center', common_area: right_offset * window.innerHeight, width: right_offset, height: window.innerHeight},
|
|
{name: 'right_top', common_area: right_offset * top_offset, width: right_offset, height: top_offset},
|
|
{name: 'right_bottom', common_area: right_offset * bottom_offset, width: right_offset, height: bottom_offset},
|
|
{name: 'left_center', common_area: left_offset * window.innerHeight, width: left_offset, height: window.innerHeight},
|
|
{name: 'left_top', common_area: left_offset * top_offset, width: left_offset, height: top_offset},
|
|
{name: 'left_bottom', common_area: left_offset * bottom_offset, width: left_offset, height: bottom_offset},
|
|
{name: 'center_top', common_area: window.innerWidth * top_offset, width: window.innerWidth, height: top_offset},
|
|
{name: 'center_bottom', common_area: window.innerWidth * bottom_offset, width: window.innerWidth, height: bottom_offset},
|
|
];
|
|
var label_horizontal_space_required = label_width;
|
|
var label_vertical_space_required = window.innerHeight <= 670 ? label_shift_with_label_height : label_shift_with_label_height + 20;
|
|
|
|
var areas_priority = areas_for_label
|
|
.sort(function(area1, area2){return area1.common_area - area2.common_area})
|
|
|
|
var label_hor_side = 'oversized';
|
|
for (var i = 0; i < areas_priority.length; i++) {
|
|
var name = areas_priority[i].name;
|
|
var area = areas_priority[i]
|
|
if (
|
|
area.width > label_horizontal_space_required
|
|
&& area.height > label_vertical_space_required
|
|
) {
|
|
label_hor_side = name;
|
|
}
|
|
}
|
|
|
|
var data_width_size = data.shape === "circle" ? data.radius * 2 :
|
|
data.width ? data.width : data.radius * 2;
|
|
|
|
var data_height_size = data.shape === "circle" ? data.radius * 2 :
|
|
data.height ? data.height : data.radius * 2;
|
|
|
|
var right_position = data.center_x + data_width_size/2 + 80;
|
|
var left_position = data.center_x - label_width - data_width_size/2 - 80;
|
|
var central_position = window.innerWidth / 2 - label_width / 2;
|
|
var top_position = data.center_y - label_ver_offset - label_height;
|
|
var bottom_position = data.center_y + label_ver_offset;
|
|
var central_ver_position = window.innerHeight/2 - label_vertical_space_required/2 + 20;
|
|
|
|
var label_x, label_y, x_to, y_to, x_from, y_from;
|
|
|
|
var by_top_side = "hor"
|
|
|
|
switch(label_hor_side) {
|
|
case "center_top":
|
|
label_y = top_position;
|
|
label_x = central_position;
|
|
x_to = data.center_x;
|
|
y_to = data.center_y - data_height_size/2 - 20;
|
|
break;
|
|
case "center_bottom":
|
|
label_y = bottom_position-50;
|
|
label_x = central_position+200;
|
|
x_to = data.center_x;
|
|
y_to = data.center_y + data_height_size/2 + 20;
|
|
break;
|
|
case 'left_center':
|
|
label_y = central_ver_position;
|
|
label_x = left_position;
|
|
x_to = data.center_x - data_width_size/2 - 20;
|
|
y_to = data.center_y;
|
|
by_top_side = "ver";
|
|
break;
|
|
case 'left_top':
|
|
label_y = top_position;
|
|
label_x = left_position;
|
|
x_to = data.center_x - data_width_size/2;
|
|
y_to = data.center_y - 20;
|
|
break;
|
|
case 'left_bottom':
|
|
label_y = bottom_position;
|
|
label_x = left_position;
|
|
x_to = data.center_x - data_width_size/2;
|
|
y_to = data.center_y + 20;
|
|
by_top_side = "ver";
|
|
break;
|
|
case 'right_center':
|
|
label_y = central_ver_position;
|
|
label_x = right_position;
|
|
x_to = data.center_x + data_width_size/2 + 20;
|
|
y_to = data.center_y;
|
|
by_top_side = "ver";
|
|
break;
|
|
case 'right_top':
|
|
label_y = top_position;
|
|
label_x = right_position;
|
|
x_to = data.center_x + data_width_size/2;
|
|
y_to = data.center_y - 20;
|
|
break;
|
|
case 'right_bottom':
|
|
label_y = bottom_position;
|
|
label_x = right_position;
|
|
x_to = data.center_x + data_width_size/2;
|
|
y_to = data.center_y + 20;
|
|
by_top_side = "ver";
|
|
break;
|
|
case 'oversized':
|
|
setTimeout(function(){
|
|
$("#enjoyhint_arrpw_line").remove();
|
|
}, 450);
|
|
label_y = central_ver_position
|
|
label_x = central_position;
|
|
break;
|
|
}
|
|
|
|
setTimeout(function(){
|
|
$('.enjoy_hint_label').css({
|
|
'z-index': '1',
|
|
'position': 'absolute',
|
|
'padding': '10px',
|
|
'border-radius': '20px',
|
|
'-webkit-border-radius': '20px',
|
|
'-moz-border-radius': '20px',
|
|
'background-color': '#272A26',
|
|
'opacity': '0.9',
|
|
'-webkit-transition': 'background-color ease-out 0.5s',
|
|
'-moz-transition': 'background-color ease-out 0.5s',
|
|
'-o-transition': 'background-color ease-out 0.5s',
|
|
'transition': 'background-color ease-out 0.5s'
|
|
})
|
|
}, 450)
|
|
|
|
x_from = label_x + label_width/2;
|
|
y_from = (data.center_y > label_y + label_height/2) ? label_y + label_height : label_y;
|
|
// if data center out of window y scale
|
|
if(data.center_y < 0) {
|
|
y_to = 20
|
|
}
|
|
else if ( data.center_y > window.innerHeight + 20 ) {
|
|
y_to = window.innerHeight - 20
|
|
};
|
|
|
|
// if element at the same position as hint
|
|
if(data.center_y >= label_y && data.center_y <= label_y + label_height) {
|
|
x_from = data.center_x > label_x ? label_x + label_width : label_x;
|
|
y_from = data.center_y;
|
|
}
|
|
|
|
that.renderLabel({
|
|
x: label_x,
|
|
y: label_y,
|
|
text: data.text
|
|
});
|
|
|
|
setTimeout(function(){
|
|
var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + that.$prev_btn.width() + 30;
|
|
var distance = label_x - 100;
|
|
var ver_button_position = label_y + label_height + 40
|
|
|
|
if (summoryButtonWidth + label_x > x_to) {
|
|
distance = x_to >= x_from ? x_to + 20 : label_x + label_width/2
|
|
}
|
|
|
|
if (summoryButtonWidth + distance > window.innerWidth || distance < 0) {
|
|
distance = 10;
|
|
ver_button_position = 50;
|
|
}
|
|
|
|
var initial_distance = distance;
|
|
var initial_ver_position = ver_button_position;
|
|
|
|
if (window.innerWidth <= 640) {
|
|
distance = 10;
|
|
ver_button_position = 10;
|
|
that.$next_btn.html('›');
|
|
that.$prev_btn.html('‹');
|
|
that.$reset_btn.html('‹');
|
|
}
|
|
else {
|
|
distance = initial_distance;
|
|
that.$next_btn.html(customBtnProps.nextButton && customBtnProps.nextButton.text ?
|
|
customBtnProps.nextButton.text : 'Next');
|
|
that.$prev_btn.html(customBtnProps.prevButton && customBtnProps.prevButton.text ?
|
|
customBtnProps.prevButton.text : 'Previous');
|
|
}
|
|
|
|
ver_button_position = 100;
|
|
distance = $(window).width() / 2 - 300;
|
|
that.$prev_btn.css({
|
|
left: distance,
|
|
bottom: ver_button_position
|
|
});
|
|
|
|
var left_next = distance + that.$prev_btn.width() + 10;
|
|
var left_skip = distance + that.$prev_btn.width() + that.$next_btn.width() + 20;
|
|
|
|
that.$reset_btn.css({
|
|
left: distance + that.$prev_btn.width() + 350,
|
|
bottom: ver_button_position
|
|
});
|
|
|
|
if (that.nextBtn === "hide") {
|
|
left_skip = distance + that.$prev_btn.width() + 10;
|
|
}
|
|
|
|
if(that.prevBtn === "hide") {
|
|
left_next = distance;
|
|
left_skip = distance + that.$next_btn.width() + 10;
|
|
}
|
|
|
|
that.$next_btn.css({
|
|
left: left_next,
|
|
bottom: ver_button_position
|
|
})
|
|
|
|
that.$skip_btn.css({
|
|
left: left_skip,
|
|
bottom: ver_button_position
|
|
});
|
|
}, 0)
|
|
|
|
that.$close_btn.css({
|
|
right: 50,
|
|
top: 50
|
|
});
|
|
|
|
that.disableEventsNearRect({
|
|
top: shape_data.top,
|
|
bottom: shape_data.bottom,
|
|
left: shape_data.left,
|
|
right: shape_data.right
|
|
});
|
|
|
|
that.renderArrow({
|
|
x_from: x_from,
|
|
y_from: y_from,
|
|
x_to: x_to,
|
|
y_to: y_to,
|
|
by_top_side: by_top_side,
|
|
});
|
|
};
|
|
|
|
that.clear = function() {
|
|
that.ctx.clearRect(0, 0, 3000, 2000);
|
|
};
|
|
|
|
return this;
|
|
});
|
|
},
|
|
|
|
set: function(val) {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.setValue(val);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
show: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.show();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
hide: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.hide();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
hide_next: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.hideNextBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
hide_prev: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.hidePrevBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
show_prev: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.showPrevBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
show_next: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.showNextBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
hide_skip: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.hideSkipBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
show_skip: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.showSkipBtn();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
render_circle: function(x, y, r) {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.renderCircle(x, y, r);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
render_label: function(x, y, r) {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.renderLabel(x, y, r);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
render_label_with_shape: function(data, stopFunction, customBtnProps) {
|
|
this.each(function() {
|
|
that.stopFunction = stopFunction;
|
|
this.enjoyhint_obj.renderLabelWithShape(data, customBtnProps);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
redo_events_near_rect: function(rect) {
|
|
that.disableEventsNearRect({
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
left: rect.left,
|
|
right: rect.right
|
|
});
|
|
},
|
|
|
|
clear: function() {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.clear();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
close: function(val) {
|
|
this.each(function() {
|
|
this.enjoyhint_obj.closePopdown();
|
|
});
|
|
|
|
return this;
|
|
}
|
|
};
|
|
|
|
$.fn.enjoyhint = function(method) {
|
|
if (methods[method]) {
|
|
return methods[method].apply(
|
|
this,
|
|
Array.prototype.slice.call(arguments, 1)
|
|
);
|
|
} else if (typeof method === "object" || !method) {
|
|
return methods.init.apply(this, arguments);
|
|
} else {
|
|
$.error("Method " + method + " does not exist on $.numinput");
|
|
}
|
|
|
|
return this;
|
|
};
|
|
});
|