annotate bns_website/static/js/tinymce/jscripts/tiny_mce/utils/mctabs.js @ 60:a0d3bc630ebd

For issue #8, create a videos application to randomize videos in the playlist. This commit now adds a dependency to the Google Python GData library. The admin enters a playlist URL in the admin. Then the admin uses an admin action to synchronize the playlist with YouTube. This reads the playlist title and retrieves the video list from YouTube. The view function reads all the playlist objects to get the complete list of videos, then shuffles them up. The template generates Javascript to create a YouTube player with the shuffled list. A fixture is included for convenience and for the tests. I also committed a test tool I wrote to prove out this idea in case it is useful for future enhancements or experimentation.
author Brian Neal <bgneal@gmail.com>
date Sat, 19 Nov 2011 14:19:00 -0600
parents ced908af601a
children
rev   line source
bgneal@29 1 /**
bgneal@29 2 * mctabs.js
bgneal@29 3 *
bgneal@29 4 * Copyright 2009, Moxiecode Systems AB
bgneal@29 5 * Released under LGPL License.
bgneal@29 6 *
bgneal@29 7 * License: http://tinymce.moxiecode.com/license
bgneal@29 8 * Contributing: http://tinymce.moxiecode.com/contributing
bgneal@29 9 */
bgneal@29 10
bgneal@29 11 function MCTabs() {
bgneal@29 12 this.settings = [];
bgneal@29 13 this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher');
bgneal@29 14 };
bgneal@29 15
bgneal@29 16 MCTabs.prototype.init = function(settings) {
bgneal@29 17 this.settings = settings;
bgneal@29 18 };
bgneal@29 19
bgneal@29 20 MCTabs.prototype.getParam = function(name, default_value) {
bgneal@29 21 var value = null;
bgneal@29 22
bgneal@29 23 value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
bgneal@29 24
bgneal@29 25 // Fix bool values
bgneal@29 26 if (value == "true" || value == "false")
bgneal@29 27 return (value == "true");
bgneal@29 28
bgneal@29 29 return value;
bgneal@29 30 };
bgneal@29 31
bgneal@29 32 MCTabs.prototype.showTab =function(tab){
bgneal@29 33 tab.className = 'current';
bgneal@29 34 tab.setAttribute("aria-selected", true);
bgneal@29 35 tab.setAttribute("aria-expanded", true);
bgneal@29 36 tab.tabIndex = 0;
bgneal@29 37 };
bgneal@29 38
bgneal@29 39 MCTabs.prototype.hideTab =function(tab){
bgneal@29 40 var t=this;
bgneal@29 41
bgneal@29 42 tab.className = '';
bgneal@29 43 tab.setAttribute("aria-selected", false);
bgneal@29 44 tab.setAttribute("aria-expanded", false);
bgneal@29 45 tab.tabIndex = -1;
bgneal@29 46 };
bgneal@29 47
bgneal@29 48 MCTabs.prototype.showPanel = function(panel) {
bgneal@29 49 panel.className = 'current';
bgneal@29 50 panel.setAttribute("aria-hidden", false);
bgneal@29 51 };
bgneal@29 52
bgneal@29 53 MCTabs.prototype.hidePanel = function(panel) {
bgneal@29 54 panel.className = 'panel';
bgneal@29 55 panel.setAttribute("aria-hidden", true);
bgneal@29 56 };
bgneal@29 57
bgneal@29 58 MCTabs.prototype.getPanelForTab = function(tabElm) {
bgneal@29 59 return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls");
bgneal@29 60 };
bgneal@29 61
bgneal@29 62 MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) {
bgneal@29 63 var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this;
bgneal@29 64
bgneal@29 65 tabElm = document.getElementById(tab_id);
bgneal@29 66
bgneal@29 67 if (panel_id === undefined) {
bgneal@29 68 panel_id = t.getPanelForTab(tabElm);
bgneal@29 69 }
bgneal@29 70
bgneal@29 71 panelElm= document.getElementById(panel_id);
bgneal@29 72 panelContainerElm = panelElm ? panelElm.parentNode : null;
bgneal@29 73 tabContainerElm = tabElm ? tabElm.parentNode : null;
bgneal@29 74 selectionClass = t.getParam('selection_class', 'current');
bgneal@29 75
bgneal@29 76 if (tabElm && tabContainerElm) {
bgneal@29 77 nodes = tabContainerElm.childNodes;
bgneal@29 78
bgneal@29 79 // Hide all other tabs
bgneal@29 80 for (i = 0; i < nodes.length; i++) {
bgneal@29 81 if (nodes[i].nodeName == "LI") {
bgneal@29 82 t.hideTab(nodes[i]);
bgneal@29 83 }
bgneal@29 84 }
bgneal@29 85
bgneal@29 86 // Show selected tab
bgneal@29 87 t.showTab(tabElm);
bgneal@29 88 }
bgneal@29 89
bgneal@29 90 if (panelElm && panelContainerElm) {
bgneal@29 91 nodes = panelContainerElm.childNodes;
bgneal@29 92
bgneal@29 93 // Hide all other panels
bgneal@29 94 for (i = 0; i < nodes.length; i++) {
bgneal@29 95 if (nodes[i].nodeName == "DIV")
bgneal@29 96 t.hidePanel(nodes[i]);
bgneal@29 97 }
bgneal@29 98
bgneal@29 99 if (!avoid_focus) {
bgneal@29 100 tabElm.focus();
bgneal@29 101 }
bgneal@29 102
bgneal@29 103 // Show selected panel
bgneal@29 104 t.showPanel(panelElm);
bgneal@29 105 }
bgneal@29 106 };
bgneal@29 107
bgneal@29 108 MCTabs.prototype.getAnchor = function() {
bgneal@29 109 var pos, url = document.location.href;
bgneal@29 110
bgneal@29 111 if ((pos = url.lastIndexOf('#')) != -1)
bgneal@29 112 return url.substring(pos + 1);
bgneal@29 113
bgneal@29 114 return "";
bgneal@29 115 };
bgneal@29 116
bgneal@29 117
bgneal@29 118 //Global instance
bgneal@29 119 var mcTabs = new MCTabs();
bgneal@29 120
bgneal@29 121 tinyMCEPopup.onInit.add(function() {
bgneal@29 122 var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each;
bgneal@29 123
bgneal@29 124 each(dom.select('div.tabs'), function(tabContainerElm) {
bgneal@29 125 var keyNav;
bgneal@29 126
bgneal@29 127 dom.setAttrib(tabContainerElm, "role", "tablist");
bgneal@29 128
bgneal@29 129 var items = tinyMCEPopup.dom.select('li', tabContainerElm);
bgneal@29 130 var action = function(id) {
bgneal@29 131 mcTabs.displayTab(id, mcTabs.getPanelForTab(id));
bgneal@29 132 mcTabs.onChange.dispatch(id);
bgneal@29 133 };
bgneal@29 134
bgneal@29 135 each(items, function(item) {
bgneal@29 136 dom.setAttrib(item, 'role', 'tab');
bgneal@29 137 dom.bind(item, 'click', function(evt) {
bgneal@29 138 action(item.id);
bgneal@29 139 });
bgneal@29 140 });
bgneal@29 141
bgneal@29 142 dom.bind(dom.getRoot(), 'keydown', function(evt) {
bgneal@29 143 if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab
bgneal@29 144 keyNav.moveFocus(evt.shiftKey ? -1 : 1);
bgneal@29 145 tinymce.dom.Event.cancel(evt);
bgneal@29 146 }
bgneal@29 147 });
bgneal@29 148
bgneal@29 149 each(dom.select('a', tabContainerElm), function(a) {
bgneal@29 150 dom.setAttrib(a, 'tabindex', '-1');
bgneal@29 151 });
bgneal@29 152
bgneal@29 153 keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', {
bgneal@29 154 root: tabContainerElm,
bgneal@29 155 items: items,
bgneal@29 156 onAction: action,
bgneal@29 157 actOnFocus: true,
bgneal@29 158 enableLeftRight: true,
bgneal@29 159 enableUpDown: true
bgneal@29 160 }, tinyMCEPopup.dom);
bgneal@29 161 });
bgneal@29 162 });