PageRenderTime 32ms CodeModel.GetById 25ms RepoModel.GetById 1ms app.codeStats 0ms

/resources/sap/m/Switch-dbg.js

https://github.com/frank3b/DemoMaestro
JavaScript | 684 lines | 174 code | 114 blank | 396 comment | 22 complexity | 67e800b42ae64bdfb4732397e0792a35 MD5 | raw file
Possible License(s): BSD-3-Clause, JSON, Apache-2.0, MIT
  1. /*!
  2. * SAP UI development toolkit for HTML5 (SAPUI5/OpenUI5)
  3. * (c) Copyright 2009-2014 SAP AG or an SAP affiliate company.
  4. * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  5. */
  6. /* ----------------------------------------------------------------------------------
  7. * Hint: This is a derived (generated) file. Changes should be done in the underlying
  8. * source files only (*.control, *.js) or they will be lost after the next generation.
  9. * ---------------------------------------------------------------------------------- */
  10. // Provides control sap.m.Switch.
  11. jQuery.sap.declare("sap.m.Switch");
  12. jQuery.sap.require("sap.m.library");
  13. jQuery.sap.require("sap.ui.core.Control");
  14. /**
  15. * Constructor for a new Switch.
  16. *
  17. * Accepts an object literal <code>mSettings</code> that defines initial
  18. * property values, aggregated and associated objects as well as event handlers.
  19. *
  20. * If the name of a setting is ambiguous (e.g. a property has the same name as an event),
  21. * then the framework assumes property, aggregation, association, event in that order.
  22. * To override this automatic resolution, one of the prefixes "aggregation:", "association:"
  23. * or "event:" can be added to the name of the setting (such a prefixed name must be
  24. * enclosed in single or double quotes).
  25. *
  26. * The supported settings are:
  27. * <ul>
  28. * <li>Properties
  29. * <ul>
  30. * <li>{@link #getState state} : boolean (default: false)</li>
  31. * <li>{@link #getCustomTextOn customTextOn} : string</li>
  32. * <li>{@link #getCustomTextOff customTextOff} : string</li>
  33. * <li>{@link #getVisible visible} : boolean (default: true)</li>
  34. * <li>{@link #getEnabled enabled} : boolean (default: true)</li>
  35. * <li>{@link #getName name} : string</li>
  36. * <li>{@link #getType type} : sap.m.SwitchType (default: sap.m.SwitchType.Default)</li></ul>
  37. * </li>
  38. * <li>Aggregations
  39. * <ul></ul>
  40. * </li>
  41. * <li>Associations
  42. * <ul></ul>
  43. * </li>
  44. * <li>Events
  45. * <ul>
  46. * <li>{@link sap.m.Switch#event:change change} : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]</li></ul>
  47. * </li>
  48. * </ul>
  49. *
  50. * @param {string} [sId] id for the new control, generated automatically if no id is given
  51. * @param {object} [mSettings] initial settings for the new control
  52. *
  53. * @class
  54. * A switch is a user interface control on mobile devices that is used for change between binary states. The user can also drag the button handle or tap to change the state.
  55. * @extends sap.ui.core.Control
  56. *
  57. * @author SAP AG
  58. * @version 1.20.6
  59. *
  60. * @constructor
  61. * @public
  62. * @name sap.m.Switch
  63. */
  64. sap.ui.core.Control.extend("sap.m.Switch", { metadata : {
  65. // ---- object ----
  66. // ---- control specific ----
  67. library : "sap.m",
  68. properties : {
  69. "state" : {type : "boolean", group : "Misc", defaultValue : false},
  70. "customTextOn" : {type : "string", group : "Misc", defaultValue : null},
  71. "customTextOff" : {type : "string", group : "Misc", defaultValue : null},
  72. "visible" : {type : "boolean", group : "Appearance", defaultValue : true},
  73. "enabled" : {type : "boolean", group : "Data", defaultValue : true},
  74. "name" : {type : "string", group : "Misc", defaultValue : null},
  75. "type" : {type : "sap.m.SwitchType", group : "Appearance", defaultValue : sap.m.SwitchType.Default}
  76. },
  77. events : {
  78. "change" : {}
  79. }
  80. }});
  81. /**
  82. * Creates a new subclass of class sap.m.Switch with name <code>sClassName</code>
  83. * and enriches it with the information contained in <code>oClassInfo</code>.
  84. *
  85. * <code>oClassInfo</code> might contain the same kind of informations as described in {@link sap.ui.core.Element.extend Element.extend}.
  86. *
  87. * @param {string} sClassName name of the class to be created
  88. * @param {object} [oClassInfo] object literal with informations about the class
  89. * @param {function} [FNMetaImpl] constructor function for the metadata object. If not given, it defaults to sap.ui.core.ElementMetadata.
  90. * @return {function} the created class / constructor function
  91. * @public
  92. * @static
  93. * @name sap.m.Switch.extend
  94. * @function
  95. */
  96. sap.m.Switch.M_EVENTS = {'change':'change'};
  97. /**
  98. * Getter for property <code>state</code>.
  99. * A boolean value indicating whether the switch is on or off.
  100. *
  101. * Default value is <code>false</code>
  102. *
  103. * @return {boolean} the value of property <code>state</code>
  104. * @public
  105. * @name sap.m.Switch#getState
  106. * @function
  107. */
  108. /**
  109. * Setter for property <code>state</code>.
  110. *
  111. * Default value is <code>false</code>
  112. *
  113. * @param {boolean} bState new value for property <code>state</code>
  114. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  115. * @public
  116. * @name sap.m.Switch#setState
  117. * @function
  118. */
  119. /**
  120. * Getter for property <code>customTextOn</code>.
  121. * Custom text for the "ON" state.
  122. *
  123. * "ON" translated to the current language is the default value.
  124. * Beware that the given text will be cut off after three characters.
  125. *
  126. * Default value is empty/<code>undefined</code>
  127. *
  128. * @return {string} the value of property <code>customTextOn</code>
  129. * @public
  130. * @name sap.m.Switch#getCustomTextOn
  131. * @function
  132. */
  133. /**
  134. * Setter for property <code>customTextOn</code>.
  135. *
  136. * Default value is empty/<code>undefined</code>
  137. *
  138. * @param {string} sCustomTextOn new value for property <code>customTextOn</code>
  139. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  140. * @public
  141. * @name sap.m.Switch#setCustomTextOn
  142. * @function
  143. */
  144. /**
  145. * Getter for property <code>customTextOff</code>.
  146. * Custom text for the "OFF" state.
  147. *
  148. * "OFF" translated to the current language is the default value.
  149. * Beware that the given text will be cut off after three characters.
  150. *
  151. * Default value is empty/<code>undefined</code>
  152. *
  153. * @return {string} the value of property <code>customTextOff</code>
  154. * @public
  155. * @name sap.m.Switch#getCustomTextOff
  156. * @function
  157. */
  158. /**
  159. * Setter for property <code>customTextOff</code>.
  160. *
  161. * Default value is empty/<code>undefined</code>
  162. *
  163. * @param {string} sCustomTextOff new value for property <code>customTextOff</code>
  164. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  165. * @public
  166. * @name sap.m.Switch#setCustomTextOff
  167. * @function
  168. */
  169. /**
  170. * Getter for property <code>visible</code>.
  171. * Invisible switches are not rendered.
  172. *
  173. * Default value is <code>true</code>
  174. *
  175. * @return {boolean} the value of property <code>visible</code>
  176. * @public
  177. * @name sap.m.Switch#getVisible
  178. * @function
  179. */
  180. /**
  181. * Setter for property <code>visible</code>.
  182. *
  183. * Default value is <code>true</code>
  184. *
  185. * @param {boolean} bVisible new value for property <code>visible</code>
  186. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  187. * @public
  188. * @name sap.m.Switch#setVisible
  189. * @function
  190. */
  191. /**
  192. * Getter for property <code>enabled</code>.
  193. * Whether the switch is enabled.
  194. *
  195. * Default value is <code>true</code>
  196. *
  197. * @return {boolean} the value of property <code>enabled</code>
  198. * @public
  199. * @name sap.m.Switch#getEnabled
  200. * @function
  201. */
  202. /**
  203. * Setter for property <code>enabled</code>.
  204. *
  205. * Default value is <code>true</code>
  206. *
  207. * @param {boolean} bEnabled new value for property <code>enabled</code>
  208. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  209. * @public
  210. * @name sap.m.Switch#setEnabled
  211. * @function
  212. */
  213. /**
  214. * Getter for property <code>name</code>.
  215. * The name to be used in the HTML code for the switch (e.g. for HTML forms that send data to the server via submit).
  216. *
  217. * Default value is empty/<code>undefined</code>
  218. *
  219. * @return {string} the value of property <code>name</code>
  220. * @public
  221. * @name sap.m.Switch#getName
  222. * @function
  223. */
  224. /**
  225. * Setter for property <code>name</code>.
  226. *
  227. * Default value is empty/<code>undefined</code>
  228. *
  229. * @param {string} sName new value for property <code>name</code>
  230. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  231. * @public
  232. * @name sap.m.Switch#setName
  233. * @function
  234. */
  235. /**
  236. * Getter for property <code>type</code>.
  237. * Type of a Switch. Possibles values "Default", "AcceptReject".
  238. *
  239. * Default value is <code>Default</code>
  240. *
  241. * @return {sap.m.SwitchType} the value of property <code>type</code>
  242. * @public
  243. * @name sap.m.Switch#getType
  244. * @function
  245. */
  246. /**
  247. * Setter for property <code>type</code>.
  248. *
  249. * Default value is <code>Default</code>
  250. *
  251. * @param {sap.m.SwitchType} oType new value for property <code>type</code>
  252. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  253. * @public
  254. * @name sap.m.Switch#setType
  255. * @function
  256. */
  257. /**
  258. * Triggered when a switch changes the state.
  259. *
  260. * @name sap.m.Switch#change
  261. * @event
  262. * @param {sap.ui.base.Event} oControlEvent
  263. * @param {sap.ui.base.EventProvider} oControlEvent.getSource
  264. * @param {object} oControlEvent.getParameters
  265. * @param {boolean} oControlEvent.getParameters.state The new state of the switch.
  266. * @public
  267. */
  268. /**
  269. * Attach event handler <code>fnFunction</code> to the 'change' event of this <code>sap.m.Switch</code>.<br/>.
  270. * When called, the context of the event handler (its <code>this</code>) will be bound to <code>oListener<code> if specified
  271. * otherwise to this <code>sap.m.Switch</code>.<br/> itself.
  272. *
  273. * Triggered when a switch changes the state.
  274. *
  275. * @param {object}
  276. * [oData] An application specific payload object, that will be passed to the event handler along with the event object when firing the event.
  277. * @param {function}
  278. * fnFunction The function to call, when the event occurs.
  279. * @param {object}
  280. * [oListener] Context object to call the event handler with. Defaults to this <code>sap.m.Switch</code>.<br/> itself.
  281. *
  282. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  283. * @public
  284. * @name sap.m.Switch#attachChange
  285. * @function
  286. */
  287. /**
  288. * Detach event handler <code>fnFunction</code> from the 'change' event of this <code>sap.m.Switch</code>.<br/>
  289. *
  290. * The passed function and listener object must match the ones used for event registration.
  291. *
  292. * @param {function}
  293. * fnFunction The function to call, when the event occurs.
  294. * @param {object}
  295. * oListener Context object on which the given function had to be called.
  296. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  297. * @public
  298. * @name sap.m.Switch#detachChange
  299. * @function
  300. */
  301. /**
  302. * Fire event change to attached listeners.
  303. *
  304. * Expects following event parameters:
  305. * <ul>
  306. * <li>'state' of type <code>boolean</code> The new state of the switch.</li>
  307. * </ul>
  308. *
  309. * @param {Map} [mArguments] the arguments to pass along with the event.
  310. * @return {sap.m.Switch} <code>this</code> to allow method chaining
  311. * @protected
  312. * @name sap.m.Switch#fireChange
  313. * @function
  314. */
  315. // Start of sap\m\Switch.js
  316. jQuery.sap.require("sap.ui.core.EnabledPropagator");
  317. jQuery.sap.require("sap.ui.core.theming.Parameters");
  318. jQuery.sap.require("sap.ui.core.IconPool");
  319. jQuery.sap.require("sap.m.SwitchRenderer");
  320. sap.ui.core.IconPool.insertFontFaceStyle();
  321. sap.ui.core.EnabledPropagator.apply(sap.m.Switch.prototype, [true]);
  322. /* =========================================================== */
  323. /* Internal methods and properties */
  324. /* =========================================================== */
  325. /**
  326. * Slide the switch.
  327. *
  328. * @private
  329. */
  330. sap.m.Switch.prototype._slide = function(iPosition) {
  331. iPosition = iPosition > sap.m.Switch._OFFPOSITION ? sap.m.Switch._OFFPOSITION
  332. : iPosition < sap.m.Switch._ONPOSITION ? sap.m.Switch._ONPOSITION : iPosition;
  333. if (this._iCurrentPosition === iPosition) {
  334. return;
  335. }
  336. this._iCurrentPosition = iPosition;
  337. this._$SwitchInner[0].style[sap.m.Switch._bRtl ? "right" : "left"] = iPosition + "px";
  338. this._setTempState(Math.abs(iPosition) < sap.m.Switch._SWAPPOINT);
  339. };
  340. sap.m.Switch.prototype._setTempState = function(b) {
  341. if (this._bTempState === b) {
  342. return;
  343. }
  344. this._bTempState = b;
  345. this._$Handle[0].setAttribute("data-sap-ui-swt", b ? this._sOn : this._sOff);
  346. };
  347. sap.m.Switch._getCssParameter = function(sParameter) {
  348. var fnGetCssParameter = sap.ui.core.theming.Parameters.get;
  349. return fnGetCssParameter(sParameter) || fnGetCssParameter(sParameter + "-" + sap.ui.Device.os.name.toLowerCase());
  350. };
  351. (function() {
  352. var sParamTransitionTime = "sapMSwitch-TRANSITIONTIME",
  353. sTransitionTime = sap.m.Switch._getCssParameter(sParamTransitionTime);
  354. // a boolean property to indicate if transition or not
  355. sap.m.Switch._bUseTransition = !!(Number(sTransitionTime));
  356. // the milliseconds takes the transition from one state to another
  357. sap.m.Switch._TRANSITIONTIME = Number(sTransitionTime) || 0;
  358. }());
  359. sap.m.Switch._bRtl = sap.ui.getCore().getConfiguration().getRTL();
  360. // the position of the inner HTML element whether the switch is "ON"
  361. sap.m.Switch._ONPOSITION = Number(sap.m.Switch._getCssParameter("sapMSwitch-ONPOSITION"));
  362. // the position of the inner HTML element whether the switch is "OFF"
  363. sap.m.Switch._OFFPOSITION = Number(sap.m.Switch._getCssParameter("sapMSwitch-OFFPOSITION"));
  364. // swap point
  365. sap.m.Switch._SWAPPOINT = Math.abs((sap.m.Switch._ONPOSITION - sap.m.Switch._OFFPOSITION) / 2);
  366. // resource bundle
  367. sap.m.Switch._oRb = sap.ui.getCore().getLibraryResourceBundle("sap.m");
  368. /* =========================================================== */
  369. /* Lifecycle methods */
  370. /* =========================================================== */
  371. /**
  372. * Required adaptations before rendering.
  373. *
  374. * @private
  375. */
  376. sap.m.Switch.prototype.onBeforeRendering = function() {
  377. var Swt = sap.m.Switch;
  378. this._sOn = this.getCustomTextOn() || Swt._oRb.getText("SWITCH_ON");
  379. this._sOff = this.getCustomTextOff() || Swt._oRb.getText("SWITCH_OFF");
  380. // flags
  381. this._bDisabled = !this.getEnabled();
  382. this._bCheckboxRendered = this.getName();
  383. };
  384. /**
  385. * Required adaptations after rendering.
  386. *
  387. * @private
  388. */
  389. sap.m.Switch.prototype.onAfterRendering = function() {
  390. var $SwitchCont,
  391. CSS_CLASS = "." + sap.m.SwitchRenderer.CSS_CLASS;
  392. // switch control container jQuery DOM reference
  393. $SwitchCont = this.$();
  394. // switch jQuery DOM reference
  395. this._$Switch = $SwitchCont.find(CSS_CLASS);
  396. // switch inner jQuery DOM reference
  397. this._$SwitchInner = this._$Switch.children(CSS_CLASS + "Inner");
  398. // switch handle jQuery DOM reference
  399. this._$Handle = this._$SwitchInner.children(CSS_CLASS + "Handle");
  400. // checkbox jQuery DOM reference
  401. this._$Checkbox = $SwitchCont.children("input");
  402. };
  403. /* =========================================================== */
  404. /* Event handlers */
  405. /* =========================================================== */
  406. /**
  407. * Handle the touch start event happening on the switch.
  408. *
  409. * @param {jQuery.Event} oEvent The event object.
  410. * @private
  411. */
  412. sap.m.Switch.prototype.ontouchstart = function(oEvent) {
  413. var oTargetTouch = oEvent.targetTouches[0],
  414. CSS_CLASS = sap.m.SwitchRenderer.CSS_CLASS;
  415. // mark the event for components that needs to know if the event was handled by the Switch
  416. oEvent.setMarked();
  417. // Process only single touches, if there is already a touch happening
  418. // or two simultaneous touches, then ignore them.
  419. if (sap.m.touch.countContained(oEvent.touches, this.getId()) > 1 || this._bDisabled) {
  420. return;
  421. }
  422. jQuery.sap.delayedCall(0, this._$Handle[0], "focus");
  423. this._$Switch.addClass(CSS_CLASS + "Pressed")
  424. .removeClass(CSS_CLASS + "Trans");
  425. this._iActiveTouch = oTargetTouch.identifier;
  426. this._bTempState = this.getState();
  427. this._iStartPressPosX = oTargetTouch.pageX;
  428. this._iPosition = this._$SwitchInner.position().left;
  429. this._bDragging = false;
  430. };
  431. /**
  432. * Handle the touch move event on the switch.
  433. *
  434. * @param {jQuery.Event} oEvent The event object.
  435. * @private
  436. */
  437. sap.m.Switch.prototype.ontouchmove = function(oEvent) {
  438. // mark the event for components that needs to know if the event was handled by the Switch
  439. oEvent.setMarked();
  440. // note: prevent native document scrolling
  441. oEvent.preventDefault();
  442. var oTouch,
  443. iPosition,
  444. fnTouch = sap.m.touch;
  445. if (this._bDisabled) {
  446. return;
  447. }
  448. // the active touch has to be in the list of touches
  449. jQuery.sap.assert(fnTouch.find(oEvent.touches, this._iActiveTouch), "missing touchend");
  450. // find the active touch
  451. oTouch = fnTouch.find(oEvent.changedTouches, this._iActiveTouch);
  452. // only respond to the active touch
  453. if (!oTouch ||
  454. // Note: do not rely on a specific granularity of the touchmove event.
  455. // On windows 8 surfaces, the touchmove events are dispatched even if
  456. // the user doesn’t move the touch point along the surface.
  457. oTouch.pageX === this._iStartPressPosX) {
  458. return;
  459. }
  460. this._bDragging = true;
  461. iPosition = ((this._iStartPressPosX - oTouch.pageX) * -1) + this._iPosition;
  462. if (sap.m.Switch._bRtl) {
  463. iPosition = -iPosition;
  464. }
  465. this._slide(iPosition);
  466. };
  467. /**
  468. * Handle the touch end event on the switch.
  469. *
  470. * @param {jQuery.Event} oEvent The event object.
  471. * @private
  472. */
  473. sap.m.Switch.prototype.ontouchend = function(oEvent) {
  474. // mark the event for components that needs to know if the event was handled by the Switch
  475. oEvent.setMarked();
  476. var fnTouch = sap.m.touch,
  477. assert = jQuery.sap.assert;
  478. if (this._bDisabled) {
  479. return;
  480. }
  481. assert(this._iActiveTouch !== undefined, "expect to already be touching");
  482. // if the touch we're tracking isn't changing here, ignore this event
  483. if (!fnTouch.find(oEvent.changedTouches, this._iActiveTouch)) {
  484. // In most cases, our active touch will be in the touches collection,
  485. // but we can't assert that because occasionally two touch end events can
  486. // occur at almost the same time with both having empty touches lists.
  487. return;
  488. }
  489. // the touchend for the touch we're monitoring
  490. assert(!fnTouch.find(oEvent.touches, this._iActiveTouch), "touch ended also still active");
  491. // remove active state
  492. this._$Switch.removeClass(sap.m.SwitchRenderer.CSS_CLASS + "Pressed");
  493. // change the state
  494. this.setState(this._bDragging ? this._bTempState : !this._bTempState, true);
  495. };
  496. /**
  497. * Handle the touchcancel event on the switch.
  498. *
  499. * @param {jQuery.Event} oEvent The event object.
  500. * @private
  501. */
  502. sap.m.Switch.prototype.ontouchcancel = sap.m.Switch.prototype.ontouchend;
  503. /**
  504. * Handle when the space or enter key are pressed.
  505. *
  506. * @param {jQuery.Event} oEvent The event object.
  507. * @private
  508. */
  509. sap.m.Switch.prototype.onsapselect = function(oEvent) {
  510. // mark the event for components that needs to know if the event was handled by the Switch
  511. oEvent.setMarked();
  512. // note: prevent document scrolling when space keys is pressed
  513. oEvent.preventDefault();
  514. this.setState(!this.getState());
  515. };
  516. /* =========================================================== */
  517. /* API method */
  518. /* =========================================================== */
  519. sap.m.Switch.prototype.getFocusDomRef = function() {
  520. return this.getDomRef() ? this._$Handle[0] : null;
  521. };
  522. /**
  523. * Change the switch state between on and off.
  524. *
  525. * @param {boolean} bState
  526. * @public
  527. * @return {sap.m.Switch} <code>this</code> to allow method chaining.
  528. */
  529. sap.m.Switch.prototype.setState = function(bState, bTriggerEvent) {
  530. var sState,
  531. bNewState,
  532. Swt = sap.m.Switch,
  533. CSS_CLASS = sap.m.SwitchRenderer.CSS_CLASS;
  534. if (this._bDisabled && bTriggerEvent) {
  535. return this;
  536. }
  537. bNewState = !(this.getState() === bState);
  538. if (bNewState) {
  539. this.setProperty("state", bState, true); // validation and suppress re-rendering
  540. }
  541. if (!this._$Switch) {
  542. return this;
  543. }
  544. bState = this.getState();
  545. sState = bState ? this._sOn : this._sOff;
  546. if (bNewState) {
  547. this._$Handle[0].setAttribute("data-sap-ui-swt", sState);
  548. if (this._bCheckboxRendered) {
  549. this._$Checkbox[0].setAttribute("checked", bState);
  550. this._$Checkbox[0].setAttribute("value", sState);
  551. }
  552. bState ? this._$Switch.removeClass(CSS_CLASS + "Off").addClass(CSS_CLASS + "On")
  553. : this._$Switch.removeClass(CSS_CLASS + "On").addClass(CSS_CLASS + "Off");
  554. if (bTriggerEvent) {
  555. if (Swt._bUseTransition) {
  556. jQuery.sap.delayedCall(Swt._TRANSITIONTIME, this, function() {
  557. this.fireChange({ state: bState });
  558. }, [bState]);
  559. } else {
  560. this.fireChange({ state: bState });
  561. }
  562. }
  563. }
  564. this._$Switch.addClass(CSS_CLASS + "Trans");
  565. // remove inline styles
  566. this._$SwitchInner.removeAttr("style");
  567. return this;
  568. };