1046 lines
155 KiB
JavaScript
1046 lines
155 KiB
JavaScript
|
var EnjoyHint = function (_options) {
|
||
|
|
var that = this;
|
||
|
|
// Some options
|
||
|
|
var defaults = {
|
||
|
|
onStart: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
onEnd: function () {
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var options = $.extend(defaults, _options);
|
||
|
|
|
||
|
|
|
||
|
|
var data = [];
|
||
|
|
var current_step = 0;
|
||
|
|
|
||
|
|
$body = $('body');
|
||
|
|
|
||
|
|
/********************* PRIVAT METHODS ***************************************/
|
||
|
|
var init = function () {
|
||
|
|
if ($('.enjoyhint'))
|
||
|
|
$('.enjoyhint').remove();
|
||
|
|
$('body').css({'overflow':'hidden'});
|
||
|
|
$(document).on("touchmove",lockTouch);
|
||
|
|
|
||
|
|
$body.enjoyhint({
|
||
|
|
onNextClick: function () {
|
||
|
|
nextStep();
|
||
|
|
},
|
||
|
|
onSkipClick: function () {
|
||
|
|
skipAll();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var lockTouch = function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
};
|
||
|
|
|
||
|
|
var destroyEnjoy = function () {
|
||
|
|
$body = $('body');
|
||
|
|
$('.enjoyhint').remove();
|
||
|
|
$("body").css({'overflow':'auto'});
|
||
|
|
$(document).off("touchmove", lockTouch);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
that.clear = function(){
|
||
|
|
//(Remove userClass and set default text)
|
||
|
|
$(".enjoyhint_next_btn").removeClass(that.nextUserClass);
|
||
|
|
$(".enjoyhint_next_btn").text("Next");
|
||
|
|
$(".enjoyhint_skip_btn").removeClass(that.skipUserClass);
|
||
|
|
$(".enjoyhint_skip_btn").text("Skip");
|
||
|
|
}
|
||
|
|
|
||
|
|
var $body = $('body');
|
||
|
|
|
||
|
|
var stepAction = function () {
|
||
|
|
if (data && data[current_step]) {
|
||
|
|
$(".enjoyhint").removeClass("enjoyhint-step-"+current_step);
|
||
|
|
$(".enjoyhint").addClass("enjoyhint-step-"+(current_step+1));
|
||
|
|
var step_data = data[current_step];
|
||
|
|
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);
|
||
|
|
$(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -100});
|
||
|
|
setTimeout(function () {
|
||
|
|
var $element = $(step_data.selector);
|
||
|
|
var event = makeEventName(step_data.event);
|
||
|
|
|
||
|
|
$body.enjoyhint('show');
|
||
|
|
$body.enjoyhint('hide_next');
|
||
|
|
var $event_element = $element;
|
||
|
|
if (step_data.event_selector) {
|
||
|
|
$event_element = $(step_data.event_selector);
|
||
|
|
}
|
||
|
|
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('show_next');
|
||
|
|
}
|
||
|
|
if (step_data.showSkip == false){
|
||
|
|
$body.enjoyhint('hide_skip');
|
||
|
|
}else{
|
||
|
|
$body.enjoyhint('show_skip');
|
||
|
|
}
|
||
|
|
if (step_data.showSkip == true){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (step_data.nextButton){
|
||
|
|
$(".enjoyhint_next_btn").addClass(step_data.nextButton.className || "");
|
||
|
|
$(".enjoyhint_next_btn").text(step_data.nextButton.text || "Next");
|
||
|
|
that.nextUserClass = step_data.nextButton.className
|
||
|
|
}
|
||
|
|
|
||
|
|
if (step_data.skipButton){
|
||
|
|
$(".enjoyhint_skip_btn").addClass(step_data.skipButton.className || "");
|
||
|
|
$(".enjoyhint_skip_btn").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;
|
||
|
|
break;
|
||
|
|
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++;
|
||
|
|
$(this).off(event);
|
||
|
|
|
||
|
|
stepAction();
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
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 = {
|
||
|
|
center_x: coords.x,
|
||
|
|
center_y: coords.y,
|
||
|
|
text: step_data.description,
|
||
|
|
top: step_data.top,
|
||
|
|
bottom: step_data.bottom,
|
||
|
|
left: step_data.left,
|
||
|
|
right: step_data.right,
|
||
|
|
margin: step_data.margin,
|
||
|
|
scroll: step_data.scroll
|
||
|
|
};
|
||
|
|
|
||
|
|
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);
|
||
|
|
}, step_data.scrollAnimationSpeed + 20 || 270);
|
||
|
|
}, timeout);
|
||
|
|
} else {
|
||
|
|
$body.enjoyhint('hide');
|
||
|
|
options.onEnd();
|
||
|
|
destroyEnjoy();
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
var nextStep = function(){
|
||
|
|
current_step++;
|
||
|
|
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 ***************************************/
|
||
|
|
that.runScript = function () {
|
||
|
|
current_step = 0;
|
||
|
|
options.onStart();
|
||
|
|
stepAction();
|
||
|
|
};
|
||
|
|
|
||
|
|
that.resumeScript = function () {
|
||
|
|
stepAction();
|
||
|
|
};
|
||
|
|
|
||
|
|
that.getCurrentStep = function () {
|
||
|
|
return current_step;
|
||
|
|
};
|
||
|
|
|
||
|
|
that.trigger = function (event_name) {
|
||
|
|
switch (event_name) {
|
||
|
|
case 'next':
|
||
|
|
nextStep();
|
||
|
|
break
|
||
|
|
case 'skip':
|
||
|
|
skipAll();
|
||
|
|
break
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
that.setScript = function (_data) {
|
||
|
|
if (_data) {
|
||
|
|
data = _data;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//support deprecated API methods
|
||
|
|
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();
|
||
|
|
};
|
||
|
|
;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 ($) {
|
||
|
|
var methods = {
|
||
|
|
init: function (options) {
|
||
|
|
return this.each(function () {
|
||
|
|
var defaults = {
|
||
|
|
onNextClick: function () {
|
||
|
|
},
|
||
|
|
onSkipClick: function () {
|
||
|
|
},
|
||
|
|
animation_time: 800
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
this.enjoyhint_obj = {};
|
||
|
|
var that = this.enjoyhint_obj;
|
||
|
|
var $that = $(this);
|
||
|
|
var $body = $('body');
|
||
|
|
that.options = jQuery.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',
|
||
|
|
next_btn: 'enjoyhint_next_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 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"}));
|
||
|
|
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
|
||
|
|
});
|
||
|
|
|
||
|
|
that.layer = new Kinetic.Layer();
|
||
|
|
that.rect = new Kinetic.Rect({
|
||
|
|
// x: 0,
|
||
|
|
// y: 0,
|
||
|
|
fill: 'rgba(0,0,0,0.6)',
|
||
|
|
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);
|
||
|
|
|
||
|
|
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.$canvas.mousedown(function (e) {
|
||
|
|
$('canvas').css({left: '4000px'});
|
||
|
|
|
||
|
|
var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
|
||
|
|
$('canvas').css({left: '0px'});
|
||
|
|
|
||
|
|
$(BottomElement).click();
|
||
|
|
// that.$canvas.show();
|
||
|
|
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.fillStyle = "red";
|
||
|
|
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 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.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) {
|
||
|
|
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: 0.2,
|
||
|
|
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;
|
||
|
|
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 + 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.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) {
|
||
|
|
if (y_from >= y_to) {
|
||
|
|
control_point_y = y_to;
|
||
|
|
control_point_x = x_from;
|
||
|
|
} else {
|
||
|
|
control_point_y = y_from;
|
||
|
|
control_point_x = x_to;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (y_from >= y_to) {
|
||
|
|
control_point_y = y_from;
|
||
|
|
control_point_x = x_to;
|
||
|
|
} else {
|
||
|
|
control_point_y = y_to;
|
||
|
|
control_point_x = x_from;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var text = data.text || '';
|
||
|
|
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'}));
|
||
|
|
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'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
that.renderLabelWithShape = function (data) {
|
||
|
|
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,
|
||
|
|
});
|
||
|
|
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_hor_side = (body_size.w - data.center_x) < data.center_x ? 'left' : 'right';
|
||
|
|
var label_ver_side = (body_size.h - data.center_y) < data.center_y ? 'top' : 'bottom';
|
||
|
|
var label_shift = 150;
|
||
|
|
var label_margin = 40;
|
||
|
|
var label_shift_with_label_width = label_shift + label_width + label_margin;
|
||
|
|
var label_shift_with_label_height = label_shift + label_height + label_margin;
|
||
|
|
var label_hor_offset = half_w + label_shift;
|
||
|
|
var label_ver_offset = half_h + label_shift;
|
||
|
|
|
||
|
|
var label_x = (label_hor_side == 'left') ? data.center_x - label_hor_offset - label_width : data.center_x + label_hor_offset;
|
||
|
|
var label_y = (label_ver_side == 'top') ? data.center_y - label_ver_offset - label_height : data.center_y + label_ver_offset;
|
||
|
|
if (top_offset < label_shift_with_label_height && bottom_offset < label_shift_with_label_height) {
|
||
|
|
label_y = data.center_y + label_margin;
|
||
|
|
}
|
||
|
|
if (left_offset < label_shift_with_label_width && right_offset < label_shift_with_label_width) {
|
||
|
|
label_x = data.center_x;
|
||
|
|
}
|
||
|
|
|
||
|
|
var label_data = that.renderLabel({
|
||
|
|
x: label_x,
|
||
|
|
y: label_y,
|
||
|
|
text: data.text
|
||
|
|
});
|
||
|
|
|
||
|
|
that.$next_btn.css({
|
||
|
|
left: label_x,
|
||
|
|
top: label_y + label_height + 20
|
||
|
|
});
|
||
|
|
var left_skip = label_x + that.$next_btn.width() + 10;
|
||
|
|
if (that.nextBtn == "hide"){
|
||
|
|
left_skip = label_x;
|
||
|
|
}
|
||
|
|
|
||
|
|
that.$skip_btn.css({
|
||
|
|
left: left_skip,
|
||
|
|
top: label_y + label_height + 20
|
||
|
|
});
|
||
|
|
that.$close_btn.css({
|
||
|
|
right : 10,
|
||
|
|
top: 10
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
that.disableEventsNearRect({
|
||
|
|
top: shape_data.top,
|
||
|
|
bottom: shape_data.bottom,
|
||
|
|
left: shape_data.left,
|
||
|
|
right: shape_data.right
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var x_to = 0;
|
||
|
|
var y_to = 0;
|
||
|
|
var arrow_side = false;
|
||
|
|
var conn_label_side = 'left';
|
||
|
|
var conn_circle_side = 'left';
|
||
|
|
|
||
|
|
var is_center = (label_data.left <= shape_data.x && label_data.right >= shape_data.x);
|
||
|
|
var is_left = (label_data.right < shape_data.x);
|
||
|
|
var is_right = (label_data.left > shape_data.x);
|
||
|
|
|
||
|
|
var is_abs_left = (label_data.right < shape_data.left);
|
||
|
|
var is_abs_right = (label_data.left > shape_data.right);
|
||
|
|
|
||
|
|
var is_top = (label_data.bottom < shape_data.top);
|
||
|
|
var is_bottom = (label_data.top > shape_data.bottom);
|
||
|
|
var is_mid = (label_data.bottom >= shape_data.y && label_data.top <= shape_data.y);
|
||
|
|
var is_mid_top = (label_data.bottom <= shape_data.y && !is_top);
|
||
|
|
var is_mid_bottom = (label_data.top >= shape_data.y && !is_bottom);
|
||
|
|
|
||
|
|
|
||
|
|
function setArrowData(l_s, c_s, a_s) {
|
||
|
|
conn_label_side = l_s;
|
||
|
|
conn_circle_side = c_s;
|
||
|
|
arrow_side = a_s;
|
||
|
|
}
|
||
|
|
|
||
|
|
function sideStatements(top_s, mid_top_s, mid_s, mid_bottom_s, bottom_s) {
|
||
|
|
var statement = [];
|
||
|
|
if (is_top) {
|
||
|
|
statement = top_s;
|
||
|
|
} else if (is_mid_top) {
|
||
|
|
statement = mid_top_s;
|
||
|
|
} else if (is_mid) {
|
||
|
|
statement = mid_s;
|
||
|
|
} else if (is_mid_bottom) {
|
||
|
|
statement = mid_bottom_s;
|
||
|
|
} else {//bottom
|
||
|
|
statement = bottom_s;
|
||
|
|
}
|
||
|
|
if (!statement) {
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
setArrowData(statement[0], statement[1], statement[2]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (is_center) {
|
||
|
|
if (is_top) {
|
||
|
|
setArrowData('bottom', 'top', 'top');
|
||
|
|
} else if (is_bottom) {
|
||
|
|
setArrowData('top', 'bottom', 'bottom');
|
||
|
|
} else {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
} else if (is_left) {
|
||
|
|
sideStatements(
|
||
|
|
['right', 'top', 'top'],//top
|
||
|
|
['bottom', 'left', 'bottom'],//mid_top
|
||
|
|
['right', 'left', 'top'],//mid
|
||
|
|
['top', 'left', 'top'],//mid_bot
|
||
|
|
['right', 'bottom', 'bottom']//bot
|
||
|
|
);
|
||
|
|
} else {//right
|
||
|
|
sideStatements(
|
||
|
|
['left', 'top', 'top'],//top
|
||
|
|
['bottom', 'right', 'bottom'],//mid_top
|
||
|
|
['left', 'right', 'top'],//mid
|
||
|
|
['top', 'right', 'top'],//mid_bot
|
||
|
|
['left', 'bottom', 'bottom']//bot
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
var label_conn_coordinates = label_data.conn[conn_label_side];
|
||
|
|
var circle_conn_coordinates = shape_data.conn[conn_circle_side];
|
||
|
|
var by_top_side = (arrow_side == 'top') ? true : false;
|
||
|
|
that.renderArrow({
|
||
|
|
x_from: label_conn_coordinates.x,
|
||
|
|
y_from: label_conn_coordinates.y,
|
||
|
|
x_to: circle_conn_coordinates.x,
|
||
|
|
y_to: circle_conn_coordinates.y,
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
|
||
|
|
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) {
|
||
|
|
this.each(function () {
|
||
|
|
this.enjoyhint_obj.renderLabelWithShape(data);
|
||
|
|
});
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
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;
|
||
|
|
};
|
||
|
|
})(window.jQuery);
|
||
|
|
|
||
|
|
;/*! KineticJS v5.1.0 2014-03-27 http://www.kineticjs.com by Eric Rowell @ericdrowell - MIT License https://github.com/ericdrowell/KineticJS/wiki/License*/
|
||
|
|
var Kinetic={};!function(a){var b=Math.PI/180;Kinetic={version:"5.1.0",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,UA:function(){var b=a.navigator&&a.navigator.userAgent||"",c=b.toLowerCase(),d=/(chrome)[ \/]([\w.]+)/.exec(c)||/(webkit)[ \/]([\w.]+)/.exec(c)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(c)||/(msie) ([\w.]+)/.exec(c)||c.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(c)||[],e=!!b.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);return{browser:d[1]||"",version:d[2]||"0",mobile:e}}(),Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Kinetic.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Kinetic.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){void 0!==b&&(void 0===this.names[b]&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a,b){if(void 0!==a){var c=this.names[a];if(void 0!==c){for(var d=0;d<c.length;d++){var e=c[d];e._id===b&&c.splice(d,1)}0===c.length&&delete this.names[a]}}},getAngle:function(a){return this.angleDeg?a*b:a}}}(this),function(a,b){if("object"==typeof exports){var c=require("canvas"),d=require("jsdom").jsdom,e=d("<!DOCTYPE html><html><head></head><body></body></html>"),f=b();return Kinetic.document=e,Kinetic.window=Kinetic.document.createWindow(),Kinetic.window.Image=c.Image,Kinetic.root=a,Kinetic._nodeCanvas=c,void(module.exports=f)}"function"==typeof define&&define.amd&&define(b),Kinetic.document=document,Kinetic.window=window,Kinetic.root=a}((1,eval)("this"),function(){return Kinetic}),function(){Kinetic.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Kinetic.Collection.prototype=[],Kinetic.Collection.prototype.each=function(a){for(var b=0;b<this.length;b++)a(this[b],b)},Kinetic.Collection.prototype.toArray=function(){var a,b=[],c=this.length;for(a=0;c>a;a++)b.push(this[a]);return b},Kinetic.Collection.toCollection=function(a){var b,c=new Kinetic.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Kinetic.Collection._mapMethod=function(a){Kinetic.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Kinetic.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Kinetic.Collection._mapMethod(c)},Kinetic.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Kinetic.Transform.prototype={copy:function(){return new Kinetic.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},invert:function(){var a=1/(this.m[0]*this.m[
|
||
|
|
},setName:function(a){var b=this.getName();return Kinetic._removeName(b,this._id),Kinetic._addName(this,a),this._setAttr(m,a),this},setAttr:function(){var a=Array.prototype.slice.call(arguments),b=a[0],c=a[1],d=n+Kinetic.Util._capitalize(b),e=this[d];return Kinetic.Util._isFunction(e)?e.call(this,c):this._setAttr(b,c),this},_setAttr:function(a,b){var c;void 0!==b&&(c=this.attrs[a],this.attrs[a]=b,this._fireChangeEvent(a,c,b))},_setComponentAttr:function(a,b,c){var d;void 0!==c&&(d=this.attrs[a],d||(this.attrs[a]=this.getAttr(a)),this.attrs[a][b]=c,this._fireChangeEvent(a,d,c))},_fireAndBubble:function(a,b,c){var d=!0;b&&this.nodeType===o&&(b.target=this),a===k&&c&&this._id===c._id?d=!1:a===l&&c&&this._id===c._id&&(d=!1),d&&(this._fire(a,b),b&&!b.cancelBubble&&this.parent&&(c&&c.parent?this._fireAndBubble.call(this.parent,a,b,c.parent):this._fireAndBubble.call(this.parent,a,b)))},_fire:function(a,b){var c,d=this.eventListeners[a];if(b.type=a,d)for(c=0;c<d.length;c++)d[c].handler.call(this,b)},draw:function(){return this.drawScene(),this.drawHit(),this}}),Kinetic.Node.create=function(a,b){return this._createNode(JSON.parse(a),b)},Kinetic.Node._createNode=function(a,b){var c,d,e,f=Kinetic.Node.prototype.getClassName.call(a),g=a.children;if(b&&(a.attrs.container=b),c=new Kinetic[f](a.attrs),g)for(d=g.length,e=0;d>e;e++)c.add(this._createNode(g[e]));return c},Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"position"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"x",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"y",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"opacity",1),Kinetic.Factory.addGetter(Kinetic.Node,"name"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"name"),Kinetic.Factory.addGetter(Kinetic.Node,"id"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"id"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"rotation",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"scale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"skew",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"offset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetY",0),Kinetic.Factory.addSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addSetter(Kinetic.Node,"width",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"width"),Kinetic.Factory.addSetter(Kinetic.Node,"height",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"height"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"listening","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"filters",void 0,function(a){return this._filterUpToDate=!1,a}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"visible","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"transformsEnabled","all"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"size"),Kinetic.Factory.backCompat(Kinetic.Node,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"}),Kinetic.Collection.mapMethods(Kinetic.Node)}(),function(){Kinetic.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d[b]=c,d[b+1]=c,d[b+2]=c}}(),function(){Kinetic.Filters.Brighten=function(a){var b,c=255*this.brightness(),d=a.data,e=d.length;for(b=0;e>b;b+=4)d[b]+=c,d[b+1]+=c,d[b+2]+=c},Kinetic.Factory.addGetterSetter(Kinetic.Node,"brightness",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Invert=function(a){var b,c=a.data,d=c.length;for(b=0;d>b;b+=4)c[b]=255-c[b],c[b+1]=255-c[b+1],c[b+2]=255-c[b+2]}}(),function(){function a(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function b(b,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=b.data,E=b.width,F=b.height,G=e+e+1,H=E-1,I=F-1,J=e+1,K=J*(J+1
|
||
|
|
},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit()&&(g?this._drawCachedHitCanvas(e):this._drawChildren(d,"drawHit",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()}}),Kinetic.Util.extend(Kinetic.Container,Kinetic.Node),Kinetic.Container.prototype.get=Kinetic.Container.prototype.find,Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container,"clip",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipX"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipY"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipWidth"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipHeight"),Kinetic.Collection.mapMethods(Kinetic.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f="hasShadow";Kinetic.Util.addMethods(Kinetic.Shape,{__init:function(f){this.nodeType="Shape",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Kinetic.shapes;;)if(g=Kinetic.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Kinetic.Node.call(this,f),this.on("shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},_get:function(a){return this.className===a||this.nodeType===a?[this]:[]},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Kinetic.Node.prototype.destroy.call(this),delete Kinetic.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();return this.isVisible()&&(i?this._drawCachedSceneCanvas(h):j&&(h.save(),this._useBufferCanvas()?(c=this.getStage(),d=c.bufferCanvas,e=d.getContext(),e.clear(),e.save(),e._applyLineJoin(this),f._applyTransform(this,e,b),j.call(this,e),e.restore(),k&&(h.save(),h._applyShadow(this),h.drawImage(d._canvas,0,0),h.restore()),h._applyOpacity(this),h.drawImage(d._canvas,0,0)):(h._applyLineJoin(this),f._applyTransform(this,h,b),k&&(h.save(),h._applyShadow(this),j.call(this,h),h.restore()),h._applyOpacity(this),j.call(this,h)),h.restore())),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c.hitCanvas,e=d.getContext(),f=this.hitFunc()||this.sceneFunc(),g=this._cache.canvas,h=g&&g.hit;return this.shouldDrawHit()&&(h?this._drawCachedHitCanvas(e):f&&(e.save(),e._applyLineJoin(this),c._applyTransform(this,e,b),f.call(this,e),e.restore())),this},drawHitFromCache:function(a){var b,c,d,e,f,g,h,i,j=a||0,k=this._cache.canvas,l=this._getCachedSceneCanvas(),m=l.getContext(),n=k.hit,o=n.getContext(),p=l.getWidth(),q=l.getHeight();o.clear();try{for(b=m.getImageData(0,0,p,q),c=b.data,d=o.getImageData(0,0,p,q),e=d.data,f=c.le
|
||
|
|
for(var u=0,w=a.length;w>u;++u){var x=a[u],y=this._getTextWidth(x);if(i&&y>l)for(;x.length>0;){for(var z=0,A=x.length,B="",C=0;A>z;){var D=z+A>>>1,E=x.slice(0,D+1),F=this._getTextWidth(E);l>=F?(z=D+1,B=E,C=F):A=D}if(!B)break;if(t){var G=Math.max(B.lastIndexOf(o),B.lastIndexOf(g))+1;G>0&&(z=G,B=B.slice(0,z),C=this._getTextWidth(B))}if(this._addTextLine(B,C),d=Math.max(d,C),n+=e,!q||j&&n+e>m)break;if(x=x.slice(z),x.length>0&&(y=this._getTextWidth(x),l>=y)){this._addTextLine(x,y),n+=e,d=Math.max(d,y);break}}else this._addTextLine(x,y),n+=e,d=Math.max(d,y);if(j&&n+e>m)break}v.restore(),this.textHeight=b,this.textWidth=d}},Kinetic.Util.extend(Kinetic.Text,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontFamily","Arial"),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontSize",12),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontStyle",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontVariant",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,"padding",0),Kinetic.Factory.addGetterSetter(Kinetic.Text,"align",i),Kinetic.Factory.addGetterSetter(Kinetic.Text,"lineHeight",1),Kinetic.Factory.addGetterSetter(Kinetic.Text,"wrap",q),Kinetic.Factory.addGetter(Kinetic.Text,"text",h),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Text,"text"),Kinetic.Collection.mapMethods(Kinetic.Text)}(),function(){Kinetic.Line=function(a){this.___init(a)},Kinetic.Line.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Line",this.on("pointsChange.kinetic tensionChange.kinetic closedChange.kinetic",function(){this._clearCache("tensionPoints")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b,c,d,e=this.getPoints(),f=e.length,g=this.getTension(),h=this.getClosed();if(a.beginPath(),a.moveTo(e[0],e[1]),0!==g&&f>4){for(b=this.getTensionPoints(),c=b.length,d=h?0:4,h||a.quadraticCurveTo(b[0],b[1],b[2],b[3]);c-2>d;)a.bezierCurveTo(b[d++],b[d++],b[d++],b[d++],b[d++],b[d++]);h||a.quadraticCurveTo(b[c-2],b[c-1],e[f-2],e[f-1])}else for(d=2;f>d;d+=2)a.lineTo(e[d],e[d+1]);h?(a.closePath(),a.fillStrokeShape(this)):a.strokeShape(this)},getTensionPoints:function(){return this._getCache("tensionPoints",this._getTensionPoints)},_getTensionPoints:function(){return this.getClosed()?this._getTensionPointsClosed():Kinetic.Util._expandPoints(this.getPoints(),this.getTension())},_getTensionPointsClosed:function(){var a=this.getPoints(),b=a.length,c=this.getTension(),d=Kinetic.Util,e=d._getControlPoints(a[b-2],a[b-1],a[0],a[1],a[2],a[3],c),f=d._getControlPoints(a[b-4],a[b-3],a[b-2],a[b-1],a[0],a[1],c),g=Kinetic.Util._expandPoints(a,c),h=[e[2],e[3]].concat(g).concat([f[0],f[1],a[b-2],a[b-1],f[2],f[3],e[0],e[1],a[0],a[1]]);return h}},Kinetic.Util.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Line,"closed",!1),Kinetic.Factory.addGetterSetter(Kinetic.Line,"tension",0),Kinetic.Factory.addGetterSetter(Kinetic.Line,"points"),Kinetic.Collection.mapMethods(Kinetic.Line)}(),function(){Kinetic.Sprite=function(a){this.___init(a)},Kinetic.Sprite.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Sprite",this.anim=new Kinetic.Animation,this.on("animationChange.kinetic",function(){this.frameIndex(0)}),this.on("frameRateChange.kinetic",function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=e[d+0],g=e[d+1],h=e[d+2],i=e[d+3],j=this.getImage();j&&a.drawImage(j,f,g,h,i,0,0,h,i)},_hitFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=e[d+2],g=e[d+3];a.beginPath(),a.rect(0,0,f,g),a.closePath(),a.fillShape(this)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()},_setInterval:function(){var a=this;this.interval=setInterval(function(){a._updateIndex()},1e3/this.getFrameRate())},start:function(){var a=this.getLayer();this.anim.setLayers(a),this._setInterval(),this.anim.start()},stop:function(){this.anim.stop
|
||
|
|
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||
|
|
* Licensed under MIT
|
||
|
|
* @author Ariel Flesler
|
||
|
|
* @version 1.4.14
|
||
|
|
*/
|
||
|
|
;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
|