ButtonView.js
3.3 KB
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
/*
*
* ADOBE CONFIDENTIAL
* __________________
*
* Copyright 2014 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
define('ux/views/ButtonView', [
'underscore',
'jquery',
'util/Util',
'views/BaseView'
], function(
_, $, Util, BaseView
) {
'use strict';
var DEFAULT_OPTIONS = {
cssClassNames: null
};
var ButtonView = BaseView.extend(/** @lends ButtonView.prototype */{
tagName: 'span',
className: 'screens-Button',
sistineOptions: {
events: {
press: '_handleButtonPress'
},
recognizers: ['press']
},
/**
* @classdesc View that renders button
* @desc Creates a new button view
*
* @class ButtonView
* @extends BaseView
*
* @param {Object} [options] An object of configurable options.
* @param {String[]} [options.cssClassNames=null] Specifies additional css class names for this button
*/
constructor: function(options) {
this._initOptions(options, DEFAULT_OPTIONS);
ButtonView.__super__.constructor.apply(this, arguments);
this._startedPosition = null;
},
render: function() {
if (this.options.cssClassNames) {
this.$el.addClass(this.options.cssClassNames.join(' '));
}
return this;
},
destroy: function() {
return ButtonView.__super__.destroy.apply(this, arguments);
},
_handleButtonPress: function(ev) {
var $target = $(ev.currentTarget);
if (ev.state === Sistine.STATE_STARTED) {
this._startedPosition = ev.pointer.position();
$target.addClass('active');
} else {
$target.removeClass('active');
}
if (ev.pointer && ev.state === Sistine.STATE_ENDED) {
var endPosition = ev.pointer.position();
var shouldCallButtonPress = true;
if (this._startedPosition[0] !== endPosition[0] || this._startedPosition[1] !== endPosition[1]) {
var clientRect = ev.currentTarget.getBoundingClientRect();
if (!Util.pointInRectangle(endPosition[0], endPosition[1], clientRect.left, clientRect.top, clientRect.right, clientRect.bottom)) {
shouldCallButtonPress = false;
}
}
if (shouldCallButtonPress) {
this.dispatchEvent('button-pressed', {
currentTarget: ev.currentTarget,
view: this,
event: ev
});
}
}
}
});
// return module exports
return ButtonView;
});