/*
* INFORMATION
* Plugin Name: Client Data Jquery Plugin
* Created Date: 09/07/2012
* Version: 0.0.1
* Deployed to: \\uploadb\imagestore\theknot\jscripts\jquery\plugins\jquery-clientdata.0.0.1.js
* TFS: $/Editorial/Trunk/Websites/common/jscripts/jquery/plugins/jquery-clientdata/jquery.clientdata.js
* Author: Santiago Chen
* Email: 545438641@qq.com
*
* DEPENDENCIES
* jQuery (Attention: tested only with 1.4.3)
* standardModal
*
* SAMPLE FOR USING CLIENTDATA PLUGIN
* $.fn.clientData({
* modalWidth: "550", //define modal's width
* modalHeight: "auto", //define modal's height
* thickBorderWidth: 15, //define border's width
* thickBorderOpacity: .5, //define border's opacity
* showOverlay: true, //define whether the overlay is needed or not
* overlayOpacity: 0, //define overlay's opacity
* closeOnOverlayClick: false, //define whether can close modal by overlay clicking or not
* onSelect:function(param){
//onSelect is a function you can defined by yourself to do something you want to.
//param is optional, but it is needed when you want to handle with the object about client data returned by GetComponentsJson call.
* //just write codes to do whatever you want here. Aha!
* }
* });
*
* CHANGELOG
* 09/07/2012 drafted by Santiago.
*
*/
(function($){
$.fn.clientData = function(options){
//PARAMS:
var defaults = {
modalWidth: "550",
modalHeight: "auto",
thickBorderWidth: 15,
thickBorderOpacity: .5,
showOverlay: true,
overlayOpacity: 0,
closeOnOverlayClick: false,
onSelect: function(param){console.log(param)}
};
var opts = $.extend(defaults, options);
//load contents with standModal
(function initialData(){
XO.standardModal.makeModal("clientData", {
width: opts.modalWidth + 'px' ,
height: 'auto',
thickBorderWidth: opts.thickBorderWidth,
thickBorderOpacity: opts.thickBorderOpacity,
showOverlay: opts.showOverlay,
overlayOpacity: opts.overlayOpacity,
closeDestroysModal: true,
restoreContentOnDestroy: false,
closeOnOverlayClick: opts.closeOnOverlayClick,
content: domFactory.searchBox.initial(), //contents loaded here
events: { onClose: function(){domFactory.closeAndRestore()}}
});
domFactory.searchBox.clientCheck();
$('.xo_stdModalContent').resize(function(){
$(".xo_stdModalThickBorder").height($('.xo_stdModal').height()+2*(opts.thickBorderWidth+6));//6 pixel is the width of xo_stdModal's border
});
domElement.contentWrap.bind('selectCallBack',function(event){opts.onSelect(event.message);})
})()
}
//parts for dom
var domElement = {
//wrap
contentWrap: $("<div></div>"),
//searchbox
searchBox: $('<table id="searchBox"></table>'),
checkBox: $('<tr><td>Include Expired Campaigns:</td><td><input type="checkbox" id="checkBox" disabled="disabled"/></td><li>'),
clientRow: $('<tr><td>Client:</td><td><input type="text" id="txtClient"/></td><li>'),
campaignRow: $('<tr><td>Campaign:</td><td><select id="campaignSelect" disabled="disabled"></select></td><li>'),
//droplist
dropList: $('<ul></ul>'),
//resultbox
resultCounter: $('<div style="text-align:left;padding:6px 6px 16px 6px;"></div>'),
//resultTable
resultTable: $('<table style="width:100%;text-align:left;padding:12px 0; border-top:solid 1px #999; border-bottom: solid 1px #999;"></table>'),
resultTableTop: $('<tr style="font-Size:12px; font-weight:bold; color:#999999;"><td width="17%">Component Id</td><td width="13%">FatTail Id</td><td width="14%">Description</td><td width="30%">Notes</td><td width="13%">Start Date</td><td width="13%">End Date</td></tr>'),
//paging
paging: $('<div style="margin:12px 0; font-size:12px;"><span id="prePage" style="margin:0 30px 0 0"><Previous Page</span><span id="currentPage" style="margin:0 30px 0 0"></span><span id="nextPage">Next Page></span></div>'),
//txt loader
txtLoader: $('<span style="color:#336; font-size:10px; width:22px; height:16px; display:inline-block; background:url(http://www.xoedge.com/clientdata/img/loading_size_16.gif) no-repeat 4px 0; vertical-align: middle;"></span>'),
txtLoader2: $('<span style="color:#336; font-size:10px; width:106px; height:9px; display:inline-block; background:url(http://www.xoedge.com/clientdata/img/loading_size_32.gif) no-repeat 4px 0; vertical-align: middle;"></span>'),
//tips: no record
noRecord: $('<span style="color:#B00; font-size:10px;;"> No Record</span>')
};
//domFactory
var domFactory = {
searchBox:{
//initial
initial: function(){
domElement.searchBox.prepend(domElement.checkBox,domElement.clientRow,domElement.campaignRow);
domElement.contentWrap.prepend(domElement.searchBox)
return domElement.contentWrap
},
tempClient: '', //restrict the times of search event
//clientCheck
clientCheck: function(){
//var tempClient;
domFactory.dropList.initial();
$("#txtClient").keyup(function(){
if(domFactory.searchBox.tempClient !== $(this).val().replace(/^\s*/, '')){
domFactory.searchBox.tempClient = $(this).val().replace(/^\s*/, '');
if(domFactory.searchBox.tempClient.length >= 3){
serverCall.callClient(domFactory.searchBox.tempClient);
}
else{
$('#checkBox').attr('disabled','disabled');
domFactory.dropList.reStore();
if(domElement.txtLoader)domElement.txtLoader.remove();
}
}
})
},
reStore: function(){
$("#checkBox").attr("checked",false);
$("#txtClient").val("");
if(domElement.clientRow.find('span').length>0){
domElement.clientRow.find('span').remove();
}
}
},
//dom for droplist
dropList: {
initial: function(){
domElement.dropList.css({
position:'absolute',
left: $('#txtClient').position().left,
top: $('#txtClient').position().top+$('#txtClient').height()+6, //width of border from some dom elemnts
background: "#ffffff",
width: $('#txtClient').width(),
padding: '0px',
margin: '0px',
border: "solid 2px #cccccc"
});
},
onChange: function(obj){
domElement.dropList.empty();
if(obj.length>0){
$('#checkBox').attr('disabled','');
if(domElement.clientRow.find('span').length>0){
domElement.clientRow.find('span').remove();
}
$.each(obj,function(index,element){
domElement.dropList.append(
$("<li>"+element.ClientName+"</li>").attr('data-accountID',element.ClientAccountID)
.css({cursor: "pointer"})
.click(function(){
domFactory.searchBox.tempClient = $(this).html();
$('#txtClient').val($(this).html())
serverCall.callCampaign($(this).attr('data-accountID'));
domFactory.dropList.reStore();
$('#checkBox').attr('disabled','disabled');
})
);
})
domElement.contentWrap.append(domElement.dropList);
}
else{
$('#checkBox').attr('disabled','disabled');
(domElement.txtLoader)?domElement.txtLoader.replaceWith(domElement.noRecord):$('#txtClient').after(domElement.noRecord);
}
},
reStore: function(){
domElement.dropList.empty().remove();
}
},
campaignRow:{
onChange: function(obj){
domFactory.campaignRow.reStore();
$('#campaignSelect').unbind('change');
if(obj.length>0){
$.each(obj,function(index,element){
$('#campaignSelect').append($('<option>' + element.CampaignName + '</option>').attr('value',element.CampaignID))
})
if(obj.length>1){$('#campaignSelect').prepend('<option value="undefine">Please select</option>')}
$('#campaignSelect').attr('disabled','');
//the below is handler for ajax callComponent.
if(obj.length==1){
serverCall.callComponent(obj[0].CampaignID);
}
$('#campaignSelect').change(function(){
serverCall.callComponent($(this).val());
})
}
else{
(domElement.txtLoader)?domElement.txtLoader.replaceWith(domElement.noRecord):$('#campaignSelect').after(domElement.noRecord);
$('#campaignSelect').attr('disabled','disabled');
}
},
reStore: function(){
domElement.campaignRow.find('#campaignSelect').empty().attr({'value':'','disabled':'disabled'});
}
},
//resultCounter
resultCounter:{
initial: function(param){
domFactory.resultCounter.reStore();
domElement.resultCounter.html(param.totalAmount+((param.totalAmount==1)?' result found':' results found')).insertAfter(domElement.searchBox);
},
reStore: function(){
domElement.resultCounter.empty().remove();
}
},
//resultTable
resultTable:{
initial: function(param){
domFactory.resultTable.reStore();
domElement.resultTable.insertAfter(domElement.resultCounter);
domElement.resultTable.append(domElement.resultTableTop);
domFactory.resultTable.onConstruct(param);
},
onConstruct: function(param){
for(var i=0; i<param.components.length; i++){
domElement.resultTable.append(
$('<tr><td width="17%"><a>'+param.components[i].ClientCampaignComponentID+'</a></td>'
+'<td width="13%">'+param.components[i].SourceComponentID+'</td>'
+'<td width="14%">'+param.components[i].ComponentDesc+'</td>'
+'<td width="30%">'+param.components[i].Notes+'</td>'
+'<td width="13%">'+utils.covertDate(param.components[i].ComponentStartDate)+'</td>'
+'<td width="13%">'+utils.covertDate(param.components[i].ComponentEndDate)+'</td></tr>')
.css({fontSize: '10px',verticalAlign: 'top'})
);
}
domElement.resultTable.find('a')
.css({textDecoration:'underline',cursor:'pointer',color:'#0037AA'})
.click(function(){domElement.contentWrap.trigger({type:'selectCallBack', message:param})});
},
reStore: function(){
domElement.resultTable.empty().remove();
}
},
//paging
paging:{
initial:function(param,page){
domElement.paging.insertAfter(domElement.resultTable);
domFactory.paging.countPage(param,page)
},
countPage: function(param,page){
//display current pageNum
$('#currentPage').html('Page '+page+' of '+param.totalPages);
//modify pre Btn;
if(page>1){
$('#prePage').css({
cursor:'pointer',
color: '#333'
}).click(function(){
serverCall.callComponent(param.components[0].CampaignID,(page-1));
})
}
if(page==1){
$('#prePage').css({cursor:'default',color: '#ccc'}).unbind('click')
}
//modify next Btn
if(page<param.totalPages){
$('#nextPage').css({
cursor:'pointer',
color: '#333'
}).click(function(){
serverCall.callComponent(param.components[0].CampaignID,(page+1));
})
}
if(page==param.totalPages){
$('#nextPage').css({cursor:'default',color:'#ccc'}).unbind('click');
}
},
reStore: function(){
domElement.paging.remove();
}
},
//closeAndResore
closeAndRestore:function(){
domFactory.searchBox.reStore();
domFactory.dropList.reStore();
domFactory.campaignRow.reStore();
domFactory.resultCounter.reStore();
domFactory.resultTable.reStore();
domFactory.paging.reStore();
}
};
//serverCall
var serverCall = {
baseURL: "http://www.theknot.com/national/clientdata/api/v1/",
callClient: function(param){
(domElement.clientRow.find('span').length>0)?domElement.clientRow.find('span').replaceWith(domElement.txtLoader):$('#txtClient').after(domElement.txtLoader);
var postData = "client="+encodeURIComponent(param);
$.ajax({
url: serverCall.baseURL + "GetClientsJson",
dataType: 'jsonp',
type: 'GET',
cache: false,
data: postData,
success: function(data, status) {
domFactory.dropList.onChange(data);
},
error: function(xhr, desc, err) {alert('Ajax error on GetClientsJson(): ' + desc);},
complete: function(){if(domElement.txtLoader)domElement.txtLoader.remove();}
})
},
callCampaign: function(param){
(domElement.campaignRow.find('span').length>0)?domElement.campaignRow.find('span').replaceWith(domElement.txtLoader):$('#campaignSelect').after(domElement.txtLoader);
$('#campaignSelect').attr('disabled','disabled');
var expired = $('#checkBox').attr('checked');
var postData = "ClientAccountID="+encodeURIComponent(param)+"&expired="+expired;
$.ajax({
url: serverCall.baseURL + "GetCampaignsJson",
dataType: 'jsonp',
type: 'GET',
cache: false,
data: postData,
success: function(data, status) {
domFactory.campaignRow.onChange(data);
},
error: function(xhr, desc, err) {alert('Ajax error on GetCampaignsJson(): ' + desc);},
complete: function(){if(domElement.txtLoader)domElement.txtLoader.remove();}
})
},
callComponent: function(param, pageindex){
if(param !=='undefine'){
domElement.resultCounter.remove();
domElement.resultTable.remove();
domElement.paging.remove();
domElement.searchBox.after(domElement.txtLoader2);
var _index = pageindex || 1;
var postData = "CampaignID="+encodeURIComponent(param)+"&pageIndex="+_index;
$.ajax({
url: serverCall.baseURL + "GetComponentsJson",
dataType: 'jsonp',
type: 'GET',
cache: false,
data: postData,
success: function(data, status) {
domFactory.resultCounter.initial(data); //count result found
if(data.totalAmount>0){
domFactory.resultTable.initial(data);//display result found
domFactory.paging.initial(data,_index); //display paging
}
},
error: function(xhr, desc, err) {alert('Ajax error on GetComponentsJson(): ' + desc);},
complete: function(){if(domElement.txtLoader2)domElement.txtLoader2.remove();}
})
}
}
};
var utils = {
covertDate : function (dateString) {
if(dateString){
var dateNo = dateString.split('(')[1].split(')')[0],
obj = eval('(' + "{Date: new Date(" + dateNo + ")}" + ')'),
dateValue = obj["Date"];
return (dateValue.getMonth() + 1) + "/" + dateValue.getDate() + "/" + dateValue.getFullYear();
}
else{return "";}
},
configHandler :function(){
//css
var cssLink = document.createElement('link');
cssLink.href = 'http://www.xoedge.com/clientdata/style/style.css';
cssLink.rel = 'stylesheet';
document.head.appendChild(cssLink);
//standard modal
var smScript = document.createElement('script');
smScript.src = 'http://www.xoedge.com/jscripts/shared/xo/xo.modal/xo.standardModal-0.0.2.min.js';
document.body.appendChild(smScript);
}()
};
/*
* jQuery resize event - v1.1 - 3/14/2010
* http://benalman.com/projects/jquery-resize-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=10;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
})(jQuery)
浙公网安备 33010602011771号