Permalink
Browse files

mostly convert tabcontrol to jquery

  • Loading branch information...
1 parent c79a47e commit ae43f452852d937005085765177b33d076a1a9e4 @jlong jlong committed Dec 27, 2011
@@ -1,5 +1,6 @@
(function($) {
$('table#pages').sitemap();
+ $('div#tab_control').tabcontrol();
})(jQuery);
@@ -138,7 +138,7 @@
spinner.show();
$.ajax({
url: '/admin/pages/' + id + '/children?level=' + level,
- method: 'get',
+ dataType: 'html',
success: function(data) {
row.after(data);
spinner.fadeOut('slow');
@@ -172,7 +172,6 @@
, expandLevels = [level + 1]
;
-
while (isRow(row)) {
var currentLevel = extractLevel(row);
if (currentLevel <= level) break;
@@ -1,116 +1,142 @@
if(typeof(relative_url_root) === 'undefined'){ relative_url_root = ''}
-var TabControlBehavior = Behavior.create({
- initialize: function() {
- new TabControl(this.element);
- }
-});
+(function($) {
-var TabControl = Class.create({
- initialize: function(element) {
- this.element = $(element);
- TabControls[this.element.identify()] = this;
- this.tabs = $A();
- this.tabContainer = this.element.down('.tabs');
- this.tabContainer.observe('click', this.ontabclick.bind(this));
- this.updateTabs();
- this.autoSelect();
- },
-
- updateTabs: function() {
- this.element.select('.page').each(function(page) {
- if (!this.findTabByPage(page)) this.addTab(page);
- }.bind(this));
- },
-
- addTab: function(page) {
- var tab = new TabControl.Tab(page);
- this.tabs.push(tab);
- this.tabContainer.insert({bottom: tab});
- page.hide();
- },
-
- removeSelected: function() {
- var tab = this.selected;
- var index = this.tabs.indexOf(tab);
- var newSelectedTab = this.tabs[index-1];
- tab.remove();
- this.tabs = this.tabs.without(tab);
- this.select(newSelectedTab || this.tabs.first());
- },
-
- select: function(tab) {
- if (this.selected) this.selected.unselect();
- this.selected = tab;
- tab.select();
- cookie = Cookie.set('current_tab', tab.caption, 24, '/admin');
- },
-
- autoSelect: function() {
- if (!this.tabs.any()) return;
- var caption = Cookie.get('current_tab');
- var tab = this.findTabByCaption(caption);
- this.select(tab || this.tabs.first());
- },
-
- ontabclick: function(event) {
- var e = event.findElement('.tab');
- if (e) {
- var tab = this.findTabByElement(e);
- if (tab) {
- if (event.target.hasClassName('close')) {
- if (confirm('Remove the "' + tab.caption + '" part?')) {
- var lastSelected = this.selected;
- this.select(tab);
- this.removeSelected();
- if (lastSelected != tab) this.select(lastSelected);
- }
- } else {
- this.select(tab);
+ var Tab = function(page) {
+ var self = this;
+
+ self.page = $(page);
+ self.caption = self.page.data('caption');
+
+ self.select = function() {
+ self.page.show();
+ self.element.addClass('here');
+ };
+
+ self.unselect = function() {
+ self.page.hide();
+ self.element.removeClass('here');
+ };
+
+ self.remove = function() {
+ self.page.remove();
+ self.element.remove();
+ };
+
+ self.toElement = function() {
+ var template = '<a href="#" class="tab"><span>' + self.caption + '</span><img src="' + relative_url_root + '/images/admin/tab_close.png" class="close" alt="Remove part" title="Remove part" /></a>';
+ self.element = $(template);
+ return self.element;
+ };
+
+ return self;
+ };
+
+ $.fn.tabcontrol = function() {
+ var self = $(this)
+ , tabs = []
+ , tabContainer = self.find('.tabs')
+ , selected = null
+ ;
+
+ function without(array, item) {
+ var result = []
+ , index = array.indexOf(item)
+ ;
+ for (var i = 0; i < array.length; i++) {
+ if (i != index) {
+ result.push(array[i]);
}
- event.stop();
}
+ return result;
+ }
+
+ function findTab(comparison) {
+ var found = null;
+ for (var i = 0; i < tabs.length; i++) {
+ if (comparison(tabs[i])) { found = tabs[i]; break; }
+ }
+ return found;
+ }
+
+ function findTabByCaption(caption) {
+ return findTab(function(tab) { return tab.caption == caption; });
+ }
+
+ function findTabByPage(page) {
+ return findTab(function(tab) { return tab.page == page; });
+ }
+
+ function findTabByElement(element) {
+ var element = $(element);
+ return findTab(function(tab) { return tab.element.get(0) == element.get(0); });
+ }
+
+ function addTab(page) {
+ var page = $(page)
+ , tab = new Tab(page)
+ ;
+ tabs.push(tab);
+ tabContainer.append(tab.toElement());
+ page.hide();
+ }
+
+ function select(tab) {
+ if (selected) selected.unselect();
+ selected = tab;
+ tab.select();
+ cookie = Cookie.set('current_tab', tab.caption, 24, '/admin');
+ }
+
+ function autoSelect() {
+ if (tabs.length == 0) return;
+ var caption = Cookie.get('current_tab')
+ , tab = findTabByCaption(caption)
+ ;
+ select(tab || tabs[0]);
+ }
+
+ function removeSelected() {
+ var tab = selected
+ , index = tabs.indexOf(tab)
+ , newTab = tabs[index - 1]
+ ;
+ tab.remove();
+ tabs = without(tabs, tab);
+ select(newTab || tabs[0]);
}
- },
-
- findTabByCaption: function(caption) {
- return this.tabs.detect(function(tab) { return tab.caption == caption });
- },
-
- findTabByPage: function(page) {
- return this.tabs.detect(function(tab) { return tab.page == page });
- },
-
- findTabByElement: function(element) {
- return this.tabs.detect(function(tab) { return tab.element == element });
- }
-});
-TabControl.Tab = Class.create({
- initialize: function(page) {
- this.page = page;
- this.caption = page.readAttribute('data-caption');
- },
-
- select: function() {
- this.page.show();
- this.element.addClassName('here');
- },
-
- unselect: function() {
- this.page.hide();
- this.element.removeClassName('here');
- },
-
- remove: function() {
- this.page.remove();
- this.element.remove();
- },
-
- toElement: function() {
- this.element = $a({'href': '#', 'class': 'tab'}, $span(this.caption), $img({'src': relative_url_root + '/images/admin/tab_close.png', 'class': 'close', 'alt': 'Remove part', 'title': 'Remove part'})).addClassName('tab');
- return this.element;
- }
-});
+ function updateTabs() {
+ self.find('.page').each(function(page) {
+ if (!findTabByPage(this)) { addTab(this); }
+ });
+ }
+
+ tabContainer.delegate('.tab', 'click', function(event) {
+ var target = $(event.target)
+ , e = target.hasClass('tab') ? target : target.parents('.tab').first()
+ ;
+ if (e) {
+ var tab = findTabByElement(e);
+ if (tab) {
+ if ($(e).hasClass('close')) {
+ if (confirm('Remove the "' + tab.caption + '" part?')) {
+ var lastSelected = selected;
+ select(tab);
+ removeSelected();
+ if (lastSelected != tab) select(lastSelected);
+ }
+ } else {
+ select(tab);
+ }
+ event.stopPropagation();
+ }
+ }
+ });
+
+ updateTabs();
+ autoSelect();
+
+ };
-var TabControls = {};
+})(jQuery);

0 comments on commit ae43f45

Please sign in to comment.