all files / framework/preferences/js/ ArrowScrolling.js

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
 
 
 
 
 
 
 
 
 
 
 
3×
 
3×
 
 
 
 
 
 
 
 
 
3×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3×
9×
 
 
3×
 
 
 
 
 
 
 
3×
21×
21×
21×
9×
 
 
 
3×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*
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
            panelIndex: 0
        },
        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: [{
            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 scrollToIndex = that.model.panelIndex + (event.offsetX < midPoint ? -1 : 1);
        that.applier.change("panelIndex", scrollToIndex, "ADD", "eventToScrollIndex");
    };
 
    fluid.prefs.arrowScrolling.scrollToPanel = function (that, panelIndex) {
        var panels = that.locate("panels");
        var scrollContainer = that.locate("scrollContainer");
        if (panels.length) {
            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);