added karm conf

karma-conf.js

@@ -0,0 +1,68 @@
+// Karma configuration
+// Generated on Wed Jun 11 2014 23:05:41 GMT+0100 (BST)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+        'src/qwerty-hancock.js',
+        'tests/*.js'      
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome', 'Firefox', 'ChromeCanary', 'Safari', 'PhantomJS', 'Opera'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false
+  });
+};

src/qwerty-hancock.js

@@ -1,5 +1,5 @@
 /*
- * Qwerty Hancock keyboard library v0.3
+ * Qwerty Hancock keyboard library v0.4
  * Copyright 2012-14, Stuart Memo
  *
  * Licensed under the MIT License
@@ -9,7 +9,7 @@
  */
 
 (function (window, undefined) {
-    var version = '0.3',
+    var version = '0.4',
         settings = {},
         mouse_is_down = false,
         keysDown = {},
@@ -65,12 +65,20 @@
             blackKeyColour: user_settings.blackKeyColour || '#000',
             activeColour:   user_settings.activeColour || 'yellow',
             borderColour:   user_settings.borderColour || '#000',
-            keyboardLayout: user_settings.keyboardLayout || 'en',
+            keyboardLayout: user_settings.keyboardLayout || 'en'
         };
 
         settings.startOctave = parseInt(settings.startNote.charAt(1), 10);
+<<<<<<< HEAD
         createKeyboard(settings);
         return settings;
+=======
+
+        createKeyboard();
+
+        console.log(this);
+        addListeners.call(this, document.getElementById(settings.id));
+>>>>>>> 9551e86b847b88cc1c3db5a7b4556594c6c8a8f1
     };
 
     /**
@@ -260,12 +268,6 @@
     * @param {object} el The element to add the event listeners to.
     */
     var addListenersToKey = function (key) {
-        if ('ontouchstart' in document.documentElement) {
-            key.el.addEventListener('touchstart', mouseDown);
-            key.el.addEventListener('touchend', mouseUp);
-            key.el.addEventListener('touchleave', mouseUp);
-            key.el.addEventListener('touchcancel', mouseUp);
-        } 
     };
 
     /**
@@ -413,9 +415,10 @@
     };
 
     /**
-     * Qwerty Hancock constructor.
-     * @param {object} settings Optional user settings.
+     * Add event listeners to keyboard.
+     * @param {element} keyboard_element
      */
+<<<<<<< HEAD
     var QwertyHancock = function (settings) {
         var that = this,
             keyboard_element;
@@ -424,31 +427,67 @@
         settings = init(settings);
 
         keyboard_element = document.getElementById(settings.id);
+=======
+    var addListeners = function (keyboard_element) {
+        var that = this;
+>>>>>>> 9551e86b847b88cc1c3db5a7b4556594c6c8a8f1
 
+        // Key is pressed down on keyboard.
         window.addEventListener('keydown', function (key) {
             keyboardDown(key, that.keyDown);
         });
 
+        // Key is released on keyboard.
         window.addEventListener('keyup', function (key) {
             keyboardUp(key, that.keyUp);
         });
 
+        // Mouse is clicked down on keyboard element.
         keyboard_element.addEventListener('mousedown', function (event) {
             mouseDown(event.target, that.keyDown);
         });
 
+        // Mouse is released from keyboard element.
         keyboard_element.addEventListener('mouseup', function (event) {
             mouseUp(event.target, that.keyUp);
         });
 
+        // Mouse is moved over keyboard element.
         keyboard_element.addEventListener('mouseover', function (event) {
             mouseOver(event.target, that.keyDown);
         });
 
+        // Mouse is moved out of keyvoard element.
         keyboard_element.addEventListener('mouseout', function (event) {
             mouseOut(event.target, that.keyUp);
         });
 
+        // Device supports touch events.
+        if ('ontouchstart' in document.documentElement) {
+            keyboard_element.addEventListener('touchstart', function (event) {
+                mouseDown(event.target, that.keyDown);
+            });
+
+            keyboard_element.addEventListener('touchend', function (event) {
+                mouseUp(event.target, that.keyUp);
+            });
+
+            keyboard_element.addEventListener('touchleave', function (event) {
+                mouseOut(event.target, that.keyUp);
+            });
+
+            keyboard_element.addEventListener('touchcancel', function (event) {
+                mouseOut(event.target, that.keyUp);
+            });
+        } 
+    };
+
+    /**
+     * Qwerty Hancock constructor.
+     * @param {object} settings Optional user settings.
+     */
+    var QwertyHancock = function (settings) {
+        this.version = version;
 
         this.keyDown = function () {
             // Placeholder function.
@@ -457,6 +496,8 @@
         this.keyUp = function () {
             // Placeholder function.
         };
+
+        init.call(this, settings);
     };
 
     window.QwertyHancock = QwertyHancock;

tests/qh-tests.js

@@ -0,0 +1,68 @@
+'use strict';
+
+describe('Qwerty Hancock tests', function () {
+    var element;
+
+    beforeEach(function () {
+        element = document.createElement('div');
+        element.id = 'keyboard';
+        document.body.appendChild(element);
+    });
+
+    it('Can create keyboard without any user settings', function () {
+        var qh = new QwertyHancock();
+
+        expect(element.id).toBe('keyboard');
+        expect(element.offsetWidth).toBe(600);
+        expect(element.offsetHeight).toBe(150);
+        expect(element.querySelector('ul').offsetWidth).toBe(600);
+        expect(element.querySelector('ul').offsetHeight).toBe(150);
+    });
+
+    it('Can create keyboard with user specified dimensions', function () {
+        var qh = new QwertyHancock({width: 500, height: 300});
+
+        expect(element.offsetWidth).toBe(500);
+        expect(element.offsetHeight).toBe(300);
+    });
+
+    it('White keys should be white by default', function () {
+        var qh = new QwertyHancock(),
+            white_keys = element.querySelectorAll('li[data-note-type="white"]');
+
+        for (var i = 0; i < white_keys.length; i++) {
+            expect(white_keys[i].style.backgroundColor).toBe('rgb(255, 255, 255)');
+        }
+    });
+
+    it('Black keys should be black by default', function () {
+        var qh = new QwertyHancock(),
+            black_keys = element.querySelectorAll('li[data-note-type="black"]');
+
+        for (var i = 0; i < black_keys.length; i++) {
+            expect(black_keys[i].style.backgroundColor).toBe('rgb(0, 0, 0)');
+        }
+    });
+
+    it('White keys should be user defined colour', function () {
+        var qh = new QwertyHancock({whiteKeyColour: '#333'}),
+            white_keys = element.querySelectorAll('li[data-note-type="white"]');
+
+        for (var i = 0; i < white_keys.length; i++) {
+            expect(white_keys[i].style.backgroundColor).toBe('rgb(51, 51, 51)');
+        }
+    });
+
+    it('Black keys should be user defined colour', function () {
+        var qh = new QwertyHancock({blackKeyColour: 'red'}),
+            black_keys = element.querySelectorAll('li[data-note-type="black"]');
+
+        for (var i = 0; i < black_keys.length; i++) {
+            expect(black_keys[i].style.backgroundColor).toBe('red');
+        }
+    });
+
+    afterEach(function () {
+        document.body.removeChild(element);
+    });
+});