How to use drop method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

DropInfo.qunit.js

Source: DropInfo.qunit.js Github

copy
1/*global QUnit,sinon*/
2
3sap.ui.define([
4	"jquery.sap.global",
5	"./TestControl",
6	"sap/ui/core/dnd/DropInfo",
7	"sap/ui/base/ManagedObject",
8	"sap/ui/core/ElementMetadata",
9	"sap/base/Log"
10], function(jQuery, TestControl, DropInfo, ManagedObject, ElementMetadata, Log) {
11	"use strict";
12
13	QUnit.test("Default values", function(assert) {
14		var oDropInfo = new DropInfo();
15		assert.strictEqual(oDropInfo.getTargetAggregation(), "", "Default value of targetAggregation is correct");
16		assert.strictEqual(oDropInfo.getGroupName(), "", "Default value of targetAggregation is correct");
17		assert.strictEqual(oDropInfo.getDropEffect(), "Move", "Default value of dropEffect is correct");
18		assert.strictEqual(oDropInfo.getDropPosition(), "On", "Default value of dropPosition is correct");
19		assert.strictEqual(oDropInfo.getDropLayout(), "Default", "Default value of dropLayout is correct");
20		assert.strictEqual(oDropInfo.getEnabled(), true, "Default value of enabled is correct");
21		assert.strictEqual(oDropInfo.isDraggable(), false, "DropInfo is not draggable.");
22		oDropInfo.destroy();
23	});
24
25	QUnit.test("invalidation", function(assert) {
26		var oDropInfo = new DropInfo();
27		var fnInvalidateSpy = sinon.spy(oDropInfo, "invalidate");
28
29		oDropInfo.setEnabled(false);
30		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for enabled property");
31
32		oDropInfo.setGroupName("abc");
33		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for groupName property");
34
35		oDropInfo.setTargetAggregation("items");
36		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for targetAggregation property");
37
38		oDropInfo.setDropEffect("Copy");
39		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for dropEffect property");
40
41		oDropInfo.setDropPosition("Between");
42		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for dropPosition property");
43
44		oDropInfo.setDropLayout("Horizontal");
45		assert.strictEqual(fnInvalidateSpy.callCount, 0, "Invalidation has not happened for dropLayout property");
46
47		oDropInfo.destroy();
48	});
49
50	QUnit.test("TemporaryDropPosition", function(assert) {
51		var oDropInfo = new DropInfo();
52		oDropInfo.sTemporaryDropPosition = "Between";
53
54		assert.strictEqual(oDropInfo.getDropPosition(), "On", "Public API returns the correct DropPosition value");
55		assert.strictEqual(oDropInfo.getDropPosition(true), "Between", "Temporary DropPosition is returned when 1st param is true");
56
57		oDropInfo.destroy();
58	});
59
60	QUnit.test("getDropLayout", function(assert) {
61		var oDropInfo = new DropInfo({
62			targetAggregation: "test"
63		});
64		var oControl = new TestControl({
65			dragDropConfig: oDropInfo
66		});
67
68		assert.strictEqual(oDropInfo.getDropLayout(true), "Horizontal", "Default value is taken from metadata.dnd.layout");
69
70		oDropInfo.setDropLayout("Vertical");
71		assert.strictEqual(oDropInfo.getDropLayout(), "Vertical", "Public API returned the control value");
72		assert.strictEqual(oDropInfo.getDropLayout(true), "Vertical", "Nothing to detect property value is returned");
73
74		oControl.destroy();
75	});
76
77	QUnit.test("isDroppable - An unrelated element", function(assert) {
78		var oDropInfo = new DropInfo();
79		var oManagedObject = new ManagedObject();
80
81		assert.notOk(oDropInfo.isDroppable(undefined), "Not droppable: Drag target is not specified");
82		assert.notOk(oDropInfo.isDroppable(oManagedObject), "Not droppable: Drag target is not an instanceof Element");
83
84		oManagedObject.destroy();
85		oDropInfo.destroy();
86	});
87
88	QUnit.test("isDroppable - Test control not known to the DropInfo", function(assert) {
89		var oDropInfo = new DropInfo();
90		var oControl = new TestControl();
91
92		assert.notOk(oDropInfo.isDroppable(oControl), "Not droppable: The drop target is not known");
93
94		oDropInfo.destroy();
95		oControl.destroy();
96	});
97
98	QUnit.test("isDroppable - The control itself", function(assert) {
99		var oDropInfo = new DropInfo();
100		var oControl = new TestControl({
101			dragDropConfig: oDropInfo
102		});
103
104		assert.ok(oDropInfo.isDroppable(oControl), "Droppable: The drop target is the control itself");
105
106		oDropInfo.setTargetAggregation("children");
107		assert.notOk(oDropInfo.isDroppable(oControl), "Not Droppable: targetAggregation is defined");
108
109		oControl.destroy();
110	});
111
112	QUnit.test("isDroppable - Aggregated child element", function(assert) {
113		var oDropInfo = new DropInfo({
114			targetAggregation: "children"
115		});
116		var oControl = new TestControl();
117		var oParent = new TestControl({
118			dragDropConfig: oDropInfo,
119			children: oControl
120		});
121
122		assert.ok(oDropInfo.isDroppable(oControl), "Droppable: Child control is in the defined targetAggregation");
123
124		oDropInfo.setTargetAggregation("thereIsNoSuchAnAggregationName");
125		assert.notOk(oDropInfo.isDroppable(oControl), "Not Droppable: Child control is not in the defined targetAggregation");
126
127		oParent.destroy();
128	});
129
130	QUnit.test("isDroppable - Empty Aggregation", function(assert) {
131		var oDropInfo = new DropInfo({
132			targetAggregation: "children"
133		});
134		var oControl = new TestControl({
135			dragDropConfig: oDropInfo
136		});
137		var oEvent = new jQuery.Event("dragenter");
138
139		oControl.placeAt("qunit-fixture");
140		sap.ui.getCore().applyChanges();
141
142		oEvent.target = oControl.getDomRef("children");
143		assert.notOk(oDropInfo.isDroppable(oControl, oEvent), "Not Droppable: event target is the defined targetAggregation DOM");
144		assert.strictEqual(oEvent.getMark("DragWithin"), undefined, "Event is not marked as found aggregation name");
145
146		oEvent.target = oControl.getDomRef("children").firstChild;
147		assert.ok(oDropInfo.isDroppable(oControl, oEvent), "Droppable: event target is in the defined targetAggregation DOM");
148		assert.strictEqual(oEvent.getMark("DragWithin"), "children", "Event is not marked for the found aggregation name");
149
150		oEvent.target = oControl.getDomRef("title");
151		assert.notOk(oDropInfo.isDroppable(oControl, oEvent), "Not Droppable: event target is in the valid targetAggregation DOM");
152
153		oEvent.target = oControl.getDomRef();
154		assert.notOk(oDropInfo.isDroppable(oControl, oEvent), "Not Droppable: targetAggregation is defined control self is not the drop target.");
155
156		oControl.destroy();
157	});
158
159	QUnit.test("isDroppable - Enabled", function(assert) {
160		var oDropInfo = new DropInfo({
161			enabled: false
162		});
163		var oControl = new TestControl({
164			dragDropConfig: oDropInfo
165		});
166
167		assert.notOk(oDropInfo.isDroppable(oControl), "Not droppable: DropInfo is not enabled");
168
169		oDropInfo.setEnabled(true);
170		assert.ok(oDropInfo.isDroppable(oControl), "Droppable: DropInfo is enabled and drop target is the control itself");
171
172		oControl.destroy();
173	});
174
175	QUnit.test("isDroppable - metadata disallows", function(assert) {
176		var oDropInfo = new DropInfo();
177		var oChild = new TestControl();
178		var oParent = new TestControl({
179			dragDropConfig: oDropInfo,
180			children: oChild
181		});
182
183		var fnLogSpy = this.spy(Log, "warning");
184		this.stub(ElementMetadata.prototype, "getDragDropInfo").returns({droppable: false});
185		assert.notOk(oDropInfo.isDroppable(oParent), "Not droppable: Element metadata does not allow droppping");
186		assert.strictEqual(fnLogSpy.callCount, 1, "Not droppable is logged");
187
188		oDropInfo.setTargetAggregation("children");
189		assert.notOk(oDropInfo.isDroppable(oChild), "Not droppable: Aggregation metadata does not allow dropping");
190		assert.strictEqual(fnLogSpy.callCount, 2, "Not droppable is logged again");
191
192		oParent.destroy();
193	});
194
195	QUnit.test("fireDragEnter - invalid parameters", function(assert) {
196		var oDragEnterEvent = new jQuery.Event("dragenter");
197		var fnDragEnterSpy = sinon.spy();
198		var oDropInfo = new DropInfo({
199			dragEnter: fnDragEnterSpy
200		});
201
202		oDropInfo.fireDragEnter();
203		assert.ok(fnDragEnterSpy.notCalled, "dragEnter event is not fired, there is no parameter");
204
205		oDropInfo.fireDragEnter(oDragEnterEvent);
206		assert.ok(fnDragEnterSpy.notCalled, "dragEnter event is not fired, dragSession does not exist");
207
208		oDropInfo.destroy();
209	});
210
211	QUnit.test("fireDragEnter - event parameters", function(assert) {
212		var fnDragEnterSpy = sinon.spy(function(oEvent) {
213			var mParameters = oEvent.getParameters();
214			assert.ok(mParameters.dragSession, "dragSession exists");
215			assert.strictEqual(mParameters.target, oControl, "target is valid");
216			assert.strictEqual(mParameters.browserEvent, oDragEnterEvent.originalEvent, "browserEvent is valid");
217		});
218		var oDropInfo = new DropInfo({
219			dragEnter: fnDragEnterSpy
220		});
221		var oControl = new TestControl({
222			title: "Control",
223			dragDropConfig: oDropInfo
224		});
225		var oDragEnterEvent = new jQuery.Event("dragstart");
226		oDragEnterEvent.dragSession = {
227			getDropControl: function() {
228				return oControl;
229			}
230		};
231
232		var bEventValue = oDropInfo.fireDragEnter(oDragEnterEvent);
233		assert.ok(fnDragEnterSpy.calledOnce, "dragEnter event is fired once");
234		assert.ok(bEventValue, "dragEnter event is returned true");
235
236		oDropInfo.detachDragEnter(fnDragEnterSpy);
237		oDropInfo.attachDragEnter(function(oEvent) {
238			oEvent.preventDefault();
239		});
240
241		bEventValue = oDropInfo.fireDragEnter(oDragEnterEvent);
242		assert.notOk(bEventValue, "default is prevented for dragEnter event");
243
244		oControl.destroy();
245	});
246
247	QUnit.test("fireDragOver - invalid parameters", function(assert) {
248		var oDragOverEvent = new jQuery.Event("dragover");
249		var fnDragOverSpy = sinon.spy();
250		var oDropInfo = new DropInfo({
251			dragOver: fnDragOverSpy
252		});
253
254		oDropInfo.fireDragOver();
255		assert.ok(fnDragOverSpy.notCalled, "dragOver event is not fired, there is no parameter");
256
257		oDropInfo.fireDragOver(oDragOverEvent);
258		assert.ok(fnDragOverSpy.notCalled, "dragOver event is not fired, dragSession does not exist");
259
260		oDropInfo.destroy();
261	});
262
263	QUnit.test("fireDragOver - event parameters", function(assert) {
264		var fnDragOverSpy = sinon.spy(function(oEvent) {
265			var mParameters = oEvent.getParameters();
266			assert.ok(mParameters.dragSession, "dragSession exists");
267			assert.strictEqual(mParameters.target, oControl, "target is valid");
268			assert.strictEqual(mParameters.dropPosition, "On", "dropPosition is valid");
269			assert.strictEqual(mParameters.browserEvent, oDragOverEvent.originalEvent, "browserEvent is valid");
270		});
271		var oDropInfo = new DropInfo({
272			dragOver: fnDragOverSpy
273		});
274		var oControl = new TestControl({
275			title: "Control",
276			dragDropConfig: oDropInfo
277		});
278		var oDragOverEvent = new jQuery.Event("dragstart");
279		oDragOverEvent.dragSession = {
280			getDropControl: function() {
281				return oControl;
282			},
283			getDropPosition: function() {
284				return "On";
285			}
286		};
287
288		var bEventValue = oDropInfo.fireDragOver(oDragOverEvent);
289		assert.ok(fnDragOverSpy.calledOnce, "dragOver event is fired once");
290		assert.ok(bEventValue, "dragOver event is returned true");
291
292		oControl.destroy();
293	});
294
295	QUnit.test("fireDrop - invalid parameters", function(assert) {
296		var oDropEvent = new jQuery.Event("drop");
297		var fnDropSpy = sinon.spy();
298		var oDropInfo = new DropInfo({
299			drop: fnDropSpy
300		});
301
302		oDropInfo.fireDrop();
303		assert.ok(fnDropSpy.notCalled, "drop event is not fired, there is no parameter");
304
305		oDropInfo.fireDrop(oDropEvent);
306		assert.ok(fnDropSpy.notCalled, "drop event is not fired, dragSession does not exist");
307
308		oDropInfo.destroy();
309	});
310
311	QUnit.test("fireDrop - event parameters", function(assert) {
312		var fnDropSpy = sinon.spy(function(oEvent) {
313			var mParameters = oEvent.getParameters();
314			assert.ok(mParameters.dragSession, "dragSession exists");
315			assert.strictEqual(mParameters.browserEvent, oDropEvent.originalEvent, "browserEvent is valid");
316			assert.strictEqual(mParameters.draggedControl, oControl, "draggedControl is valid");
317			assert.strictEqual(mParameters.draggedControl, oControl, "droppedControl is valid");
318			assert.strictEqual(mParameters.dropPosition, "On", "dropPosition is valid");
319		});
320		var oDropInfo = new DropInfo({
321			drop: fnDropSpy
322		});
323		var oControl = new TestControl({
324			title: "Control",
325			dragDropConfig: oDropInfo
326		});
327		var oDropEvent = new jQuery.Event("dragstart");
328		oDropEvent.dragSession = {
329			getDropControl: function() {
330				return oControl;
331			},
332			getDragControl: function() {
333				return oControl;
334			},
335			getDropPosition: function() {
336				return oDropInfo.getDropPosition();
337			}
338		};
339
340		oDropInfo.fireDrop(oDropEvent);
341		assert.ok(fnDropSpy.calledOnce, "drop event is fired once");
342
343		oControl.destroy();
344	});
345
346});
Full Screen

