------hibuYuiTable.js----------------------------------------------------------------------------------------------------
/** Dependencies:
* YAHOO core* YAHOO.util.DataSource (if using Table)
* YAHOO.widget.DataTable (if using Table)
* jQuery
**/
function hibuYuiTable(container, meta, updater, options){
var _container = container;
var _meta = meta ? $.extend(true, {}, meta) : {};
var _updater = updater;
var _tableOptions = {
initialLoad: false
}
var _paginator = null;
var _dataTable = null;
var _respData = null;
var _paginatorLinkedToTable = false;
var _savedColumns = {};
var _me = this;
//other options
var _ops = {
tableWrapper : null,
paginatorOps : {
containers : null,
firstPageLinkLabel : "first",
previousPageLinkLabel : "prev",
nextPageLinkLabel : "next",
lastPageLinkLabel : "last",
template:"{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink}" +
"<span class='rowPerPage'> |  show <span class='selectBox'><span><span class='rowPerPageVal'></span><span class='ui-icon'></span></span>{RowsPerPageDropdown} </span></span>",
rowsPerPageOptions : [5, 10, 15, 20, 30, 50, 100]
}
}
$.extend(true, _ops, options);
//overwrite rowsPerPageOptions by parameter
if(options && options.paginatorOps && options.paginatorOps.rowsPerPageOptions){
_ops.paginatorOps.rowsPerPageOptions = options.paginatorOps.rowsPerPageOptions;
}
function _initialize(_ops){
if(_ops.tableWrapper){
_ops.tableWrapper = $("#" + _ops.tableWrapper);
}else{
_ops.tableWrapper = $("<div></div>")
$("#" + _container).after(_ops.tableWrapper);
_ops.tableWrapper.append($("#" + _container));
}
if(_meta.optional){
$.extend(true, _tableOptions, _meta.optional);
}
if (_meta.state && _meta.state.page) {
if (_meta.state.page.visibility != "never" && _meta.state.page.visibility != "hidden") {
_paginator = new YAHOO.widget.Paginator(_ops.paginatorOps);
_paginator.subscribe('changeRequest', _repaginate);
if(!_ops.paginatorOps.containers){
_paginatorLinkedToTable = true;
_tableOptions.paginator = _paginator;
}
if (_meta.state.page.local) {
_tableOptions.paginator = _paginator;
}
}
}
if(_meta.state && _meta.state.sort){
_tableOptions.sortedBy = _getYUISortParams();
}
// initialize obligatory datasource
var dataSource = new YAHOO.util.DataSource([]);
// initialize view
_dataTable = new YAHOO.widget.DataTable(
_container,
_meta.columnDefs,
dataSource,
_tableOptions
);
//bind event
_dataTable.addListener("renderEvent", function(){
if(_ops.paginatorOps.containers && _ops.paginatorOps.containers.length > 0){
for(var i = 0; i < _ops.paginatorOps.containers.length; i++){
var paginator = $("#" + _ops.paginatorOps.containers[i]);
paginator.find(".rowPerPageVal").html(paginator.find("select").val());
}
}else{
_getChild(".selectBox .rowPerPageVal").html(_getChild(".selectBox select").val());
}
});
_createColumnTooltips();
// should look into replacing this with an onEvent hook
if (_meta.state && _meta.state.sort && !_meta.state.sort.local){
_dataTable.sortColumn = _resort;
}
}
function _createColumnTooltips() {
var t = _meta.columnDefs;
for (var i = 0; i < t.length; i++) {
var column = _dataTable.getColumn(t[i].key);
if(!column){
continue;
}
var anchor, th = column.getThEl();
//if th already has question mark then don't need add again
if($(th).find(".questionMark").length > 0){
continue;
}
// clear default tooltip
var oldColTitle = $(th).find(".yui-dt-sortable").attr("title");
$(th).find(".yui-dt-sortable").removeAttr("title");
// tooltip anchor node
if (t[i].iconClass) {
anchor = ybApp.newChild(th.lastChild, "A", {"class":"questionMark"});
ybApp.newChild(anchor, "SPAN", {"class":t[i].iconClass}).innerHTML = " ";
} else {
anchor = th;
}
//todo find some better way of resolving tooltip conflicts
var colTitle = t[i].description;
if (t[i].sortable && colTitle)
colTitle += "\n" + ( ybApp.say("tables.sortable") || "[click here to sort]" );
else if (t[i].sortable)
colTitle = ybApp.say("tables.sortable") || "[click here to sort]";
else if (!colTitle){
colTitle = oldColTitle ? oldColTitle : "";
}
/*if (colTitle && YAHOO.widget.Tooltip)
new YAHOO.widget.Tooltip("tooltip_" + ybApp.uniqId(),
{
context : anchor,
container : _ops.tableWrapper.parents(".yui-dialog").length ? _ops.tableWrapper.parents(".yui-dialog").get(0) : document.body,
text : colTitle
});
else if (colTitle)
anchor.title = colTitle;
*/
if(anchor){
anchor.title = colTitle;
}
}
}
function _getYUISortParams() {
var params = {
key : _meta.state.sort.key,
dir : (_meta.state.sort.dir) ? YAHOO.widget.DataTable.CLASS_DESC : YAHOO.widget.DataTable.CLASS_ASC
};
return params;
}
function _repaginate(uistate){
var newOffset = (uistate.page - 1) * _meta.state.page.rowsPerPage;
if (_meta.state.page.rowsPerPage != uistate.rowsPerPage){
$.extend(true, _meta.state.page, {recordOffset: 0, rowsPerPage: uistate.rowsPerPage});
}else if (_meta.state.page.recordOffset != newOffset){
$.extend(true, _meta.state.page, {recordOffset: newOffset});
}
if (_meta.state.page.local){
_refreshUI();
return true;
} else{
_applayUpdate();
return false;
}
}
function _resort(col){
var sortKey = col.key;
var sortDir = 1;
if (_meta.state.sort){
if (sortKey == _meta.state.sort.key){
sortDir = Number(!_meta.state.sort.dir);
}
}
$.extend(true, _meta.state.sort, {key:sortKey, dir:sortDir});
_applayUpdate();
}
function _refreshData() {
_clear();
if (!_respData || !_respData.length){
return;
}
if(_paginatorLinkedToTable){
if (_paginator && _meta.state && _meta.state.page && _meta.state.page.recordOffset){
for (var i=0; i<_meta.state.page.recordOffset; i++){
_respData.unshift({});
}
}
}
_dataTable.addRows(_respData, 0);
}
function _refreshUI() {
if (_paginator && _meta.state && _meta.state.page) {
_paginator.setTotalRecords(_meta.state.page.totalRecords, true);
_paginator.setRowsPerPage(_meta.state.page.rowsPerPage, true);
_paginator.setPage(_meta.state.page.recordOffset / _meta.state.page.rowsPerPage + 1, true);
if (!_meta.state.page.totalRecords) {
_getChild(".yui-dt-paginator").hide();
}else{
_getChild(".yui-dt-paginator").show();
}
if(_meta.state.page.totalRecords <= _ops.paginatorOps.rowsPerPageOptions[0]){
_getChild(".rowPerPage").hide();
}else{
_getChild(".rowPerPage").show();
}
if (_getChild(".yui-pg-first").length) {
_getChild(".yui-pg-container").show();
if(_meta.state.page.totalRecords == 0){
_getChild(".yui-pg-container").hide();
} else if ((_meta.state.page.totalRecords <= _ops.paginatorOps.rowsPerPageOptions[0]) ||
(_meta.state.page.totalRecords / _meta.state.page.rowsPerPage <= 1)) {
_getChild(".yui-pg-first").hide();
_getChild(".yui-pg-previous").hide();
_getChild(".yui-pg-pages").show();
_getChild(".yui-pg-next").hide();
_getChild(".yui-pg-last").hide();
} else if (_paginator.getCurrentPage() == 1) {
_getChild(".yui-pg-first").hide();
_getChild(".yui-pg-previous").hide();
_getChild(".yui-pg-pages").show();
_getChild(".yui-pg-last").show();
_getChild(".yui-pg-pages").show();
} else {
_getChild(".yui-pg-first").show();
_getChild(".yui-pg-previous").show();
_getChild(".yui-pg-next").show();
_getChild(".yui-pg-last").show();
_getChild(".yui-pg-pages").show();
}
}
_paginator.render();
}
if(_meta.state && _meta.state.sort){
_dataTable.set("sortedBy", _getYUISortParams(), true);
}
}
function _applayUpdate(callback){
_ops.tableWrapper.addClass("ajaxLoading");
$("#" + _container).addClass("loading");
_updater(_meta.state, function(response){
response = changeJsonToObj(response);
//update state
$.extend(true, _meta.state, response.state);
_respData = response.data;
_me.render();
if(typeof callback == "function"){
callback();
}
});
}
function _getChild(exp){
return _ops.tableWrapper.find(exp);
}
function _clear() {
var records = _dataTable.getRecordSet();
records.deleteRecords(0, records.getLength());
}
function _hasFeature(list, feature){
if(list[feature] && list[feature] == "true"){
return true;
}else{
return false;
}
}
this.getTable = function(){
return _dataTable;
}
this.getRowData = function() {
//Return a copy of the data. In past API versions some modification was needed.
return _respData.slice(0);
}
this.render = function() {
_ops.tableWrapper.removeClass("ajaxLoading");
$("#" + _container).removeClass("loading");
_refreshData();
_refreshUI();
_dataTable.render();
}
this.setFilter = function(filt, callback) {
if(_meta.state.filter){
$.extend(true, _meta.state.filter, filt);
}else{
_meta.state.filter = filt;
}
this.requestUpdate(callback);
}
this.requestUpdate = function(callback){
if (_meta.state && _meta.state.page && _meta.state.page.recordOffset){
_meta.state.page.recordOffset = 0;
}
_applayUpdate(callback);
}
this.hideColumn = function(colKey) {
//find the desired column and its location in the table
var col = _dataTable.getColumn(colKey);
if (!col) return;
colKey = col.getKey();
var prevKey = null;
if (col.getIndex() > 0)
prevKey = _dataTable.getColumn(col.getIndex() - 1).getKey();
//pop the column from the table and save its representation
_savedColumns[colKey] = {
left : prevKey,
column : _dataTable.removeColumn(col)
};
//name of saved object
return colKey;
}
this.unhideColumn = function(colKey) {
var saved = _savedColumns[colKey];
if (!saved) return;
var neighbor, colNo = 0, neighborName = saved.left;
//if the neighboring column is also hidden,
// traverse back until a reference is found to
// a non-hidden table row
while (neighborName in _savedColumns) {
neighbor = _savedColumns[neighborName];
neighborName = neighbor.left;
}
if (neighborName && _dataTable.getColumn(neighborName)) {
colNo = _dataTable.getColumn(neighborName).getIndex() + 1;
}
//complete transact and display column
delete _savedColumns[colKey];
_dataTable.insertColumn(saved.column, colNo);
return colNo;
}
this.filterColumns = function (featureList) {
if(featureList){
for (var i = 0; i < _meta.columnDefs.length; i++) {
var col = _meta.columnDefs[i];
if (col.feature && !_hasFeature(featureList, col.feature))
this.hideColumn(col.key);
else
this.unhideColumn(col.key);
}
}
_createColumnTooltips();
}
_initialize(_ops);
}
/*table formatters*/
var yuiTable = {
/** Custom formatter for audio links **/
formatAudio : function(el, row, col, data) {
el.innerHTML = "";
if (data) {
$("<a></a>").attr({
href: data,
title: ybApp.say("calltracking.audio.help") || "Open the audio recording of this call (right click to save)"
}).css({
"text-decoration": "none"
}).append("<span class='wrIcon bb audioSpeaker'> </span>").appendTo(el);
}
},
/** Custom Float formatter - show fractions to 2 decimal places **/
formatFloatNumber : function(el, row, col, n) {
var span = ybApp.newChild(ybApp.clear(el), "span");
n = yuiTable.parseFloatNumber(n);
if (typeof(n) == "number" && !isNaN(n)){
n = YAHOO.util.Number.format(n, {
prefix: "",
decimalPlaces: 2,
thousandsSeparator: ",",
suffix: ""
});
span.innerHTML = n;
}else{
span.innerHTML = n;
}
},
/** Custom number formatter - show fractions to 2 decimal places **/
formatNumber : function(el, row, col, n) {
el.innerHTML = "";
var span = $("<span></span>");
n = yuiTable.parseNumber(n);
span.html(n);
span.appendTo(el);
},
formatNumberString : function(el, row, col, n) {
el.innerHTML = "";
var span = $("<span></span>");
span.html(n).appendTo(el);
},
parseNumber : function parseNumber(n) {
if (typeof(n) == "number" || n == "")
return n;
if (n.match(/,/))
return parseFloat(n.replace(/,/g,""));
return parseFloat(n);
},
parseFloatNumber : function FloatNumber(n){
if(n == ""){
return n;
}
return parseFloat(n);
},
formatEmailTopicClickable : function(el, row, col, subj) {
var emailid = row.getData("AAEmailID");
var a;
var displaySubject = subj || "[no subject]";
if (emailid != 0) {
a = ybApp.newChild(el, "a", {href:"#"});
a.innerHTML = displaySubject;
$(a).click(function(e) {
e.stopPropagation();
jDashBoard.getContactAnalystEmailTextByTopic({filter:{id:emailid}}, function(s) {
var emailSubjectText = s;
$("#emailSubjectText").html(emailSubjectText.replace(/(?:\r\n?)|\n/g, "<br />\n"));
ybApp.analystToAdvertiserEmailTextDialog.show();
});
});
} else {
el.innerHTML = "N/A";
}
},
/** for $$$ a string, but one that is always right justified **/
formatMoney : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
//span.className = "rightAlignColumn";
if(data != null && data.substring(0,1) != "$"){
data = "$" + data;
}
span.innerHTML = data;
},
formatSiteString : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
if(data.indexOf("microsoft") >= 0){
span.innerHTML = "*" + data;
$("siteNotice").innerHTML = "*includes sites like msn.com, nbcnews.com and foxsports.com."
}else{
span.innerHTML = data;
}
},
/** Custom HTTP URL formatter **/
formatURL : function(el, row, col, data) {
ybApp.clear(el);
if (data) {
var a = ybApp.newChild(el, "a", {href:data});
a.innerHTML = col.label;
}
},
/** recently call number right align format **/
formatRecCallPhone : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
span.innerHTML = ybApp.phone.format(data);
},
/** recently call time right align format **/
formatRecCallTime : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
span.innerHTML = data;
},
/** format EmailPhone and right align **/
formatEmailPhone : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
span.innerHTML = ybApp.phone.format(String(data));
},
formatEmailTime : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
span.innerHTML = data;
},
formatCallTime : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
span.innerHTML = data;
},
/*formatPhoneLink : function(el, row, col, data) {
var formattedNumber = ybApp.phoneForCallTracking.format(String(data));
if (formattedNumber.length >= 12 && formattedNumber.length <= 14)
yuiTable.formatCommandURL(el, row, col, formattedNumber);
else {
el.innerHTML = "Unknown";
}
},*/
/*formatEmailRating : function(el, row, col, data) {
ybApp.clear(el);
var rowData = row.getData();
this.createUserRatingEmail(el, rowData.emailid, data, true);
},*/
/** Custom formatter for in-page action URLs **/
/*formatCommandURL : function(el, row, col, data) {
ybApp.clear(el);
var a = ybApp.newChild(el, "a", {href:"#"});
a.innerHTML = data;
var command = this.commands[col.key];
YAHOO.util.Event.addListener(a, "click", function(e) {
YAHOO.util.Event.stopEvent(e);
command(data);
});
},*/
formatEmailRatingClickable : function(el, row, col, data) {
ybApp.clear(el);
var rowData = row.getData();
yuiTable.createUserRatingEmail(el, rowData.emailid, data);
},
/** Creates the call rating widgets **/
/*formatUserRating : function(el, row, col, data) {
ybApp.clear(el);
var rowData = row.getData();
yb.advertiser.createUserRating(el, rowData.callId, data, rowData.comment);
},*/
/** Creates the call rating widgets **/
/*formatUserRatingReadOnly : function(el, row, col, data) {
ybApp.clear(el);
var rowData = row.getData();
yb.advertiser.createUserRating(el, rowData.callId, data, null, true);
},*/
/** add edit text to call nick name **/
formatSCCallNickName : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
var html = "<input type='text' value='"+ data +"' style='width:260px'>";
span.innerHTML = html;
},
formatSCCallPhone : function(el, row, col, data) {
var span = ybApp.newChild(ybApp.clear(el), "span");
//span.className = "rightAlignColumn";
span.innerHTML = ybApp.phoneForCallTracking.format(data);
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------
if(!campaignPerformanceTable){
campaignPerformanceTable = new hibuYuiTable("campaignPerformanceTable", dmsSummaryTableMeta, getActivityReportTableData ,{
tableWrapper: "campaignTableWrapper",
paginatorOps: {containers:["paginatorContainer"]}
});
getFeatures(campaignPerformanceTable);
campaignPerformanceTable.render();
}
campaignPerformanceTable.requestUpdate();
--------------------------------------------------------------------------------------------------------------------------
var dmsSummaryTableMeta = {
columnDefs : [
{
resizeable: false,
description: "Date or range of dates for which statistics are shown.",
sortable: true,
label: "Date",
iconClass: "wrIcon mb showHelp",
type: "NumberString",
key: "date"
},
{
resizeable: false,
description: "Impressions for the summary",
sortable: true,
label: "Impressions",
iconClass: "wrIcon mb showHelp",
type: "Number",
formatter: yuiTable.formatNumber,
key: "impressions"
},
{
resizeable: false,
description: "Spend for the summary",
sortable: true,
label: "Spend",
iconClass: "wrIcon mb showHelp",
formatter: yuiTable.formatMoney,
key: "spent",
feature:"summarySpent"
}
],
schema : {
fields : ["date", "impressions", "spent"]
},
state : {
page : {rowsPerPage : 10,visibility : "auto"},
sort : {key : "date",dir : 1,local : false}
}
};
-----------------------------------------------------------------------------------------------------------------------------------
function getActivityReportTableData(state, fn){
jDailyActivity.getActivityReportTableData(state, function (response) {
hideExportSection(response);
if(typeof fn == "function"){
fn(response);
}
});
}