mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

Use tab interface for add media upload/download options.

Browse Source 
References #26
This commit is contained in:
Matthias Mees
2013-07-21 11:58:53 +02:00
parent 1b98d3c25c
commit 64f64bd139
4 changed files with 300 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
templates/2k11/admin/js/jquery.tabs.js Normal file
View File

@ -0,0 +1,266 @@
/**
* Accessible Tabs - jQuery plugin for accessible, unobtrusive tabs
* Build to seemlessly work with the CCS-Framework YAML (yaml.de) not depending on YAML though
* @requires jQuery - tested with 1.9.1, 1.7 and 1.4.2 but might as well work with older versions
*
* english article: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php
* german article: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.php
*
* code: http://github.com/ginader/Accessible-Tabs
* please report issues at: http://github.com/ginader/Accessible-Tabs/issues
*
* Copyright (c) 2007 Dirk Ginader (ginader.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($) {
var debugMode = true;
$.fn.extend({
// We assume there could be multiple sets of tabs on a page, so,
// the unique id for each invididual tab's heading is identified with params q and r (e.g., id="accessibletabscontent0-2")
getUniqueId: function(p, q, r){
if (r===undefined) {r='';} else {r='-'+r;}
return p + q + r;
},
accessibleTabs: function(config) {
var defaults = {
wrapperClass: 'content', // Classname to apply to the div that is wrapped around the original Markup
currentClass: 'current', // Classname to apply to the LI of the selected Tab
tabhead: 'h4', // Tag or valid Query Selector of the Elements to Transform the Tabs-Navigation from (originals are removed)
tabheadClass: 'tabhead', // Classname to apply to the target heading element for each tab div
tabbody: '.tabbody', // Tag or valid Query Selector of the Elements to be treated as the Tab Body
fx:'show', // can be "fadeIn", "slideDown", "show"
fxspeed: 'normal', // speed (String|Number): "slow", "normal", or "fast") or the number of milliseconds to run the animation
currentInfoText: 'current tab: ', // text to indicate for screenreaders which tab is the current one
currentInfoPosition: 'prepend', // Definition where to insert the Info Text. Can be either "prepend" or "append"
currentInfoClass: 'current-info', // Class to apply to the span wrapping the CurrentInfoText
tabsListClass:'tabs-list', // Class to apply to the generated list of tabs above the content
syncheights:false, // syncs the heights of the tab contents when the SyncHeight plugin is available http://blog.ginader.de/dev/jquery/syncheight/index.php
syncHeightMethodName:'syncHeight', // set the Method name of the plugin you want to use to sync the tab contents. Defaults to the SyncHeight plugin: http://github.com/ginader/syncHeight
cssClassAvailable:false, // Enable individual css classes for tabs. Gets the appropriate class name of a tabhead element and apply it to the tab list element. Boolean value
saveState:false, // save the selected tab into a cookie so it stays selected after a reload. This requires that the wrapping div needs to have an ID (so we know which tab we're saving)
autoAnchor:false, // will move over any existing id of a headline in tabs markup so it can be linked to it
pagination:false, // adds buttons to each tab to switch to the next/previous tab
position:'top', // can be 'top' or 'bottom'. Defines where the tabs list is inserted.
wrapInnerNavLinks: '', // inner wrap for a-tags in tab navigation. See http://api.jquery.com/wrapInner/ for further informations
firstNavItemClass: 'first', // Classname of the first list item in the tab navigation
lastNavItemClass: 'last', // Classname of the last list item in the tab navigation
clearfixClass: 'clearfix' // Name of the Class that is used to clear/contain floats
};
var keyCodes = {
37 : -1, //LEFT
38 : -1, //UP
39 : +1, //RIGHT
40 : +1 //DOWN
};
var positions = {
top : 'prepend',
bottom : 'append'
};
this.options = $.extend(defaults, config);
var tabsCount = 0;
if($("body").data('accessibleTabsCount') !== undefined){
tabsCount = $("body").data('accessibleTabsCount');
}
$("body").data('accessibleTabsCount',this.size()+tabsCount);
var o = this;
return this.each(function(t) {
var el = $(this);
var list = '';
var tabCount = 0;
var ids = [];
$(el).wrapInner('<div class="'+o.options.wrapperClass+'"></div>');
$(el).find(o.options.tabhead).each(function(i){
var id = '';
var elId = $(this).attr('id');
if(elId){
// Skip this item if it already exists.
if(elId.indexOf('accessibletabscontent') === 0) {
return;
}
id =' id="'+elId+'"';
}
var tabId = o.getUniqueId('accessibletabscontent', tabsCount+t, i);//get a unique id to assign to this tab's heading
var navItemId = o.getUniqueId('accessibletabsnavigation', tabsCount+t, i);//get a unique id for this navigation item
ids.push(tabId);
if(o.options.cssClassAvailable === true) {
var cssClass = '';
if($(this).attr('class')) {
cssClass = $(this).attr('class');
cssClass = ' class="'+cssClass+'"';
}
list += '<li id="'+navItemId+'"><a'+id+''+cssClass+' href="#'+tabId+'">'+$(this).html()+'</a></li>';
} else {
list += '<li id="'+navItemId+'"><a'+id+' href="#'+tabId+'">'+$(this).html()+'</a></li>';
}
$(this).attr({"id": tabId, "class": o.options.tabheadClass, "tabindex": "-1"});//assign the unique id and the tabheadClass class name to this tab's heading
tabCount++;
});
if (o.options.syncheights && $.fn[o.options.syncHeightMethodName]) {
$(el).find(o.options.tabbody)[o.options.syncHeightMethodName]();
$(window).resize(function(){
$(el).find(o.options.tabbody)[o.options.syncHeightMethodName]();
});
}
// Ensure that the call to setup tabs is re-runnable
var tabs_selector = '.' + o.options.tabsListClass;
if(!$(el).find(tabs_selector).length) {
$(el)[positions[o.options.position]]('<ul class="'+o.options.clearfixClass+' '+o.options.tabsListClass+' tabamount'+tabCount+'"></ul>');
}
$(el).find(tabs_selector).append(list);
// initial show first content block and hide the others
var content = $(el).find(o.options.tabbody);
if (content.length > 0) {
$(content).hide();
$(content[0]).show();
}
$(el).find("ul."+o.options.tabsListClass+">li:first").addClass(o.options.currentClass).addClass(o.options.firstNavItemClass)
.find('a')[o.options.currentInfoPosition]('<span class="'+o.options.currentInfoClass+'">'+o.options.currentInfoText+'</span>')
.parents("ul."+o.options.tabsListClass).children('li:last').addClass(o.options.lastNavItemClass);
if (o.options.wrapInnerNavLinks) {
$(el).find('ul.'+o.options.tabsListClass+'>li>a').wrapInner(o.options.wrapInnerNavLinks);
}
$(el).find('ul.'+o.options.tabsListClass+'>li>a').each(function(i){
$(this).click(function(event){
event.preventDefault();
el.trigger("showTab.accessibleTabs", [$(event.target)]);
if(o.options.saveState && $.cookie){
$.cookie('accessibletab_'+el.attr('id')+'_active',i);
}
$(el).find('ul.'+o.options.tabsListClass+'>li.'+o.options.currentClass).removeClass(o.options.currentClass)
.find("span."+o.options.currentInfoClass).remove();
$(this).blur();
$(el).find(o.options.tabbody+':visible').hide();
$(el).find(o.options.tabbody).eq(i)[o.options.fx](o.options.fxspeed);
$(this)[o.options.currentInfoPosition]('<span class="'+o.options.currentInfoClass+'">'+o.options.currentInfoText+'</span>')
.parent().addClass(o.options.currentClass);
//now, only after writing the currentInfoText span to the tab list link, set focus to the tab's heading
$($(this).attr("href")).focus().keyup(function(event){
if(keyCodes[event.keyCode]){
o.showAccessibleTab(i+keyCodes[event.keyCode]);
$(this).unbind( "keyup" );
}
});
// $(el).find('.accessibletabsanchor').keyup(function(event){
// if(keyCodes[event.keyCode]){
// o.showAccessibleTab(i+keyCodes[event.keyCode]);
// }
// });
});
$(this).focus(function(){
$(document).keyup(function(event){
if(keyCodes[event.keyCode]){
o.showAccessibleTab(i+keyCodes[event.keyCode]);
}
});
});
$(this).blur(function(){
$(document).unbind( "keyup" );
});
});
if(o.options.saveState && $.cookie){
var savedState = $.cookie('accessibletab_'+el.attr('id')+'_active');
debug($.cookie('accessibletab_'+el.attr('id')+'_active'));
if(savedState !== null){
o.showAccessibleTab(savedState,el.attr('id'));
}
}
if(o.options.autoAnchor && window.location.hash){
var anchorTab = $('.'+o.options.tabsListClass).find(window.location.hash);
if(anchorTab.size()){
anchorTab.click();
}
}
if(o.options.pagination){
var m = '<ul class="pagination">';
m +=' <li class="previous"><a href="#{previousAnchor}"><span>{previousHeadline}</span></a></li>';
m +=' <li class="next"><a href="#{nextAnchor}"><span>{nextHeadline}</span></a></li>';
m +='</ul>';
var tabs = $(el).find('.tabbody');
var tabcount = tabs.size();
tabs.each(function(idx){
$(this).append(m);
var next = idx+1;
if(next>=tabcount){next = 0;}
var previous = idx-1;
if(previous<0){previous = tabcount-1;}
var p = $(this).find('.pagination');
var previousEl = p.find('.previous');
previousEl.find('span').text($('#'+ids[previous]).text());
previousEl.find('a').attr('href','#'+ids[previous])
.click(function(event){
event.preventDefault();
$(el).find('.tabs-list a').eq(previous).click();
});
var nextEl = p.find('.next');
nextEl.find('span').text($('#'+ids[next]).text());
nextEl.find('a').attr('href','#'+ids[next])
.click(function(event){
event.preventDefault();
$(el).find('.tabs-list a').eq(next).click();
});
});
}
});
},
showAccessibleTab: function(index,id){
debug('showAccessibleTab');
var o = this;
if(id) {
var el = $('#'+id);
var links = el.find('ul.'+o.options.tabsListClass+'>li>a');
el.trigger("showTab.accessibleTabs", [links.eq(index)]);
links.eq(index).click();
} else {
return this.each(function() {
var el = $(this);
el.trigger("showTab.accessibleTabs");
var links = el.find('ul.'+o.options.tabsListClass+'>li>a');
el.trigger("showTab.accessibleTabs", [links.eq(index)]);
links.eq(index).click();
});
}
},
showAccessibleTabSelector: function(selector){
debug('showAccessibleTabSelector');
var el = $(selector);
if(el){
if(el.get(0).nodeName.toLowerCase() === 'a'){
el.click();
}else{
debug('the selector of a showAccessibleTabSelector() call needs to point to a tabs headline!');
}
}
}
});
// private Methods
function debug(msg,info){
if(debugMode && window.console && window.console.log){
if(info){
window.console.log(info+': ',msg);
}else{
window.console.log(msg);
}
}
}
})(jQuery);

5
templates/2k11/admin/media_upload.tpl
View File

@ -15,7 +15,7 @@
<div class="clearfix tabs">
<h3>Upload</h3> {* i18n *}
<div id="uploads">
<div id="uploads" class="panel">
<div id="upload_form_1" class="upload_form">
<div class="form_field clearfix">
<label for="userfile_1" class="uploadform_userfile_label">{$CONST.ENTER_MEDIA_UPLOAD}</label>
@ -43,7 +43,7 @@
<h3>Download</h3> {* i18n *}
<div id="downloads">
<div id="downloads" class="panel">
<span class="msg_notice"><span class="icon-info-circled"></span> {$CONST.ADD_MEDIA_BLAHBLAH_NOTE}</span>
<div class="clearfix form_field">
@ -70,3 +70,4 @@
<input class="check_inputs" name="go_properties" type="submit" value="{$CONST.GO_ADD_PROPERTIES|@escape}">
</div>
</form>
<script src="{serendipity_getFile file='admin/js/jquery.tabs.js'}"></script>

16
templates/2k11/admin/serendipity_editor.js.tpl
View File

@ -1012,6 +1012,22 @@ var AccessifyHTML5 = function (defaults, more_fixes) {
$('#' + window.location.hash.replace('#', '')).find(".toggle_info").click();
}
// Tabs
if($('body').has('.tabs').size() > 0) {
$('.tabs').accessibleTabs({
wrapperClass: 'tabcontent',
currentClass: 'on',
tabhead: 'h3',
tabheadClass: 'visuallyhidden',
tabbody: '.panel',
fx: 'fadeIn',
currentInfoText: 'Current tab: ', // i18n
currentInfoClass: 'visuallyhidden',
tabsListClass: 'plainList',
syncheights: false
});
}
// Equal Heights
$(window).load(function() {
if($('body').has('.equal_heights').size() > 0) {

19
templates/2k11/admin/style.css
View File

@ -436,7 +436,8 @@ form > a,
.toggle_info,
#serendipityScaleForm .form_field label,
.filters_toolbar li,
#dashboard_entries .entry_status {
#dashboard_entries .entry_status,
.tabs > ul > li {
display: inline-block;
}
@ -517,6 +518,7 @@ input[type="checkbox"] {
}
.button_link:focus,
.tabs > ul a:focus,
button:focus,
input:focus,
select:focus,
@ -535,6 +537,7 @@ input[type="checkbox"]:active {
}
.button_link,
.tabs > ul a,
button,
input[type="button"],
input[type="reset"],
@ -545,10 +548,12 @@ input[type="submit"] {
line-height: normal;
outline: 0;
padding: 3px 10px;
text-decoration: none;
width: auto;
}
.button_link,
.tabs > ul a,
button,
input[type="button"] {
background: #ddd;
@ -590,6 +595,7 @@ input[type="submit"].state_cancel:visited {
input:checked + .media_selector,
.button_link:hover,
.tabs > ul a:hover,
button:hover,
input[type="button"]:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #eee), color-stop(100%, #ccc));
@ -622,7 +628,9 @@ input[type="submit"].state_cancel:focus {
}
.active,
.tabs > ul .on a,
.button_link:active,
.tabs > ul a:active,
button:active,
input[type="button"]:active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #ddd), color-stop(100%, #eee));
@ -1881,17 +1889,20 @@ input[name="serendipity[filter][fileCategory]"] {
cursor: pointer;
}
.media_selector {
.media_selector,
.tabs > ul li > a {
border-radius: 0;
border-right: 0 none;
}
/* These need an IE8 fallback */
.media_selector:first-of-type {
.media_selector:first-of-type,
.tabs > ul .first > a {
border-radius: 4px 0 0 4px;
}
.media_selector:last-of-type {
.media_selector:last-of-type,
.tabs > ul .last > a {
border-radius: 0 4px 4px 0;
border-right: 1px solid #bbb;
}