form-picker.js

Source: form-picker.js Github

copy
1(function($) {
2    'use strict';
3    $(document).ready(function() {
4
5        /*
6        $("#dropper-default").dateDropper({
7            dropWidth: 200,
8            dropPrimaryColor: "#1abc9c",
9            dropBorder: "1px solid #1abc9c"
10        }),
11        $("#dropper-animation").dateDropper({
12            dropWidth: 200,
13            init_animation: "bounce",
14            dropPrimaryColor: "#1abc9c",
15            dropBorder: "1px solid #1abc9c"
16        }),
17        $("#dropper-format").dateDropper({
18            dropWidth: 200,
19            format: "F S, Y",
20            dropPrimaryColor: "#1abc9c",
21            dropBorder: "1px solid #1abc9c"
22        }),
23        $("#dropper-lang").dateDropper({
24            dropWidth: 200,
25            format: "F S, Y",
26            dropPrimaryColor: "#1abc9c",
27            dropBorder: "1px solid #1abc9c",
28            lang: "ar"
29        }),
30        $("#dropper-lock").dateDropper({
31            dropWidth: 200,
32            format: "F S, Y",
33            dropPrimaryColor: "#1abc9c",
34            dropBorder: "1px solid #1abc9c",
35            lock: "from"
36        }),
37        $("#dropper-max-year").dateDropper({
38            dropWidth: 200,
39            dropPrimaryColor: "#1abc9c",
40            dropBorder: "1px solid #1abc9c",
41            maxYear: "2020"
42        }),
43        $("#dropper-min-year").dateDropper({
44            dropWidth: 200,
45            dropPrimaryColor: "#1abc9c",
46            dropBorder: "1px solid #1abc9c",
47            minYear: "1990"
48        }),
49        $("#year-range").dateDropper({
50            dropWidth: 200,
51            dropPrimaryColor: "#1abc9c",
52            dropBorder: "1px solid #1abc9c",
53            yearsRange: "5"
54        }),
55        $("#dropper-width").dateDropper({
56            dropPrimaryColor: "#1abc9c",
57            dropBorder: "1px solid #1abc9c",
58            dropWidth: 500
59        }),
60        $("#dropper-dangercolor").dateDropper({
61            dropWidth: 200,
62            dropPrimaryColor: "#e74c3c",
63            dropBorder: "1px solid #e74c3c",
64        }),
65        $("#dropper-backcolor").dateDropper({
66            dropWidth: 200,
67            dropPrimaryColor: "#1abc9c",
68            dropBorder: "1px solid #1abc9c",
69            dropBackgroundColor: "#bdc3c7"
70        }),
71        $("#dropper-txtcolor").dateDropper({
72            dropWidth: 200,
73            dropPrimaryColor: "#46627f",
74            dropBorder: "1px solid #46627f",
75            dropTextColor: "#FFF",
76            dropBackgroundColor: "#e74c3c"
77        }),
78        $("#dropper-radius").dateDropper({
79            dropWidth: 200,
80            dropPrimaryColor: "#1abc9c",
81            dropBorder: "1px solid #1abc9c",
82            dropBorderRadius: "0"
83        }),
84        $("#dropper-border").dateDropper({
85            dropWidth: 200,
86            dropPrimaryColor: "#1abc9c",
87            dropBorder: "2px solid #1abc9c"
88        }),
89        $("#dropper-shadow").dateDropper({
90            dropWidth: 200,
91            dropPrimaryColor: "#1abc9c",
92            dropBorder: "1px solid #1abc9c",
93            dropBorderRadius: "20px",
94            dropShadow: "0 0 20px 0 rgba(26, 188, 156, 0.6)"
95        }),
96       */
97        $('#inlinedatetimepicker').datetimepicker({
98            inline: true,
99            sideBySide: true
100        });
101
102        $('#datepicker').datetimepicker({
103            format: 'L'
104        });
105
106        $('#timepicker').datetimepicker({
107            format: 'LT'
108        });
109       
110
111        $('.demo').each( function() {
112            //
113            // Dear reader, it's actually very easy to initialize MiniColors. For example:
114            //
115            //  $(selector).minicolors();
116            //
117            // The way I've done it below is just for the demo, so don't get confused
118            // by it. Also, data- attributes aren't supported at this time...they're
119            // only used for this demo.
120            //
121            $(this).minicolors({
122                control: $(this).attr('data-control') || 'hue',
123                defaultValue: $(this).attr('data-defaultValue') || '',
124                format: $(this).attr('data-format') || 'hex',
125                keywords: $(this).attr('data-keywords') || '',
126                inline: $(this).attr('data-inline') === 'true',
127                letterCase: $(this).attr('data-letterCase') || 'lowercase',
128                opacity: $(this).attr('data-opacity'),
129                position: $(this).attr('data-position') || 'bottom left',
130                swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
131                change: function(value, opacity) {
132                    if( !value ) return;
133                    if( opacity ) value += ', ' + opacity;
134                    if( typeof console === 'object' ) {
135                        console.log(value);
136                    }
137                },
138                theme: 'bootstrap'
139            });
140
141        });
142    })
143})(jQuery);
Full Screen

