/* * 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)
