/**
* jquery.slottySidebar - based on jquery.readmore
* http://rockycode.com/blog/upload/jtsnake/demo-readmore.html
*/
(function ($) {
// -------------------------------------------------------------------
// Define slottySidebar
// -------------------------------------------------------------------
$.fn.slottySidebar = function ( settings ) {
// -------------------------------------------------------------------
// Add custom options to global jQuery options
// -------------------------------------------------------------------
var opts = $.extend({}, $.fn.slottySidebar.defaults, settings);
// -------------------------------------------------------------------
// Process the chain
// -------------------------------------------------------------------
this.each(function () {
// Work it
if ( opts.action == 'sidebarMain' ) {
sidebarMain();
//alert('main');
} else if ( opts.action == 'showSidebarAfterOneSecond' ) {
showSidebarAfterOneSecond();
//alert('showSidebarAfterOneSecond');
} else if ( opts.action == 'showSidebarAfterOneSecond_startseiteOnly_ohneStop' ) {
showSidebarAfterOneSecond_startseiteOnly_ohneStop();
//alert('showSidebarAfterOneSecond_startseiteOnly_ohneStop');
} else if ( opts.action == 'showSidebarHandle' ) {
showSidebarHandle();
//alert('showSidebarHandle');
} else if ( opts.action == 'disableSidebar' ) {
disableSidebar();
//alert('disableSidebar');
} else if ( opts.action == 'hideSidebar' ) {
hideSidebar();
//alert('hideSidebar');
} else if ( opts.action == 'toggleSidebar' ) {
// Used by the .click handler in documentReady.js
toggleSidebar();
//alert('toggleSidebar');
} else if ( opts.action == 'showSidebar' ) {
showSidebar();
//alert('showSidebar');
}
});
//eoThis.each()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function sidebarMain( elem ) {
if ( opts.showSidebar == true ) {
// -------------------------------------------------------------------
// Sidebar rausfahren (nach ca. 1 Sekunde)
// -------------------------------------------------------------------
// Hint #1
// Aber erst nachdem der pageBg geladen ist und noch etwa
// eine Sekunde vergangen ist.
// -------------------------------------------------------------------
// Hint #2
// Use callback from slottyContent changer
// Vgl. S. 162, jQuery Cookbook
// -------------------------------------------------------------------
// Hint #3
// Wenn ich meine Funktion showSidebar()
// verwende, wird die Sidebar leider sofort reingefahren.
// Versuch #1
// setTimeout(function() {showSidebar();} , 1000);
// Geht, aber wird nicht resetted, wenn ein neuer
// Menuepunkt ausgewaehlt wird. Die Sidebar faehrt
// dann rein, waehrend der neue BG noch laed.
// Fazit: Bringt nichts.
//
// -------------------------------------------------------------------
// Bisher:
//showSidebarHandle();
// So will's der Kunde nicht haben. Ist zu schnell.
//showSidebar();
// hide sidebar
hideSidebar();
// Jetzt richtig: Erst nach einer Sekunde einblenden.
showSidebarAfterOneSecond();
} else {
disableSidebar();
//alert( 'disableSidebar :: opts.activeMenuItemId: '+ opts.activeMenuItemId);
}//eoIf ( opts.showSidebar == true )
}//eoFunction sidebarMain()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function showSidebarHandle() {
// -------------------------------------------------------------------
// REIN ! Aber Handle anzeigen
// -------------------------------------------------------------------
// Keine Animation "Reinfahren"
$('#sidebar')
// Fuer den IE: Ohne Ani zuruecksetzen
.css('left', opts.sidebarHidePos +'px')
.show();
// Entferne opacity image
$('#sidebarHandle').css('background-image', 'none');
// Setze pfeil image
$('#sidebarHandleImage').attr('src', opts.baseUrlSidebarImages + 'handleOpen.png');
}//eoFunction showSidebarHandle()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function disableSidebar() {
// -------------------------------------------------------------------
// REIN !
// -------------------------------------------------------------------
hideSidebar();
// -------------------------------------------------------------------
// Handle verstecken
// -------------------------------------------------------------------
$('#sidebar').hide();
}//eoFunction disableSidebar()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function hideSidebar() {
// -------------------------------------------------------------------
// REIN !
// -------------------------------------------------------------------
// Sidebar ist ausgefahren
// onClick - Fahr sie rein
// -------------------------------------------------------------------
// Position berechnen
// width div - width handle div = leftX
// 576 - 27 = 549px */
// -------------------------------------------------------------------
// Hint
// easeOutExpo - Bounces
// easeOutSine - Good
// -------------------------------------------------------------------
// Fuer den IE: Ohne Ani zuruecksetzen
//$('#sidebar').css('left', opts.sidebarHidePos +'px')
if (1) {
if ( opts.showSidebar == true ) {
// -------------------------------------------------------------------
// No sidebar AT ALL for this page
// -------------------------------------------------------------------
$('#sidebar').hide()
}//eoIf ( opts.showSidebar == true )
}
// Animation "Reinfahren"
$('#sidebar')
// -------------------------------------------------------------------
// SEHR GUT!
// -------------------------------------------------------------------
// Vgl. Queue/dequeue animations (jQuery Novice to Ninja, p. 363ff)
// -------------------------------------------------------------------
// Queue the modification of a property - Now, it is added to the fx queue and no longer executed async
// Moreover, it is bound to fx queue. That is, it is executed in parallel and only as long as the fx queue is animating
.queue(function() {
// Modify a property - Synonym for "do it immediately"
// Entferne opacity image
$('#sidebarHandle').css('background-image', 'none');
// Setze pfeil image
$('#sidebarHandleImage').attr('src', opts.baseUrlSidebarImages + 'handleOpen.png');
// This releases the queue AND (!) allows the next animate() to be execuded (aka beeing added to the queue)
$(this).dequeue();
})
.animate({ "left": opts.sidebarHidePos +'px' }, { duration: opts.sideBarHideDuration, easing: opts.sideBarHideEasing })
}//eoFunction hideSidebar()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function toggleSidebar() {
// -------------------------------------------------------------------
// Sidebar reinfahren
// -------------------------------------------------------------------
if ( $('#sidebarHandleImage').attr('src') == opts.baseUrlSidebarImages + 'handleOpen.png') {
// -------------------------------------------------------------------
// RAUS !
// -------------------------------------------------------------------
showSidebar();
} else {
// -------------------------------------------------------------------
// REIN !
// -------------------------------------------------------------------
hideSidebar();
}//eoIf
}//eoFunction toggleSidebar()
// -------------------------------------------------------------------
// Helper functions used inside this.each
// -------------------------------------------------------------------
function showSidebar() {
// -------------------------------------------------------------------
// RAUS !
// -------------------------------------------------------------------
// Sidebar ist eingefahren.
// Erkennungsmerkmal: Pfeilrichtung
// onClick - Fahr sie wieder raus.
// -------------------------------------------------------------------
// Position berechnen
// width div - width handle div - width content div (w/padding) = leftX - luft rechts
// 576 - 27 - 319 = 230px - 38px = 192px
// -------------------------------------------------------------------
// Setze opacity image
$('#sidebarHandle').css('background-image', 'url( ' + opts.baseUrlSidebarBackgroundImages + 'opacity2_dunkler.png)');
// Setze pfeil image
$('#sidebarHandleImage').attr('src', opts.baseUrlSidebarImages +'handleClose.png');
// Rausfahren
$('#sidebar')
// Fuer den IE: Auf reingefahrene Position zuruecksetzen
.css('left', opts.sidebarHidePos +'px')
.show()
.animate({ 'left': opts.sidebarShowPos +'px' }, { duration: opts.sideBarShowDuration, easing: opts.sideBarShowEasing });
// -------------------------------------------------------------------
// Blink noch dreimal - not used
// -------------------------------------------------------------------
//.fadeOut(1000).fadeIn(1000);
}//eoFunction showSidebar()
// -------------------------------------------------------------------
// Special - show sidebar after one second
// -------------------------------------------------------------------
// Special - Used from sidebarMain(), on menue change
// -------------------------------------------------------------------
function showSidebarAfterOneSecond() {
// -------------------------------------------------------------------
// RAUS !
// -------------------------------------------------------------------
// Sidebar ist eingefahren.
// Erkennungsmerkmal: Pfeilrichtung
// onClick - Fahr sie wieder raus.
// -------------------------------------------------------------------
// Position berechnen
// width div - width handle div - width content div (w/padding) = leftX - luft rechts
// 576 - 27 - 319 = 230px - 38px = 192px
// -------------------------------------------------------------------
// Rausfahren
$('#sidebar')
// Fuer den IE: Auf reingefahrene Position zuruecksetzen
.css('left', opts.sidebarHidePos +'px')
// -------------------------------------------------------------------
// Only once, stop building up the queue
// -------------------------------------------------------------------
// See http://api.jquery.com/stop/
// -------------------------------------------------------------------
// The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:
// We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:
// -------------------------------------------------------------------
//.stop(true, true) // Das scheint keinen Schaden anzurichten, aber auch nichts zu nuetzen
//.clearQueue() // Nicht verwenden, dann geht das delay nicht mehr
// For a working solution see below in line 385. Put the .stop() right before the .animate()
// Wait x sec before animation
.delay( opts.sidebarDelayIfShowAutomatically )
// Toggle visibility - In case the sidebar(handle) was hidden
.show()
// -------------------------------------------------------------------
// SEHR GUT!
// -------------------------------------------------------------------
// Vgl. Queue/dequeue animations (jQuery Novice to Ninja, p. 363ff)
// -------------------------------------------------------------------
// Queue the modification of a property - Now, it is added to the fx queue and no longer executed async
// Moreover, it is bound to fx queue. That is, it is executed in parallel and only as long as the fx queue is animating
.queue(function() {
// Modify a property - Synonym for "do it immediately"
// Setze opac bg of handle
$('#sidebarHandle').css('background-image', 'url( ' + opts.baseUrlSidebarBackgroundImages + 'opacity2_dunkler.png)');
// Setze pfeil image
$('#sidebarHandleImage').attr('src', opts.baseUrlSidebarImages +'handleClose.png');
// This releases the queue AND (!) allows the next animate() to be execuded (aka beeing added to the queue)
$('#sidebar').dequeue();
//$(this).dequeue();
})
// Animation zum Rausfahren
// Use same duration and easy as default show sidebar
.stop() // 3. Versuch - This seems to work! See jQuery Cookbook p. 166
.animate({ 'left': opts.sidebarShowPos +'px' }, { duration: opts.sideBarShowDuration, easing: opts.sideBarShowEasing });
// -------------------------------------------------------------------
// .clearQueue() method is called, all functions on the queue that have
// not been executed are removed from the queue. When used without an argument,
// .clearQueue() removes the remaining functions from fx, the standard effects
// queue. In this way it is similar to .stop(true). However, while the .stop()
// method is meant to be used only with animations, .clearQueue() can also be used
// to remove any function that has been added to a generic jQuery queue with the
// .queue() method.
// -------------------------------------------------------------------
// jQuery 1.4 Reference Guide, p. 202
// -------------------------------------------------------------------
// Hint #1
// Cancel all slide in and out events for the sidebar
// -------------------------------------------------------------------
// Hint #2
// Funktioniert nicht
// -------------------------------------------------------------------
if (0) {
var msg = '';
msg += 'Queue length before is: ' + $('#sidebar').queue('fx').length;
msg += '
';
msg += 'Queue hint before is: ' + $('#sidebar').queue('fx');
$('#sidebar').clearQueue(); // Geht nicht
$('#sidebar').queue("fx", []); // Geht auch nicht vgl. http://api.jquery.com/queue/, ziemlich weit unten.
$('#sidebar').stop();
msg += '
';
msg += 'Queue length after is: ' + $('#sidebar').queue('fx').length;
msg += '
';
msg += 'Queue hint after is: ' + $('#sidebar').queue('fx');
$('#screenMessage2').html( msg );
}
}//eoFunction showSidebarAfterOneSecond()
// -------------------------------------------------------------------
// Special - show sidebar after one second
// -------------------------------------------------------------------
// Special - Used from documentReady.js on document ready event
// -------------------------------------------------------------------
// Hint
// Identisch mit showSidebarAfterOneSecond()
// bis auf die naechste Zeile, in der das
// stop() statement auskommentiert ist.
// Grund: Es gibt sonst kein verzoegertes
// Einblenden auf der Startseite.
// -------------------------------------------------------------------
function showSidebarAfterOneSecond_startseiteOnly_ohneStop() {
// Rausfahren
$('#sidebar')
// Fuer den IE: Auf reingefahrene Position zuruecksetzen
.css('left', opts.sidebarHidePos +'px')
// Wait x sec before animation
.delay( opts.sidebarDelayIfShowAutomatically )
// Toggle visibility - In case the sidebar(handle) was hidden
.show()
.queue(function() {
// Modify a property - Synonym for "do it immediately"
// Setze opac bg of handle
$('#sidebarHandle').css('background-image', 'url( ' + opts.baseUrlSidebarBackgroundImages + 'opacity2_dunkler.png)');
// Setze pfeil image
$('#sidebarHandleImage').attr('src', opts.baseUrlSidebarImages +'handleClose.png');
// This releases the queue AND (!) allows the next animate() to be execuded (aka beeing added to the queue)
$('#sidebar').dequeue();
//$(this).dequeue();
})
// Animation zum Rausfahren
// Use same duration and easy as default show sidebar
// -------------------------------------------------------------------
// Hint
// Identisch mit showSidebarAfterOneSecond()
// bis auf die naechste Zeile, in der das
// stop() statement auskommentiert ist.
// Grund: Es gibt sonst kein verzoegertes
// Einblenden auf der Startseite.
// -------------------------------------------------------------------
//.stop() // 3. Versuch - This seems to work! See jQuery Cookbook p. 166
.animate({ 'left': opts.sidebarShowPos +'px' }, { duration: opts.sideBarShowDuration, easing: opts.sideBarShowEasing });
}//eoFunction showSidebarAfterOneSecond_startseiteOnly_ohneStop()
// -------------------------------------------------------------------
// Wieso kommt der globale return fuer die chain erst hier?
// -------------------------------------------------------------------
return this;
};
//eo Declaration of $.fn.slottySidebar
// -------------------------------------------------------------------
// Set default options
// -------------------------------------------------------------------
// Hint
// Has to be placed after method definition!
// -------------------------------------------------------------------
$.fn.slottySidebar.defaults = {
// action
action: 'none',
// base url for bgImages
baseUrlSidebarBackgroundImages: 'fileadmin/mnt/pub/grafiker/bg/sidebar/',
baseUrlSidebarImages : 'fileadmin/mnt/pub/grafiker/sidebar/',
// sidebar reinfahren? true|false
// easeOutExpo - fresh
// easeOutBounce - too bouncy, makes the whole thing fall apart
showSidebar : false,
// Common animation settings
sideBarShowEasing : 'easeOutSine',
sideBarHideEasing : 'easeOutSine',
sideBarShowDuration : 700,
sideBarHideDuration : 700,
// Special animation settings - if shown automatically
sidebarDelayIfShowAutomatically : 1500,
// Left/Right X-Coordinate of the sidebar
sidebarShowPos : 192,
sidebarHidePos : 549
};
//eo Declaration of $.fn.slottySidebar.defaults
})(jQuery);