viewerDragDropMixin.js

Source: viewerDragDropMixin.js Github

copy
1define([
2        '../../Core/defaultValue',
3        '../../Core/defined',
4        '../../Core/defineProperties',
5        '../../Core/DeveloperError',
6        '../../Core/Event',
7        '../../Core/wrapFunction',
8        '../../DataSources/CzmlDataSource',
9        '../../DataSources/GeoJsonDataSource',
10        '../../DataSources/KmlDataSource',
11        '../getElement'
12    ], function(
13        defaultValue,
14        defined,
15        defineProperties,
16        DeveloperError,
17        Event,
18        wrapFunction,
19        CzmlDataSource,
20        GeoJsonDataSource,
21        KmlDataSource,
22        getElement) {

23    'use strict';
24
25    /**
26     * A mixin which adds default drag and drop support for CZML files to the Viewer widget.
27     * Rather than being called directly, this function is normally passed as
28     * a parameter to {@link Viewer#extend}, as shown in the example below.
29     * @exports viewerDragDropMixin
30     *
31     * @param {Viewer} viewer The viewer instance.
32     * @param {Object} [options] Object with the following properties:
33     * @param {Element|String} [options.dropTarget=viewer.container] The DOM element which will serve as the drop target.
34     * @param {Boolean} [options.clearOnDrop=true] When true, dropping files will clear all existing data sources first, when false, new data sources will be loaded after the existing ones.
35     * @param {Boolean} [options.flyToOnDrop=true] When true, dropping files will fly to the data source once it is loaded.
36     * @param {Boolean} [options.clampToGround=true] When true, datasources are clamped to the ground.
37     * @param {DefaultProxy} [options.proxy] The proxy to be used for KML network links.
38     *
39     * @exception {DeveloperError} Element with id <options.dropTarget> does not exist in the document.
40     * @exception {DeveloperError} dropTarget is already defined by another mixin.
41     * @exception {DeveloperError} dropEnabled is already defined by another mixin.
42     * @exception {DeveloperError} dropError is already defined by another mixin.
43     * @exception {DeveloperError} clearOnDrop is already defined by another mixin.
44     *
45     * @example

46     * // Add basic drag and drop support and pop up an alert window on error.
47     * var viewer = new Cesium.Viewer('cesiumContainer');
48     * viewer.extend(Cesium.viewerDragDropMixin);
49     * viewer.dropError.addEventListener(function(viewerArg, source, error) {
50     *     window.alert('Error processing ' + source + ':' + error);
51     * });
52     */
53    function viewerDragDropMixin(viewer, options) {
54        //>>includeStart('debug', pragmas.debug);
55        if (!defined(viewer)) {
56            throw new DeveloperError('viewer is required.');
57        }
58        if (viewer.hasOwnProperty('dropTarget')) {
59            throw new DeveloperError('dropTarget is already defined by another mixin.');
60        }
61        if (viewer.hasOwnProperty('dropEnabled')) {
62            throw new DeveloperError('dropEnabled is already defined by another mixin.');
63        }
64        if (viewer.hasOwnProperty('dropError')) {
65            throw new DeveloperError('dropError is already defined by another mixin.');
66        }
67        if (viewer.hasOwnProperty('clearOnDrop')) {
68            throw new DeveloperError('clearOnDrop is already defined by another mixin.');
69        }
70        if (viewer.hasOwnProperty('flyToOnDrop')) {
71            throw new DeveloperError('flyToOnDrop is already defined by another mixin.');
72        }
73        //>>includeEnd('debug');
74
75        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
76
77        //Local variables to be closed over by defineProperties.
78        var dropEnabled = true;
79        var flyToOnDrop = defaultValue(options.flyToOnDrop, true);
80        var dropError = new Event();
81        var clearOnDrop = defaultValue(options.clearOnDrop, true);
82        var dropTarget = defaultValue(options.dropTarget, viewer.container);
83        var clampToGround = defaultValue(options.clampToGround, true);
84        var proxy = options.proxy;
85
86        dropTarget = getElement(dropTarget);
87
88        defineProperties(viewer, {
89            /**
90             * Gets or sets the element to serve as the drop target.
91             * @memberof viewerDragDropMixin.prototype
92             * @type {Element}

93             */
94            dropTarget : {
95                //TODO See https://github.com/AnalyticalGraphicsInc/cesium/issues/832
96                get : function() {
97                    return dropTarget;
98                },
99                set : function(value) {
100                    //>>includeStart('debug', pragmas.debug);
101                    if (!defined(value)) {
102                        throw new DeveloperError('value is required.');
103                    }
104                    //>>includeEnd('debug');
105
106                    unsubscribe(dropTarget, handleDrop);
107                    dropTarget = value;
108                    subscribe(dropTarget, handleDrop);
109                }
110            },
111
112            /**
113             * Gets or sets a value indicating if drag and drop support is enabled.
114             * @memberof viewerDragDropMixin.prototype
115             * @type {Element}

116             */
117            dropEnabled : {
118                get : function() {
119                    return dropEnabled;
120                },
121                set : function(value) {
122                    if (value !== dropEnabled) {
123                        if (value) {
124                            subscribe(dropTarget, handleDrop);
125                        } else {
126                            unsubscribe(dropTarget, handleDrop);
127                        }
128                        dropEnabled = value;
129                    }
130                }
131            },
132
133            /**
134             * Gets the event that will be raised when an error is encountered during drop processing.
135             * @memberof viewerDragDropMixin.prototype
136             * @type {Event}

137             */
138            dropError : {
139                get : function() {
140                    return dropError;
141                }
142            },
143
144            /**
145             * Gets or sets a value indicating if existing data sources should be cleared before adding the newly dropped sources.
146             * @memberof viewerDragDropMixin.prototype
147             * @type {Boolean}

148             */
149            clearOnDrop : {
150                get : function() {
151                    return clearOnDrop;
152                },
153                set : function(value) {
154                    clearOnDrop = value;
155                }
156            },
157
158            /**
159             * Gets or sets a value indicating if the camera should fly to the data source after it is loaded.
160             * @memberof viewerDragDropMixin.prototype
161             * @type {Boolean}

162             */
163            flyToOnDrop : {
164                get : function() {
165                    return flyToOnDrop;
166                },
167                set : function(value) {
168                    flyToOnDrop = value;
169                }
170            },
171
172            /**
173             * Gets or sets the proxy to be used for KML.
174             * @memberof viewerDragDropMixin.prototype
175             * @type {DefaultProxy}

176             */
177            proxy : {
178                get : function() {
179                    return proxy;
180                },
181                set : function(value) {
182                    proxy = value;
183                }
184            },
185
186            /**
187             * Gets or sets a value indicating if the datasources should be clamped to the ground
188             * @memberof viewerDragDropMixin.prototype
189             * @type {Boolean}

190             */
191            clampToGround : {
192                get : function() {
193                    return clampToGround;
194                },
195                set : function(value) {
196                    clampToGround = value;
197                }
198            }
199        });
200
201        function handleDrop(event) {
202            stop(event);
203
204            if (clearOnDrop) {
205                viewer.entities.removeAll();
206                viewer.dataSources.removeAll();
207            }
208
209            var files = event.dataTransfer.files;
210            var length = files.length;
211            for (var i = 0; i < length; i++) {
212                var file = files[i];
213                var reader = new FileReader();
214                reader.onload = createOnLoadCallback(viewer, file, proxy, clampToGround);
215                reader.onerror = createDropErrorCallback(viewer, file);
216                reader.readAsText(file);
217            }
218        }
219
220        //Enable drop by default;
221        subscribe(dropTarget, handleDrop);
222
223        //Wrap the destroy function to make sure all events are unsubscribed from
224        viewer.destroy = wrapFunction(viewer, viewer.destroy, function() {
225            viewer.dropEnabled = false;
226        });
227
228        //Specs need access to handleDrop
229        viewer._handleDrop = handleDrop;
230    }
231
232    function stop(event) {
233        event.stopPropagation();
234        event.preventDefault();
235    }
236
237    function unsubscribe(dropTarget, handleDrop) {
238        var currentTarget = dropTarget;
239        if (defined(currentTarget)) {
240            currentTarget.removeEventListener('drop', handleDrop, false);
241            currentTarget.removeEventListener('dragenter', stop, false);
242            currentTarget.removeEventListener('dragover', stop, false);
243            currentTarget.removeEventListener('dragexit', stop, false);
244        }
245    }
246
247    function subscribe(dropTarget, handleDrop) {
248        dropTarget.addEventListener('drop', handleDrop, false);
249        dropTarget.addEventListener('dragenter', stop, false);
250        dropTarget.addEventListener('dragover', stop, false);
251        dropTarget.addEventListener('dragexit', stop, false);
252    }
253
254    function createOnLoadCallback(viewer, file, proxy, clampToGround) {
255        var scene = viewer.scene;
256        return function(evt) {
257            var fileName = file.name;
258            try {
259                var loadPromise;
260
261                if (/\.czml$/i.test(fileName)) {
262                    loadPromise = CzmlDataSource.load(JSON.parse(evt.target.result), {
263                        sourceUri : fileName
264                    });
265                } else if (/\.geojson$/i.test(fileName) || /\.json$/i.test(fileName) || /\.topojson$/i.test(fileName)) {
266                    loadPromise = GeoJsonDataSource.load(JSON.parse(evt.target.result), {
267                        sourceUri : fileName,
268                        clampToGround : clampToGround
269                    });
270                } else if (/\.(kml|kmz)$/i.test(fileName)) {
271                    loadPromise = KmlDataSource.load(file, {
272                        sourceUri : fileName,
273                        proxy : proxy,
274                        camera : scene.camera,
275                        canvas : scene.canvas
276                    });
277                } else {
278                    viewer.dropError.raiseEvent(viewer, fileName, 'Unrecognized file: ' + fileName);
279                    return;
280                }
281
282                if (defined(loadPromise)) {
283                    viewer.dataSources.add(loadPromise).then(function(dataSource) {
284                        if (viewer.flyToOnDrop) {
285                            viewer.flyTo(dataSource);
286                        }
287                    }).otherwise(function(error) {
288                        viewer.dropError.raiseEvent(viewer, fileName, error);
289                    });
290                }
291            } catch (error) {
292                viewer.dropError.raiseEvent(viewer, fileName, error);
293            }
294        };
295    }
296
297    function createDropErrorCallback(viewer, file) {
298        return function(evt) {
299            viewer.dropError.raiseEvent(viewer, file.name, evt.target.error);
300        };
301    }
302
303    return viewerDragDropMixin;
304});
305
Full Screen

