var Tab = Class.create(WiP, {
initialize: function(opt) {
this.opt = {
version : '0.0.1',
path : '/tools/wip5/tab/',
base_path : '/tools/wip5/',
tab_id : 'wip5_tab',
ckeditor : [],
url : {
template : '/tools/wip5/tab/ajax/template.epl',
tab_redirect : '/tools/wip5/admin/ajax/tab_redirect.epl',
splash : '/tools/wip5/admin/ajax/splash.epl',
article : '/tools/wip5/admin/ajax/article_edit.epl',
category : '/tools/wip5/admin/ajax/article_list.epl',
page : '/tools/wip5/admin/ajax/page_list.epl',
article_list : '/tools/wip5/admin/ajax/article_list.epl',
article_edit : '/tools/wip5/admin/ajax/article_edit.epl',
article_save : '/tools/wip5/admin/ajax/article_save.epl',
image : '/tools/wip5/admin/ajax/image.epl',
chart : '/tools/wip5/admin/ajax/chart.epl',
search : '/tools/wip5/admin/ajax/search.epl',
search_result : '/tools/wip5/admin/ajax/search_result.epl'
},
debug : 0
}
Object.extend(this.opt, opt || {});
if (this.opt.debug) {
this.debug('initializing done...');
this.debug($H(this.opt));
}
this.initTab();
},
initTab: function () {
this.debug('initializing tab...');
$$('head').first().insert({
bottom: ''
});
var script = new Element('script', {
type: 'text/javascript',
src: '/tools/wip5/js/SWFUpload_v250_beta_3_core/swfupload_fp10/swfupload.js'
});
$$('head').first().insert({
bottom: script
});
var script2 = new Element('script', {
type: 'text/javascript',
src: '/tools/wip5/js/SWFUpload_v250_beta_3_core/plugins/swfupload.queue.js'
});
$$('head').first().insert({
bottom: script2
});
var script3 = new Element('script', {
type: 'text/javascript',
src: '/tools/wip5/js/SWFUpload_v250_beta_3_core/fileprogress.js'
});
$$('head').first().insert({
bottom: script3
});
var script4 = new Element('script', {
type: 'text/javascript',
src: '/tools/wip5/js/SWFUpload_v250_beta_3_core/handlers.js'
});
$$('head').first().insert({
bottom: script4
});
var script5 = new Element('script', {
type: 'text/javascript',
src: '/tools/wip5/ckeditor/ckeditor.js'
});
$$('head').first().insert({
bottom: script5
});
//document.body.insert({
$$('body').first().insert({
bottom: ('')
});
this.initFunctions('.' + this.opt.tab_id);
//this.ajax({
// url : this.opt.url.template,
// div : this.opt.tab_id + '_content',
// onSuccess : function (opt, transport) {
// $(opt.div).update(transport.responseText);
// this.initFunctions('.' + opt.div);
// }.bind(this),
// param : this.queryString()
//});
},
initFunctions: function (cssSelector) {
this.debug('initFunctions: ' + cssSelector);
this.debug(cssSelector + ' .' + this.opt.tab_id + '_search');
$$(cssSelector + ' .' + this.opt.tab_id + '_search').each( function (el) {
this.addSearch(el);
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_tab a');
$$(cssSelector + ' .' + this.opt.tab_id + '_tab a').each( function (el) {
this.addTab(el);
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_refresh');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_refresh').each( function (el) {
this.debug(el);
this.addRefresh(el);
}.bind(this));
// Add click to buttons
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_avatar');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_avatar').each( function (el) {
this.debug(el);
this.addClick(el, 'splash');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_article');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_article').each( function (el) {
this.debug(el);
this.addClick(el, 'article');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_category');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_category').each( function (el) {
this.debug(el);
this.addClick(el, 'category');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_page');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_page').each( function (el) {
this.debug(el);
this.addClick(el, 'page');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_image');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_image').each( function (el) {
this.debug(el);
this.addClick(el, 'image');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_chart');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_chart').each( function (el) {
this.debug(el);
this.addClick(el, 'chart');
}.bind(this));
this.debug(cssSelector + ' .' + this.opt.tab_id + '_toolbar_search');
$$(cssSelector + ' .' + this.opt.tab_id + '_toolbar_search').each( function (el) {
this.debug(el);
this.addClick(el, 'search');
}.bind(this));
/* Add more functions here */
},
initButtons: function (cssSelector, formId) {
this.debug(cssSelector + ' .' + this.opt.tab_id + '_article_save');
$$(cssSelector + ' .' + this.opt.tab_id + '_article_save').each( function (el) {
this.debug(el);
this.addClick(el, 'article_save', formId, el.id, 'skip_init');
}.bind(this));
},
initSortable: function (cssSelector) {
this.debug('initSortable:' + cssSelector);
$$(cssSelector + ' .wip5_tab_sortlist').each( function(e) {
this.debug('e.id: ' + e.id);
Sortable.create(e, {
//containment: ['sortlist', 'sortlist1', 'sortlist2', 'sortlist3'],
containment: ['wip5_tab_documents', 'wip5_tab_thumbnails', 'wip5_tab_trash'],
tag:'div',
dropOnEmpty: true,
ghosting: false,
onChange: function(item) {
//var list = Sortable.options(item).element;
//this.debug(Sortable.serialize(list));
this.opt.dragged_element = item.id;
//this.debug(item.id);
}.bind(this),
onUpdate: function (list) {
this.debug('list.id + "_input"' + list.id + '_input');
this.debug('Sortable.serialize:' + Sortable.serialize(list));
$(list.id + '_input').value = Sortable.serialize(list);
//new Ajax.Request("/wip4/mywip/proto/ajax/save_page.epl", {
// method: "post",
// onLoading: function(){$('activityIndicator').show()}.bind(this),
// onLoaded: function(){$('activityIndicator').hide()}.bind(this),
// onSuccess: function(transport) {
// this.debug(transport.responseText);
// this.options.dragged_element = '';
// }.bind(this),
// parameters: { data: Sortable.serialize(list), container: list.id, page: list.readAttribute('rel'), cid: '21850', dragged: this.options.dragged_element }
//});
}.bind(this)
});
try {
$(e.id + '_input').value = Sortable.serialize(e.id);
} catch (e) { alert(e); }
}.bind(this));
},
initSortableAjax: function (cssSelector) {
this.debug('initSortable:' + cssSelector);
$$(cssSelector + ' .wip5_tab_sortlist').each( function(e) {
this.debug('e.id: ' + e.id);
Sortable.create(e, {
//containment: ['sortlist', 'sortlist1', 'sortlist2', 'sortlist3'],
containment: ['wip5_tab_pagelist', 'wip5_tab_artlist'],
tag:'div',
dropOnEmpty: true,
ghosting: false,
onChange: function(item) {
//var list = Sortable.options(item).element;
//this.debug(Sortable.serialize(list));
this.opt.dragged_element = item.id;
//this.debug(item.id);
}.bind(this),
onUpdate: function (list) {
this.debug('list.id + "_input"' + list.id + '_input');
this.debug('Sortable.serialize:' + Sortable.serialize(list));
//$(list.id + '_input').value = Sortable.serialize(list);
//new Ajax.Request("/wip4/mywip/proto/ajax/save_page.epl", {
// method: "post",
// onLoading: function(){$('activityIndicator').show()}.bind(this),
// onLoaded: function(){$('activityIndicator').hide()}.bind(this),
// onSuccess: function(transport) {
// this.debug(transport.responseText);
// this.options.dragged_element = '';
// }.bind(this),
// parameters: { data: Sortable.serialize(list), container: list.id, page: list.readAttribute('rel'), cid: '21850', dragged: this.options.dragged_element }
//});
}.bind(this)
});
try {
$(e.id + '_input').value = Sortable.serialize(e.id);
} catch (e) { this.debug('ERR:' + e) }
}.bind(this));
},
link: function (cssSelector) {
this.debug('wip5_link' + ': ' + cssSelector);
$$('#' + cssSelector + ' .wip5_link').each( function (e) {
this.debug('wip5_link' + ': #' + cssSelector + ': ' + e);
e.observe('click', function (ev) {
ev.stop();
var el = Event.element(ev);
if (el.readAttribute('href')) {
this.ajax({
url: el.readAttribute('href'),
div: (el.readAttribute('target') || this.opt.tab_id + '_main'),
onSuccess : function (opt, transport) {
$(opt.div).update(transport.responseText);
this.link(opt.div);
}.bind(this),
param: {}
});
}
}.bind(this));
}.bind(this));
},
linkArticleList : function (cssSelector, div) {
this.debug('linkArticleList: ' + cssSelector);
$$(cssSelector + ' a.article_list').each( function (e) {
this.debug('article_list:' + e);
e.addClassName(this.opt.active_class);
e.observe('click', function (ev) {
ev.stop();
var el = Event.element(ev);
if (el.tagName != 'A') {
el = el.up('a');
}
if (el.readAttribute('href')) {
this.ajax({
url: el.readAttribute('href'),
div: (div || this.opt.tab_id + '_main'),
onSuccess : function (opt, transport) {
// Cleanup all old editors.
this.opt.ckeditor.each( function (ckeditor_id) {
this.debug('CLEAN: ckeditor: ' + ckeditor_id);
var instance = CKEDITOR.instances[ckeditor_id];
if (instance) {
try {
instance.destroy(true);
} catch (err) { alert(err); }
try {
delete CKEDITOR.instances[el.id];
} catch (err) { alert(err); }
}
}.bind(this));
this.opt.ckeditor = [];
$(opt.div).update(transport.responseText);
this.linkArticleDisplay('.' + opt.div);
this.linkArticleList('.' + opt.div);
this.link(opt.div);
}.bind(this),
param: {
}
});
}
}.bind(this));
}.bind(this));
},
linkArticleDisplay : function (cssSelector, div) {
this.debug('linkArticleDisplay: ' + cssSelector);
$$(cssSelector + ' a.article_display').each( function (e) {
this.debug('article_display:' + e);
e.addClassName(this.opt.active_class);
e.observe('click', function (ev) {
ev.stop();
var el = Event.element(ev);
if (el.tagName != 'A') {
el = el.up('a');
}
if (el.readAttribute('href')) {
this.ajax({
url: el.readAttribute('href'),
div: (div || this.opt.tab_id + '_main'),
onSuccess : function (opt, transport) {
// Cleanup all old editors.
this.opt.ckeditor.each( function (ckeditor_id) {
this.debug('CLEAN: ckeditor: ' + ckeditor_id);
var instance = CKEDITOR.instances[ckeditor_id];
if (instance) {
try {
instance.destroy(true);
} catch (err) { alert(err); }
try {
delete CKEDITOR.instances[el.id];
} catch (err) { alert(err); }
}
}.bind(this));
this.opt.ckeditor = [];
$(opt.div).update(transport.responseText);
this.linkArticleDisplay('.' + opt.div);
this.linkArticleList('.' + opt.div);
this.link(opt.div);
}.bind(this),
param: {
}
});
}
}.bind(this));
}.bind(this));
},
addTab: function (el) {
this.debug('addTab: ' + el);
Event.observe(el, 'click', function (ev) {
ev.stop();
var el = Event.element(ev);
var box = el.up('div.' + this.opt.tab_id);
this.debug(box);
if (box.hasClassName(this.opt.tab_id + '_visible')) {
box.removeClassName(this.opt.tab_id + '_visible');
} else {
box.addClassName(this.opt.tab_id + '_visible');
if (!$('wip5_tab_main')) {
this.ajax({
url : this.opt.url.template,
div : this.opt.tab_id + '_content',
onSuccess : function (opt, transport) {
$(opt.div).update(transport.responseText);
this.initFunctions('.' + opt.div);
}.bind(this),
param : this.queryString()
});
}
}
}.bind(this));
},
addRefresh: function (el) {
this.debug('addRefresh: ' + el);
Event.observe(el, 'click', function (ev) {
ev.stop();
var el = Event.element(ev);
this.debug('refresh clicked...' + el);
if (!el.hasClassName(this.opt.tab_id + '_active')) {
el.addClassName(this.opt.tab_id + '_active');
}
this.ajax({
url : this.opt.url.template,
div : this.opt.tab_id + '_content',
onSuccess : function (opt, transport) {
$(opt.div).update(transport.responseText);
this.initFunctions('.' + opt.div);
}.bind(this),
param : this.queryString()
});
}.bind(this));
},
addClick: function (el, type, formId, div, skip_init) {
this.debug('addClick: ' + type + ', ' + el);
Event.observe(el, 'click', function (ev) {
ev.stop();
var el = Event.element(ev);
var parent = el.up('div');
this.debug(type + ' clicked...' + el);
if (!el.hasClassName(this.opt.tab_id + '_active')) {
el.addClassName(this.opt.tab_id + '_active');
}
if (parent.hasClassName(this.opt.tab_id + '_toolbar_btn')) {
$$('.' + this.opt.tab_id + '_toolbar_btn' + '_active').each( function (e) {
//this.debug('e: ' + e + ':' + this.opt.tab_id + '_toolbar_btn' + '_active');
e.removeClassName(this.opt.tab_id + '_toolbar_btn' + '_active');
var img = e.down('img');
img.writeAttribute('src', img.readAttribute('src').replace('_on', '_off'));
}.bind(this));
if (!parent.hasClassName(this.opt.tab_id + '_toolbar_btn' + '_active')) {
parent.addClassName(this.opt.tab_id + '_toolbar_btn' + '_active');
el.writeAttribute('src', el.readAttribute('src').replace('_off', '_on'));
}
}
// Collect values from ckeditor fields.
if (formId) {
this.opt.ckeditor.each( function (ckeditor_id) {
this.debug('ckeditor: ' + ckeditor_id);
try {
var instance = CKEDITOR.instances[ckeditor_id];
if (instance) {
if (ckeditor_id.include('body')) {
this.debug('ckeditor body:' + ckeditor_id);
$(formId).body_hidden.value = instance.getData();
}
if (ckeditor_id.include('ingress')) {
this.debug('ckeditor ingress:' + ckeditor_id);
$(formId).ingress_hidden.value = instance.getData();
}
}
} catch (err) { alert(err); }
}.bind(this));
// Serialize form and uri escape +. Seems to be a bug inside Ajax.Request.
var param = $(formId).serialize(true);
Object.keys(param).each( function (e) {
//this.debug('e:' + e);
try {
var re=/[+]/g;
param[e] = param[e].replace(re, function(m){return encodeURIComponent(m)});
} catch (e) { }
}.bind(this));
}
this.debug('param: ' + param);
this.ajax({
//url : this.opt.path + 'ajax/' + $H(this.opt.url).get(type),
method : 'post',
url : $H(this.opt.url).get(type),
div : (div || this.opt.tab_id + '_main'),
onSuccess : function (opt, transport) {
$(opt.div).update(transport.responseText);
if (skip_init == '') {
this.initFunctions('.' + opt.div);
}
this.linkArticleDisplay('.' + opt.div);
this.linkArticleList('.' + opt.div);
this.link(opt.div);
}.bind(this),
param : (param || this.queryString())
});
}.bind(this));
},
addSearch: function (el) {
this.debug('addSearch: ' + el);
Event.observe(el, 'keyup', function (ev) {
ev.stop();
var el = Event.element(ev);
this.debug('search submitted...' + el);
if (!el.hasClassName(this.opt.tab_id + '_active')) {
el.addClassName(this.opt.tab_id + '_active');
}
this.ajax({
url : this.opt.path + 'ajax/' + this.opt.url.search_result,
div : this.opt.tab_id + '_main_lower',
//param : this.queryString()
param : {
q: el.value
},
onSuccess : function (opt, transport) {
$(opt.div).update(transport.responseText);
this.initFunctions('.' + opt.div);
}.bind(this)
});
}.bind(this));
}
});
var tab;
document.observe('dom:loaded', function() {
tab = new Tab({
debug: 0
});
});
