</head>
<body ondragstart="return false" onselectstart="return false">
- <div class="white_btn" id="play0"></div>
- <div class="white_btn" id="play2"></div>
- <div class="white_btn" id="play4"></div>
- <div class="white_btn" id="play5"></div>
- <div class="white_btn" id="play7"></div>
- <div class="white_btn" id="play9"></div>
- <div class="white_btn" id="play11"></div>
- <div class="white_btn" id="play12"></div>
+ <div class="button white_btn" id="play0"></div>
+ <div class="button white_btn" id="play2"></div>
+ <div class="button white_btn" id="play4"></div>
+ <div class="button white_btn" id="play5"></div>
+ <div class="button white_btn" id="play7"></div>
+ <div class="button white_btn" id="play9"></div>
+ <div class="button white_btn" id="play11"></div>
+ <div class="button white_btn" id="play12"></div>
- <div class="black_btn" style="left: 8.6%" id="play1"></div>
- <div class="black_btn" style="left: 21.2%" id="play3"></div>
- <div class="black_btn" style="left: 45.8%" id="play6"></div>
- <div class="black_btn" style="left: 58.4%" id="play8"></div>
- <div class="black_btn" style="left: 70.9%" id="play10"></div>
- <div class="black_btn" style="left: 95%" id="play13"></div>
+ <div class="button black_btn" style="left: 8.6%" id="play1"></div>
+ <div class="button black_btn" style="left: 21.2%" id="play3"></div>
+ <div class="button black_btn" style="left: 45.8%" id="play6"></div>
+ <div class="button black_btn" style="left: 58.4%" id="play8"></div>
+ <div class="button black_btn" style="left: 70.9%" id="play10"></div>
+ <div class="button black_btn" style="left: 95%" id="play13"></div>
<div class="header">
<div id="back"></div>
*/
/*jslint devel: true*/
-/*global tizen, $, app: true */
-
-var App = null, app = null;
-
-(function () { // strict mode wrapper
- 'use strict';
-
- /**
- * Creates a new application object
- *
- * @class Application
- */
- App = function App() {
- this.init();
- };
-
- App.prototype = {
- /**
- * @type {Array}
- */
- audio: [],
-
- /**
- * @type {Array}
- */
+/*global $, Audio, window, tizen, app: true */
+var piano;
+function Piano() {
+ "use strict";
+}
+
+(function () {
+ "use strict";
+ Piano.prototype = {
touchPianoKey: [],
+ audio: []
+ };
- /**
- * Initialization
- */
- init: function App_init() {
- this.bindEvents();
- this.audioInit();
- },
-
- /**
- * binds application events
- */
- bindEvents: function bindEvents() {
- $(document).bind('touchstart touchmove', this.onPianoKeyTouchDown.bind(this));
- $(document).bind('touchend', this.onPianoKeyTouchUp.bind(this));
-
- $('#back').bind('touchstart', function (event) {
- event.preventDefault();
- event.stopPropagation();
- $(this).addClass('active');
- tizen.application.getCurrentApplication().exit();
- });
-
- $('#back').bind('touchend', function (event) {
- $(this).removeClass('active');
- });
- },
+ Piano.prototype.bindEvents = function bindEvents() {
+ var self = this;
+
+ $(".button").bind('touchstart touchmove', function (e) { self.onPianoKeyTouchDown(e); });
+ $(".button").bind('touchend', function (e) { self.onPianoKeyTouchUp(e); });
+ $('#back').bind('touchstart', function (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(this).addClass('active');
+ tizen.application.getCurrentApplication().exit();
+ });
+
+ $('#back').bind('touchend', function (event) {
+ $(this).removeClass('active');
+ });
+ };
- onPianoKeyTouchDown: function onPianoKeyTouchDown(data) {
- data.originalEvent.preventDefault();
- var element, touch, i, len;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1) {
- touch = data.originalEvent.changedTouches[i];
- element = document.elementFromPoint(touch.clientX, touch.clientY);
- if (element) {
- if (this.touchPianoKey[touch.identifier] !== element.id) {
- $('#' + this.touchPianoKey[touch.identifier]).removeClass('pressed');
- this.playAudioByElement(element, touch.identifier);
- }
+ Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data) {
+ data.originalEvent.preventDefault();
+ var element, touch, i, len;
+ for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1) {
+ touch = data.originalEvent.changedTouches[i];
+ element = document.elementFromPoint(touch.clientX, touch.clientY);
+ if (element) {
+ if (this.touchPianoKey[touch.identifier] !== element.id) {
+ $('#' + this.touchPianoKey[touch.identifier]).removeClass('pressed');
+ this.playAudioByElement(element, touch.identifier);
}
}
- },
-
- onPianoKeyTouchUp: function onPianoKeyTouchUp(data) {
- var i, touchId, len;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1) {
- touchId = data.originalEvent.changedTouches[i].identifier;
+ }
+ };
- $('#' + this.touchPianoKey[touchId]).removeClass('pressed');
- this.touchPianoKey[touchId] = undefined;
- }
- },
+ Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data) {
+ var i, touchId, len;
+ for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1) {
+ touchId = data.originalEvent.changedTouches[i].identifier;
+ $('#' + this.touchPianoKey[touchId]).removeClass('pressed');
+ this.touchPianoKey[touchId] = undefined;
+ }
+ };
- audioInit: function audioInit() {
- var i;
- for (i = 0; i <= 13; i += 1) {
- this.audio[i] = document.createElement('audio');
- this.audio[i].name = i;
- }
- },
+ Piano.prototype.audioInit = function audioInit() {
+ var i;
+ for (i = 0; i <= 13; i += 1) {
+ this.audio[i] = document.createElement('audio');
+ this.audio[i].name = i;
+ }
+ };
- /**
- * Plays sound for specified element
- * @param {Object} element
- * @param {Number} touchId
- */
- playAudioByElement: function playAudioByElement(element, touchId) {
- var nrAudio = parseInt(element.id.replace(/[a-zA-Z]*/, ''), 10);
- $(element).addClass('pressed');
- this.touchPianoKey[touchId] = element.id;
- if (this.audio[nrAudio]) {
- if (this.audio[nrAudio].src) {
- this.audio[nrAudio].pause();
- this.audio[nrAudio].currentTime = 0;
- } else {
- this.audio[nrAudio].src = this.audio[nrAudio].name + ".wav";
- }
- this.audio[nrAudio].play();
+ /**
+ * Plays sound for specified element
+ * @param {Object} element
+ * @param {Number} touchId
+ */
+ Piano.prototype.playAudioByElement = function playAudioByElement(element, touchId) {
+ var nrAudio = parseInt(element.id.replace(/[a-zA-Z]*/, ''), 10);
+ $(element).addClass('pressed');
+ this.touchPianoKey[touchId] = element.id;
+ if (this.audio[nrAudio]) {
+ if (this.audio[nrAudio].src) {
+ this.audio[nrAudio].pause();
+ this.audio[nrAudio].currentTime = 0;
+ } else {
+ this.audio[nrAudio].src = this.audio[nrAudio].name + ".wav";
}
+ this.audio[nrAudio].play();
}
};
+
+ Piano.prototype.init = function init() {
+ this.bindEvents();
+ this.audioInit();
+ };
}());
+piano = new Piano();
$(document).ready(function () {
- 'use strict';
- app = new App();
+ "use strict";
+ piano.init();
});
projects / samples / web / Piano.git / commitdiff