DragAndDrop.js

Source: DragAndDrop.js Github

copy
1/*!
2 * ${copyright}
3 */
4sap.ui.define([
5	"sap/ui/Device",
6	"../UIArea",
7	"sap/ui/thirdparty/jquery",
8	// jQuery Plugin "control"
9	"sap/ui/dom/jquery/control"
10],
11function(Device, UIArea, jQuery) {
12	"use strict";
13
14	var DnD = {},
15		oDragControl = null,		// the control being dragged
16		oDropControl = null,		// the current drop target control
17		oValidDropControl = null,	// the control which the dragged control can be dropped on based on the valid drop info
18		aValidDragInfos = [],		// valid DragInfos configured for the currently dragged source
19		aValidDropInfos = [],		// valid DropInfos configured for the current drop target
20		oDragSession = null,		// stores active drag session throughout a drag activity
21		$DropIndicator,				// drop position indicator
22		$GhostContainer,			// container to place custom ghosts
23		sCalculatedDropPosition,	// calculated position of the drop action relative to the valid dropped control.
24		iTargetEnteringTime;		// timestamp of drag enter
25
26
27	function addStyleClass(oElement, sStyleClass) {
28		if (!oElement) {
29			return;
30		}
31
32		if (oElement.addStyleClass) {
33			oElement.addStyleClass(sStyleClass);
34		} else {
35			oElement.$().addClass(sStyleClass);
36		}
37	}
38
39	function removeStyleClass(oElement, sStyleClass) {
40		if (!oElement) {
41			return;
42		}
43
44		if (oElement.removeStyleClass) {
45			oElement.removeStyleClass(sStyleClass);
46		} else {
47			oElement.$().removeClass(sStyleClass);
48		}
49	}
50
51	function dispatchEvent(oEvent, sEventName) {
52		var oControl = jQuery(oEvent.target).control(0, true);
53		if (!oControl) {
54			return;
55		}
56
57		var oNewEvent = jQuery.Event(null, oEvent);
58		oNewEvent.type = sEventName;
59		oControl.getUIArea()._handleEvent(oNewEvent);
60	}
61
62	function setDragGhost(oDragControl, oEvent) {
63		if (Device.browser.msie || !oDragControl || !oDragControl.getDragGhost) {
64			return;
65		}
66
67		var oDragGhost = oDragControl.getDragGhost();
68		if (!oDragGhost) {
69			return;
70		}
71
72		if (!$GhostContainer) {
73			$GhostContainer = jQuery('<div class="sapUiDnDGhostContainer"></div>');
74			jQuery(document.body).append($GhostContainer);
75		}
76
77		$GhostContainer.append(oDragGhost);
78		window.setTimeout(function() { $GhostContainer.empty(); }, 0);
79
80		var oOriginalEvent = oEvent.originalEvent;
81		oOriginalEvent.dataTransfer.setDragImage(oDragGhost, oOriginalEvent.offsetX, oOriginalEvent.offsetY);
82	}
83
84	function createDragSession(oEvent) {
85		var mData = {},
86			mIndicatorConfig,
87			oDataTransfer = oEvent.originalEvent.dataTransfer,
88			setTransferData = function(sType, sData) {
89				// set to original dataTransfer object if type is supported by the current browser (non-text causes error in IE+Edge)
90				if (oDataTransfer && sType == "text" || (Device.browser != "msie" && Device.browser != "edge")) {
91					oDataTransfer.setData(sType, sData);
92				}
93			};
94
95		/**
96		 * When a user requests to drag some controls that can be dragged, a drag session is started.
97		 * The drag session can be used to transfer data between applications or between dragged and dropped controls.
98		 * Please see provided APIs for more details.
99		 *
100		 * <b>Note:</b> This object only exists during a drag-and-drop operation.
101		 *
102		 * @namespace
103		 * @name sap.ui.core.dnd.DragSession
104		 * @static
105		 * @abstract
106		 * @public
107		 */
108		return /** @lends sap.ui.core.dnd.DragSession */ {
109			/**
110			 * Sets string data with any MIME type.
111			 * <b>Note:</b> This works in all browsers, apart from Internet Explorer and Microsoft Edge. It also works if you navigate between
112			 * different windows.
113			 *
114			 * @param {string} sKey The key of the data
115			 * @param {string} sData Data
116			 * @public
117			 */
118			setData: function(sKey, sData) {
119				sData = "" + sData;
120				mData[sKey] = sData;
121				setTransferData(sKey, sData);
122			},
123
124			/**
125			 * Returns the data that has been set via <code>setData</code> method.
126			 *
127			 * @param {string} sKey The key of the data
128			 * @returns {string} Data
129			 * @public
130			 */
131			getData: function(sKey) {
132				return mData[sKey];
133			},
134
135			/**
136			 * Sets string data with plain text MIME type.
137			 * <b>Note:</b> This works in all browsers, including Internet Explorer and Microsoft Edge. It also works if you navigate between
138			 * different windows.
139			 *
140			 * @param {string} sData Data
141			 * @public
142			 */
143			setTextData: function(sData) {
144				sData = "" + sData;
145				mData["text/plain"] = sData;
146				mData["text"] = sData;
147				setTransferData("text/plain", sData);
148				setTransferData("text", sData);
149			},
150
151			/**
152			 * Returns the data that has been set via <code>setTextData</code> method.
153			 *
154			 * @returns {string} Data
155			 * @public
156			 */
157			getTextData: function() {
158				return mData["text/plain"];
159			},
160
161			/**
162			 * Sets any type of data (even functions, pointers, anything non-serializable) with any MIME type.
163			 * This works in all browsers, including Internet Explorer and Microsoft Edge, but only within a UI5 application within the same
164			 * window/frame.
165			 *
166			 * @param {string} sKey The key of the data
167			 * @param {any} vData Data
168			 */
169			setComplexData: function(sKey, vData) {
170				mData[sKey] = vData;
171			},
172
173			/**
174			 * Returns the data that has been set via <code>setComplexData</code> method.
175			 *
176			 * @param {string} sKey The key of the data
177			 * @returns {any} The previously set data or undefined
178			 * @public
179			 */
180			getComplexData: function(sKey) {
181				return mData[sKey];
182			},
183
184			/**
185			 * Returns the drop indicator.
186			 *
187			 * @returns {HTMLElement|null} Drop indicator's DOM reference
188			 * @protected
189			 */
190			getIndicator: function() {
191				return $DropIndicator && $DropIndicator[0];
192			},
193
194			/**
195			 * Defines the visual configuration of the drop indicator for the current <code>DropInfo</code>.
196			 *
197			 * @param {object} mConfig Custom styles of the drop indicator.
198			 * @protected
199			 */
200			setIndicatorConfig: function(mConfig) {
201				mIndicatorConfig = mConfig;
202			},
203
204			/**
205			 * Returns the visual configuration of the drop indicator.
206			 *
207			 * @returns {object} Drop indicator configuration
208			 * @protected
209			 */
210			getIndicatorConfig: function(mConfig) {
211				return mIndicatorConfig;
212			},
213
214			/**
215			 * Returns the dragged control, if available within the same UI5 application frame.
216			 *
217			 * @returns {sap.ui.core.Element|null}
218			 * @protected
219			 */
220			getDragControl: function() {
221				return oDragControl;
222			},
223
224			/**
225			 * The valid drop target underneath the dragged control.
226			 *
227			 * @returns {sap.ui.core.Element|null}
228			 * @protected
229			 */
230			getDropControl: function() {
231				return oValidDropControl;
232			},
233
234			/**
235			 * Set the valid drop control.
236			 *
237			 * @protected
238			 */
239			setDropControl: function(oControl) {
240				oValidDropControl = oControl;
241			},
242
243			/**
244			 * Returns the drop configuration corresponding to the drop control.
245			 *
246			 * @returns {sap.ui.core.dnd.DropInfo|null}
247			 * @protected
248			 */
249			getDropInfo: function() {
250				return aValidDropInfos[0] || null;
251			},
252
253			/**
254			 * Returns the calculated position of the drop action relative to the valid dropped control.
255			 *
256			 * @returns {String}
257			 * @protected
258			 */
259			getDropPosition: function() {
260				return sCalculatedDropPosition;
261			}
262		};
263	}
264
265	function closeDragSession(oEvent) {
266		hideDropIndicator();
267		removeStyleClass(oDragControl, "sapUiDnDDragging");
268		oDragControl = oDropControl = oValidDropControl = oDragSession = null;
269		sCalculatedDropPosition = "";
270		aValidDragInfos = [];
271		aValidDropInfos = [];
272	}
273
274	function getDropIndicator() {
275		if ($DropIndicator) {
276			return $DropIndicator;
277		}
278
279		$DropIndicator = jQuery("<div class='sapUiDnDIndicator'></div>");
280		jQuery(sap.ui.getCore().getStaticAreaRef()).append($DropIndicator);
281		return $DropIndicator;
282	}
283
284	function hideDropIndicator() {
285		if ($DropIndicator) {
286			$DropIndicator.removeAttr("style").hide();
287		}
288	}
289
290	function showDropIndicator(oEvent, oDropTarget, sDropPosition, sDropLayout) {
291		if (!oDropTarget) {
292			return;
293		}
294
295		var mIndicatorConfig = oEvent.dragSession && oEvent.dragSession.getIndicatorConfig(),
296			mClientRect = oDropTarget.getBoundingClientRect(),
297			iPageYOffset = window.pageYOffset,
298			iPageXOffset = window.pageXOffset,
299			$Indicator = getDropIndicator(),
300			sRelativePosition,
301			mStyle = {},
302			mDropRect = {
303				top: mClientRect.top + iPageYOffset,
304				bottom: mClientRect.bottom + iPageYOffset,
305				left: mClientRect.left + iPageXOffset,
306				right: mClientRect.right + iPageXOffset,
307				width: mClientRect.width,
308				height: mClientRect.height
309			};
310
311		if (!sDropPosition || sDropPosition == "On") {
312			sRelativePosition = "On";
313			sDropLayout = "";
314		} else if (sDropLayout == "Horizontal") {
315			var iCursorX = oEvent.pageX - mDropRect.left;
316			mStyle.height = mDropRect.height;
317			mStyle.top = mDropRect.top;
318
319			if (sDropPosition == "Between") {
320				mStyle.width = "";
321				if (iCursorX < mDropRect.width * 0.5) {
322					sRelativePosition = "Before";
323					mStyle.left = mDropRect.left;
324				} else {
325					sRelativePosition = "After";
326					mStyle.left = mDropRect.right;
327				}
328			} else if (sDropPosition == "OnOrBetween") {
329				if (iCursorX < mDropRect.width * 0.25) {
330					sRelativePosition = "Before";
331					mStyle.left = mDropRect.left;
332					mStyle.width = "";
333				} else if (iCursorX > mDropRect.width * 0.75) {
334					sRelativePosition = "After";
335					mStyle.left = mDropRect.right;
336					mStyle.width = "";
337				} else {
338					sRelativePosition = "On";
339				}
340			}
341		} else {
342			var iCursorY = oEvent.pageY - mDropRect.top;
343			mStyle.width = mDropRect.width;
344			mStyle.left = mDropRect.left;
345
346			if (sDropPosition == "Between") {
347				mStyle.height = "";
348				if (iCursorY < mDropRect.height * 0.5) {
349					sRelativePosition = "Before";
350					mStyle.top = mDropRect.top;
351				} else {
352					sRelativePosition = "After";
353					mStyle.top = mDropRect.bottom;
354				}
355			} else if (sDropPosition == "OnOrBetween") {
356				if (iCursorY < mDropRect.height * 0.25) {
357					sRelativePosition = "Before";
358					mStyle.top = mDropRect.top;
359					mStyle.height = "";
360				} else if (iCursorY > mDropRect.height * 0.75) {
361					sRelativePosition = "After";
362					mStyle.top = mDropRect.bottom;
363					mStyle.height = "";
364				} else {
365					sRelativePosition = "On";
366				}
367			}
368		}
369
370		if (mIndicatorConfig && mIndicatorConfig.display == "none") {
371			return sRelativePosition;
372		}
373
374		if (sRelativePosition == "On") {
375			mStyle.top = mDropRect.top;
376			mStyle.left = mDropRect.left;
377			mStyle.width = mDropRect.width;
378			mStyle.height = mDropRect.height;
379			sDropPosition = sRelativePosition;
380		} else {
381			sDropPosition = "Between";
382		}
383
384		$Indicator.attr("data-drop-layout", sDropLayout);
385		$Indicator.attr("data-drop-position", sDropPosition);
386		$Indicator.css(jQuery.extend(mStyle, mIndicatorConfig)).show();
387
388		return sRelativePosition;
389	}
390
391	function getDragDropConfigs(oControl) {
392		var oParent = oControl.getParent(),
393			aSelfConfigs = (oControl.getDragDropConfig) ? oControl.getDragDropConfig() : [],
394			aParentConfigs = (oParent && oParent.getDragDropConfig) ? oParent.getDragDropConfig() : [];
395
396		return aSelfConfigs.concat(aParentConfigs);
397	}
398
399	function getValidDragInfos(oDragControl) {
400		var aDragDropConfigs = getDragDropConfigs(oDragControl);
401		return aDragDropConfigs.filter(function(oDragOrDropInfo) {
402			return oDragOrDropInfo.isDraggable(oDragControl);
403		});
404	}
405
406	function getValidDropInfos(oDropControl, aDragInfos, oEvent) {
407		var aDragDropConfigs = getDragDropConfigs(oDropControl);
408		aDragInfos = aDragInfos || [];
409
410		return aDragDropConfigs.filter(function(oDragOrDropInfo) {
411			// DragDropInfo defined at the drop target is irrelevant we only need DropInfos
412			return !oDragOrDropInfo.isA("sap.ui.core.dnd.IDragInfo");
413		}).concat(aDragInfos).filter(function(oDropInfo) {
414			if (!oDropInfo.isDroppable(oDropControl, oEvent)) {
415				return false;
416			}
417
418			// master group matches always
419			var sDropGroupName = oDropInfo.getGroupName();
420			if (!sDropGroupName) {
421				return true;
422			}
423
424			// group name matching
425			return aDragInfos.some(function(oDragInfo) {
426				return oDragInfo.getGroupName() == sDropGroupName;
427			});
428		});
429	}
430
431	function setDropEffect(oEvent, oDropInfo) {
432		// allow dropping
433		oEvent.preventDefault();
434
435		// set visual drop indicator from drop info
436		var sDropEffect = oDropInfo.getDropEffect().toLowerCase();
437		oEvent.originalEvent.dataTransfer.dropEffect = sDropEffect;
438	}
439
440	function showDropPosition(oEvent, oDropInfo, oValidDropControl) {
441		// no target aggregation so entire control is the target
442		var sTargetAggregation = oDropInfo.getTargetAggregation();
443		if (!sTargetAggregation) {
444			return showDropIndicator(oEvent, oValidDropControl.getDomRef());
445		}
446
447		// whether the current DOM element corresponds to the configured aggregation
448		var oTargetDomRef;
449		if (oEvent.getMark("DragWithin") == sTargetAggregation) {
450			oTargetDomRef = oValidDropControl.getDomRefForSetting(sTargetAggregation);
451		}
452
453		// not dragging over an aggregated child of the element
454		oTargetDomRef = oTargetDomRef || oValidDropControl.getDomRef();
455
456		// let the user know the drop position
457		return showDropIndicator(oEvent, oTargetDomRef, oDropInfo.getDropPosition(true), oDropInfo.getDropLayout(true));
458	}
459
460	// before controls handle UIArea events
461	DnD.preprocessEvent = function(oEvent) {
462		if (oDragSession && oEvent.type.indexOf("dr") == 0) {
463			// attach dragSession to all drag events
464			oEvent.dragSession = oDragSession;
465		}
466
467		var sEventHandler = "onbefore" + oEvent.type;
468		if (DnD[sEventHandler]) {
469			DnD[sEventHandler](oEvent);
470		}
471	};
472
473	// after controls handle UIArea events
474	DnD.postprocessEvent = function(oEvent) {
475		var sEventHandler = "onafter" + oEvent.type;
476		if (DnD[sEventHandler]) {
477			DnD[sEventHandler](oEvent);
478		}
479	};
480
481	DnD.onbeforedragstart = function(oEvent) {
482		// draggable implicitly
483		if (!oEvent.target.draggable) {
484			return;
485		}
486
487		// the text inside input fields should still be selectable
488		if (/^(input|textarea)$/i.test(document.activeElement.tagName)) {
489			return;
490		}
491
492		// identify the control being dragged
493		oDragControl = jQuery(oEvent.target).control(0, true);
494		if (!oDragControl) {
495			return;
496		}
497
498		// identify and remember the applicable DragInfos
499		aValidDragInfos = getValidDragInfos(oDragControl);
500		if (!aValidDragInfos.length) {
501			return;
502		}
503
504		// firefox needs data set to allow dragging
505		if (Device.browser.firefox && oEvent.originalEvent.dataTransfer.types.length === 0) {
506			oEvent.originalEvent.dataTransfer.setData("ui5/dummyDataForFirefox", "data");
507		}
508
509		// create the drag session object and attach to the event
510		oEvent.dragSession = oDragSession = createDragSession(oEvent);
511	};
512
513	DnD.onafterdragstart = function(oEvent) {
514		// drag is not possible if preventDefault is called for dragstart event
515		if (!aValidDragInfos.length || oEvent.isDefaultPrevented()) {
516			closeDragSession();
517			return;
518		}
519
520		// fire dragstart event of valid DragInfos and filter if preventDefault is called
521		aValidDragInfos = oEvent.isMarked("NonDraggable") ? [] : aValidDragInfos.filter(function(oDragInfo) {
522			return oDragInfo.fireDragStart(oEvent);
523		});
524
525		// check whether drag is possible
526		if (!aValidDragInfos.length) {
527			oEvent.preventDefault();
528			closeDragSession();
529			return;
530		}
531
532		// set custom drag ghost
533		setDragGhost(oDragControl, oEvent);
534
535		// set dragging class of the drag source
536		addStyleClass(oDragControl, "sapUiDnDDragging");
537	};
538
539	DnD.onbeforedragenter = function(oEvent) {
540		// check whether we remain within the same control
541		var oControl = jQuery(oEvent.target).control(0, true);
542		if (oControl && oDropControl === oControl) {
543			oEvent.setMark("DragWithin", "SameControl");
544		} else {
545			iTargetEnteringTime = Date.now();
546			oDropControl = oControl;
547		}
548
549		var aDropInfos = [];
550		oValidDropControl = oControl;
551
552		// find the first valid drop control and corresponding valid DropInfos at the control hierarchy
553		for (var i = 0; i < 20 && oValidDropControl; i++, oValidDropControl = oValidDropControl.getParent()) {
554			aDropInfos = getValidDropInfos(oValidDropControl, aValidDragInfos, oEvent);
555			if (aDropInfos.length) {
556				break;
557			}
558		}
559
560		// if we are not dragging within the same control we can update valid drop infos
561		if (oEvent.getMark("DragWithin") != "SameControl") {
562			aValidDropInfos = aDropInfos;
563			if (oDragSession) {
564				oDragSession.setIndicatorConfig(null);
565			}
566		}
567
568		// no valid drop info found
569		if (!aValidDropInfos.length) {
570			oValidDropControl = null;
571		} else if (!oDragSession) {
572			// something is dragged from outside the browser
573			oEvent.dragSession = oDragSession = createDragSession(oEvent);
574		}
575	};
576
577	DnD.onafterdragenter = function(oEvent) {
578		// drop is not possible if there is no valid drop control or dragenter event is marked as NonDroppable
579		if (!oValidDropControl || oEvent.isMarked("NonDroppable")) {
580			aValidDropInfos = [];
581		} else if (oEvent.getMark("DragWithin") != "SameControl") {
582			// fire dragenter event of valid DropInfos and filter if preventDefault is called
583			aValidDropInfos = aValidDropInfos.filter(function(oDropInfo) {
584				return oDropInfo.fireDragEnter(oEvent);
585			});
586		}
587
588		// set drop effect and drop position
589		var oValidDropInfo = aValidDropInfos[0];
590		if (!oValidDropInfo || oValidDropInfo.getDropEffect() == "None") {
591			hideDropIndicator();
592			sCalculatedDropPosition = "";
593		} else {
594			setDropEffect(oEvent, oValidDropInfo);
595			sCalculatedDropPosition = showDropPosition(oEvent, oValidDropInfo, oValidDropControl);
596		}
597	};
598
599	DnD.onbeforedragover = function(oEvent) {
600		// handle longdragover event
601		var iCurrentTime = Date.now();
602		if (iCurrentTime - iTargetEnteringTime >= 1000) {
603			dispatchEvent(oEvent, "longdragover");
604			iTargetEnteringTime = iCurrentTime;
605		}
606	};
607
608	DnD.onafterdragover = function(oEvent) {
609		var oValidDropInfo = aValidDropInfos[0];
610
611		// let the browser do the default if there is no valid drop info
612		if (!oValidDropInfo || oValidDropInfo.getDropEffect() == "None") {
613			return;
614		}
615
616		// fire dragover events of valid DropInfos
617		aValidDropInfos.forEach(function(oDropInfo) {
618			oDropInfo.fireDragOver(oEvent);
619		});
620
621		// browsers drop effect must be set on dragover always
622		setDropEffect(oEvent, oValidDropInfo);
623
624		// drop position is set already at dragenter it should not be changed for DropPosition=On
625		if (oValidDropInfo && oValidDropInfo.getDropPosition(true) == "On") {
626			return;
627		}
628
629		// drop indicator position may change depending on the mouse pointer location
630		sCalculatedDropPosition = showDropPosition(oEvent, oValidDropInfo, oValidDropControl);
631	};
632
633	DnD.onbeforedrop = function(oEvent) {
634		// prevent default action
635		if (aValidDropInfos.length) {
636			oEvent.preventDefault();
637		}
638	};
639
640	DnD.onafterdrop = function(oEvent) {
641		// fire drop events of valid DropInfos
642		aValidDropInfos.forEach(function(oDropInfo) {
643			oDropInfo.fireDrop(oEvent);
644		});
645
646		// dragend event is not dispatched if the dragged element is removed
647		this.iDragEndTimer = window.requestAnimationFrame(this.onafterdragend.bind(this, oEvent));
648	};
649
650	DnD.onafterdragend = function(oEvent) {
651		// cleanup the timer if there is a waiting job on the queue
652		this.iDragEndTimer = window.cancelAnimationFrame(this.iDragEndTimer);
653
654		// fire dragend event of valid DragInfos
655		aValidDragInfos.forEach(function(oDragInfo) {
656			oDragInfo.fireDragEnd(oEvent);
657		});
658
659		// finalize drag session
660		closeDragSession();
661	};
662
663	// process the events of the UIArea
664	UIArea.addEventPreprocessor(DnD.preprocessEvent);
665	UIArea.addEventPostprocessor(DnD.postprocessEvent);
666
667	return DnD;
668
669}, /* bExport= */ true);
Full Screen

