| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | 5x 5x 5x 5x 10x 5x 4x 4x 4x 4x 4x 4x 5x 23x 23x 23x 23x 23x 18x 5x 16x 96x 16x 134x 16x | /* Copyright 2017 OCAD University Licensed under the Educational Community License (ECL), Version 2.0 or the New BSD license. You may not use this file except in compliance with one these Licenses. You may obtain a copy of the ECL 2.0 License and BSD License at https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt */ var fluid_3_0_0 = fluid_3_0_0 || {}; (function ($, fluid) { "use strict"; /************************************************************************************ * Scrolling Panel Prefs Editor: * * This is a mixin grade to be applied to a fluid.prefs.prefsEditor type component. * * Typically used for responsive small screen presentations of the separated panel * * to allow for scrolling by clicking on left/right arrows * ************************************************************************************/ fluid.defaults("fluid.prefs.arrowScrolling", { gradeNames: ["fluid.modelComponent"], selectors: { // panels: "", // should be supplied by the fluid.prefs.prefsEditor grade. scrollContainer: ".flc-prefsEditor-scrollContainer" }, onScrollDelay: 100, // in ms, used to set the delay for debouncing the scroll event relay model: { // panelMaxIndex: null, // determined by the number of panels calculated after the onPrefsEditorMarkupReady event fired // Due to FLUID-6249 ( https://issues.fluidproject.org/browse/FLUID-6249 ) the default value for panelIndex // needs to be commented out or it will interfere with reading in the panelIndex value saved in the store. // panelIndex: 0 // the index of the panel to open on }, events: { beforeReset: null, // should be fired by the fluid.prefs.prefsEditor grade onScroll: null }, modelRelay: { target: "panelIndex", forward: {excludeSource: "init"}, namespace: "limitPanelIndex", singleTransform: { type: "fluid.transforms.limitRange", input: "{that}.model.panelIndex", min: 0, max: "{that}.model.panelMaxIndex" } }, modelListeners: { "panelIndex": { listener: "fluid.prefs.arrowScrolling.scrollToPanel", args: ["{that}", "{change}.value"], excludeSource: ["scrollEvent"], namespace: "scrollToPanel" } }, listeners: { "onReady.scrollEvent": { "this": "{that}.dom.scrollContainer", method: "scroll", args: [{ expander: { // Relaying the scroll event to onScroll but debounced to reduce the rate of fire. A high rate // of fire may negatively effect performance for complex handlers. func: "fluid.debounce", args: ["{that}.events.onScroll.fire", "{that}.options.onScrollDelay"] } }] }, "onReady.windowResize": { "this": window, method: "addEventListener", args: ["resize", "{that}.events.onSignificantDOMChange.fire"] }, "onDestroy.removeWindowResize": { "this": window, method: "removeEventListener", args: ["resize", "{that}.events.onSignificantDOMChange.fire"] }, // Need to set panelMaxIndex after onPrefsEditorMarkupReady to ensure that the template has been // rendered before we try to get the number of panels. "onPrefsEditorMarkupReady.setPanelMaxIndex": { changePath: "panelMaxIndex", value: { expander: { funcName: "fluid.prefs.arrowScrolling.calculatePanelMaxIndex", args: ["{that}.dom.panels"] } } }, "beforeReset.resetPanelIndex": { listener: "{that}.applier.fireChangeRequest", args: {path: "panelIndex", value: 0, type: "ADD", source: "reset"} }, "onScroll.setPanelIndex": { changePath: "panelIndex", value: { expander: { funcName: "fluid.prefs.arrowScrolling.getClosestPanelIndex", args: "{that}.dom.panels" } }, source: "scrollEvent" } }, invokers: { eventToScrollIndex: { funcName: "fluid.prefs.arrowScrolling.eventToScrollIndex", args: ["{that}", "{arguments}.0"] } }, distributeOptions: { "arrowScrolling.panel.listeners.bindScrollArrows": { record: { "afterRender.bindScrollArrows": { "this": "{that}.dom.header", method: "click", args: ["{prefsEditor}.eventToScrollIndex"] } }, target: "{that > fluid.prefs.panel}.options.listeners" } } }); fluid.prefs.arrowScrolling.calculatePanelMaxIndex = function (panels) { return Math.max(0, panels.length - 1); }; fluid.prefs.arrowScrolling.eventToScrollIndex = function (that, event) { event.preventDefault(); var target = $(event.target); var midPoint = target.width() / 2; var currentIndex = that.model.panelIndex || 0; var scrollToIndex = currentIndex + (event.offsetX < midPoint ? -1 : 1); that.applier.change("panelIndex", scrollToIndex, "ADD", "eventToScrollIndex"); }; fluid.prefs.arrowScrolling.scrollToPanel = function (that, panelIndex) { panelIndex = panelIndex || 0; var panels = that.locate("panels"); var scrollContainer = that.locate("scrollContainer"); var panel = panels.eq(panelIndex); // only attempt to scroll the container if the panel exists and has been rendered. if (panel.width()) { scrollContainer.scrollLeft(scrollContainer.scrollLeft() + panels.eq(panelIndex).offset().left); } }; fluid.prefs.arrowScrolling.getClosestPanelIndex = function (panels) { var panelArray = fluid.transform(panels, function (panel, idx) { return { index: idx, offset: Math.abs($(panel).offset().left) }; }); panelArray.sort(function (a, b) { return a.offset - b.offset; }); return fluid.get(panelArray, ["0", "index"]) || 0; }; })(jQuery, fluid_3_0_0); |