").text(s).html();
};
function ajaxSend( requ, obj, func ) {
$.ajax({
url:appcfg.url_server,
data:"requ="+encodeURIComponent(JSON.stringify(requ)),
dataType:"jsonp",
success:function(resp){
func.call(obj,resp);
},
error:function( jqXHR, textStatus, errorThrown ){
var s = "[$.ajax.error]\n";
s += jqXHR.responseText+"\n";
s += textStatus+"\n";
s += errorThrown;
printError( s );
}
});
};
function CSlider( opt ) {
for( var key in opt ) { this[key] = opt[key]; }
this.setup();
};
CSlider.prototype = {
b_swiping:false,
isSwiping : function() {
return this.b_swiping;
},
beginSwiping : function() {
this.b_swiping = true;
},
endSwiping : function( t ) {
var _this = this;
setTimeout(function(){
_this.b_swiping = false;
},t*1000);
},
b_click:false,
setClick : function( b ) {
this.b_click = b;
},
cancelClick : function() {
return !this.b_click;
},
setup : function() {
this.jqo_del = null;
this.drag_dir = null;
this.drag_elapsed_threshold = 100;
this.drag_dist_threshold = 1;
this.swipe_elapsed_threshold = 40;
this.swipe_dist_threshold = 8;
this.swipe_dist_restraint = 0.5;
this.swipe_speed = 1000;/* pixels per second */
this.swipe_duration = 2;
this.wheel_move = 40;
var _this = this;
function swipedetect( mboard ){
var b_dragging = false;
var b_stopping = false;
var stopping_timer_id = null;
var drag_rec;
var move_que;
/* mousedown/touchstart */
var touchstart = function(e){
_this.setClick(true);
b_dragging = true;
_this.drag_dir = null;
var touchobj = ( e.type == "mousedown" ) ? e : e.changedTouches[0];
//-- init drag_rec and move_que
drag_rec = {
t:new Date().getTime(),
x:touchobj.pageX,
y:touchobj.pageY
};
move_que = [];
//-- stop swiping
if ( _this.isSwiping() && !stopping_timer_id ) {
stopping_timer_id = setTimeout(function(){
if ( stopping_timer_id ) {
b_stopping = true;
stopping_timer_id = null;
_this.processEvent("stop",null);
}
},_this.swipe_elapsed_threshold);
}
};
mboard.addEventListener("touchstart", touchstart, false );
mboard.addEventListener("mousedown", touchstart, false );
/* mousemove/touchmove */
var touchmove = function(e){
e.preventDefault();
if ( !b_dragging ) { return; };
var touchobj = ( e.type == "mousemove" ) ? e : e.changedTouches[0];
//-- ignore multi-touches events
if (( e.type == "touchmove" ) &&
( e.touches.length > 1 )) {
return;
}
//-- make a move record for swipe
var rec = {
t:new Date().getTime(),
x:touchobj.pageX,
y:touchobj.pageY
};
move_que.unshift(rec);
while ( move_que.length > 2 ) { move_que.pop(); }
//-- calc dist and elapsed time
var dist = null;
var distX = touchobj.pageX - drag_rec.x;
var distY = touchobj.pageY - drag_rec.y;
var elapsed = new Date().getTime() - drag_rec.t;
//-- check drag condition
if ( elapsed > _this.drag_elapsed_threshold ) {
if (( Math.abs(distX) >= _this.drag_dist_threshold ) ||
( Math.abs(distY) >= _this.drag_dist_threshold )) {
dist = {x:distX,y:distY};
}
}
//-- update previous cordinates
drag_rec.x = touchobj.pageX;
drag_rec.y = touchobj.pageY;
//-- call back
if ( dist ) {
_this.processEvent("drag",dist);
}
};
mboard.addEventListener("touchmove", touchmove, false );
mboard.addEventListener("mousemove", touchmove, false );
/* mouseup/touchend */
var touchend = function(e){
if ( b_stopping ) {
e.preventDefault();
b_stopping = false;
}
if ( b_dragging ) {
b_dragging = false;
}
if ( move_que.length == 2 ) {
e.preventDefault();
stopping_timer_id = null;
var touchobj = ( e.type == "mouseup" ) ? e : e.changedTouches[0];
var dist = null;
var distX = touchobj.pageX - move_que[1].x;
var distY = touchobj.pageY - move_que[1].y;
var elapsed = new Date().getTime() - move_que[0].t;
if ( elapsed <= _this.swipe_elapsed_threshold ) {
if (( Math.abs(distX) >= _this.swipe_dist_threshold ) &&
( Math.abs(distY)/Math.abs(distX) <= _this.swipe_dist_restraint )) {
dist = {x:distX>0?1:-1,y:0};
} else if (( Math.abs(distY) >= _this.swipe_dist_threshold ) &&
( Math.abs(distX)/Math.abs(distY) <= _this.swipe_dist_restraint )) {
dist = {x:0,y:distY>0?1:-1};
}
}
if ( dist ) {
_this.beginSwiping();
_this.processEvent("swipe",dist);
}
}
};
mboard.addEventListener("touchend", touchend, false );
mboard.addEventListener("mouseup", touchend, false );
/* mouseleave to prevent "sticky element" */
var mouseleave = function(e){
e.preventDefault();
b_dragging = false;
_this.processEvent("out",null);
};
mboard.addEventListener("mouseleave", mouseleave, false );
/* wheel */
var wheel = function(e){
e.preventDefault();
var dir = (
( e.deltaY < 0 ) ||
( e.detail < 0 ) ||
( e.wheelDelta > 0 )
) ? 1 : -1;
var dist = {x:0,y:dir};
_this.processEvent("wheel",dist);
return false;
};
mboard.addEventListener("wheel", wheel, false );
mboard.addEventListener("mousewheel", wheel, false );
mboard.addEventListener("DOMMouseScroll", wheel, false );
}
this.jqo_board = this.jqo_ctar.find(".vpsd-slider");
var wh_ctar = {
w:this.jqo_ctar.width(),
h:this.jqo_ctar.height()
};
var wh_board = {
w:this.jqo_board.outerWidth(),
h:this.jqo_board.outerHeight()
};
var w_dif = wh_board.w - wh_ctar.w;
var h_dif = wh_board.h - wh_ctar.h;
this.limit_box = {
x1:-Math.max(w_dif,0),
y1:-Math.max(h_dif,0),
x2:-Math.min(w_dif,0),
y2:-Math.min(h_dif,0)
};
this.pos = {x:0,y:0};
swipedetect(this.jqo_board.get(0));
},
removeTransition : function() {
this.jqo_board
.removeClass("vpsd-transition-swipe")
.removeClass("vpsd-transition-drag")
.removeClass("vpsd-transition-wheel")
.css({transition:""});
this.jqo_board.width();
if ( this.jqo_del ) {
this.jqo_del
.removeClass("vpsd-transition-swipe")
.removeClass("vpsd-transition-drag")
.removeClass("vpsd-transition-wheel")
.css({transition:""});
}
},
processEvent : function( mtype, dist ) {
this.setClick(false);
if ( dist ) {
if ( !this.drag_dir ) {
this.drag_dir = Math.abs(dist.x) >= Math.abs(dist.y) ? "x" : "y";
}
var rate = 1;
switch( mtype ){
case "swipe":
if ( this.drag_dir == "y" ) {
rate = (this.swipe_speed * this.swipe_duration);
}
break;
case "wheel": rate = this.wheel_move; break;
}
dist = {x:dist.x * rate,y:dist.y * rate};
this.prev_x = this.pos.x;
this.prev_y = this.pos.y;
var dist_move = 0;
switch(this.drag_dir) {
case "x":
if ( dist.x ) {
this.pos.x += dist.x;
dist_move = Math.abs(this.pos.x-this.prev_x);
}
if ( mtype == "swipe" ) {
if ( this.jqo_del ) {
this.pos.x = this.jqo_del.width() * (this.pos.x>=0?1:-1);
this.processEvent("delend");
}
return;
}
break;
case "y":
if ( dist.y ) {
this.pos.y += dist.y;
this.pos.y = Math.min(this.pos.y,this.limit_box.y2);
this.pos.y = Math.max(this.pos.y,this.limit_box.y1);
dist_move = Math.abs(this.pos.y-this.prev_y);
}
break;
}
this.removeTransition();
this.jqo_board.addClass("vpsd-transition-"+mtype);
//-- console.log(mtype);
switch( mtype ){
case "swipe":
var sec = dist_move/this.swipe_speed;
this.endSwiping(sec);
var str = "top %sec%s, left %sec%s";
str = str.replace(/%sec%/g,sec);
if ( this.drag_dir == "y" ) {
this.jqo_board.css({
transition:str,
"transition-timing-function":"ease-out"
});
}
break;
}
if ( this.drag_dir == "y" ) {
this.jqo_board
.css({
top:this.pos.y+"px"
});
}
if ( this.drag_dir == "x" ) {
if ( this.jqo_del ) {
this.jqo_del
.css({
left:this.pos.x+"px"
});
}
}
} else {
switch( mtype ){
case "stop":
this.endSwiping(0);
var cpos = this.jqo_board.position();
this.removeTransition();
this.pos.x = cpos.left;
this.pos.y = cpos.top;
this.jqo_board
.css({
top:this.pos.y+"px"
});
break;
case "delend":
this.removeTransition();
var w = this.jqo_del.width();
var tw = w*0.3;
var x = 0;
if ( tw < this.pos.x ) {
x = w*1.1;
} else if ( tw < -this.pos.x ) {
x = -w*1.1;
}
this.pos.x = 0;
this.jqo_del
.addClass("vpsd-transition-swipe")
.css({
transition:"left 0.3s"
});
this.jqo_del
.css({
left:x+"px"
});
this.endSwiping(0.3);
this.drag_dir = null;
if ( x ) {
this.prt.removePanel(this.jqo_del);
}
this.jqo_del = null;
break;
}
}
//-- grid fit
}
};
function CVPicSlider( opt ) {
for( var key in opt ) { this[key] = opt[key]; }
if ( this.jqo_host.length ) {
this.setup();
}
};
CVPicSlider.prototype = {
setup :function() {
var _this = this;
this.rs = null;
//-- show info
if ( appcfg.info ) {
console.log("INFO","[jQuery version]",$.fn.jquery);
}
//-- init
},
removePanel : function( jqo_panel ) {
var _this = this;
jqo_panel.fadeOut(500,function(){
$(this).remove();
_this.rebuild();
});
},
rebuild : function() {
var _this = this;
this.idx_prev = -1;
this.cnt = 0;
var n = this.jqo_slider.find(".vpsd-panel").length;
if ( n == 0 ) {
setTimeout(function(){
_this.jqo_slider.html(_this.jqo_keep.html());
_this.runSlider();
},500);
}
},
clickPanel : function( e, jqo_panel ){
var _this = this;
if ( this.slider.cancelClick() ) {
e.preventDefault();
e.stopPropagation();
return;
}
if ( this.cnt >= this.max_hit ) {
return;
}
//-- cancel fadeout
this.jqo_hitmsg.stop(true,false);
//-- find the index of clicked image
var idx = jqo_panel.index();
//-- is this image the same as the last-clicked image?
if ( idx == this.idx_prev ) {
this.cnt++;
} else {
this.idx_prev = idx;
this.cnt = 1;
}
//-- get anchor div
var jqo_anchor = jqo_panel.find(".vpsd-anchor");
//-- calc hit position in vpsd-anchor
var anchor_xy = jqo_anchor.offset();
var xy = {
top : e.pageY - anchor_xy.top,
left : e.pageX - anchor_xy.left
};
//-- setup hitmsg div
this.jqo_hitmsg
.css({
display:"block",
width:"auto",
"max-width":"auto",
"white-space":"nowrap",
"word-wrap":"break-word",
visibility:"hidden",
top:xy.top+"px",
left:xy.left+"px"
})
if (( this.cnt <= this.hitmsg_len ) && ( this.hmx[this.cnt-1] )) {
this.jqo_hitmsg.html(this.hmx[this.cnt-1]);
jqo_anchor.html(this.jqo_hitmsg);
//-- center hitmsg div horizontally
var w_anc = jqo_anchor.width();
var w_hit = this.jqo_hitmsg.outerWidth(true);
var left = 0;
if ( w_hit >= w_anc ) {
this.jqo_hitmsg.css({
width:w_anc+"px",
"max-width":w_anc+"px",
"word-break":"break-all",
"white-space":"normal"
});
} else {
if ( xy.left+w_hit/2 < w_anc ) {
left = parseInt(xy.left-w_hit/2);
} else {
left = w_anc - w_hit;
}
if ( left < 0 ) { left = 0; }
}
this.jqo_hitmsg.css({
left:left+"px"
});
//-- center hitmsg div vertically
var h_anc = jqo_anchor.height();
var h_hit = this.jqo_hitmsg.outerHeight(true);
var top = 0;
if ( h_hit < h_anc ) {
if ( xy.top+h_hit/2 < h_anc ) {
top = parseInt(xy.top-h_hit/2);
} else {
top = h_anc - h_hit;
}
if ( top < 0 ) { top = 0; }
}
this.jqo_hitmsg.css({
top:top+"px"
});
//-- display hitmsg
this.jqo_hitmsg.css({
opacity:1,
display:"block",
visibility:"visible"
});
}
//-- does max_hit reach?
if ( this.cnt == this.max_hit ) {
this.removePanel(this.jqo_slider.find(".vpsd-panel").eq(idx));
} else {
this.jqo_hitmsg.animate({
opacity:0
},this.click_interval,function(){
_this.idx_prev = -1;
_this.cnt = 0;
});
}
},
runSlider : function (){
var _this = this;
this.slider.jqo_board.css({top:0});
//-- setup anchor
this.jqo_slider.find(".vpsd-linkbtn,.vpsd-anchor").click(function(e){
if ( _this.slider.cancelClick() ) {
e.preventDefault();
e.stopPropagation();
return;
}
});
//-- setup renda
if ( this.max_hit && this.click_interval ) {
//-- init
this.idx_prev = -1;
this.cnt = 0;
this.jqo_hitmsg = $("
").attr("class","vpsd-hitmsg");
this.jqo_slider.find(".vpsd-panel").click(function(e){
_this.clickPanel(e,$(this));
});
}
//-- setup slide remove
this.jqo_slider.find(".vpsd-panel")
.bind("mouseenter mousedown touchstart",function(){
_this.slider.jqo_del = $(this);
})
.bind("mouseleave mouseup touchend",function(){
if (( _this.slider.drag_dir == "x" ) && ( _this.slider.jqo_del )) {
_this.slider.processEvent("delend",null);
}
});
},
printHtml : function( html, state ) {
var _this = this;
//-- render html
this.jqo_host.html(html);
//-- jqo_keep
this.jqo_ctar = this.jqo_host.find(".vpsd-ctar");
this.jqo_slider = this.jqo_host.find(".vpsd-slider");
this.jqo_keep = this.jqo_host.find(".vpsd-keep");
this.jqo_keep.html(this.jqo_slider.html());
//-- fix the width & height of slider board
this.jqo_slider.css({
width:this.jqo_slider.outerWidth()+"px",
height:this.jqo_slider.outerHeight()+"px"
});
//-- create slider object for swipe,drag,mousewheel
this.slider = new CSlider({prt:this,jqo_ctar:this.jqo_host.find(".vpsd-ctar")});
//-- init parameters for renda
this.max_hit = parseInt(this.jqo_ctar.attr("data-max-hit"));
this.click_interval = parseInt(this.jqo_ctar.attr("data-click-interval"));
this.hitmsg = this.jqo_ctar.attr("data-hitmsg");
//-- setup and trim hitmsg array
this.hmx = [];
this.hitmsg = this.hitmsg.trim();
if ( this.hitmsg ) {
this.hmx = this.hitmsg.split(",");
for( var i=0; i