date-time-dropper.js

Source: date-time-dropper.js Github

copy
1/*=========================================================================================
2    File Name: date-time-dropper.js
3    Description: Datepicker and Timepicker plugins based on jQuery
4    ----------------------------------------------------------------------------------------
5    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
6   Version: 3.0
7    Author: GeeksLabs
8    Author URL: http://www.themeforest.net/user/geekslabs
9==========================================================================================*/
10$(document).ready(function(){
11
12    /********************************************
13    *               Date Dropper                *
14    ********************************************/
15
16    // Options
17
18
19    // Animate
20    $('#animate').dateDropper({
21        dropWidth: 200
22    });
23
24    // Init Animation
25    $('#init_animation').dateDropper({
26        dropWidth: 200,
27        init_animation: 'bounce'
28    });
29
30    // Format
31    $('#format').dateDropper({
32        dropWidth: 200,
33        format: 'j l, F, Y'
34    });
35
36    // Lang
37    $('#lang').dateDropper({
38        dropWidth: 200,
39        lang: 'ar' // Arabic
40    });
41
42    // Lock
43    $('#lock').dateDropper({
44        dropWidth: 200,
45        lock: 'from' // To select date after today, 'to' to select date before today
46    });
47
48    // Max Year
49    $('#maxYear').dateDropper({
50        dropWidth: 200,
51        maxYear: '2020'
52    });
53
54    // Min Year
55    $('#minYear').dateDropper({
56        dropWidth: 200,
57        minYear: '2001'
58    });
59
60    // Years Range
61    $('#yearsRange').dateDropper({
62        dropWidth: 200,
63        yearsRange: '5'
64    });
65
66
67    // Styles
68
69    // Drop Primary Color
70    $('#dropPrimaryColor').dateDropper({
71        dropWidth: 200,
72        dropPrimaryColor: '#F6BB42',
73        dropBorder: '1px solid #F6BB42'
74    });
75
76    // Drop Text Color
77    $('#dropTextColor').dateDropper({
78        dropWidth: 200,
79        dropPrimaryColor: '#10617E',
80        dropBorder: '1px solid #10617E',
81        dropBackgroundColor: '#23b1e3',
82        dropTextColor: '#FFF'
83    });
84
85    // Drop Background Color
86    $('#dropBackgroundColor').dateDropper({
87        dropWidth: 200,
88        dropBackgroundColor: '#ACDAEC',
89    });
90
91    // Drop Border
92    $('#dropBorder').dateDropper({
93        dropWidth: 200,
94        dropPrimaryColor: '#2fb594',
95        dropBorder: '1px solid #2dad8d',
96    });
97
98    // Drop Border Radius
99    $('#dropBorderRadius').dateDropper({
100        dropWidth: 200,
101        dropPrimaryColor: '#e8273a',
102        dropBorder: '1px solid #e71e32',
103        dropBorderRadius: '0'
104    });
105
106    // Drop Shadow
107    $('#dropShadow').dateDropper({
108        dropWidth: 200,
109        dropPrimaryColor: '#fa4420',
110        dropBorder: '1px solid #fa4420',
111        dropBorderRadius: '20',
112        dropShadow: '0 0 10px 0 rgba(250, 68, 32, 0.6)'
113    });
114
115    // Drop Width
116    $('#dropWidth').dateDropper({
117        dropWidth: 250
118    });
119
120    // Drop Text Weight
121    $('#dropTextWeight').dateDropper({
122        dropWidth: 200,
123        dropTextWeight: 'normal'
124    });
125
126
127    /********************************************
128    *               Time Dropper                *
129    ********************************************/
130
131    // Options
132
133
134    // Auto Switch
135    $('#autoswitch').timeDropper();
136
137    // Meridians
138    $('#meridians').timeDropper({
139        meridians: true
140    });
141
142    // Format
143    $('#timeformat').timeDropper({
144        format: 'HH:mm A'
145    });
146
147    // Mousewheel
148    $('#mousewheel').timeDropper({
149        mousewheel: true
150    });
151
152    // Init Animation
153    $('#time_init_animation').timeDropper({
154        init_animation: 'dropDown',
155        meridians: true
156    });
157
158    // Set Current Time
159    $('#setCurrentTime').timeDropper();
160
161
162
163    // Styles
164
165
166    // Primary Color
167    $('#primaryColor').timeDropper({
168        primaryColor: '#2fb594',
169        borderColor: '#2fb594'
170    });
171
172    // Text Color
173    $('#textColor').timeDropper({
174        primaryColor: '#2fb594',
175        textColor: '#e8273a'
176    });
177
178    // Background Color
179    $('#backgroundColor').timeDropper({
180        primaryColor: '#FFF',
181        backgroundColor: '#fa4420',
182        borderColor: '#781602',
183        textColor: '#781602'
184    });
185
186    // Border Color
187    $('#borderColor').timeDropper({
188        primaryColor: '#FFF',
189        backgroundColor: '#23b1e3',
190        borderColor: '#FFF',
191        textColor: '#FFF'
192    });
193
194});
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)