/XML Project/jquery.app-folders.js
https://bitbucket.org/aokoli/misc.-code. · JavaScript · 247 lines · 145 code · 52 blank · 50 comment · 26 complexity · 841f22089964f5b11cce16ba42bbdd5e MD5 · raw file
- /*
- * jQuery App Folders Plugin 0.2
- * www.app-folders.com/
- * Copyright 2013, Stephen Saucier
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- */
- (function($) {
- $.fn.appFolders = function(options) {
- //Defaults to extend options
- var settings = $.extend({
- opacity: .2, // Opacity of non-selected items
- marginTopAdjust: false, // Adjust the margin-top for the folder area based on row selected?
- marginTopBase: '0px', // If margin-top-adjust is "true", the natural margin-top for the area
- marginTopFirst: '0px', // If margin-top-adjust is "true", the natural margin-top for the area
- marginTopIncrement: '-100px', // If margin-top-adjust is "true", the increment of margin-top per row
- animationSpeed: 200, // Time (in ms) for transition
- URLrewrite: false, // Use URL rewriting?
- URLbase: "", // If URL rewrite is enabled, the URL base of the page where used
- internalLinkSelector: '.jaf-internal a',// a jQuery selector containing links to content within a jQuery App Folder
- instaSwitch: false
- }, options);
-
- //Do work on each selector
- return this.each(function() {
-
- // ==============
- // ! START jQuery App Folders SCRIPT
- // ==============
- var appFolders = $(".folderContent").hide();
-
- //when a folder is clicked,
- //position the content folder after the clicked row
- //and toggle all folder / app icon that is not the one clicked.
- //and toggle the folder content panel
- $(".folder").click(function(event) {
- var openFolder = $(this).attr('id');
- var folderContent = $('.folderContent.' + openFolder);
- var folderContentShown = $(folderContent).css("display") != "none";
- var clickedFolder = $(this);
-
- // // Auto-scroll to the folder being clicked
- // if( settings.marginTopAdjust == false) {
- // $('html, body').animate({
- // scrollTop: $(this).offset().top
- // }, settings.animationSpeed);
- // }
- //If there is no currently displayed content area...
- if ($(" .jaf-container .active-tool").length === 0){
- var row = clickedFolder.parent(".jaf-row");
- $(row).after(folderContent);
-
- $(this).addClass('active-tool', settings.animationSpeed);
- $(folderContent).slideToggle(settings.animationSpeed);
-
- $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
- if (!folderContentShown) {
- $(this).animate({ opacity: settings.opacity }, settings.animationSpeed);
- }
- else {
- $(this).animate({ opacity: 1.00 }, settings.animationSpeed);
- }
- });
-
-
- // ==============
- // ! Shift Rows (margin-top-adjust)
- // ==============
- if( settings.marginTopAdjust === false) {
- return false;
- //if no margin-top adjustment, leave it alone
- } else {
- // To enable shifting of the rows' top margin on click (works best with overflow: hidden):
- var $i = $(this).parent().index('.jaf-row');
- var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
- $(this).parent().parent().animate({ marginTop: marTop }, settings.animationSpeed );
- }
- //--Add the id to the URL but change it temporarily
- //--to keep it from scrolling to it
- var hash = $(clickedFolder).attr('id');
- var node = $( '#' + hash );
- if ( node.length ) {
- node.attr( 'id', '' );
- }
- document.location.hash = hash;
- if ( node.length ) {
- node.attr( 'id', hash );
- }
-
-
- }
-
- //If there IS a currently displayed tool details area, CLOSE IT
- else {
-
- if (folderContentShown) {
- //Active icon was clicked
- $(this).toggleClass("active-tool");
- $(folderContent).slideToggle(settings.animationSpeed);
- $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
- if (!folderContentShown) {
- $(this).animate({ opacity: 0.20 }, settings.animationSpeed);
- }
- else {
- $(this).animate({ opacity: 1.00 }, settings.animationSpeed);
- }
- });
- document.location.hash = '';
-
- //Reset the margin-top for the container
- $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
-
- } else {
- if (settings.instaSwitch !== false) {
- var speed = settings.animationSpeed;
- if ($(this).parent().find('.active-tool').length !== 0){
- speed = 0;
- }
- //Inactive icon was clicked
- $('.folderContent').slideUp(speed);
- $('.active-tool').removeClass('active-tool');
- $(' .jaf-container .folder').animate({ opacity: 1.00 }, speed);
- //Open clicked icon
- var row = clickedFolder.parent(".jaf-row");
- $(row).after(folderContent);
-
- $(this).addClass('active-tool', speed);
- $(folderContent).slideToggle(speed);
-
- $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
- if (!folderContentShown) {
- $(this).animate({ opacity: settings.opacity }, speed);
- }
- else {
- $(this).animate({ opacity: 1.00 }, speed);
- }
- });
- var hash = $(clickedFolder).attr('id');
- var node = $( '#' + hash );
- document.location.hash = hash;
- if ( node.length ) {
- node.attr( 'id', hash );
- }
- // Set the margin top to the correct value for the newly clicked folder - See line 69
- if( settings.marginTopAdjust === false) {
- return false;
- //if no margin-top adjustment, leave it alone
- } else {
- // To enable shifting of the rows' top margin on click (works best with overflow: hidden):
- var $i = $(this).parent().index('.jaf-row');
- var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
- $(this).parent().parent().animate({ marginTop: marTop }, settings.animationSpeed );
- }
- } else {
- //Inactive icon was clicked
- $('.folderContent').slideUp(settings.animationSpeed);
- $('.active-tool').removeClass('active-tool');
- $('.jaf-container .folder').animate({ opacity: 1.00 }, settings.animationSpeed);
-
- //Reset the margin-top for the container
- $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
- }
- }
- }
-
- event.preventDefault();
- return false;
- });
- // close button
- $('.jaf-close').click(function(){
- $(".folder").removeClass("active-tool");
- $(this).parent().slideToggle(settings.animationSpeed);
-
- //Reset the margin-top for the container
- $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
- });
-
-
- // ==============
- // ! OPEN SECTION BY URL HASH on load
- // ==============
- var clickedFolder = $(window.location.hash),
- openFolder = $(clickedFolder).attr('id'),
- folderContent = $('.' + openFolder),
- folderContentShown = $(folderContent).css("display") != "none",
- row = clickedFolder.parent(".jaf-row");
-
- $(row).after(folderContent);
-
- $('#' + openFolder).addClass('active-tool');
- $(folderContent).delay(200).slideDown();
-
- $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
- if (!folderContentShown) {
- $(this).css('opacity', settings.opacity);
- }
- else {
- $(this).css('opacity', '1.00');
- }
- });
-
- // To enable shifting of the rows' top margin on click (works best with overflow: hidden)
- var $i = $(row).index('.jaf-row');
- if ($i != -1) {
- var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
- $(this).animate({ marginTop: marTop }, settings.animationSpeed );
-
- // Don't scroll to the linked item
- $('body').animate({scrollTop:0}, 200, 'linear');
- }
- // Re-load any links outside the App Folders that refer to an opened App Folder.
- $(settings.internalLinkSelector).click(function(event) {
- var link = $(this).attr('href');
- window.location.href = link;
- window.location.reload();
- //return false;
- });
- // data-ajax="false" ?
-
-
- }); // end EACH function
- }
- }) ( jQuery );