/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

  1. /*
  2. * jQuery App Folders Plugin 0.2
  3. * www.app-folders.com/
  4. * Copyright 2013, Stephen Saucier
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. */
  8. (function($) {
  9. $.fn.appFolders = function(options) {
  10. //Defaults to extend options
  11. var settings = $.extend({
  12. opacity: .2, // Opacity of non-selected items
  13. marginTopAdjust: false, // Adjust the margin-top for the folder area based on row selected?
  14. marginTopBase: '0px', // If margin-top-adjust is "true", the natural margin-top for the area
  15. marginTopFirst: '0px', // If margin-top-adjust is "true", the natural margin-top for the area
  16. marginTopIncrement: '-100px', // If margin-top-adjust is "true", the increment of margin-top per row
  17. animationSpeed: 200, // Time (in ms) for transition
  18. URLrewrite: false, // Use URL rewriting?
  19. URLbase: "", // If URL rewrite is enabled, the URL base of the page where used
  20. internalLinkSelector: '.jaf-internal a',// a jQuery selector containing links to content within a jQuery App Folder
  21. instaSwitch: false
  22. }, options);
  23. //Do work on each selector
  24. return this.each(function() {
  25. // ==============
  26. // ! START jQuery App Folders SCRIPT
  27. // ==============
  28. var appFolders = $(".folderContent").hide();
  29. //when a folder is clicked,
  30. //position the content folder after the clicked row
  31. //and toggle all folder / app icon that is not the one clicked.
  32. //and toggle the folder content panel
  33. $(".folder").click(function(event) {
  34. var openFolder = $(this).attr('id');
  35. var folderContent = $('.folderContent.' + openFolder);
  36. var folderContentShown = $(folderContent).css("display") != "none";
  37. var clickedFolder = $(this);
  38. // // Auto-scroll to the folder being clicked
  39. // if( settings.marginTopAdjust == false) {
  40. // $('html, body').animate({
  41. // scrollTop: $(this).offset().top
  42. // }, settings.animationSpeed);
  43. // }
  44. //If there is no currently displayed content area...
  45. if ($(" .jaf-container .active-tool").length === 0){
  46. var row = clickedFolder.parent(".jaf-row");
  47. $(row).after(folderContent);
  48. $(this).addClass('active-tool', settings.animationSpeed);
  49. $(folderContent).slideToggle(settings.animationSpeed);
  50. $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
  51. if (!folderContentShown) {
  52. $(this).animate({ opacity: settings.opacity }, settings.animationSpeed);
  53. }
  54. else {
  55. $(this).animate({ opacity: 1.00 }, settings.animationSpeed);
  56. }
  57. });
  58. // ==============
  59. // ! Shift Rows (margin-top-adjust)
  60. // ==============
  61. if( settings.marginTopAdjust === false) {
  62. return false;
  63. //if no margin-top adjustment, leave it alone
  64. } else {
  65. // To enable shifting of the rows' top margin on click (works best with overflow: hidden):
  66. var $i = $(this).parent().index('.jaf-row');
  67. var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
  68. $(this).parent().parent().animate({ marginTop: marTop }, settings.animationSpeed );
  69. }
  70. //--Add the id to the URL but change it temporarily
  71. //--to keep it from scrolling to it
  72. var hash = $(clickedFolder).attr('id');
  73. var node = $( '#' + hash );
  74. if ( node.length ) {
  75. node.attr( 'id', '' );
  76. }
  77. document.location.hash = hash;
  78. if ( node.length ) {
  79. node.attr( 'id', hash );
  80. }
  81. }
  82. //If there IS a currently displayed tool details area, CLOSE IT
  83. else {
  84. if (folderContentShown) {
  85. //Active icon was clicked
  86. $(this).toggleClass("active-tool");
  87. $(folderContent).slideToggle(settings.animationSpeed);
  88. $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
  89. if (!folderContentShown) {
  90. $(this).animate({ opacity: 0.20 }, settings.animationSpeed);
  91. }
  92. else {
  93. $(this).animate({ opacity: 1.00 }, settings.animationSpeed);
  94. }
  95. });
  96. document.location.hash = '';
  97. //Reset the margin-top for the container
  98. $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
  99. } else {
  100. if (settings.instaSwitch !== false) {
  101. var speed = settings.animationSpeed;
  102. if ($(this).parent().find('.active-tool').length !== 0){
  103. speed = 0;
  104. }
  105. //Inactive icon was clicked
  106. $('.folderContent').slideUp(speed);
  107. $('.active-tool').removeClass('active-tool');
  108. $(' .jaf-container .folder').animate({ opacity: 1.00 }, speed);
  109. //Open clicked icon
  110. var row = clickedFolder.parent(".jaf-row");
  111. $(row).after(folderContent);
  112. $(this).addClass('active-tool', speed);
  113. $(folderContent).slideToggle(speed);
  114. $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
  115. if (!folderContentShown) {
  116. $(this).animate({ opacity: settings.opacity }, speed);
  117. }
  118. else {
  119. $(this).animate({ opacity: 1.00 }, speed);
  120. }
  121. });
  122. var hash = $(clickedFolder).attr('id');
  123. var node = $( '#' + hash );
  124. document.location.hash = hash;
  125. if ( node.length ) {
  126. node.attr( 'id', hash );
  127. }
  128. // Set the margin top to the correct value for the newly clicked folder - See line 69
  129. if( settings.marginTopAdjust === false) {
  130. return false;
  131. //if no margin-top adjustment, leave it alone
  132. } else {
  133. // To enable shifting of the rows' top margin on click (works best with overflow: hidden):
  134. var $i = $(this).parent().index('.jaf-row');
  135. var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
  136. $(this).parent().parent().animate({ marginTop: marTop }, settings.animationSpeed );
  137. }
  138. } else {
  139. //Inactive icon was clicked
  140. $('.folderContent').slideUp(settings.animationSpeed);
  141. $('.active-tool').removeClass('active-tool');
  142. $('.jaf-container .folder').animate({ opacity: 1.00 }, settings.animationSpeed);
  143. //Reset the margin-top for the container
  144. $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
  145. }
  146. }
  147. }
  148. event.preventDefault();
  149. return false;
  150. });
  151. // close button
  152. $('.jaf-close').click(function(){
  153. $(".folder").removeClass("active-tool");
  154. $(this).parent().slideToggle(settings.animationSpeed);
  155. //Reset the margin-top for the container
  156. $(this).parent().parent().animate({ marginTop: settings.marginTopBase }, settings.animationSpeed );
  157. });
  158. // ==============
  159. // ! OPEN SECTION BY URL HASH on load
  160. // ==============
  161. var clickedFolder = $(window.location.hash),
  162. openFolder = $(clickedFolder).attr('id'),
  163. folderContent = $('.' + openFolder),
  164. folderContentShown = $(folderContent).css("display") != "none",
  165. row = clickedFolder.parent(".jaf-row");
  166. $(row).after(folderContent);
  167. $('#' + openFolder).addClass('active-tool');
  168. $(folderContent).delay(200).slideDown();
  169. $(" .jaf-container").find(".folder").not(clickedFolder).each(function() {
  170. if (!folderContentShown) {
  171. $(this).css('opacity', settings.opacity);
  172. }
  173. else {
  174. $(this).css('opacity', '1.00');
  175. }
  176. });
  177. // To enable shifting of the rows' top margin on click (works best with overflow: hidden)
  178. var $i = $(row).index('.jaf-row');
  179. if ($i != -1) {
  180. var marTop = settings.marginTopBase - (settings.marginTopIncrement * ($i))
  181. $(this).animate({ marginTop: marTop }, settings.animationSpeed );
  182. // Don't scroll to the linked item
  183. $('body').animate({scrollTop:0}, 200, 'linear');
  184. }
  185. // Re-load any links outside the App Folders that refer to an opened App Folder.
  186. $(settings.internalLinkSelector).click(function(event) {
  187. var link = $(this).attr('href');
  188. window.location.href = link;
  189. window.location.reload();
  190. //return false;
  191. });
  192. // data-ajax="false" ?
  193. }); // end EACH function
  194. }
  195. }) ( jQuery );