Bierdopje Move

Allows you to move and position the blocks on the homepage.

  1. // ==UserScript==
  2. // @name Bierdopje Move
  3. // @namespace http://www.bierdopje.com
  4. // @version 1.1
  5. // @description Allows you to move and position the blocks on the homepage.
  6. // @match http://*.bierdopje.com/
  7. // @grant unsafeWindow
  8. // @require http://code.jquery.com/jquery-1.10.2.js
  9. // @require http://code.jquery.com/ui/1.11.4/jquery-ui.js
  10. // @author Tom
  11. // @copyright 2016+, Tom
  12. // ==/UserScript==
  13. /* jshint -W097 */
  14. /* global $, console */
  15. 'use strict';
  16.  
  17. $(function() {
  18. // Change cursor on block headers
  19. $(".header").css('cursor', 'pointer');
  20.  
  21. // Fix position of the billboard.
  22. const billboardStyle = {
  23. position: "relative",
  24. top: "5px",
  25. left: "15px"
  26. };
  27. $("#billboards").css(billboardStyle);
  28.  
  29. // Identify and add appropriate classes to the columns and blocks.
  30. const col1 = $("#col1");
  31. const col2 = $("#col2");
  32.  
  33. col1.addClass("sortable1");
  34. col2.addClass("sortable2");
  35.  
  36. // Find each block and add their state + make them serializable.
  37. $('.sortable1 .block').each((i, obj) => {
  38. $(obj).addClass("ui-state-default");
  39. $(obj).attr('id', "i_" + (i+1));
  40. });
  41. $('.sortable2 .block').each((j, obj) => {
  42. $(obj).addClass("ui-state-default");
  43. $(obj).attr('id', "j_" + (j+1));
  44. });
  45.  
  46. // Load the blocks collapse state.
  47. var collapsedBlocks = getCollapsedBlocks();
  48. restoreCollapsedBlocks(collapsedBlocks);
  49.  
  50. // Load the blocks in the right order.
  51. restoreOrder();
  52.  
  53. col1.addClass("connectedSortable");
  54. col2.addClass("connectedSortable");
  55.  
  56. // Collapsing feature
  57. $('.sortable1 > .block > .header').click(function() {
  58. collapseFeature($(this));
  59.  
  60. return false;
  61. });
  62. $('.sortable2 > .block > .header').click(function() {
  63. collapseFeature($(this));
  64.  
  65. return false;
  66. });
  67.  
  68. function collapseFeature(me) {
  69. var body = me.next();
  70. var blockId = me.parent().attr("id");
  71.  
  72. body.slideToggle("slow", function() {
  73. if (body.is(":hidden")) {
  74. collapsedBlocks.push(blockId);
  75. console.log("hiddenarray: " + collapsedBlocks);
  76. } else {
  77. collapsedBlocks = deleteFromArrayByValue(collapsedBlocks, blockId);
  78. console.log("visiblearray: " + collapsedBlocks);
  79. }
  80.  
  81. const jsonValue = JSON.stringify(collapsedBlocks);
  82. localStorage.setItem("collapsedBlocks", jsonValue);
  83. });
  84. }
  85.  
  86. function getCollapsedBlocks() {
  87. const collapsedBlocks = localStorage.getItem("collapsedBlocks");
  88.  
  89. if (collapsedBlocks == null) {
  90. console.log("Found no collapsedBlocks.");
  91. return [];
  92. }
  93.  
  94. console.log("Found data in collapsedBlocks: " + collapsedBlocks);
  95. return JSON.parse(collapsedBlocks);
  96. }
  97.  
  98. function restoreCollapsedBlocks(cBlocks) {
  99. for (let i = 0; i < cBlocks.length; i++) {
  100. var target = document.getElementById(cBlocks[i]);
  101. $(target).children(".body").hide();
  102. }
  103. }
  104.  
  105. function deleteFromArrayByValue(array, value) {
  106. // todo?:
  107. // https://api.jquery.com/jQuery.inArray/
  108. var i = array.length;
  109. while (i--) {
  110. if (array[i] === value) {
  111. array.splice(i, 1);
  112. }
  113. }
  114.  
  115. return array;
  116. }
  117.  
  118. // Actual sorting.
  119. $(".sortable1, .sortable2").sortable({
  120. connectWith: ".connectedSortable",
  121. cursor: "move",
  122. handle: ".block_title",
  123. items : ".ui-state-default",
  124. update: function (event, ui) {
  125. var cooked1 = [];
  126. var cooked2 = [];
  127. $(".sortable1").each(function(index, domEle) {
  128. cooked1[index] = $(domEle).sortable('toArray', {key: 'i', attribute: 'id'});
  129. }
  130. );
  131. $(".sortable2").each(function(index, domEle) {
  132. cooked2[index] = $(domEle).sortable('toArray', {key: 'j', attribute: 'id'});
  133. }
  134. );
  135. localStorage.setItem("blockOrder1", cooked1.join('|'));
  136. localStorage.setItem("blockOrder2", cooked2.join('|'));
  137. }
  138. });
  139.  
  140. function restoreOrder() {
  141. const order1 = localStorage.getItem("blockOrder1");
  142. const order2 = localStorage.getItem("blockOrder2");
  143. if (!order1 || !order2) return;
  144.  
  145. console.log("order1: " + order1);
  146. console.log("order2: " + order2);
  147.  
  148. var SavedID1 = order1.split('|');
  149. var SavedID2 = order2.split('|');
  150.  
  151. for (let u = 0, ul=SavedID1.length; u < ul; u++) {
  152. SavedID1[u] = SavedID1[u].split(',');
  153. }
  154. for (let u = 0, ul=SavedID2.length; u < ul; u++) {
  155. SavedID2[u] = SavedID2[u].split(',');
  156. }
  157. for (let Scolumn = 0, n = SavedID1.length; Scolumn < n; Scolumn++) {
  158. for (let Sitem = 0, m = SavedID1[Scolumn].length; Sitem < m; Sitem++) {
  159. console.log(" checking first column " + SavedID1[Scolumn][Sitem]);
  160.  
  161. if (SavedID1[Scolumn][Sitem].indexOf("i") >= 0) {
  162. console.log("found i");
  163. $(".sortable1").eq(Scolumn).append($(".sortable1").children("#" + SavedID1[Scolumn][Sitem]));
  164. } else {
  165. console.log("found j (other column)");
  166. $(".sortable1").eq(Scolumn).append($(".sortable2").children("#" + SavedID1[Scolumn][Sitem]));
  167. }
  168. }
  169. }
  170. for (let Scolumn = 0, n = SavedID2.length; Scolumn < n; Scolumn++) {
  171. for (let Sitem = 0, m = SavedID2[Scolumn].length; Sitem < m; Sitem++) {
  172. console.log(" checking second column " + SavedID2[Scolumn][Sitem]);
  173.  
  174. if (SavedID2[Scolumn][Sitem].indexOf("i") >= 0) {
  175. console.log("found i (other column)");
  176. $(".sortable2").eq(Scolumn).append($(".sortable1").children("#" + SavedID2[Scolumn][Sitem]));
  177. } else {
  178. console.log("found j");
  179. $(".sortable2").eq(Scolumn).append($(".sortable2").children("#" + SavedID2[Scolumn][Sitem]));
  180. }
  181. }
  182. }
  183. }
  184. });