From fc15f4103aa220848b704a867704cfae87a306da Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 21 May 2013 17:06:52 +0530 Subject: [PATCH 01/63] Added .gitignore, GruntFile.js for grunt build, removed inline JSHint directives from js files, they all driven from .jshintrc now, make few code changes in order to get the better JSHint compliance alongwith package.json which has few dependencies to do the grunt build. --- .gitignore | 9 + .jshintrc | 15 ++ GruntFile.js | 105 ++++++++++ demo/js/fb.config.js | 8 +- demo/js/fb.friends.list.js | 16 +- js/_.config.js | 8 +- js/_.helper.js | 395 ++++++++++++++++++------------------- js/_.main.js | 49 ++--- package.json | 50 +++-- 9 files changed, 383 insertions(+), 272 deletions(-) create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 GruntFile.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3e06722 --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +dist +.project +.settings +*~ +*.diff +*.patch +/*.html +.DS_Store +node_modules diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..ef3407f --- /dev/null +++ b/.jshintrc @@ -0,0 +1,15 @@ +{ + "curly": true, + "eqnull": true, + "eqeqeq": true, + "undef": true, + "globals": { + "jQuery": true, + "console": true, + "module": true, + "document": true, + "window": true, + "FB": true, + "localStorage": true + } +} diff --git a/GruntFile.js b/GruntFile.js new file mode 100644 index 0000000..6fa1f90 --- /dev/null +++ b/GruntFile.js @@ -0,0 +1,105 @@ +/* + * grunt + * http://gruntjs.com/ + * + * Copyright (c) 2013 "Cowboy" Ben Alman + * Licensed under the MIT license. + * https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT + */ + + +// The first part is the "wrapper" function, which encapsulates your Grunt configuration +module.exports = function(grunt) { + + 'use strict'; + + // Project configuration + grunt.initConfig({ + // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. + pkg: grunt.file.readJSON('package.json'), + // Configure the copy task to move files from the development to production folders + /*copy: { // Task + target: { + files: { + 'dist/': ['index.html', 'demo/**'] // 'destination': 'source' + } + } + },*/ + uglify: { // Task + options: { + // The banner is inserted at the top of the output + banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' + }, + dist: { // Target + files: { // Dictionary of files + 'dist/js/<%= pkg.name %>.min.js': ['js/_.config.js', 'js/_.main.js', 'js/_.helper.js'], + 'dist/demo/js/fb.friends.min.js': ['demo/js/fb.config.js', 'demo/js/fb.friends.list.js'], + 'dist/js/libs/jquery.min.js': ['js/libs/jquery.js'], + 'dist/js/libs/require.min.js': ['js/libs/require.js'] + } + } + }, + htmlmin: { // Task + dist: { // Target + options: { // Target options + /*removeCommentsFromCDATA: true, + // https://github.com/yeoman/grunt-usemin/issues/44 + //collapseWhitespace: true, + collapseBooleanAttributes: true, + removeAttributeQuotes: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeOptionalTags: true*/ + + removeComments: true, + collapseWhitespace: false + }, + files: { // Dictionary of files + 'dist/index.html': 'index.html', // 'destination': 'source' + 'dist/demo/facebook_friends_list.html': 'demo/facebook_friends_list.html' + } + } + }, + cssmin: { // Task + combine: { + files: { // Dictionary of files + 'dist/css/style.min.css': ['css/style.css'], + 'dist/demo/css/style.min.css': ['demo/css/style.css'] + } + } + }, + qunit: { // Task + files: ['test/**/*.html'] + }, + jshint: { // Task + // Define the files to lint + files: ['Gruntfile.js', 'js/*.js', 'demo/js/*.js'], + // Configure JSHint (documented at http://www.jshint.com/docs/) + options: { + // More options here if you want to override JSHint defaults + jshintrc: '.jshintrc' + } + }, + watch: { // Task + files: ['<%= jshint.files %>'], + tasks: ['jshint'] + } + }); + + // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm. + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-htmlmin'); + //grunt.loadNpmTasks('grunt-contrib-concat'); + + // Let's set up some tasks + grunt.registerTask('test', ['jshint']); + + // The default task can be run just by typing "grunt" on the command line + grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'htmlmin']); + +}; diff --git a/demo/js/fb.config.js b/demo/js/fb.config.js index 638e67b..5648319 100644 --- a/demo/js/fb.config.js +++ b/demo/js/fb.config.js @@ -2,11 +2,7 @@ * @version 1.0 */ -/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */ - -/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4 */ - -(function (FBDemo, undefined) { +(function (FBDemo, $, undefined) { FBDemo.config = { debug : true, appId : '123717221132767', @@ -16,4 +12,4 @@ /** * Check to evaluate whether 'FBDemo' exists in the global namespace - if not, assign window.FBDemo an object literal */ -}(window.FBDemo = window.FBDemo || {}, jQuery)); \ No newline at end of file +}(window.FBDemo = window.FBDemo || {}, jQuery)); diff --git a/demo/js/fb.friends.list.js b/demo/js/fb.friends.list.js index 992c88e..46d558e 100644 --- a/demo/js/fb.friends.list.js +++ b/demo/js/fb.friends.list.js @@ -3,20 +3,14 @@ * @version 1.0 */ -/* FBDemo (our namespace name) and undefined are passed here - * To ensure 1. Namespace can be modified locally and isn't +/* FBDemo (our namespace name) and undefined are passed here + * To ensure 1. Namespace can be modified locally and isn't * overwritten outside of our function context - * 2. The value of undefined is guaranteed as being truly - * Undefined. This is to avoid issues with undefined being + * 2. The value of undefined is guaranteed as being truly + * Undefined. This is to avoid issues with undefined being * Mutable pre-ES5. */ -/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */ - -/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4, newcap:true */ - -/*global FB:false, jQuery, window*/ - (function (FBDemo, $, undefined) { /** * Logging function, for debugging mode @@ -129,4 +123,4 @@ /** * Check to evaluate whether 'FBDemo' exists in the global namespace - if not, assign window.FBDemo an object literal */ -}(window.FBDemo = window.FBDemo || {}, jQuery)); \ No newline at end of file +}(window.FBDemo = window.FBDemo || {}, jQuery)); diff --git a/js/_.config.js b/js/_.config.js index 8241f40..b43a185 100644 --- a/js/_.config.js +++ b/js/_.config.js @@ -10,11 +10,7 @@ * Any value that may change in the future */ -/*jslint sloppy: true */ - -/*global FB:false, jQuery, window, document*/ - -(function (MODULE, undefined) { +(function (MODULE, $, undefined) { MODULE.config = { language: 'english', debug: true, @@ -51,4 +47,4 @@ /** * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal. */ -}(window.MODULE = window.MODULE || {}, jQuery)); \ No newline at end of file +}(window.MODULE = window.MODULE || {}, jQuery)); diff --git a/js/_.helper.js b/js/_.helper.js index f7437e6..fc5764d 100644 --- a/js/_.helper.js +++ b/js/_.helper.js @@ -2,276 +2,271 @@ * @version 1.0 */ -/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */ - -/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4, newcap:true */ - -/*global FB:false, jQuery, window, document, localStorage*/ - (function (MODULE, $, undefined) { - /* + /* * Singletons serve as a namespace provider which isolate implementation code * from the global namespace so as to provide a single point of access for functions, * this is useful for organizing code into logical sections. * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. * This way it's always present when the script is executed and doesn't have to be instantiated separately. - */ + */ MODULE.helper = (function () { function _helper() { - /* - * Object of the current object - */ - var _this = this; + /* + * Object of the current object + */ + var _this = this, - /* + /* * This method return the element using javaScript getElementById() method. * This is the private method not meant for use as a public method. - */ - var id = function (el) { - return document.getElementById(el); - }; + */ + id = function (el) { + return document.getElementById(el); + }, + + /* + * Store information in a cookie + * Accept three param name, value, days + */ + setCookie = function (name, value, days) { + var date = "", + expires = ""; + + if (days) { + date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toGMTString(); + } + + document.cookie = name + "=" + value + expires + "; path=/"; + }, - /* + /* + * Get cookie from user machine + * Accept one parameters name + * name : name of the cookie + */ + getCookie = function (name) { + var nameEQ = name + "=", + i, + ca = document.cookie.split(';'); + for (i = 0; i < ca.length; i += 1) { + var c = ca[i]; + while (c.charAt(0) === ' ') { + c = c.substring(1, c.length); + } + if (c.indexOf(nameEQ) === 0) { + return c.substring(nameEQ.length, c.length); + } + } + return null; + }, + + /* + * Erase or delete cookie from user machine + * Accept one parameters name + * name : name of the cookie + */ + removeCookie = function (name) { + setCookie(name, "", -1); + }; + + /* * Replace multiple value in a single string. * Accept two parameters str, hash - * str : String on which replace operation is to be performed - * hash : JSON object contain string to be replaced with there replaced value + * str : String on which replace operation is to be performed + * hash : JSON object contain string to be replaced with there replaced value * Return the new string at the end. - */ - this.multiReplace = function (str, hash) { - var key; - for (key in hash) { - if (Object.prototype.hasOwnProperty.call(hash, key)) { - str = str.replace(new RegExp(key, 'g'), hash[key]); - } - } - return str; - }; + */ + this.multiReplace = function (str, hash) { + var key; + for (key in hash) { + if (Object.prototype.hasOwnProperty.call(hash, key)) { + str = str.replace(new RegExp(key, 'g'), hash[key]); + } + } + return str; + }; - /* + /* * Set the CSS on a particular element * Accept two parameters el, styles - * el : The name of element on which CSS is to be apply. - * styles : Various CSS property with their values. Accept data in JSON format + * el : The name of element on which CSS is to be apply. + * styles : Various CSS property with their values. Accept data in JSON format * This method calls a private method setStyle - */ - this.setCSS = function (el, styles) { - var prop; - for (prop in styles) { - if (!styles.hasOwnProperty(prop)) continue; - _this.setStyle(el, prop, styles[prop]); - } - }; + */ + this.setCSS = function (el, styles) { + var prop; + for (prop in styles) { + if (styles.hasOwnProperty(prop)) { + _this.setStyle(el, prop, styles[prop]); + } + } + }; - /* + /* * Apply the CSS to the given element * Accept three parameters elements, prop, val - * element : The element on which CSS is to be apply. + * element : The element on which CSS is to be apply. * This method will automatically search for element using getElementById() method. - * prop : CSS properties - * val : Vale for CSS property + * prop : CSS properties + * val : Vale for CSS property */ - this.setStyle = function (el, prop, val) { - id(el).style[prop] = val; - }; + this.setStyle = function (el, prop, val) { + id(el).style[prop] = val; + }; - /* + /* * Check if the given element has given class assign or not. * Accept two parameters el, name - * el : Element for testing. This method will search for element using JavaScript getElementById() method. - * name : name of class to be test + * el : Element for testing. This method will search for element using JavaScript getElementById() method. + * name : name of class to be test * This method return true and false - */ - this.hasClass = function (el, name) { - el = id(el); - return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className); - }; + */ + this.hasClass = function (el, name) { + el = id(el); + return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className); + }; - /* + /* * Add class to the given element * Accept two parameters el, name - * el : element on which class to be add - * name : name of class - */ - this.addClass = function (el, name) { - if (!_this.hasClass(el, name)) { - el = id(el); - el.className += (el.className ? ' ' : '') + name; - } - }; + * el : element on which class to be add + * name : name of class + */ + this.addClass = function (el, name) { + if (!_this.hasClass(el, name)) { + el = id(el); + el.className += (el.className ? ' ' : '') + name; + } + }; - /* + /* * Remove class from given element * Accept two parameters el, name - * el : element from which class is to be remove - * name : name of the class to be remove - */ - this.removeClass = function (el, name) { - if (_this.hasClass(el, name)) { - el = id(el); - el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, ''); - } - }; + * el : element from which class is to be remove + * name : name of the class to be remove + */ + this.removeClass = function (el, name) { + if (_this.hasClass(el, name)) { + el = id(el); + el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, ''); + } + }; - /* + /* * Return the URI of site * Return protocol, hostname and port if found * - */ - this.getDomain = function () { - var port = "", - url = ""; + */ + this.getDomain = function () { + var port = "", + url = ""; - if (window.location.port) { - port = ":" + window.location.port; - } - url = window.location.protocol + "//" + window.location.hostname + port + "/"; - return url; - }; + if (window.location.port) { + port = ":" + window.location.port; + } + url = window.location.protocol + "//" + window.location.hostname + port + "/"; + return url; + }; - /* + /* * This method will return the query string from the URL of the website * Accept two parameters key, default_ - * key : The name of the key who's value need to be fetch - * default_ : The default value which will return when nothing will found or key does not exists. + * key : The name of the key who's value need to be fetch + * default_ : The default value which will return when nothing will found or key does not exists. * If not pass anything then it will return blank value. - */ - this.getQueryString = function (key, default_) { - if (default_ === null) { - default_ = ""; - } + */ + this.getQueryString = function (key, default_) { + if (default_ === null) { + default_ = ""; + } - key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); - var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"), - qs = regex.exec(window.location.href); + key = key.replace(/\[/,"\\[").replace(/\]/,"\\]"); + var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"), + qs = regex.exec(window.location.href); - if (qs === null) { - return default_; - } else { - return qs[1]; - } - }; + if (qs === null) { + return default_; + } else { + return qs[1]; + } + }; - /* + /* * This method will check for blank value in the provided string * This will return true if provided string contain blank value and false if not - */ - this.isBlank = function (string) { - var isNonblank_re = /\S/; - return String(string).search(isNonblank_re) === -1; - }; - - - /* - * Store information in a cookie - * Accept three param name, value, days - */ - var setCookie = function (name, value, days) { - if (days) { - var date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - var expires = "; expires=" + date.toGMTString(); - } else { - var expires = ""; - } - document.cookie = name + "=" + value + expires + "; path=/"; - }; - - /* - * Get cookie from user machine - * Accept one parameters name - * name : name of the cookie - */ - var getCookie = function (name) { - var nameEQ = name + "=", - i, - ca = document.cookie.split(';'); - for (i = 0; i < ca.length; i += 1) { - var c = ca[i]; - while (c.charAt(0) === ' ') { - c = c.substring(1, c.length); - } - if (c.indexOf(nameEQ) === 0) { - return c.substring(nameEQ.length, c.length); - } - } - return null; - }; - - - /* - * Erase or delete cookie from user machine - * Accept one parameters name - * name : name of the cookie - */ - var removeCookie = function (name) { - setCookie(name, "", -1); - }; + */ + this.isBlank = function (string) { + var isNonblank_re = /\S/; + return String(string).search(isNonblank_re) === -1; + }; - /* + /* * Store information to client machine * Accept two parameters name, value - * name : name of the localStorage - * value : value for the localStorage + * name : name of the localStorage + * value : value for the localStorage * Store information in HTML5 localstorage if available * else store information in cookie - */ - this.setInfo = function (name, value) { - if (typeof window.localStorage !== 'undefined') { - localStorage.setItem(name, value); - } else { - setCookie(name, value); - } - }; + */ + this.setInfo = function (name, value) { + if (typeof window.localStorage !== 'undefined') { + localStorage.setItem(name, value); + } else { + setCookie(name, value); + } + }; - /* + /* * Get information from client machine * Accept two parameters name, checkCookie * name : name of the localstorage - * checkCookie : This will either be true or false. + * checkCookie : This will either be true or false. * If set to true then scan cookie even if user system support localStorage * Get information for HTML5 localstorage if available * else get information from cookie - */ - this.getInfo = function (name, checkCookie) { - var value = ""; - if (typeof window.localStorage !== 'undefined') { - value = localStorage.getItem(name); - } else { - value = getCookie(name); - } + */ + this.getInfo = function (name, checkCookie) { + var value = ""; + if (typeof window.localStorage !== 'undefined') { + value = localStorage.getItem(name); + } else { + value = getCookie(name); + } - if (checkCookie === true) { - value = getCookie(name); - } - return value; - }; + if (checkCookie === true) { + value = getCookie(name); + } + return value; + }; - /* + /* * Remove information from client machine * Accept two parameters name, checkCookie - * name : name of the localstorage for removing it permanently - * checkCookie : This will either be true or false. + * name : name of the localstorage for removing it permanently + * checkCookie : This will either be true or false. * If set to true then scan cookie and remove if found even if user system support localStorage * Remove information for HTML5 localstorage if available * else remove information from cookie - */ - this.removeInfo = function (name, checkCookie) { - if (typeof window.localStorage !== 'undefined') { - localStorage.removeItem(name); - } else { - removeCookie(name); - } - if (checkCookie === true) { - removeCookie(name); - } - }; + */ + this.removeInfo = function (name, checkCookie) { + if (typeof window.localStorage !== 'undefined') { + localStorage.removeItem(name); + } else { + removeCookie(name); + } + if (checkCookie === true) { + removeCookie(name); + } + }; - this.init = function () { + this.init = function () { return this; /*returning this from a method is a common way to allow "chaining" of methods together*/ }; - return this.init(); /*this refer to MODULE.helper.init()*/ + return this.init(); /*this refer to MODULE.helper.init()*/ } return new _helper(); /*creating a new object of helper rather then a funtion*/ @@ -280,4 +275,4 @@ /** * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal */ -}(window.MODULE = window.MODULE || {}, jQuery)); \ No newline at end of file +}(window.MODULE = window.MODULE || {}, jQuery)); diff --git a/js/_.main.js b/js/_.main.js index fac9f55..3a9a472 100644 --- a/js/_.main.js +++ b/js/_.main.js @@ -9,12 +9,6 @@ * mutable pre-ES5. */ -/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */ - -/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4, newcap:true */ - -/*global FB:false, jQuery, window, document*/ - (function (MODULE, $, undefined) { /** @@ -34,44 +28,45 @@ $.toType = (function toType(global) { return function (obj) { if (obj === global) { - return "global"; + return 'global'; } return ({}).toString.call(obj).match(/\s([a-z|A-Z]+)/)[1].toLowerCase(); }; }(this)); - /*$.toType(window); //"global" (all browsers) - $.toType([1,2,3]); //"array" (all browsers) - $.toType(/a-z/); //"regexp" (all browsers) - $.toType(JSON); //"json" (all browsers) - $.toType(null); //"null" (all browsers) - $.toType(undefined); //"undefined" (all browsers)*/ + /*$.toType(window); //'global' (all browsers) + $.toType([1,2,3]); //'array' (all browsers) + $.toType(/a-z/); //'regexp' (all browsers) + $.toType(JSON); //'json' (all browsers) + $.toType(null); //'null' (all browsers) + $.toType(undefined); //'undefined' (all browsers)*/ //etc.. /** * Private properties */ - var foo = "foo", - bar = "bar"; + var name = 'Arif', + age = 30; /** * Private method */ /* Benefits: - * 1. Makes it easier to understand "functions as an object". + * 1. Makes it easier to understand 'functions as an object'. * 2. It enforces good semicolon habits. * 3. Doesn't have much of the baggage traditionally associated with functions and scope. */ - var getData = function () { + var getName = function () { + $.log('My name is ' + name + 'I am ' + age + ' old'); }; /** * Public methods and properties */ - MODULE.foobar = "foobar"; + MODULE.title = 'Interactive Developer'; MODULE.sayHello = function () { - $.log("hello world"); + $.log('hello world'); }; /* @@ -145,7 +140,7 @@ js = d.createElement('script'); js.id = id; js.async = true; - js.src = "//connect.facebook.net/en_US/all.js"; + js.src = '//connect.facebook.net/en_US/all.js'; d.getElementsByTagName('head')[0].appendChild(js); }(document)); }; @@ -155,22 +150,16 @@ */ this.facebookLogin = function () { FB.login(function (response) { - if (response.status === "connected") { - $.log("User is logged in and granted some permissions."); + if (response.status === 'connected') { + $.log('User is logged in and granted some permissions.'); } else if ((response.status === 'not_authorized') || response.authResponse === null) { - $.log("User has not granted permissions!"); + $.log('User has not granted permissions!'); } }, { scope: 'publish_stream' }); }; - /** - * private method - */ - var privateMethod = function () { - }; - /** * Init call */ @@ -187,4 +176,4 @@ /** * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal */ -}(window.MODULE = window.MODULE || {}, jQuery)); \ No newline at end of file +}(window.MODULE = window.MODULE || {}, jQuery)); diff --git a/package.json b/package.json index 81bf38d..acda95a 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,32 @@ { - "author" : { - "name" : "Mohammed Arif", - "email" : "arif_iq@yahoo.co.in" - }, - "name" : "javascript-boilerplate", - "title" : "JavaScript-Boilerplate", - "description" : "JavaScript Boilerplate is the collection of best practices.", - "keywords" : ["javascript-boilerplate", "js-boilerplate", "boilerplate", "javascript"], - "repository" : { - "type" : "git", - "url" : "https://github.com/mdarif/JavaScript-Boilerplate.git" - }, - "dependencies": { - }, - "devDependencies": {}, - "main" : "./js/_.main.js", - "version" : "1.0.2", - "license" : "MIT/GPL" -} \ No newline at end of file + "author": { + "name": "Mohammed Arif", + "email": "arif_iq@yahoo.co.in" + }, + "name": "javascript-boilerplate", + "title": "JavaScript-Boilerplate", + "description": "JavaScript Boilerplate is the collection of best practices.", + "keywords": [ + "javascript-boilerplate", + "js-boilerplate", + "boilerplate", + "javascript" + ], + "repository": { + "type": "git", + "url": "https://github.com/mdarif/JavaScript-Boilerplate.git" + }, + "dependencies": {}, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-uglify": "~0.2.0", + "grunt-contrib-jshint": "~0.4.3", + "grunt-contrib-watch": "~0.4.3", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-copy": "~0.4.1", + "grunt-contrib-cssmin": "~0.6.0", + "grunt-contrib-htmlmin": "~0.1.3" + }, + "version": "1.0.2", + "license": "MIT/GPL" +} From d626ac945d27114e2dea8ae8c74b36c035976c76 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 22 May 2013 17:09:09 +0530 Subject: [PATCH 02/63] Added the grunt-usemin task to change references dynamically --- GruntFile.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index 6fa1f90..d9b39a7 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -25,6 +25,9 @@ module.exports = function(grunt) { } } },*/ + clean: { + folder: "dist" + }, uglify: { // Task options: { // The banner is inserted at the top of the output @@ -52,7 +55,7 @@ module.exports = function(grunt) { removeEmptyAttributes: true, removeOptionalTags: true*/ - removeComments: true, + removeComments: false, collapseWhitespace: false }, files: { // Dictionary of files @@ -84,22 +87,34 @@ module.exports = function(grunt) { watch: { // Task files: ['<%= jshint.files %>'], tasks: ['jshint'] + }, + useminPrepare: { + html: 'dist/index.html' + }, + usemin: { + //html: 'dist/index.html' + html: ['dist/{,*/}*.html'], + css: ['dist/css/{,*/}*.css'], + options: { + dirs: ['dist'] + } } }); - // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm. + // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm + grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); - //grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-usemin'); + //grunt.loadNpmTasks('grunt-contrib-watch'); + //grunt.loadNpmTasks('grunt-contrib-copy'); // Let's set up some tasks grunt.registerTask('test', ['jshint']); // The default task can be run just by typing "grunt" on the command line - grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'htmlmin']); + grunt.registerTask('default', ['clean', 'useminPrepare', 'jshint', 'uglify', 'cssmin', 'htmlmin', 'usemin']); }; From 214e1a010c95bb87fdfd18f39b01c5c42d99680e Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 22 May 2013 17:12:22 +0530 Subject: [PATCH 03/63] Updated the demo files with grunt-usemin reference within index.html --- demo/css/style.css | 1320 +++++++++++++++---------------- demo/facebook_friends_list.html | 25 +- demo/js/fb.friends.list.js | 172 ++-- 3 files changed, 760 insertions(+), 757 deletions(-) diff --git a/demo/css/style.css b/demo/css/style.css index d50f749..3f08214 100644 --- a/demo/css/style.css +++ b/demo/css/style.css @@ -1,660 +1,660 @@ -/* ============================================================================= - HTML5 Boilerplate CSS: h5bp.com/css - ========================================================================== */ - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; -} -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} -audio:not([controls]) { - display: none; -} -[hidden] { - display: none; -} -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -html, button, input, select, textarea { - font-family: sans-serif; - color: #222; -} -body { - margin: 0; - font-size: 1em; - line-height: 1.4; -} - -::-moz-selection { - background:#FF0; - color:#000; - text-shadow: none; -} -::selection { - background: #FF0; - color:#000; - text-shadow: none; -} -a { - color:#3B5998; - outline:none -} -a:visited { - color: #F04E00; -} -a:hover { - color: #06e; -} -a:focus { - outline: thin dotted; -} -a:hover, a:active { - outline: 0; -} -abbr[title] { - border-bottom: 1px dotted; -} -b, strong { - font-weight: bold; -} -blockquote { - margin: 1em 40px; -} -dfn { - font-style: italic; -} -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} -ins { - background: #ff9; - color: #000; - text-decoration: none; -} -mark { - background: #ff0; - color: #000; - font-style: italic; - font-weight: bold; -} -pre, code, kbd, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} -q { - quotes: none; -} -q:before, q:after { - content: ""; - content: none; -} -small { - font-size: 85%; -} -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} -ul, ol { - margin: 1em 0; - padding: 0 0 0 40px; -} -dd { - margin: 0 0 0 40px; -} -nav ul, nav ol { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; -} -img { - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; -} -svg:not(:root) { - overflow: hidden; -} -figure { - margin: 0; -} -form { - margin: 0; -} -fieldset { - border: 0; - margin: 0; - padding: 0; -} -label { - cursor: pointer; -} -legend { - border: 0; - *margin-left: -7px; - padding: 0; - white-space: normal; -} -button, input, select, textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} -button, input { - line-height: normal; -} -button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; - *overflow: visible; -} -button[disabled], input[disabled] { - cursor: default; -} -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; - *width: 13px; - *height: 13px; -} -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; -} -textarea { - overflow: auto; - vertical-align: top; - resize: vertical; -} -input:valid, textarea:valid { -} -input:invalid, textarea:invalid { - background-color: #f0dddd; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -td { - vertical-align: top; -} -.chromeframe { - margin: 0.2em 0; - background: #ccc; - color: black; - padding: 0.2em 0; -} -h1, h2, h3, h4, h5, h6, ul, li, pre { - margin:0; - padding:0 -} -/* ===== Primary Styles ======================================================== - Author: SapientNitro (2011) (http://www.sapient.com) - ========================================================================== */ - -/** Basic settings **/ -body { - background:#FFC; - color:#171717; - font-size:100%; - font-family:Verdana, Arial, Helvetica, sans-serif; - font-weight:normal; - line-height:1em; - padding:40px; -} -h1, h2, h3, h4, h5, h6, section, article, p, .round-corner { - width:98%; - border-radius:7px; - -webkit-border-radius:7px; - -moz-border-radius:7px; - -khtml-border-radius:7px; - display:block; - margin:0; - padding:10px 1%; - float:left; -} -h1 { - font-size:2em; -} -h2 { - background:#F04E00; - color:#FFF; - font-size:1.7em; - margin-bottom:10px; -} -h3 { - width:98%; - background:#F2F2F2; - color:#3B5998; - font-size:1.4emp; - padding:8px 1%; - margin-bottom:10px; - float:left; -} -h4 { - font-size:1.2em; -} -h5 { - font-size:1em; -} -h6 { - font-size:0.8em; -} -a, a:visited { - color:#3B5998; - text-decoration:underline; - outline:none; -} -a:visited { - color:#F04E00; -} -a.read-more { - clear:both; - margin-bottom:10px; - float:left -} -.hide { - display:none; -} -iframe { - border:0; -} - -/* "fb_iframe_widget" class genreate from facebook */ - -.fb_iframe_widget iframe { - width:750px; -} -button, a.button, a.back-to-index { - background:#bdbdbd; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d0d0'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d0d0d0)); - background:-webkit-linear-gradient(top, #ffffff, #d0d0d0); - background:-ms-linear-gradient(top, #ffffff, #d0d0d0); - background:-moz-linear-gradient(top, #ffffff, #d0d0d0); - background:-o-linear-gradient(top, #ffffff, #d0d0d0); - background:linear-gradient(top bottom, #ffffff, #d0d0d0); - -webkit-border-radius:20px; - -moz-border-radius:20px; - -khtml-border-radius:20px; - padding:5px 15px; - text-decoration:none; - color:#222222; -} -button:hover, a.button:hover, a.back-to-index:hover, button.highlight, a.button.highlight, a.back-to-index.highlight { - background:#ffffff; - -webkit-box-shadow:0px 0px 12px #c3c2c2; - -moz-box-shadow:0px 0px 12px #c3c2c2; - box-shadow:0px 0px 12px #c3c2c2; -} -.top-round { - border-radius:0; - -webkit-border-radius:0; - -moz-border-radius:0; - -khtml-border-radius:0; - -moz-border-radius-topleft:7px; - -khtml-border-top-left-radius:7px; - -webkit-border-top-left-radius:7px; - border-top-left-radius:7px; - -moz-border-radius-topright:7px; - -khtml-border-top-right-radius:7px; - -webkit-border-top-right-radius:7px; - border-top-right-radius:7px; - border-radius:7px 7px 0 0; -} -a.back-to-index { - position:absolute; - color:#171717; - font-size:11px; - top:5px; - right:6%; - padding:4px 15px; -} -#wrapper { - width:96%; - max-width:1100px; - background:#FFF; - border-radius:7px; - -webkit-border-radius:7px; - -moz-border-radius:7px; - -khtml-border-radius:7px; - -webkit-box-shadow:0px 0px 12px #636363; - -moz-box-shadow:0px 0px 12px #636363; - box-shadow:0px 0px 12px #636363; - font-size:12px; - padding:20px 2%; - margin:0px auto; -} -ul.topics { - width:92%; - padding:0 0 0 4%; - float:left; -} -ul.topics li { - width:100%; - padding-bottom:5px; - float:left; -} -section.content { - width:100%; - background:#f5f5f5; - border:#d9d7d8 1px solid; - padding:0; - margin-bottom:20px; - float:left; -} -section.content article { - width:98%; - background:#ffffff; - border-radius:0; - -webkit-border-radius:0; - -moz-border-radius:0; - -khtml-border-radius:0; - float:left; -} -.options-bar { - width:98%; - background:#7d7d7d; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#7d7d7d'); - background:-webkit-gradient(linear, left top, left bottom, from(#a6a6a6), to(#7d7d7d)); - background:-webkit-linear-gradient(top, #a6a6a6, #7d7d7d); - background:-ms-linear-gradient(top, #a6a6a6, #7d7d7d); - background:-moz-linear-gradient(top, #a6a6a6, #7d7d7d); - background:-o-linear-gradient(top, #a6a6a6, #7d7d7d); - background:linear-gradient(to bottom, #a6a6a6, #7d7d7d); - border:0; - padding:5px 1%; - float:left; -} -.sub-options-bar { - width:100%; - float:left; -} -section.content footer { - width:98%; - padding:5px 1%; - float:left; -} -.round-corner { - -webkit-box-shadow:0px 0px 12px #636363; - -moz-box-shadow:0px 0px 12px #636363; - box-shadow:0px 0px 12px #636363; - float:left; -} -/* Types of message boxes */ -.standard-message-box, .note-box, .alert-box, .error-box, .info-box, .success-box { - width:98%; - border-radius:7px; - -webkit-border-radius:7px; - -moz-border-radius:7px; - -khtml-border-radius:7px; - padding:12px 1% 10px 1%; - margin-bottom:10px; - float:left; -} -.note-box span:first-child, .alert-box span:first-child, .error-box span:first-child, .info-box span:first-child, .success-box span:first-child { - width:22px; - height:25px; - background:url(../img/sprite.png) top left no-repeat; - margin:-4px 10px 0 0; - float:left; -} -.note-box span:first-child { - background-position:-31px 0; -} -.alert-box span:first-child { - background-position:-60px 0; -} -.error-box span:first-child { - background-position:-88px 0; -} -.info-box span:first-child { - background-position:-118px 0; -} -.standard-message-box { - background:#dddddd; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd)); - background:-webkit-linear-gradient(top, #ffffff, #dddddd); - background:-ms-linear-gradient(top, #ffffff, #dddddd); - background:-moz-linear-gradient(top, #ffffff, #dddddd); - background:-o-linear-gradient(top, #ffffff, #dddddd); - background:linear-gradient(to bottom, #ffffff, #dddddd); - border:#d8d8d8 1px solid; -} -.note-box { - background:#ffecb1; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fef2ca'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fef2ca)); - background:-webkit-linear-gradient(top, #ffffff, #fef2ca); - background:-ms-linear-gradient(top, #ffffff, #fef2ca); - background:-moz-linear-gradient(top, #ffffff, #fef2ca); - background:-o-linear-gradient(top, #ffffff, #fef2ca); - background:linear-gradient(to bottom, #ffffff, #fef2ca); - border:#ffe55d 1px solid; -} -.alert-box { - background:#feee05; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#feee05'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#feee05)); - background:-webkit-linear-gradient(top, #ffffff, #feee05); - background:-ms-linear-gradient(top, #ffffff, #feee05); - background:-moz-linear-gradient(top, #ffffff, #feee05); - background:-o-linear-gradient(top, #ffffff, #feee05); - background:linear-gradient(to bottom, #ffffff, #feee05); - border:#ffe55d 1px solid; -} -.error-box { - background:#b60001; - color:#ffffff; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1315', endColorstr='#b60001'); - background:-webkit-gradient(linear, left top, left bottom, from(#ff1315), to(#b60001)); - background:-webkit-linear-gradient(top, #ff1315, #b60001); - background:-ms-linear-gradient(top, #ff1315, #b60001); - background:-moz-linear-gradient(top, #ff1315, #b60001); - background:-o-linear-gradient(top, #ff1315, #b60001); - background:linear-gradient(to bottom, #ff1315, #b60001); - border:#971515 1px solid; -} -.info-box { - background:#6ae1ff; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#6ae1ff'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#6ae1ff)); - background:-webkit-linear-gradient(top, #ffffff, #6ae1ff); - background:-ms-linear-gradient(top, #ffffff, #6ae1ff); - background:-moz-linear-gradient(top, #ffffff, #6ae1ff); - background:-o-linear-gradient(top, #ffffff, #6ae1ff); - background:linear-gradient(to bottom, #ffffff, #6ae1ff); - border:#82f0fd 1px solid; -} -.success-box { - background:#8dff48; - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#8dff48'); - background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#8dff48)); - background:-webkit-linear-gradient(top, #ffffff, #8dff48); - background:-ms-linear-gradient(top, #ffffff, #8dff48); - background:-moz-linear-gradient(top, #ffffff, #8dff48); - background:-o-linear-gradient(top, #ffffff, #8dff48); - background:linear-gradient(to bottom, #ffffff, #8dff48); - border:#76fe76 1px solid; -} -.info-box p { - width:auto; - padding:0; -} -.avatars { - width:100%; - padding-bottom:5px; - float:left; -} -.avatars div { - display:inline; - padding:0 0 0 10px; -} -.avatars div img { - background:#FFF; - border:#CCC 1px solid; - padding:5px; -} -#countdown-dashboard { - width:100%; - padding:0; - margin-bottom:20px; - float:left; -} -.round-corner { - padding:15px 0 20px 0; -} -#countdown-dashboard .dash { - width:100px; - border-radius:0; - -webkit-border-radius:0; - -moz-border-radius:0; - -khtml-border-radius:0; - padding:0; - margin-left:40px; - float:left; -} -#countdown-dashboard .dash:first-child { - margin-left:0; -} -#countdown-dashboard span.dash-title { - width:100%; - padding-top:10px; - text-transform:capitalize; - float:left; -} -#countdown-dashboard .digit { - font-size:60px; - padding:5px; - float:left; -} -#countdown-dashboard .dash .digit:first-child { - border-right:#CCC 1px solid; -} -article ul { - margin:0 0 20px 30px; - float:left -} -#friends-list-container div { - width:29%; - background:#F2F2F2; - padding:4px 1%; - margin:4px 1%; - float:left; -} -.hide-fb-like-comment .fb-edge-comment-widget { - display:none -} -pre.code { - width:98%; - background:#EEE; - padding:10px 1%; - margin-bottom:15px; - float:left; -} -.fb-ltr { - height:800px !important -} - -/* "fb_edge_widget_with_comment" class genreate from facebook */ - -.without-comment .fb_edge_widget_with_comment { - height:24px; - overflow:hidden -} -.like-logout .fb-like { - float:left -} -.like-logout p { - width:auto; - padding: 0 0 10px 0; - float:left; -} -/* ============================================================================= - Non-Semantic Helper Classes - ========================================================================== */ - -.ir { - display: block; - border: 0; - text-indent: -999em; - overflow: hidden; - background-color: transparent; - background-repeat: no-repeat; - text-align: left; - direction: ltr; - *line-height: 0; -} -.ir br { - display: none; -} -.hidden { - display: none !important; - visibility: hidden; -} -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; - margin: 0; - overflow: visible; - position: static -} -.invisible { - visibility: hidden; -} -.clear-fix:before, .clear-fix:after { - content: ""; - display: table; -} -.clear-fix:after { - clear: both; -} -.clear-fix { - *zoom: 1; -} +/* ============================================================================= + HTML5 Boilerplate CSS: h5bp.com/css + ========================================================================== */ + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { + display: block; +} +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; +} +audio:not([controls]) { + display: none; +} +[hidden] { + display: none; +} +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +html, button, input, select, textarea { + font-family: sans-serif; + color: #222; +} +body { + margin: 0; + font-size: 1em; + line-height: 1.4; +} + +::-moz-selection { + background:#FF0; + color:#000; + text-shadow: none; +} +::selection { + background: #FF0; + color:#000; + text-shadow: none; +} +a { + color:#3B5998; + outline:none +} +a:visited { + color: #F04E00; +} +a:hover { + color: #06e; +} +a:focus { + outline: thin dotted; +} +a:hover, a:active { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, strong { + font-weight: bold; +} +blockquote { + margin: 1em 40px; +} +dfn { + font-style: italic; +} +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} +ins { + background: #ff9; + color: #000; + text-decoration: none; +} +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} +pre, code, kbd, samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +q { + quotes: none; +} +q:before, q:after { + content: ""; + content: none; +} +small { + font-size: 85%; +} +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +ul, ol { + margin: 1em 0; + padding: 0 0 0 40px; +} +dd { + margin: 0 0 0 40px; +} +nav ul, nav ol { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +form { + margin: 0; +} +fieldset { + border: 0; + margin: 0; + padding: 0; +} +label { + cursor: pointer; +} +legend { + border: 0; + *margin-left: -7px; + padding: 0; + white-space: normal; +} +button, input, select, textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; +} +button, input[type="button"], input[type="reset"], input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; +} +button[disabled], input[disabled] { + cursor: default; +} +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} +input:valid, textarea:valid { +} +input:invalid, textarea:invalid { + background-color: #f0dddd; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td { + vertical-align: top; +} +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; +} +h1, h2, h3, h4, h5, h6, ul, li, pre { + margin:0; + padding:0 +} +/* ===== Primary Styles ======================================================== + Author: SapientNitro (2011) (http://www.sapient.com) + ========================================================================== */ + +/** Basic settings **/ +body { + background:#FFC; + color:#171717; + font-size:100%; + font-family:Verdana, Arial, Helvetica, sans-serif; + font-weight:normal; + line-height:1em; + padding:40px; +} +h1, h2, h3, h4, h5, h6, section, article, p, .round-corner { + width:98%; + border-radius:7px; + -webkit-border-radius:7px; + -moz-border-radius:7px; + -khtml-border-radius:7px; + display:block; + margin:0; + padding:10px 1%; + float:left; +} +h1 { + font-size:2em; +} +h2 { + background:#F04E00; + color:#FFF; + font-size:1.7em; + margin-bottom:10px; +} +h3 { + width:98%; + background:#F2F2F2; + color:#3B5998; + font-size:1.4emp; + padding:8px 1%; + margin-bottom:10px; + float:left; +} +h4 { + font-size:1.2em; +} +h5 { + font-size:1em; +} +h6 { + font-size:0.8em; +} +a, a:visited { + color:#3B5998; + text-decoration:underline; + outline:none; +} +a:visited { + color:#F04E00; +} +a.read-more { + clear:both; + margin-bottom:10px; + float:left +} +.hide { + display:none; +} +iframe { + border:0; +} + +/* "fb_iframe_widget" class genreate from facebook */ + +.fb_iframe_widget iframe { + width:750px; +} +button, a.button, a.back-to-index { + background:#bdbdbd; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d0d0'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d0d0d0)); + background:-webkit-linear-gradient(top, #ffffff, #d0d0d0); + background:-ms-linear-gradient(top, #ffffff, #d0d0d0); + background:-moz-linear-gradient(top, #ffffff, #d0d0d0); + background:-o-linear-gradient(top, #ffffff, #d0d0d0); + background:linear-gradient(top bottom, #ffffff, #d0d0d0); + -webkit-border-radius:20px; + -moz-border-radius:20px; + -khtml-border-radius:20px; + padding:5px 15px; + text-decoration:none; + color:#222222; +} +button:hover, a.button:hover, a.back-to-index:hover, button.highlight, a.button.highlight, a.back-to-index.highlight { + background:#ffffff; + -webkit-box-shadow:0px 0px 12px #c3c2c2; + -moz-box-shadow:0px 0px 12px #c3c2c2; + box-shadow:0px 0px 12px #c3c2c2; +} +.top-round { + border-radius:0; + -webkit-border-radius:0; + -moz-border-radius:0; + -khtml-border-radius:0; + -moz-border-radius-topleft:7px; + -khtml-border-top-left-radius:7px; + -webkit-border-top-left-radius:7px; + border-top-left-radius:7px; + -moz-border-radius-topright:7px; + -khtml-border-top-right-radius:7px; + -webkit-border-top-right-radius:7px; + border-top-right-radius:7px; + border-radius:7px 7px 0 0; +} +a.back-to-index { + position:absolute; + color:#171717; + font-size:11px; + top:5px; + right:6%; + padding:4px 15px; +} +#wrapper { + width:96%; + max-width:1100px; + background:#FFF; + border-radius:7px; + -webkit-border-radius:7px; + -moz-border-radius:7px; + -khtml-border-radius:7px; + -webkit-box-shadow:0px 0px 12px #636363; + -moz-box-shadow:0px 0px 12px #636363; + box-shadow:0px 0px 12px #636363; + font-size:12px; + padding:20px 2%; + margin:0px auto; +} +ul.topics { + width:92%; + padding:0 0 0 4%; + float:left; +} +ul.topics li { + width:100%; + padding-bottom:5px; + float:left; +} +section.content { + width:100%; + background:#f5f5f5; + border:#d9d7d8 1px solid; + padding:0; + margin-bottom:20px; + float:left; +} +section.content article { + width:98%; + background:#ffffff; + border-radius:0; + -webkit-border-radius:0; + -moz-border-radius:0; + -khtml-border-radius:0; + float:left; +} +.options-bar { + width:98%; + background:#7d7d7d; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#7d7d7d'); + background:-webkit-gradient(linear, left top, left bottom, from(#a6a6a6), to(#7d7d7d)); + background:-webkit-linear-gradient(top, #a6a6a6, #7d7d7d); + background:-ms-linear-gradient(top, #a6a6a6, #7d7d7d); + background:-moz-linear-gradient(top, #a6a6a6, #7d7d7d); + background:-o-linear-gradient(top, #a6a6a6, #7d7d7d); + background:linear-gradient(to bottom, #a6a6a6, #7d7d7d); + border:0; + padding:5px 1%; + float:left; +} +.sub-options-bar { + width:100%; + float:left; +} +section.content footer { + width:98%; + padding:5px 1%; + float:left; +} +.round-corner { + -webkit-box-shadow:0px 0px 12px #636363; + -moz-box-shadow:0px 0px 12px #636363; + box-shadow:0px 0px 12px #636363; + float:left; +} +/* Types of message boxes */ +.standard-message-box, .note-box, .alert-box, .error-box, .info-box, .success-box { + width:98%; + border-radius:7px; + -webkit-border-radius:7px; + -moz-border-radius:7px; + -khtml-border-radius:7px; + padding:12px 1% 10px 1%; + margin-bottom:10px; + float:left; +} +.note-box span:first-child, .alert-box span:first-child, .error-box span:first-child, .info-box span:first-child, .success-box span:first-child { + width:22px; + height:25px; + background:url(../img/sprite.png) top left no-repeat; + margin:-4px 10px 0 0; + float:left; +} +.note-box span:first-child { + background-position:-31px 0; +} +.alert-box span:first-child { + background-position:-60px 0; +} +.error-box span:first-child { + background-position:-88px 0; +} +.info-box span:first-child { + background-position:-118px 0; +} +.standard-message-box { + background:#dddddd; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd)); + background:-webkit-linear-gradient(top, #ffffff, #dddddd); + background:-ms-linear-gradient(top, #ffffff, #dddddd); + background:-moz-linear-gradient(top, #ffffff, #dddddd); + background:-o-linear-gradient(top, #ffffff, #dddddd); + background:linear-gradient(to bottom, #ffffff, #dddddd); + border:#d8d8d8 1px solid; +} +.note-box { + background:#ffecb1; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fef2ca'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fef2ca)); + background:-webkit-linear-gradient(top, #ffffff, #fef2ca); + background:-ms-linear-gradient(top, #ffffff, #fef2ca); + background:-moz-linear-gradient(top, #ffffff, #fef2ca); + background:-o-linear-gradient(top, #ffffff, #fef2ca); + background:linear-gradient(to bottom, #ffffff, #fef2ca); + border:#ffe55d 1px solid; +} +.alert-box { + background:#feee05; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#feee05'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#feee05)); + background:-webkit-linear-gradient(top, #ffffff, #feee05); + background:-ms-linear-gradient(top, #ffffff, #feee05); + background:-moz-linear-gradient(top, #ffffff, #feee05); + background:-o-linear-gradient(top, #ffffff, #feee05); + background:linear-gradient(to bottom, #ffffff, #feee05); + border:#ffe55d 1px solid; +} +.error-box { + background:#b60001; + color:#ffffff; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1315', endColorstr='#b60001'); + background:-webkit-gradient(linear, left top, left bottom, from(#ff1315), to(#b60001)); + background:-webkit-linear-gradient(top, #ff1315, #b60001); + background:-ms-linear-gradient(top, #ff1315, #b60001); + background:-moz-linear-gradient(top, #ff1315, #b60001); + background:-o-linear-gradient(top, #ff1315, #b60001); + background:linear-gradient(to bottom, #ff1315, #b60001); + border:#971515 1px solid; +} +.info-box { + background:#6ae1ff; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#6ae1ff'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#6ae1ff)); + background:-webkit-linear-gradient(top, #ffffff, #6ae1ff); + background:-ms-linear-gradient(top, #ffffff, #6ae1ff); + background:-moz-linear-gradient(top, #ffffff, #6ae1ff); + background:-o-linear-gradient(top, #ffffff, #6ae1ff); + background:linear-gradient(to bottom, #ffffff, #6ae1ff); + border:#82f0fd 1px solid; +} +.success-box { + background:#8dff48; + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#8dff48'); + background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#8dff48)); + background:-webkit-linear-gradient(top, #ffffff, #8dff48); + background:-ms-linear-gradient(top, #ffffff, #8dff48); + background:-moz-linear-gradient(top, #ffffff, #8dff48); + background:-o-linear-gradient(top, #ffffff, #8dff48); + background:linear-gradient(to bottom, #ffffff, #8dff48); + border:#76fe76 1px solid; +} +.info-box p { + width:auto; + padding:0; +} +.avatars { + width:100%; + padding-bottom:5px; + float:left; +} +.avatars div { + display:inline; + padding:0 0 0 10px; +} +.avatars div img { + background:#FFF; + border:#CCC 1px solid; + padding:5px; +} +#countdown-dashboard { + width:100%; + padding:0; + margin-bottom:20px; + float:left; +} +.round-corner { + padding:15px 0 20px 0; +} +#countdown-dashboard .dash { + width:100px; + border-radius:0; + -webkit-border-radius:0; + -moz-border-radius:0; + -khtml-border-radius:0; + padding:0; + margin-left:40px; + float:left; +} +#countdown-dashboard .dash:first-child { + margin-left:0; +} +#countdown-dashboard span.dash-title { + width:100%; + padding-top:10px; + text-transform:capitalize; + float:left; +} +#countdown-dashboard .digit { + font-size:60px; + padding:5px; + float:left; +} +#countdown-dashboard .dash .digit:first-child { + border-right:#CCC 1px solid; +} +article ul { + margin:0 0 20px 30px; + float:left +} +#friends-list-container div { + width:29%; + background:#F2F2F2; + padding:4px 1%; + margin:4px 1%; + float:left; +} +.hide-fb-like-comment .fb-edge-comment-widget { + display:none +} +pre.code { + width:98%; + background:#EEE; + padding:10px 1%; + margin-bottom:15px; + float:left; +} +.fb-ltr { + height:800px !important +} + +/* "fb_edge_widget_with_comment" class genreate from facebook */ + +.without-comment .fb_edge_widget_with_comment { + height:20px; + overflow:hidden +} +.like-logout .fb-like { + float:left +} +.like-logout p { + width:auto; + padding: 0 0 10px 0; + float:left; +} +/* ============================================================================= + Non-Semantic Helper Classes + ========================================================================== */ + +.ir { + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; +} +.ir br { + display: none; +} +.hidden { + display: none !important; + visibility: hidden; +} +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + clip: auto; + margin: 0; + overflow: visible; + position: static +} +.invisible { + visibility: hidden; +} +.clear-fix:before, .clear-fix:after { + content: ""; + display: table; +} +.clear-fix:after { + clear: both; +} +.clear-fix { + *zoom: 1; +} diff --git a/demo/facebook_friends_list.html b/demo/facebook_friends_list.html index e1015c3..b913b52 100644 --- a/demo/facebook_friends_list.html +++ b/demo/facebook_friends_list.html @@ -11,8 +11,9 @@ - + + @@ -20,9 +21,9 @@
- - Facebook API demos - + + +

Facebook Friends List

@@ -31,7 +32,7 @@

Facebook Friends List

Read more
- +

Facebook Friends List Example

@@ -39,15 +40,17 @@

Facebook Friends List Example



- +
- - + - - + + + + + - \ No newline at end of file + diff --git a/demo/js/fb.friends.list.js b/demo/js/fb.friends.list.js index 46d558e..e55ddd7 100644 --- a/demo/js/fb.friends.list.js +++ b/demo/js/fb.friends.list.js @@ -12,10 +12,10 @@ */ (function (FBDemo, $, undefined) { - /** + /** * Logging function, for debugging mode */ - jQuery.log = function (message) { + jQuery.log = function (message) { if (FBDemo.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) { console.debug(message); } /*else { @@ -25,96 +25,96 @@ FBDemo.facebook = (function () { function _facebook() { - /* - * Object of the current object - */ - var _this = this; - /** - * Init call - * Call various methods require by pages after load - */ - this.init = function () { - _this.FBInit(); - _this.FBLogin(); + /* + * Object of the current object + */ + var _this = this; + /** + * Init call + * Call various methods require by pages after load + */ + this.init = function () { + _this.FBInit(); + _this.FBLogin(); return this; }; /* - * Click event for FB logout - */ - this.FBLogin = function () { - $(function () { - $(FBDemo.config.FBLogin).click(function () { - FB.getLoginStatus(function (response) { - if (response.status === "unknown") { - _this.facebookLogin(); - } else { - FB.logout(); - } - }); - }); - }); - }; - /* - * Facebook login - */ - this.facebookLogin = function () { - FB.login(function (response) { - if (response.status === "connected") { - $.log("User is logged in and granted some permissions."); - } else if ((response.status === 'not_authorized') || response.authResponse === null) { - $.log("User has not granted permissions!"); - } + * Click event for FB logout + */ + this.FBLogin = function () { + $(function () { + $(FBDemo.config.FBLogin).click(function () { + FB.getLoginStatus(function (response) { + if (response.status === "unknown") { + _this.facebookLogin(); + } else { + FB.logout(); + } + }); + }); + }); + }; + /* + * Facebook login + */ + this.facebookLogin = function () { + FB.login(function (response) { + if (response.status === "connected") { + $.log("User is logged in and granted some permissions."); + } else if ((response.status === 'not_authorized') || response.authResponse === null) { + $.log("User has not granted permissions!"); + } - _this.onFacebookInitialLoginStatus(response); - }); - }; - /* - * Callback for showFriendsList function - */ - this.onFriendsListLoaded = function (response) { - var divTarget = $(FBDemo.config.FriendsListContainer), - data = response.data, - html = "", - len = data.length, - friendIndex; - for (friendIndex = 0; friendIndex < len; friendIndex += 1) { - html += "
" + data[friendIndex].name + "
"; - } - divTarget.html(html); - }; - /* - * Show friend list - */ - this.showFriendsList = function () { - FB.api('/me/friends', _this.onFriendsListLoaded); - }; - /* - * Initialize Facebook - */ - this.FBInit = function () { - FB.init({ - appId : FBDemo.config.appId, - status : true, - cookie : true, - xfbml : true - }); + _this.onFacebookInitialLoginStatus(response); + }); + }; + /* + * Callback for showFriendsList function + */ + this.onFriendsListLoaded = function (response) { + var divTarget = $(FBDemo.config.FriendsListContainer), + data = response.data, + html = "", + len = data.length, + friendIndex; + for (friendIndex = 0; friendIndex < len; friendIndex += 1) { + html += "
" + data[friendIndex].name + "
"; + } + divTarget.html(html); + }; + /* + * Show friend list + */ + this.showFriendsList = function () { + FB.api('/me/friends', _this.onFriendsListLoaded); + }; + /* + * Initialize Facebook + */ + this.FBInit = function () { + FB.init({ + appId : FBDemo.config.appId, + status : true, + cookie : true, + xfbml : true + }); - FB.Event.subscribe('auth.login', function (response) { - _this.onFacebookInitialLoginStatus(response); - }); + FB.Event.subscribe('auth.login', function (response) { + _this.onFacebookInitialLoginStatus(response); + }); - FB.getLoginStatus(_this.onFacebookInitialLoginStatus); - }; - /* - * Callback functions for 'auth.statusChange' event. - */ - this.onFacebookInitialLoginStatus = function (response) { - if (response.status === "connected") { - $(FBDemo.config.FBLoginButton).hide(); - _this.showFriendsList(); - } - }; - return this.init(); + FB.getLoginStatus(_this.onFacebookInitialLoginStatus); + }; + /* + * Callback functions for 'auth.statusChange' event. + */ + this.onFacebookInitialLoginStatus = function (response) { + if (response.status === "connected") { + $(FBDemo.config.FBLoginButton).hide(); + _this.showFriendsList(); + } + }; + return this.init(); } return new _facebook(); From 94bb9965f66e7572fafd1f71e1e85f064d01650b Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 22 May 2013 17:13:47 +0530 Subject: [PATCH 04/63] Added the grunt-usemin and update the reference in index.html --- index.html | 65 ++++++++++++++++++++++++++++------------------------ package.json | 4 +++- 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index b808844..91976d2 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,19 @@ - - - - - + + + + + - - - JavaScript Framework - - - + + + JavaScript Boilerplate + + + + + + @@ -85,7 +88,7 @@

setCSS(el, styles)

}); - +

hasClass(el, name)

@@ -95,7 +98,7 @@

hasClass(el, name)

MODULE.helper.hasClass("main", "my_element");
- +

addClass(el, name)

@@ -105,7 +108,7 @@

addClass(el, name)

MODULE.helper.addClass("main", "my_element2");
- +

removeClass(el, name)

@@ -115,7 +118,7 @@

removeClass(el, name)

MODULE.helper.removeClass("main", "my_element2");
- +

getDomain()

@@ -125,7 +128,7 @@

getDomain()

MODULE.helper.getDomain();
- +

getQueryString(name, default_)

@@ -133,11 +136,11 @@

getQueryString(name, default_)

Copy "?name=RSR&age=26" and paste this at the address bar of the website and press enter.
-    
+
 MODULE.helper.getQueryString("name", "Not Found.");
- +

isBlank(string)

@@ -148,7 +151,7 @@

isBlank(string)

MODULE.helper.isBlank(test);
- +

setInfo(name, value)

@@ -158,7 +161,7 @@

setInfo(name, value)

MODULE.helper.setInfo("name", "RSR");
- +

getInfo(name, checkCookie)

@@ -168,7 +171,7 @@

getInfo(name, checkCookie)

MODULE.helper.getInfo("name");
- +

removeInfo(name, checkCookie)

@@ -212,13 +215,15 @@

removeCookie(name)

- - - - - - - - + + + + + + + + + + - \ No newline at end of file + diff --git a/package.json b/package.json index acda95a..086db98 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,9 @@ "grunt-contrib-concat": "~0.3.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-cssmin": "~0.6.0", - "grunt-contrib-htmlmin": "~0.1.3" + "grunt-contrib-htmlmin": "~0.1.3", + "grunt-contrib-clean": "~0.4.1", + "grunt-usemin": "~0.1.12" }, "version": "1.0.2", "license": "MIT/GPL" From 7b3f7930e2a8e93280f5d0196f0cdf1163155d63 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Thu, 6 Jun 2013 17:04:35 +0530 Subject: [PATCH 05/63] Moved source files/folders to 'src' to have better folder management --- {css => src/css}/style.css | 0 {demo => src/demo}/css/style.css | 0 {demo => src/demo}/facebook_friends_list.html | 0 {demo => src/demo}/js/fb.config.js | 0 {demo => src/demo}/js/fb.friends.list.js | 0 index.html => src/index.html | 0 {js => src/js}/_.config.js | 0 {js => src/js}/_.helper.js | 0 {js => src/js}/_.main.js | 0 {js => src/js}/libs/jquery.js | 0 {js => src/js}/libs/require.js | 0 11 files changed, 0 insertions(+), 0 deletions(-) rename {css => src/css}/style.css (100%) rename {demo => src/demo}/css/style.css (100%) rename {demo => src/demo}/facebook_friends_list.html (100%) rename {demo => src/demo}/js/fb.config.js (100%) rename {demo => src/demo}/js/fb.friends.list.js (100%) rename index.html => src/index.html (100%) rename {js => src/js}/_.config.js (100%) rename {js => src/js}/_.helper.js (100%) rename {js => src/js}/_.main.js (100%) rename {js => src/js}/libs/jquery.js (100%) rename {js => src/js}/libs/require.js (100%) diff --git a/css/style.css b/src/css/style.css similarity index 100% rename from css/style.css rename to src/css/style.css diff --git a/demo/css/style.css b/src/demo/css/style.css similarity index 100% rename from demo/css/style.css rename to src/demo/css/style.css diff --git a/demo/facebook_friends_list.html b/src/demo/facebook_friends_list.html similarity index 100% rename from demo/facebook_friends_list.html rename to src/demo/facebook_friends_list.html diff --git a/demo/js/fb.config.js b/src/demo/js/fb.config.js similarity index 100% rename from demo/js/fb.config.js rename to src/demo/js/fb.config.js diff --git a/demo/js/fb.friends.list.js b/src/demo/js/fb.friends.list.js similarity index 100% rename from demo/js/fb.friends.list.js rename to src/demo/js/fb.friends.list.js diff --git a/index.html b/src/index.html similarity index 100% rename from index.html rename to src/index.html diff --git a/js/_.config.js b/src/js/_.config.js similarity index 100% rename from js/_.config.js rename to src/js/_.config.js diff --git a/js/_.helper.js b/src/js/_.helper.js similarity index 100% rename from js/_.helper.js rename to src/js/_.helper.js diff --git a/js/_.main.js b/src/js/_.main.js similarity index 100% rename from js/_.main.js rename to src/js/_.main.js diff --git a/js/libs/jquery.js b/src/js/libs/jquery.js similarity index 100% rename from js/libs/jquery.js rename to src/js/libs/jquery.js diff --git a/js/libs/require.js b/src/js/libs/require.js similarity index 100% rename from js/libs/require.js rename to src/js/libs/require.js From 5ccfd2151d9466d0797d22d61cf0462329b33bff Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 5 Jul 2013 10:23:18 +0530 Subject: [PATCH 06/63] Added the 'use strict' and fixed JSHint warnings --- .jshintrc | 1 + src/demo/js/fb.friends.list.js | 10 ++++++++-- src/js/_.config.js | 1 + src/js/_.helper.js | 10 ++++++++-- src/js/_.main.js | 9 ++++++++- 5 files changed, 26 insertions(+), 5 deletions(-) diff --git a/.jshintrc b/.jshintrc index ef3407f..af30ed0 100644 --- a/.jshintrc +++ b/.jshintrc @@ -3,6 +3,7 @@ "eqnull": true, "eqeqeq": true, "undef": true, + "newcap":false, "globals": { "jQuery": true, "console": true, diff --git a/src/demo/js/fb.friends.list.js b/src/demo/js/fb.friends.list.js index e55ddd7..5ff73d5 100644 --- a/src/demo/js/fb.friends.list.js +++ b/src/demo/js/fb.friends.list.js @@ -12,6 +12,8 @@ */ (function (FBDemo, $, undefined) { + 'use strict'; + /** * Logging function, for debugging mode */ @@ -25,9 +27,13 @@ FBDemo.facebook = (function () { function _facebook() { - /* - * Object of the current object + + /** + * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. + * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. */ + + /*jshint validthis: true */ var _this = this; /** * Init call diff --git a/src/js/_.config.js b/src/js/_.config.js index b43a185..bffa0dd 100644 --- a/src/js/_.config.js +++ b/src/js/_.config.js @@ -11,6 +11,7 @@ */ (function (MODULE, $, undefined) { + MODULE.config = { language: 'english', debug: true, diff --git a/src/js/_.helper.js b/src/js/_.helper.js index fc5764d..824705b 100644 --- a/src/js/_.helper.js +++ b/src/js/_.helper.js @@ -3,6 +3,8 @@ */ (function (MODULE, $, undefined) { + 'use strict'; + /* * Singletons serve as a namespace provider which isolate implementation code * from the global namespace so as to provide a single point of access for functions, @@ -12,9 +14,13 @@ */ MODULE.helper = (function () { function _helper() { - /* - * Object of the current object + + /** + * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. + * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. */ + + /*jshint validthis: true */ var _this = this, /* diff --git a/src/js/_.main.js b/src/js/_.main.js index 3a9a472..356a03e 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -10,6 +10,7 @@ */ (function (MODULE, $, undefined) { + 'use strict'; /** * Logging function, for debugging mode @@ -79,6 +80,12 @@ MODULE.subModule = (function () { function _subModule() { + /** + * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. + * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. + */ + + /*jshint validthis: true */ var _this = this; /* Store this to avoid scope conflicts */ @@ -165,7 +172,7 @@ */ this.init = function () { _this.fbReady(); - return this; /*this refere to MODULE.subModule*/ + return this; /*this refer to MODULE.subModule*/ }; return this.init(); /*initialize the init()*/ From c77b3ec1782d9f04b548ac144811bada4b3a9b88 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 5 Jul 2013 10:24:13 +0530 Subject: [PATCH 07/63] Updated the readme with correct files path --- GruntFile.js | 43 ++++++++++++++++++++----------------------- README.md | 16 ++++++++-------- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index d9b39a7..5fd36e1 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -18,13 +18,13 @@ module.exports = function(grunt) { // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. pkg: grunt.file.readJSON('package.json'), // Configure the copy task to move files from the development to production folders - /*copy: { // Task - target: { - files: { - 'dist/': ['index.html', 'demo/**'] // 'destination': 'source' - } - } - },*/ + // copy: { // Task + // target: { + // files: { + // 'dist/': ['index.html', 'demo/**'] // 'destination': 'source' + // } + // } + // }, clean: { folder: "dist" }, @@ -35,10 +35,10 @@ module.exports = function(grunt) { }, dist: { // Target files: { // Dictionary of files - 'dist/js/<%= pkg.name %>.min.js': ['js/_.config.js', 'js/_.main.js', 'js/_.helper.js'], - 'dist/demo/js/fb.friends.min.js': ['demo/js/fb.config.js', 'demo/js/fb.friends.list.js'], - 'dist/js/libs/jquery.min.js': ['js/libs/jquery.js'], - 'dist/js/libs/require.min.js': ['js/libs/require.js'] + 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], + 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], + 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], + 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] } } }, @@ -59,35 +59,32 @@ module.exports = function(grunt) { collapseWhitespace: false }, files: { // Dictionary of files - 'dist/index.html': 'index.html', // 'destination': 'source' - 'dist/demo/facebook_friends_list.html': 'demo/facebook_friends_list.html' + 'dist/index.html': 'src/index.html', // 'destination': 'source' + 'dist/demo/facebook_friends_list.html': 'src/demo/facebook_friends_list.html' } } }, cssmin: { // Task combine: { files: { // Dictionary of files - 'dist/css/style.min.css': ['css/style.css'], - 'dist/demo/css/style.min.css': ['demo/css/style.css'] + 'dist/css/style.min.css': ['src/css/style.css'], + 'dist/demo/css/style.min.css': ['src/demo/css/style.css'] } } }, - qunit: { // Task - files: ['test/**/*.html'] - }, jshint: { // Task // Define the files to lint - files: ['Gruntfile.js', 'js/*.js', 'demo/js/*.js'], + files: ['Gruntfile.js', 'src/js/*.js', 'src/demo/js/*.js'], // Configure JSHint (documented at http://www.jshint.com/docs/) options: { // More options here if you want to override JSHint defaults jshintrc: '.jshintrc' } }, - watch: { // Task - files: ['<%= jshint.files %>'], - tasks: ['jshint'] - }, + // watch: { // Task + // files: ['<%= jshint.files %>'], + // tasks: ['jshint'] + // }, useminPrepare: { html: 'dist/index.html' }, diff --git a/README.md b/README.md index a096d6b..29dfc4c 100644 --- a/README.md +++ b/README.md @@ -6,21 +6,21 @@ JavaScript Boilerplate is the collection of best practices using a design patter ## Files in Repository -1. `index.html` - An html help file illustrating helper functions. +1. `src/index.html` - An html help file illustrating helper functions. -2. `js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application. +2. `src/js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application. -3. `js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. +3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. -4. `js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components. +4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components. -5. `css/style.css` - Style sheets for the html help file. +5. `src/css/style.css` - Style sheets for the html help file. ## Usage 1. Clone the repository using the quick start guide. To get started include the JS files in your js directory. - The starting point is the `_main.js` file which has defined the main module and the component to be used. If you were to observe the code, + The starting point is the `src/js/_main.js` file which has defined the main module and the component to be used. If you were to observe the code, (function (MODULE, $, undefined) { @@ -50,9 +50,9 @@ JavaScript Boilerplate is the collection of best practices using a design patter -4. Next is the `_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `MODULE` namespace and we can access the parameters by specifying `MODULE.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally. +4. Next is the `src/js/_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `MODULE` namespace and we can access the parameters by specifying `MODULE.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally. -5. For creating utility methods to be used across application, you can leverage the `_helper.js` file. It works on the same principle as the `_main.js`. For E.g. the way to access a helper function outside the module would be `MODULE.helper.getCookie` for the `getCookie` function. +5. For creating utility methods to be used across application, you can leverage the `src/js/_helper.js` file. It works on the same principle as the `src/js/_main.js`. For E.g. the way to access a helper function outside the module would be `MODULE.helper.getCookie` for the `getCookie` function. ## Quick start From 362fb3e2d9adf1d6fb1ecce3e6df1c06623be97b Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 29 Nov 2013 17:05:09 +0530 Subject: [PATCH 08/63] Update the versions in all required files --- src/demo/js/fb.config.js | 2 +- src/demo/js/fb.friends.list.js | 2 +- src/js/_.config.js | 2 +- src/js/_.helper.js | 2 +- src/js/_.main.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/demo/js/fb.config.js b/src/demo/js/fb.config.js index 5648319..e070947 100644 --- a/src/demo/js/fb.config.js +++ b/src/demo/js/fb.config.js @@ -1,5 +1,5 @@ /* Facebook implementation main config file * - * @version 1.0 + * @version 1.1 */ (function (FBDemo, $, undefined) { diff --git a/src/demo/js/fb.friends.list.js b/src/demo/js/fb.friends.list.js index 5ff73d5..053632e 100644 --- a/src/demo/js/fb.friends.list.js +++ b/src/demo/js/fb.friends.list.js @@ -1,6 +1,6 @@ /* Facebook implementation main scripting file * * Author: SapientNitro (2011) (http://www.sapient.com) - * @version 1.0 + * @version 1.1 */ /* FBDemo (our namespace name) and undefined are passed here diff --git a/src/js/_.config.js b/src/js/_.config.js index bffa0dd..51a91b7 100644 --- a/src/js/_.config.js +++ b/src/js/_.config.js @@ -1,5 +1,5 @@ /* JavaScript Boilerplate configuration file * - * @version 1.0 + * @version 1.1 */ /* Why do we need config? * All URLs needed by the JavaScript diff --git a/src/js/_.helper.js b/src/js/_.helper.js index 824705b..c8bffee 100644 --- a/src/js/_.helper.js +++ b/src/js/_.helper.js @@ -1,5 +1,5 @@ /* JavaScript Boilerplate helper file * - * @version 1.0 + * @version 1.1 */ (function (MODULE, $, undefined) { diff --git a/src/js/_.main.js b/src/js/_.main.js index 356a03e..ef5cfad 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -1,5 +1,5 @@ /* JavaScript Boilerplate main scripting file * - * @version 1.0 + * @version 1.1 */ /* MODULE (our namespace name) and undefined are passed here * to ensure 1. namespace can be modified locally and isn't From 41c734efe79b39ea25e2274ef9723a97d8dde8ee Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 16 Dec 2013 17:02:21 +0530 Subject: [PATCH 09/63] Updated the repo GIT url in all the required files --- src/demo/js/fb.config.js | 1 + src/demo/js/fb.friends.list.js | 2 +- src/js/_.config.js | 4 +++- src/js/_.helper.js | 1 + src/js/_.main.js | 6 ++++-- 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/demo/js/fb.config.js b/src/demo/js/fb.config.js index e070947..3e24d9f 100644 --- a/src/demo/js/fb.config.js +++ b/src/demo/js/fb.config.js @@ -1,5 +1,6 @@ /* Facebook implementation main config file * * @version 1.1 + * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ (function (FBDemo, $, undefined) { diff --git a/src/demo/js/fb.friends.list.js b/src/demo/js/fb.friends.list.js index 053632e..e9e5169 100644 --- a/src/demo/js/fb.friends.list.js +++ b/src/demo/js/fb.friends.list.js @@ -1,6 +1,6 @@ /* Facebook implementation main scripting file * - * Author: SapientNitro (2011) (http://www.sapient.com) * @version 1.1 + * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ /* FBDemo (our namespace name) and undefined are passed here diff --git a/src/js/_.config.js b/src/js/_.config.js index 51a91b7..8124792 100644 --- a/src/js/_.config.js +++ b/src/js/_.config.js @@ -1,6 +1,8 @@ /* JavaScript Boilerplate configuration file * * @version 1.1 + * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ + /* Why do we need config? * All URLs needed by the JavaScript * Any strings that are displayed to the user @@ -8,7 +10,7 @@ * Settings (i.e., items per page) * Repeated unique values * Any value that may change in the future - */ + */ (function (MODULE, $, undefined) { diff --git a/src/js/_.helper.js b/src/js/_.helper.js index c8bffee..1e20f5e 100644 --- a/src/js/_.helper.js +++ b/src/js/_.helper.js @@ -1,5 +1,6 @@ /* JavaScript Boilerplate helper file * * @version 1.1 + * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ (function (MODULE, $, undefined) { diff --git a/src/js/_.main.js b/src/js/_.main.js index ef5cfad..636ea52 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -1,13 +1,15 @@ /* JavaScript Boilerplate main scripting file * * @version 1.1 -*/ + * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate + */ + /* MODULE (our namespace name) and undefined are passed here * to ensure 1. namespace can be modified locally and isn't * overwritten outside of our function context * 2. the value of undefined is guaranteed as being truly * undefined. This is to avoid issues with undefined being * mutable pre-ES5. -*/ + */ (function (MODULE, $, undefined) { 'use strict'; From f9eafba78063dbf170633c035385a11e8ee06cf2 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Thu, 19 Dec 2013 11:16:57 +0530 Subject: [PATCH 10/63] Updated the README.md with build steps. --- README.md | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 29dfc4c..d323c58 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,15 @@ JavaScript Boilerplate is the collection of best practices using a design patter ## Files in Repository -1. `src/index.html` - An html help file illustrating helper functions. +1. `src/index.html` - An html help file illustrating helper functions. -2. `src/js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application. +2. `src/js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application. -3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. +3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. -4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components. +4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components. -5. `src/css/style.css` - Style sheets for the html help file. +5. `src/css/style.css` - Style sheets for the html help file. ## Usage @@ -63,6 +63,36 @@ You can also get the JavaScript Boilerplate through npm if you have already inst npm install javascript-boilerplate +## Build Instructions + +### We recommend using Grunt + +Grunt - Download and Install [Grunt](http://gruntjs.com). + +OR + +Install Grunt + + $ npm install grunt + +You can also Install all the dependencies using + + $ npm install + +### Updating Grunt: +``` +$ npm update -g grunt-cli +``` + +### Build the Project using + + $ grunt + +You should see the below message for a successful build and a folder name `dist` has been created with all the expected output, parallel to `src` folder, with all the tasks completed. + + Done, without errors. + + ## Contributing Anyone and everyone is welcome to [contribute](#). From 4a0a9fe633550a11fc09aecd0759c69cf6c98fb5 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 14 Feb 2014 18:59:26 +0530 Subject: [PATCH 11/63] Updated the README.md, add new grunt tasks grunt-contrib-connect, connect-livereload, grunt-open, matchdep. --- .jshintrc | 3 +- GruntFile.js | 110 ++++++++++++++++++++++++++++++++++++++++++--------- README.md | 21 +++++----- package.json | 6 ++- 4 files changed, 107 insertions(+), 33 deletions(-) diff --git a/.jshintrc b/.jshintrc index af30ed0..7cfe8c9 100644 --- a/.jshintrc +++ b/.jshintrc @@ -11,6 +11,7 @@ "document": true, "window": true, "FB": true, - "localStorage": true + "localStorage": true, + "require": true } } diff --git a/GruntFile.js b/GruntFile.js index 5fd36e1..8a6b94f 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -7,24 +7,40 @@ * https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT */ +// This is the default port that livereload listens on; +// change it if you configure livereload to use another port. +var LIVERELOAD_PORT = 35729; +// lrSnippet is just a function. +// It's a piece of Connect middleware that injects +// a script into the static served html. +var lrSnippet = require('connect-livereload')({ + port: LIVERELOAD_PORT +}); +// All the middleware necessary to serve static files. +var livereloadMiddleware = function(connect, options) { + return [ + // Inject a livereloading script into static files. + lrSnippet, + // Serve static files. + connect.static(options.base), + // Make empty directories browsable. + connect.directory(options.base) + ]; +}; // The first part is the "wrapper" function, which encapsulates your Grunt configuration module.exports = function(grunt) { 'use strict'; + // load all grunt tasks + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + // Project configuration grunt.initConfig({ // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. pkg: grunt.file.readJSON('package.json'), - // Configure the copy task to move files from the development to production folders - // copy: { // Task - // target: { - // files: { - // 'dist/': ['index.html', 'demo/**'] // 'destination': 'source' - // } - // } - // }, + clean: { folder: "dist" }, @@ -93,25 +109,81 @@ module.exports = function(grunt) { html: ['dist/{,*/}*.html'], css: ['dist/css/{,*/}*.css'], options: { - dirs: ['dist'] + dirs: ['dist'] + } + }, + open: { + server: { + path: 'http://localhost:9000' + } + + }, + connect: { + client: { + options: { + // The server's port, and the folder to serve from: + // Ex: 'localhost:9000' would serve up 'client/index.html' + port: 9000, + // change this to '0.0.0.0' to access the server from outside + hostname: 'localhost', + base: 'dist', + // Custom middleware for the HTTP server: + // The injected JavaScript reloads the page. + middleware: livereloadMiddleware + } + } + }, + // The watch task is used to run tasks in response to file changes + watch: { + client: { + // '**' is used to include all subdirectories + // and subdirectories of subdirectories, and so on, recursively. + files: ['dist/**/*'], + // In our case, we don't configure any additional tasks, + // since livereload is built into the watch task, + // and since the browser refresh is handled by the snippet. + // Any other tasks to run (e.g. compile CoffeeScript) go here: + tasks: [], + options: { + livereload: LIVERELOAD_PORT + } } } }); + +/* Don't need to load the individual tasks anymore as we have been using +'matchdep' task in the start to load all the tasks from node_modules automatically */ + // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-htmlmin'); - grunt.loadNpmTasks('grunt-usemin'); - //grunt.loadNpmTasks('grunt-contrib-watch'); - //grunt.loadNpmTasks('grunt-contrib-copy'); + // grunt.loadNpmTasks('grunt-contrib-clean'); + // grunt.loadNpmTasks('grunt-contrib-uglify'); + // grunt.loadNpmTasks('grunt-contrib-jshint'); + // grunt.loadNpmTasks('grunt-contrib-cssmin'); + // grunt.loadNpmTasks('grunt-contrib-htmlmin'); + // grunt.loadNpmTasks('grunt-usemin'); + // grunt.loadNpmTasks('grunt-open'); + // grunt.loadNpmTasks('grunt-contrib-watch'); + // grunt.loadNpmTasks('grunt-contrib-connect'); // Let's set up some tasks grunt.registerTask('test', ['jshint']); + grunt.registerTask('server', [ + 'open', + 'connect:client', + 'watch:client' + ]); + // The default task can be run just by typing "grunt" on the command line - grunt.registerTask('default', ['clean', 'useminPrepare', 'jshint', 'uglify', 'cssmin', 'htmlmin', 'usemin']); + grunt.registerTask('default', [ + 'clean', + 'useminPrepare', + 'jshint', + 'uglify', + 'cssmin', + 'htmlmin', + 'usemin' + ]); -}; +}; \ No newline at end of file diff --git a/README.md b/README.md index d323c58..18424d6 100644 --- a/README.md +++ b/README.md @@ -63,28 +63,25 @@ You can also get the JavaScript Boilerplate through npm if you have already inst npm install javascript-boilerplate -## Build Instructions +## Grunt Build -### We recommend using Grunt +Install [Grunt](http://gruntjs.com/getting-started). -Grunt - Download and Install [Grunt](http://gruntjs.com). +OR follow the below instructions to setup the 'Grunt' -OR +Install Grunt CLI, this will put the grunt command in your system path, allowing it to be run from any directory. -Install Grunt + $ npm install -g grunt-cli + +Now install Grunt $ npm install grunt -You can also Install all the dependencies using +You should also install all the dependencies using $ npm install -### Updating Grunt: -``` -$ npm update -g grunt-cli -``` - -### Build the Project using +### Build the Project $ grunt diff --git a/package.json b/package.json index 086db98..679906b 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,11 @@ "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-clean": "~0.4.1", - "grunt-usemin": "~0.1.12" + "grunt-usemin": "~0.1.12", + "grunt-contrib-connect": "~0.2.0", + "connect-livereload": "~0.3.2", + "grunt-open": "~0.2.3", + "matchdep": "~0.3.0" }, "version": "1.0.2", "license": "MIT/GPL" From 3ca9f7fa44413d5e3c95dc08bb66548f5566ae16 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 14 Feb 2014 19:06:55 +0530 Subject: [PATCH 12/63] Fixes some comments related to grunt build --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 18424d6..fbd2b31 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,9 @@ You can also get the JavaScript Boilerplate through npm if you have already inst Install [Grunt](http://gruntjs.com/getting-started). -OR follow the below instructions to setup the 'Grunt' +OR + +###Follow the below instructions to install and setup the `Grunt` Install Grunt CLI, this will put the grunt command in your system path, allowing it to be run from any directory. @@ -77,7 +79,7 @@ Now install Grunt $ npm install grunt -You should also install all the dependencies using +You should also install all the dependencies $ npm install @@ -85,7 +87,7 @@ You should also install all the dependencies using $ grunt -You should see the below message for a successful build and a folder name `dist` has been created with all the expected output, parallel to `src` folder, with all the tasks completed. +You should be able to see the below message for a successful build and a folder name `dist` has been created with all the expected output, parallel to `src` folder, with all the tasks completed. Done, without errors. From b85879e5d3d9adf7c4e99879813a307820decdd7 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 21 Feb 2014 16:17:58 +0530 Subject: [PATCH 13/63] Updated the .gitignore file --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 3e06722..2dabbdc 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ dist *.patch /*.html .DS_Store +.sizecache.json node_modules From f1df59672ca23238df85dbc58898b363cb91681d Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 21 Feb 2014 16:20:17 +0530 Subject: [PATCH 14/63] Clean up the tasks, added new onces like matchdep, uncss, compare_size, notify etc. with live-reload. --- GruntFile.js | 190 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 136 insertions(+), 54 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index 8a6b94f..b8865fc 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -33,18 +33,28 @@ module.exports = function(grunt) { 'use strict'; - // load all grunt tasks + // Load grunt tasks automatically require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); - // Project configuration + // Define the configuration for all the tasks grunt.initConfig({ // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. pkg: grunt.file.readJSON('package.json'), + // Project settings + jsb: { + // Configurable paths + app: 'src', + dist: 'dist' + }, + + // Before generating any new files, remove any previously-created files. clean: { - folder: "dist" + folder: '<%= jsb.dist %>' }, - uglify: { // Task + + + uglify: { options: { // The banner is inserted at the top of the output banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' @@ -58,60 +68,100 @@ module.exports = function(grunt) { } } }, - htmlmin: { // Task - dist: { // Target - options: { // Target options - /*removeCommentsFromCDATA: true, - // https://github.com/yeoman/grunt-usemin/issues/44 - //collapseWhitespace: true, - collapseBooleanAttributes: true, + htmlmin: { + dist: { + options: { + collapseBooleanAttributes: false, + collapseWhitespace: false, removeAttributeQuotes: true, - removeRedundantAttributes: true, - useShortDoctype: true, + removeCommentsFromCDATA: true, removeEmptyAttributes: true, - removeOptionalTags: true*/ - - removeComments: false, - collapseWhitespace: false + removeOptionalTags: true, + removeRedundantAttributes: true, + useShortDoctype: true }, - files: { // Dictionary of files - 'dist/index.html': 'src/index.html', // 'destination': 'source' - 'dist/demo/facebook_friends_list.html': 'src/demo/facebook_friends_list.html' + files: [{ + expand: true, + cwd: '<%= jsb.app %>', + src: '{,*/}*.html', + dest: '<%= jsb.dist %>' + }] + // files: { // Dictionary of files + // 'dist/index.html': 'src/index.html', // 'destination': 'source' + // 'dist/demo/facebook_friends_list.html': 'src/demo/facebook_friends_list.html' + // } + } + }, + + + // Removed unused css + uncss: { + dist: { + files: { + '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], + '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] } + }, + options: { + compress: true } }, - cssmin: { // Task - combine: { + + cssmin: { + dist: { + options: { + keepSpecialComments: 0, + report: "min", + selectorsMergeMode: "ie8" + }, files: { // Dictionary of files - 'dist/css/style.min.css': ['src/css/style.css'], - 'dist/demo/css/style.min.css': ['src/demo/css/style.css'] + '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], + '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] } } }, - jshint: { // Task + + // Make sure code styles are up to par and there are no obvious mistakes + jshint: { // Define the files to lint - files: ['Gruntfile.js', 'src/js/*.js', 'src/demo/js/*.js'], + all: [ + 'Gruntfile.js', + '<%= jsb.app %>/js/*.js', + '<%= jsb.app %>/demo/js/*.js' + ], // Configure JSHint (documented at http://www.jshint.com/docs/) options: { // More options here if you want to override JSHint defaults jshintrc: '.jshintrc' } }, - // watch: { // Task - // files: ['<%= jshint.files %>'], - // tasks: ['jshint'] - // }, + + // Reads HTML for usemin blocks to enable smart builds that automatically + // concat, minify and revision files. Creates configurations in memory so + // additional tasks can operate on them useminPrepare: { - html: 'dist/index.html' + html: '<%= jsb.app %>/index.html', + options: { + dest: '<%= jsb.dist %>' + } }, + + // Performs rewrites based on rev and the useminPrepare configuration usemin: { - //html: 'dist/index.html' - html: ['dist/{,*/}*.html'], - css: ['dist/css/{,*/}*.css'], + html: ['<%= jsb.dist %>/{,*/}*.html'], + css: ['<%= jsb.dist %>/css/{,*/}*.css'], options: { - dirs: ['dist'] + assetsDirs: ['<%= jsb.dist %>'] } }, + + // Compare CSS output's + compare_size: { + files: [ + '<%= jsb.app %>/css/**', + '<%= jsb.dist %>/css/**' + ] + }, open: { server: { path: 'http://localhost:9000' @@ -126,19 +176,20 @@ module.exports = function(grunt) { port: 9000, // change this to '0.0.0.0' to access the server from outside hostname: 'localhost', - base: 'dist', + base: '<%= jsb.app %>', // Custom middleware for the HTTP server: // The injected JavaScript reloads the page. middleware: livereloadMiddleware } } }, - // The watch task is used to run tasks in response to file changes + + // Watches files for changes and runs tasks based on the changed files watch: { client: { // '**' is used to include all subdirectories // and subdirectories of subdirectories, and so on, recursively. - files: ['dist/**/*'], + files: ['<%= jsb.app %>/**/*'], // In our case, we don't configure any additional tasks, // since livereload is built into the watch task, // and since the browser refresh is handled by the snippet. @@ -148,27 +199,50 @@ module.exports = function(grunt) { livereload: LIVERELOAD_PORT } } + }, + notify: { + task_name: { + options: { + // Task-specific options go here. + } + }, + watch: { + options: { + title: 'Task Complete', // optional + message: 'SASS and Uglify finished running' //required + } + }, + server: { + options: { + message: 'Server is ready!' + } + }, + connect: { + options: { + message: 'Connected to server!' + } + } + }, + // shell: { + // docco: { + // command: 'docco -o jsdocumentation -l linear src/js/*.js' + // } + // }, + jsdoc: { + dist: { + src: ['<%= jsb.app %>/js/_.main.js'], + options: { + destination: '<%= jsb.dist %>/doc' + } + } } }); -/* Don't need to load the individual tasks anymore as we have been using -'matchdep' task in the start to load all the tasks from node_modules automatically */ - - // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm - // grunt.loadNpmTasks('grunt-contrib-clean'); - // grunt.loadNpmTasks('grunt-contrib-uglify'); - // grunt.loadNpmTasks('grunt-contrib-jshint'); - // grunt.loadNpmTasks('grunt-contrib-cssmin'); - // grunt.loadNpmTasks('grunt-contrib-htmlmin'); - // grunt.loadNpmTasks('grunt-usemin'); - // grunt.loadNpmTasks('grunt-open'); - // grunt.loadNpmTasks('grunt-contrib-watch'); - // grunt.loadNpmTasks('grunt-contrib-connect'); + /* Don't need to load the individual tasks anymore as we have been using + 'matchdep' task in the start to load all the tasks from node_modules automatically */ // Let's set up some tasks - grunt.registerTask('test', ['jshint']); - grunt.registerTask('server', [ 'open', 'connect:client', @@ -183,7 +257,15 @@ module.exports = function(grunt) { 'uglify', 'cssmin', 'htmlmin', - 'usemin' + 'usemin', + 'uncss', + 'compare_size', + 'notify:server' + ]); + + // Let's generate the JavaScript documentation + grunt.registerTask('js-doc', [ + 'jsdoc' ]); }; \ No newline at end of file From 16ed609544e88c641484c086e5e4859c0bcc66ea Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 21 Feb 2014 16:21:59 +0530 Subject: [PATCH 15/63] Updated most of the tasks to the latest version's alongwith adding new once. --- package.json | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 679906b..60cb3c7 100644 --- a/package.json +++ b/package.json @@ -19,19 +19,24 @@ "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", - "grunt-contrib-uglify": "~0.2.0", + "grunt-contrib-uglify": "~0.2.7", "grunt-contrib-jshint": "~0.4.3", - "grunt-contrib-watch": "~0.4.3", + "grunt-contrib-watch": "~0.4.4", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-copy": "~0.4.1", - "grunt-contrib-cssmin": "~0.6.0", + "grunt-contrib-cssmin": "~0.6.2", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-clean": "~0.4.1", - "grunt-usemin": "~0.1.12", + "grunt-usemin": "~0.1.13", "grunt-contrib-connect": "~0.2.0", "connect-livereload": "~0.3.2", "grunt-open": "~0.2.3", - "matchdep": "~0.3.0" + "matchdep": "~0.3.0", + "grunt-notify": "~0.2.17", + "grunt-shell": "~0.6.4", + "grunt-uncss": "~0.2.0", + "grunt-compare-size": "~0.4.0", + "grunt-jsdoc": "~0.5.1" }, "version": "1.0.2", "license": "MIT/GPL" From 534f077ac59a488f9576e967198ac69714294451 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 26 Feb 2014 16:34:56 +0530 Subject: [PATCH 16/63] Added few more ignore files i.e. .tmp dir, .sass-cache/ and src/css/style.scss --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 2dabbdc..07dafa1 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,6 @@ dist .DS_Store .sizecache.json node_modules +.sass-cache/ +.tmp/ +src/css/style.scss From 09a55cc9d55abb377865970b07d06adb8e961264 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 26 Feb 2014 16:36:54 +0530 Subject: [PATCH 17/63] Refined the build further while adding more tasks like jsdoc, sass, compass, uncss, concurrent and time-grunt etc. --- GruntFile.js | 263 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 189 insertions(+), 74 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index b8865fc..a6c4005 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -36,6 +36,9 @@ module.exports = function(grunt) { // Load grunt tasks automatically require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + // Time how long tasks take. Can help when optimizing build times + require('time-grunt')(grunt); + // Define the configuration for all the tasks grunt.initConfig({ // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. @@ -47,79 +50,60 @@ module.exports = function(grunt) { app: 'src', dist: 'dist' }, - - // Before generating any new files, remove any previously-created files. + // Empties folders to start fresh clean: { - folder: '<%= jsb.dist %>' - }, - - - uglify: { - options: { - // The banner is inserted at the top of the output - banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' - }, - dist: { // Target - files: { // Dictionary of files - 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], - 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], - 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], - 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] - } - } - }, - htmlmin: { dist: { - options: { - collapseBooleanAttributes: false, - collapseWhitespace: false, - removeAttributeQuotes: true, - removeCommentsFromCDATA: true, - removeEmptyAttributes: true, - removeOptionalTags: true, - removeRedundantAttributes: true, - useShortDoctype: true - }, files: [{ - expand: true, - cwd: '<%= jsb.app %>', - src: '{,*/}*.html', - dest: '<%= jsb.dist %>' + dot: true, + src: [ + '.tmp', + '<%= jsb.dist %>/*', + '!<%= jsb.dist %>/.git*' + ] }] - // files: { // Dictionary of files - // 'dist/index.html': 'src/index.html', // 'destination': 'source' - // 'dist/demo/facebook_friends_list.html': 'src/demo/facebook_friends_list.html' - // } - } + }, + server: '.tmp' }, + // sass: { + // dist: { + // files: { + // '<%= jsb.dist %>/css/style.min.css': '<%= jsb.app %>/css/style.scss' + // } + // } + // }, - // Removed unused css - uncss: { - dist: { - files: { - '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], - '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] - } - }, - options: { - compress: true - } - }, + // By default, your `index.html`'s will take care of + // minification. These next options are pre-configured if you do not wish + // to use the Usemin blocks. + // cssmin: { + // dist: { + // options: { + // keepSpecialComments: 0, + // report: "min", + // selectorsMergeMode: "ie8" + // }, + // files: { // Dictionary of files + // '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], + // '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] + // } + // } + // }, - cssmin: { - dist: { - options: { - keepSpecialComments: 0, - report: "min", - selectorsMergeMode: "ie8" - }, - files: { // Dictionary of files - '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], - '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] - } - } - }, + // uglify: { + // options: { + // // The banner is inserted at the top of the output + // banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' + // }, + // dist: { // Target + // files: { // Dictionary of files + // 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], + // 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], + // 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], + // 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] + // } + // } + // }, // Make sure code styles are up to par and there are no obvious mistakes jshint: { @@ -136,22 +120,72 @@ module.exports = function(grunt) { } }, + // Compiles Sass to CSS and generates necessary files if requested + compass: { + options: { + sassDir: '<%= jsb.app %>/css', + cssDir: '.tmp/css', + // generatedImagesDir: '.tmp/images/generated', + // imagesDir: '<%= jsb.app %>/images', + // javascriptsDir: '<%= jsb.app %>/scripts', + // fontsDir: '<%= jsb.app %>/styles/fonts', + // importPath: '<%= jsb.app %>/bower_components', + // httpImagesPath: '/images', + // httpGeneratedImagesPath: '/images/generated', + // httpFontsPath: '/styles/fonts', + relativeAssets: false, + assetCacheBuster: false + }, + dist: { + options: { + //generatedImagesDir: '<%= jsb.dist %>/images/generated' + } + }, + server: { + options: { + debugInfo: true + } + } + }, + // Reads HTML for usemin blocks to enable smart builds that automatically // concat, minify and revision files. Creates configurations in memory so // additional tasks can operate on them useminPrepare: { - html: '<%= jsb.app %>/index.html', options: { dest: '<%= jsb.dist %>' - } + }, + //staging: '.tmp', + html: ['<%= jsb.app %>/index.html'] }, // Performs rewrites based on rev and the useminPrepare configuration usemin: { - html: ['<%= jsb.dist %>/{,*/}*.html'], - css: ['<%= jsb.dist %>/css/{,*/}*.css'], options: { assetsDirs: ['<%= jsb.dist %>'] + }, + html: ['<%= jsb.dist %>/{,*/}*.html'], + css: ['<%= jsb.dist %>/css/{,*/}*.css'] + }, + + htmlmin: { + dist: { + options: { + collapseBooleanAttributes: true, + collapseWhitespace: false, + removeAttributeQuotes: false, + removeCommentsFromCDATA: false, + removeEmptyAttributes: false, + removeOptionalTags: false, + removeRedundantAttributes: false, + useShortDoctype: false + }, + files: [{ + expand: true, + cwd: '<%= jsb.dist %>', + src: '{,*/}*.html', + dest: '<%= jsb.dist %>' + }] } }, @@ -186,6 +220,16 @@ module.exports = function(grunt) { // Watches files for changes and runs tasks based on the changed files watch: { + js: { + files: ['<%= jsb.app %>/scripts/{,*/}*.js'], + tasks: ['jshint'], + options: { + livereload: true + } + }, + gruntfile: { + files: ['Gruntfile.js'] + }, client: { // '**' is used to include all subdirectories // and subdirectories of subdirectories, and so on, recursively. @@ -198,7 +242,15 @@ module.exports = function(grunt) { options: { livereload: LIVERELOAD_PORT } - } + }, + compass: { + files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], + tasks: ['compass:server', 'autoprefixer'] + }, + // css: { + // files: '**/*.scss', + // tasks: ['sass'] + // } }, notify: { task_name: { @@ -235,6 +287,59 @@ module.exports = function(grunt) { destination: '<%= jsb.dist %>/doc' } } + }, + // Removed unused css + uncss: { + dist: { + files: { + '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], + '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] + } + }, + options: { + compress: true, + report: 'min' + } + }, + + // Copies remaining files to places other tasks can use + copy: { + dist: { + files: [{ + expand: true, + dot: true, + cwd: '<%= jsb.app %>', + dest: '<%= jsb.dist %>', + src: [ + '*.{ico,png,txt}', + '.htaccess', + 'images/{,*/}*.webp', + '{,*/}*.html' + ] + }] + }, + styles: { + expand: true, + dot: true, + cwd: '<%= jsb.app %>/css', + dest: '.tmp/css/', + src: '{,*/}*.css' + } + }, + + // Run some tasks in parallel to speed up build process + concurrent: { + server: [ + 'compass:server', + 'copy:styles' + ], + test: [ + 'copy:styles' + ], + dist: [ + 'compass', + 'copy:styles' + ] } }); @@ -251,18 +356,28 @@ module.exports = function(grunt) { // The default task can be run just by typing "grunt" on the command line grunt.registerTask('default', [ - 'clean', + 'clean:dist', 'useminPrepare', + 'concurrent:dist', 'jshint', - 'uglify', + 'concat', 'cssmin', - 'htmlmin', + //'uncss', + 'uglify', + 'copy:dist', 'usemin', - 'uncss', + 'htmlmin', + //'sass', 'compare_size', 'notify:server' ]); + + grunt.registerTask('build-uncss', [ + 'default', + 'uncss' + ]); + // Let's generate the JavaScript documentation grunt.registerTask('js-doc', [ 'jsdoc' From d87dfc024dee43032346ecaca2ee618b87c3edd1 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 26 Feb 2014 16:38:01 +0530 Subject: [PATCH 18/63] Added and updated further npm packages like jsdoc, sass, compass, uncss, concurrent and time-grunt etc. --- package.json | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 60cb3c7..10360c5 100644 --- a/package.json +++ b/package.json @@ -19,24 +19,28 @@ "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", - "grunt-contrib-uglify": "~0.2.7", - "grunt-contrib-jshint": "~0.4.3", - "grunt-contrib-watch": "~0.4.4", + "grunt-contrib-jshint": "~0.8.0", + "grunt-contrib-watch": "~0.5.3", "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-copy": "~0.4.1", - "grunt-contrib-cssmin": "~0.6.2", - "grunt-contrib-htmlmin": "~0.1.3", - "grunt-contrib-clean": "~0.4.1", - "grunt-usemin": "~0.1.13", + "grunt-contrib-uglify": "~0.3.2", + "grunt-contrib-copy": "~0.5.0", + "grunt-contrib-cssmin": "~0.7.0", + "grunt-contrib-htmlmin": "~0.2.0", + "grunt-contrib-clean": "~0.5.0", + "grunt-usemin": "~2.0.1", "grunt-contrib-connect": "~0.2.0", "connect-livereload": "~0.3.2", "grunt-open": "~0.2.3", "matchdep": "~0.3.0", "grunt-notify": "~0.2.17", "grunt-shell": "~0.6.4", - "grunt-uncss": "~0.2.0", "grunt-compare-size": "~0.4.0", - "grunt-jsdoc": "~0.5.1" + "grunt-jsdoc": "~0.5.1", + "grunt-contrib-sass": "~0.7.2", + "grunt-contrib-compass": "~0.7.2", + "grunt-uncss": "~0.2.0", + "grunt-concurrent": "~0.4.3", + "time-grunt": "~0.2.9" }, "version": "1.0.2", "license": "MIT/GPL" From 5b1efdab1abab3b72d10b68f52f20b98f19a82ec Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 26 Feb 2014 16:39:27 +0530 Subject: [PATCH 19/63] Formatted the CSS --- src/css/style.css | 436 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 338 insertions(+), 98 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 4846179..38d4124 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,109 +1,349 @@ /* ============================================================================= HTML5 Boilerplate CSS: h5bp.com/css ========================================================================== */ - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } -audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } -audio:not([controls]) { display: none; } -[hidden] { display: none; } - -html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } -html, button, input, select, textarea { font-family: sans-serif; color: #222; } -body { margin: 0; font-size: 1em; line-height: 1.4; } - -::-moz-selection { background:#FF0; color:#000; text-shadow: none; } -::selection { background: #FF0; color:#000; text-shadow: none; } - -a { color: #00e;outline:none } -a:visited { color: #551a8b; } -a:hover { color: #06e; } -a:focus { outline: thin dotted; } -a:hover, a:active { outline: 0; } - -abbr[title] { border-bottom: 1px dotted; } -b, strong { font-weight: bold; } -blockquote { margin: 1em 40px; } -dfn { font-style: italic; } -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } -ins { background: #ff9; color: #000; text-decoration: none; } -mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } -pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } -pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } -q { quotes: none; } -q:before, q:after { content: ""; content: none; } -small { font-size: 85%; } - -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - -ul, ol { margin: 1em 0; padding: 0 0 0 40px; } -dd { margin: 0 0 0 40px; } -nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } - -img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } - -svg:not(:root) { overflow: hidden; } - -figure { margin: 0; } - -form { margin: 0; } -fieldset { border: 0; margin: 0; padding: 0; } -label { cursor: pointer; } -legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } -button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } -button, input { line-height: normal; } -button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } -button[disabled], input[disabled] { cursor: default; } -input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } -input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } -button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -textarea { overflow: auto; vertical-align: top; resize: vertical; } -input:valid, textarea:valid { } -input:invalid, textarea:invalid { background-color: #f0dddd; } - -table { border-collapse: collapse; border-spacing: 0; } -td { vertical-align: top; } - -.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } - -h1, h2, h3, h4, h5, h6, ul, li, pre { margin:0;padding:0 } - + article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { + display: block; +} +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; +} +audio:not([controls]) { + display: none; +} +[hidden] { + display: none; +} +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +html, button, input, select, textarea { + font-family: sans-serif; + color: #222; +} +body { + margin: 0; + font-size: 1em; + line-height: 1.4; +} +::-moz-selection { + background:#FF0; + color:#000; + text-shadow: none; +} +::selection { + background: #FF0; + color:#000; + text-shadow: none; +} +a { + color: #00e; + outline:none +} +a:visited { + color: #551a8b; +} +a:hover { + color: #06e; +} +a:focus { + outline: thin dotted; +} +a:hover, a:active { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, strong { + font-weight: bold; +} +blockquote { + margin: 1em 40px; +} +dfn { + font-style: italic; +} +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} +ins { + background: #ff9; + color: #000; + text-decoration: none; +} +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} +pre, code, kbd, samp { + font-family: monospace, serif; + _font-family:'courier new', monospace; + font-size: 1em; +} +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +q { + quotes: none; +} +q:before, q:after { + content:""; + content: none; +} +small { + font-size: 85%; +} +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +ul, ol { + margin: 1em 0; + padding: 0 0 0 40px; +} +dd { + margin: 0 0 0 40px; +} +nav ul, nav ol { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +form { + margin: 0; +} +fieldset { + border: 0; + margin: 0; + padding: 0; +} +label { + cursor: pointer; +} +legend { + border: 0; + *margin-left: -7px; + padding: 0; + white-space: normal; +} +button, input, select, textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; +} +button, input[type="button"], input[type="reset"], input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; +} +button[disabled], input[disabled] { + cursor: default; +} +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} +input:valid, textarea:valid { +} +input:invalid, textarea:invalid { + background-color: #f0dddd; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td { + vertical-align: top; +} +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; +} +h1, h2, h3, h4, h5, h6, ul, li, pre { + margin:0; + padding:0 +} /* ===== Primary Styles ======================================================== Author: SapientNitro (2011) (http://www.sapient.com) ========================================================================== */ /** Basic settings **/ -body { background:#FFC;color:#171717;font-size:100%;font-family:Arial, Helvetica, sans-serif;font-weight:normal;line-height:1em;padding:10px } -h1, h2, h3, h4, h5, h6, section, article, p { display:block;margin:0; padding:10px } -h1 { font-size:2em } -h2 { background:#F04E00;color:#FFF;font-size:1.7em;margin-bottom:10px } -h3 { background:#666;color:#FFF;font-size:1.4emp;padding:8px;margin-bottom:10px } -h4 { font-size:1.2em } -h5 { font-size:1em } -h6 { font-size:0.8em } -a { text-decoration:none;outline:none } -section { background:#FFF;font-size:1em;line-height:1.2em;padding:10px } -section.example { background:#EEE } -article { padding:0;margin-bottom:10px } -p { font-size:1em;line-height:1.4em } -ul { padding:0 50px } -ul li { padding:5px 0;line-height:1.2em } - -#main { border:#FC0 1px dashed } - - + body { + background:#FFC; + color:#171717; + font-size:100%; + font-family:Arial, Helvetica, sans-serif; + font-weight:normal; + line-height:1em; + padding:10px +} +h1, h2, h3, h4, h5, h6, section, article, p { + display:block; + margin:0; + padding:10px +} +h1 { + font-size:2em +} +h2 { + background:#F04E00; + color:#FFF; + font-size:1.7em; + margin-bottom:10px +} +h3 { + background:#666; + color:#FFF; + font-size:1.4emp; + padding:8px; + margin-bottom:10px +} +h4 { + font-size:1.2em +} +h5 { + font-size:1em +} +h6 { + font-size:0.8em +} +a { + text-decoration:none; + outline:none +} +section { + background:#FFF; + font-size:1em; + line-height:1.2em; + padding:10px +} +section.example { + background:#EEE +} +article { + padding:0; + margin-bottom:10px +} +p { + font-size:1em; + line-height:1.4em +} +ul { + padding:0 50px +} +ul li { + padding:5px 0; + line-height:1.2em +} +#main { + border:#FC0 1px dashed +} /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ - -.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } -.ir br { display: none; } -.hidden { display: none !important; visibility: hidden; } -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; margin: 0; overflow: visible; position: static } -.invisible { visibility: hidden; } -.clear_fix:before, .clear_fix:after { content: ""; display: table; } -.clear_fix:after { clear: both; } -.clear_fix { *zoom: 1; } \ No newline at end of file + .ir { + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; +} +.ir br { + display: none; +} +.hidden { + display: none !important; + visibility: hidden; +} +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + clip: auto; + margin: 0; + overflow: visible; + position: static +} +.invisible { + visibility: hidden; +} +.clear_fix:before, .clear_fix:after { + content:""; + display: table; +} +.clear_fix:after { + clear: both; +} +.clear_fix { + *zoom: 1; +} \ No newline at end of file From 56a9d38a07d798d01078a7137c0e0cf234d29996 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 26 Feb 2014 16:42:29 +0530 Subject: [PATCH 20/63] Update the usemin references and also removed the jquery CDN version to have the better control --- src/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 91976d2..7481367 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,7 @@ - + @@ -212,17 +212,17 @@

removeCookie(name)

- - - + + + - - - - - - + + + + + + From 16f2117010e1a923b9297758b4b162bb91d22601 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 28 Feb 2014 11:46:27 +0530 Subject: [PATCH 21/63] Added the JS syntax highlighting through prism.js --- src/index.html | 48 +++++++++++++++++++++++++----------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/index.html b/src/index.html index 7481367..da52079 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@ + + From 565bd7e52911a0d8c355495cdcbcbddad4b167a9 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 28 Feb 2014 11:49:52 +0530 Subject: [PATCH 22/63] Added the JS syntax highlighting through prism.js --- src/css/prism.css | 126 +++++++++++++++++++++++++++++++++++++++++++ src/js/libs/prism.js | 11 ++++ 2 files changed, 137 insertions(+) create mode 100644 src/css/prism.css create mode 100644 src/js/libs/prism.js diff --git a/src/css/prism.css b/src/css/prism.css new file mode 100644 index 0000000..1e61e11 --- /dev/null +++ b/src/css/prism.css @@ -0,0 +1,126 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.builtin { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #a67f59; + background: hsla(0,0%,100%,.5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + + +.token.regex, +.token.important { + color: #e90; +} + +.token.important { + font-weight: bold; +} + +.token.entity { + cursor: help; +} + diff --git a/src/js/libs/prism.js b/src/js/libs/prism.js new file mode 100644 index 0000000..d44cea3 --- /dev/null +++ b/src/js/libs/prism.js @@ -0,0 +1,11 @@ +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * MIT license http://www.opensource.org/licenses/mit-license.php/ + * @author Lea Verou http://lea.verou.me + */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; +Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; +Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; +Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g}; +; +Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); +; From 8f8d835e03a44cfb9e8e250de958dd1f8fb6d92b Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Thu, 3 Apr 2014 21:45:27 +0530 Subject: [PATCH 23/63] Updated the readme.md with further instrcutions related to grunt server task and compass --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index fbd2b31..c3449fb 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,17 @@ You should also install all the dependencies $ npm install +###Follow the below instructions to install and setup the `compass task` +_Run this task with the `grunt compass` command._ + +[Compass](http://compass-style.org/) is an open-source authoring framework for the [Sass](http://sass-lang.com/) css preprocessor. It helps you build stylesheets faster with a huge library of Sass mixins and functions, advanced tools for spriting, and workflow improvements including file based Sass configuration and a simple pattern for building and using Compass extensions. + +This task requires you to have [Ruby](http://www.ruby-lang.org/en/downloads/), [Sass](http://sass-lang.com/tutorial.html), and [Compass](http://compass-style.org/install/) >=0.12.2 installed. If you're on OS X or Linux you probably already have Ruby installed; test with `ruby -v` in your terminal. When you've confirmed you have Ruby installed, run `gem update --system && gem install compass` to install Compass and Sass. + +### Fire up the grunt server command and see the preview in browser with live-reload enabled for `app` folder content + + $ grunt server + ### Build the Project $ grunt From 44d668e23644602be586312894bd14a5e0ba5b5f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Thu, 3 Apr 2014 21:51:38 +0530 Subject: [PATCH 24/63] Added the version in the header --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c3449fb..aafb42b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [JavaScript Boilerplate](https://github.com/mdarif/JavaScript-Boilerplate) +# [JavaScript Boilerplate v1.2](https://github.com/mdarif/JavaScript-Boilerplate) JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. @@ -117,6 +117,10 @@ Anyone and everyone is welcome to [contribute](#). * MIT/GPL license +## Change Log + + + ## Author From 3e6dc61c5c8a82514d96635a528b7bc0fcbedf8a Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sun, 13 Apr 2014 18:26:36 +0530 Subject: [PATCH 25/63] Added couple of ignore text's i.e. sublime project, workspace name --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 07dafa1..c312a1c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,5 @@ node_modules .sass-cache/ .tmp/ src/css/style.scss +jsb.sublime-project +jsb.sublime-workspace From 0f35d6600a7749c8b4c78b7defeec2a6665b4dfb Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sun, 13 Apr 2014 18:27:41 +0530 Subject: [PATCH 26/63] Added grunt-karma plugin to write down unit test cases for boilerplate --- GruntFile.js | 44 ++++++++++++++++++++++++++++++++++++++++- package.json | 8 +++++++- test/karma.conf.js | 30 ++++++++++++++++++++++++++++ test/unit/_.mainSpec.js | 9 +++++++++ 4 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 test/karma.conf.js create mode 100644 test/unit/_.mainSpec.js diff --git a/GruntFile.js b/GruntFile.js index a6c4005..89ae0b8 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -36,6 +36,9 @@ module.exports = function(grunt) { // Load grunt tasks automatically require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + var plugins = ['karma-mocha']; + var browsers = []; + // Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt); @@ -246,7 +249,7 @@ module.exports = function(grunt) { compass: { files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] - }, + } // css: { // files: '**/*.scss', // tasks: ['sass'] @@ -327,6 +330,21 @@ module.exports = function(grunt) { } }, + // Configure karma + // karma: { + // unit: { + // configFile: 'test/karma.conf.js', + // background: true + // }, + // watch: { + // karma: { + // files: ['src/**/*.js', 'test/unit/**/*.js'], + // tasks: ['karma:unit:run'] + // } + // } + // }, + //}, + // Run some tasks in parallel to speed up build process concurrent: { server: [ @@ -340,7 +358,27 @@ module.exports = function(grunt) { 'compass', 'copy:styles' ] + }, + karma: { + unit: { + configFile: 'test/karma.conf.js' + } } + + // karma: { + // options: { + // configFile: 'test/karma.conf.js', + // runnerPort: 9999, + // //browsers: ['Chrome'] //['Chrome', 'Firefox'] + // }, + // continuous: { + // singleRun: true, + // //browsers: ['PhantomJS'] + // }, + // dev: { + // reporters: 'dots' + // } + // } }); @@ -383,4 +421,8 @@ module.exports = function(grunt) { 'jsdoc' ]); + grunt.registerTask('test', [ + 'karma' + ]); + }; \ No newline at end of file diff --git a/package.json b/package.json index 10360c5..2676d72 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,13 @@ "grunt-contrib-compass": "~0.7.2", "grunt-uncss": "~0.2.0", "grunt-concurrent": "~0.4.3", - "time-grunt": "~0.2.9" + "time-grunt": "~0.2.9", + "karma": "^0.12.6", + "grunt-karma": "^0.8.2", + "karma-chrome-launcher": "^0.1.3", + "karma-firefox-launcher": "^0.1.3", + "karma-phantomjs-launcher": "^0.1.4", + "karma-jasmine": "^0.1.5" }, "version": "1.0.2", "license": "MIT/GPL" diff --git a/test/karma.conf.js b/test/karma.conf.js new file mode 100644 index 0000000..3ff0b94 --- /dev/null +++ b/test/karma.conf.js @@ -0,0 +1,30 @@ +module.exports = function(config){ + config.set({ + + basePath : '../', + + files : [ + //'src/js/**/*.js', + 'test/unit/**/*.js' + ], + + autoWatch : true, + + frameworks: ['jasmine'], + + browsers : ['Chrome'], + + plugins : [ + 'karma-chrome-launcher', + 'karma-firefox-launcher', + 'karma-phantomjs-launcher', + 'karma-jasmine' + ], + + junitReporter : { + outputFile: 'test_out/unit.xml', + suite: 'unit' + } + + }); +}; \ No newline at end of file diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js new file mode 100644 index 0000000..45af703 --- /dev/null +++ b/test/unit/_.mainSpec.js @@ -0,0 +1,9 @@ +'use strict'; + +/* jasmine specs for _.main.js go here */ + +describe("$.log(message) function", function() { + it("contains spec with an expectation", function() { + expect(true).toBe(true); + }); +}); \ No newline at end of file From 68d3d21d7f831cbbbd9d9d11167501086ec3c550 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Fri, 18 Apr 2014 18:22:38 +0530 Subject: [PATCH 27/63] Added grunt-karma task with jasmine as frameworks alongwith PhantomJS as a browser to run unit tests in bash itself with autoWatch option --- GruntFile.js | 30 -------------------- test/karma.conf.js | 63 +++++++++++++++++++++++++++++++++-------- test/unit/_.mainSpec.js | 35 ++++++++++++++++++++--- 3 files changed, 82 insertions(+), 46 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index 89ae0b8..baba34f 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -330,21 +330,6 @@ module.exports = function(grunt) { } }, - // Configure karma - // karma: { - // unit: { - // configFile: 'test/karma.conf.js', - // background: true - // }, - // watch: { - // karma: { - // files: ['src/**/*.js', 'test/unit/**/*.js'], - // tasks: ['karma:unit:run'] - // } - // } - // }, - //}, - // Run some tasks in parallel to speed up build process concurrent: { server: [ @@ -364,21 +349,6 @@ module.exports = function(grunt) { configFile: 'test/karma.conf.js' } } - - // karma: { - // options: { - // configFile: 'test/karma.conf.js', - // runnerPort: 9999, - // //browsers: ['Chrome'] //['Chrome', 'Firefox'] - // }, - // continuous: { - // singleRun: true, - // //browsers: ['PhantomJS'] - // }, - // dev: { - // reporters: 'dots' - // } - // } }); diff --git a/test/karma.conf.js b/test/karma.conf.js index 3ff0b94..ba34806 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,30 +1,69 @@ module.exports = function(config){ config.set({ + // base path, that will be used to resolve files and exclude basePath : '../', + // list of files/patterns to load in the browser files : [ - //'src/js/**/*.js', + 'src/js/libs/jquery.js', + 'src/js/*.js', + 'src/js/**/*.js', 'test/unit/**/*.js' ], + // list of files to exclude + exclude: [], + + // use dolts reporter, as travis terminal does not support escaping sequences + // possible values: 'dots', 'progress', 'junit', 'teamcity' + // CLI --reporters progress + reporters: ['progress'], + + // web server port + // CLI --port 9876 + port: 9876, + + // cli runner port + // CLI --runner-port 9100 + runnerPort: 9100, + + // enable / disable colors in the output (reporters and logs) + // CLI --colors --no-colors + colors: true, + + // enable / disable watching file and executing tests whenever any file changes + // CLI --auto-watch --no-auto-watch autoWatch : true, + // load jasmine (this replaces JASMINE and JASMINE_ADAPTER file references) frameworks: ['jasmine'], - browsers : ['Chrome'], + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + // CLI --browsers Chrome,Firefox,Safari + browsers : ['PhantomJS'], - plugins : [ - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-phantomjs-launcher', - 'karma-jasmine' - ], + // If browser does not capture in given timeout [ms], kill it + // CLI --capture-timeout 5000 + captureTimeout: 5000, - junitReporter : { - outputFile: 'test_out/unit.xml', - suite: 'unit' - } + // report which specs are slower than 500ms + // CLI --report-slower-than 500 + reportSlowerThan: 500, + // load the needed plugins (according to karma docs, this should not be needed tho) + plugins : [ + 'karma-jasmine', + 'karma-chrome-launcher', + 'karma-firefox-launcher', + 'karma-phantomjs-launcher' + ] }); }; \ No newline at end of file diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index 45af703..4f9aba0 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -2,8 +2,35 @@ /* jasmine specs for _.main.js go here */ -describe("$.log(message) function", function() { - it("contains spec with an expectation", function() { - expect(true).toBe(true); +describe("Test _.main.js", function() { + + /** + * Test logging function, for debugging mode + */ + describe("test $.log() function", function() { + it("MODULE.config.debug should be true", function() { + expect(MODULE.config.debug).toBe(true); + }); + + it("typeof window.console should be object", function() { + expect(typeof window.console).toBeDefined(); + }) + + it("typeof window.console.log to be defined", function() { + expect(typeof window.console.log).toBeDefined(); + }) + + it("console.debug should be available", function(){ + expect(console.debug).toBeDefined(); + }) }); -}); \ No newline at end of file + + /** + * Test $.toType() function + */ + describe("test $.toType() function", function() { + it("") + + + }) +}) \ No newline at end of file From 5e5b9ce04a16346b5fca7bae7210c8b19c50e448 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 19 Apr 2014 16:30:09 +0530 Subject: [PATCH 28/63] Have added jasmine globals for jshint to remove the warnings and errors. --- .jshintrc | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/.jshintrc b/.jshintrc index 7cfe8c9..dc44846 100644 --- a/.jshintrc +++ b/.jshintrc @@ -15,3 +15,24 @@ "require": true } } + +var globals = { + _: false, + _V_: false, + afterEach: false, + beforeEach: false, + confirm: false, + context: false, + describe: false, + expect: false, + it: false, + jasmine: false, + JSHINT: false, + mostRecentAjaxRequest: false, + qq: false, + runs: false, + spyOn: false, + spyOnEvent: false, + waitsFor: false, + xdescribe: false +}; \ No newline at end of file From b901a5854c57497d1a25f265b1a78146ed2e1b13 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 19 Apr 2014 16:31:26 +0530 Subject: [PATCH 29/63] Formatted the main js alongwith with some very minor changes in the code --- src/js/_.main.js | 98 ++++++++++++++++++++++++------------------------ 1 file changed, 50 insertions(+), 48 deletions(-) diff --git a/src/js/_.main.js b/src/js/_.main.js index 636ea52..7fe4214 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -11,44 +11,45 @@ * mutable pre-ES5. */ -(function (MODULE, $, undefined) { +(function(MODULE, $, undefined) { 'use strict'; /** * Logging function, for debugging mode */ - $.log = function (message) { + $.log = function(message) { if (MODULE.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) { console.debug(message); - } /*else { + } + /*else { alert(message); }*/ }; - /** + /** * Angus Croll awesome typeof fix from http://goo.gl/GtvsU */ - $.toType = (function toType(global) { - return function (obj) { - if (obj === global) { - return 'global'; - } - return ({}).toString.call(obj).match(/\s([a-z|A-Z]+)/)[1].toLowerCase(); - }; - }(this)); - - /*$.toType(window); //'global' (all browsers) + $.toType = (function toType(global) { + return function(obj) { + if (obj === global) { + return 'global'; + } + return ({}).toString.call(obj).match(/\s([a-z|A-Z]+)/)[1].toLowerCase(); + }; + }(this)); + + /*$.toType(window); //'global' (all browsers) $.toType([1,2,3]); //'array' (all browsers) $.toType(/a-z/); //'regexp' (all browsers) $.toType(JSON); //'json' (all browsers) $.toType(null); //'null' (all browsers) $.toType(undefined); //'undefined' (all browsers)*/ - //etc.. + //etc.. - /** + /** * Private properties */ - var name = 'Arif', + var name = 'Mohammed Arif', age = 30; /** @@ -60,44 +61,46 @@ * 2. It enforces good semicolon habits. * 3. Doesn't have much of the baggage traditionally associated with functions and scope. */ - var getName = function () { - $.log('My name is ' + name + 'I am ' + age + ' old'); + var getName = function() { + return 'My name is ' + name + ', I am ' + age + ' old.'; }; - /** + + /** * Public methods and properties */ MODULE.title = 'Interactive Developer'; - MODULE.sayHello = function () { - $.log('hello world'); + MODULE.sayHello = function() { + return "Hello World!" }; - /* + /* * Singletons serve as a namespace provider which isolate implementation code * from the global namespace so as to provide a single point of access for functions, * this is useful for organizing code into logical sections. * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. * This way it's always present when the script is executed and doesn't have to be instantiated separately. - */ - MODULE.subModule = (function () { + */ + MODULE.subModule = (function() { function _subModule() { /** - * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. - * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. - */ + * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. + * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. + */ /*jshint validthis: true */ var _this = this; /* Store this to avoid scope conflicts */ - this.fbReady = function () { + this.fbReady = function() { /** * This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots. */ - window.fbAsyncInit = function () { + window.fbAsyncInit = function() { FB.init({ - appId: MODULE.config.appId, /*read from config*/ + appId: MODULE.config.appId, + /*read from config*/ status: true, cookie: true, xfbml: true @@ -106,7 +109,7 @@ /** * The FB.Event.subscribe is used to subscribe to login events */ - FB.Event.subscribe('auth.login', function () { + FB.Event.subscribe('auth.login', function() { // do something when user logs in //_this.login(); }); @@ -114,7 +117,7 @@ /** * The FB.Event.subscribe is used to subscribe to logout events */ - FB.Event.subscribe('auth.logout', function () { + FB.Event.subscribe('auth.logout', function() { // do something when user logs out. //_this.logout(); }); @@ -122,7 +125,7 @@ /** * To determine if a user is connected to your app */ - FB.getLoginStatus(function (response) { + FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and connected to your // app, and response.authResponse supplies @@ -141,24 +144,23 @@ /** * Load the SDK Asynchronously */ - (function (d) { - var js, id = 'facebook-jssdk'; + (function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } - js = d.createElement('script'); + js = d.createElement(s); js.id = id; - js.async = true; - js.src = '//connect.facebook.net/en_US/all.js'; - d.getElementsByTagName('head')[0].appendChild(js); - }(document)); + js.src = "//connect.facebook.net/en_US/all.js"; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); }; /** * facebookLogin - FB.login prompts the user to authorize your application */ - this.facebookLogin = function () { - FB.login(function (response) { + this.facebookLogin = function() { + FB.login(function(response) { if (response.status === 'connected') { $.log('User is logged in and granted some permissions.'); } else if ((response.status === 'not_authorized') || response.authResponse === null) { @@ -172,7 +174,7 @@ /** * Init call */ - this.init = function () { + this.init = function() { _this.fbReady(); return this; /*this refer to MODULE.subModule*/ }; @@ -182,7 +184,7 @@ return new _subModule(); /*creating a new object of subModule rather then a funtion*/ }()); -/** - * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal - */ -}(window.MODULE = window.MODULE || {}, jQuery)); + /** + * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal + */ +}(window.MODULE = window.MODULE || {}, jQuery)); \ No newline at end of file From 1887cae985dcd5a17fe5410a6fbd808dd61561f9 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 19 Apr 2014 16:32:11 +0530 Subject: [PATCH 30/63] Added specs for toType and facebook method --- test/unit/_.mainSpec.js | 148 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 134 insertions(+), 14 deletions(-) diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index 4f9aba0..449c1e6 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -2,35 +2,155 @@ /* jasmine specs for _.main.js go here */ -describe("Test _.main.js", function() { +/*Matchers Reference +• toEqual checks for equality, not necessarily the same object. +• toBe checks if two objects are the same. +• toBeTruthy checks if a value is truthy (not just true). +• toBeFalsy checks if a value is falsy (not just false). +• toContain checks if a value is inside another. +• toBeDefined checks if a value is defined. +• toBeUndefined checks if a value is undefined. +• toBeNull checks if a value is null. +• toBeNaN checks if a value is NaN. +• toBeCloseTo checks decimal proximity. +• toMatch checks if a value matches a given regular expression. +• toThrow checks if a function throws an error. +• .not inverts the meaning of the following matcher. +*/ + +/*Reserved Words in Jasmine +• jasmine (and everything in its namespace) +• describe +• it +• expect +• beforeEach +• afterEach +• runs +• waits +• waitsFor +• spyOn +• xdescribe +• xit +*/ + +/*List of Falsy Values +• false +• 0 +• "" +• undefined (note that the variable undefined isn’t always undefined!) +• null +• NaN +*/ + +describe("Test main js file", function() { /** - * Test logging function, for debugging mode - */ - describe("test $.log() function", function() { - it("MODULE.config.debug should be true", function() { - expect(MODULE.config.debug).toBe(true); + * Test logging function, for debugging mode + */ + describe("test log function", function() { // suite + it("MODULE.config.debug should be true", function() { // specification or spec + expect(MODULE.config.debug).toEqual(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the + //toEqual matcher }); it("typeof window.console should be object", function() { - expect(typeof window.console).toBeDefined(); + expect(typeof window.console !== 'undefined').toEqual(true); }) it("typeof window.console.log to be defined", function() { - expect(typeof window.console.log).toBeDefined(); + expect(typeof window.console.log !== 'undefined').toEqual(true); }) - it("console.debug should be available", function(){ + it("console.debug should be available", function() { expect(console.debug).toBeDefined(); }) }); /** - * Test $.toType() function - */ - describe("test $.toType() function", function() { - it("") + * Test $.toType() function + */ + describe("test toType function", function() { + xit("test window object 'global'", function() { + expect($.toType(window)).toEqual("global"); + }) + + it("test array object", function() { + expect($.toType([1, 2, 3])).toEqual("array"); + }) + + it("test regex object", function() { + expect($.toType(/a-z/)).toEqual("regexp"); + }) + + it("test object", function() { + expect($.toType({ + a: 4 + })).toEqual("object"); + }) + + it("test error object", function() { + expect($.toType(new ReferenceError)).toEqual("error"); + }) + + it("test date object", function() { + expect($.toType(new Date)).toEqual("date"); + }) + + it("test Math object", function() { + expect($.toType(Math)).toEqual("math"); + }) + + it("test JSON object", function() { + expect($.toType(JSON)).toEqual("json"); + }) + + it("test Number object", function() { + expect($.toType(3)).toEqual("number"); + }) + it("test String object", function() { + expect($.toType("Arif")).toEqual("string"); + }) + + it("test Boolean object", function() { + expect($.toType(new Boolean(true))).toEqual("boolean"); + }) + + xit("test null", function() { + expect($.toType(null)).toEqual("null"); + }) + + xit("test undefined", function() { + expect($.toType(undefined)).toEqual("undefined"); + }) + }) + + describe("test public method", function() { + it("MODULE.sayHello", function() { + expect(MODULE.sayHello()).toEqual("Hello World!"); + }) + }) + + + describe("Facebook", function() { + it("is FB available (i.e. is facebook library included)", function() { + expect(typeof FB != "undefined").not.toEqual(true); + }); + + it("do we have an application id", function() { + expect(MODULE.config.appId != "").toEqual(true); + }); + + it("initialize the facebook library", function() { + MODULE.subModule.fbReady(); + }); + + xit("Checking for active facebook session", function() { + FB.getLoginStatus(); + waitsFor(function() { + return FB.getLoginStatusResponse() && FB.getLoginStatusResponse().authResponse; + }, "response.authResponse", 7000); + }); + }); - }) }) \ No newline at end of file From 8da83c195547850482b1b8d43eda129854c56e95 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sun, 20 Apr 2014 18:39:45 +0530 Subject: [PATCH 31/63] Fixed some jasmine configuration issues and also added more uni tests in main spec --- .gitignore | 1 + GruntFile.js | 34 +++++++++--- package.json | 3 +- test/karma.conf.js | 119 +++++++++++++++++++++------------------- test/unit/_.mainSpec.js | 3 +- 5 files changed, 96 insertions(+), 64 deletions(-) diff --git a/.gitignore b/.gitignore index c312a1c..b4707b5 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ node_modules src/css/style.scss jsb.sublime-project jsb.sublime-workspace +.grunt diff --git a/GruntFile.js b/GruntFile.js index baba34f..86d8834 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -250,10 +250,6 @@ module.exports = function(grunt) { files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] } - // css: { - // files: '**/*.scss', - // tasks: ['sass'] - // } }, notify: { task_name: { @@ -346,11 +342,35 @@ module.exports = function(grunt) { }, karma: { unit: { - configFile: 'test/karma.conf.js' + //configFile: 'test/karma.conf.js' } - } + }, + jasmine: { + src: 'src/js/*.js', + options: { + specs: 'test/unit/**/*.js', + helpers: ['src/js/_.config.js', 'src/js/_.main.js'], + keepRunner: true, + // host : 'http://127.0.0.1:8000/', + // summary: true, + vendor: [ + "src/js/libs/*.js" + //"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" + ] + }, + // watch: { + // pivotal: { + // files: ['src/js/*.js','test/unit/**/*.js'], + // tasks: 'jasmine:pivotal:build' + // } + // } + watch: { + files: 'src/js/**/*.js', + tasks: ['jasmine'] + } + }, }); - +// /* Don't need to load the individual tasks anymore as we have been using 'matchdep' task in the start to load all the tasks from node_modules automatically */ diff --git a/package.json b/package.json index 2676d72..982b7ce 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,8 @@ "karma-chrome-launcher": "^0.1.3", "karma-firefox-launcher": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", - "karma-jasmine": "^0.1.5" + "karma-jasmine": "^0.2.2", + "grunt-contrib-jasmine": "^0.6.3" }, "version": "1.0.2", "license": "MIT/GPL" diff --git a/test/karma.conf.js b/test/karma.conf.js index ba34806..e072611 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,69 +1,78 @@ -module.exports = function(config){ - config.set({ +module.exports = function(config) { + config.set({ - // base path, that will be used to resolve files and exclude - basePath : '../', + // base path, that will be used to resolve files and exclude + basePath: '../', - // list of files/patterns to load in the browser - files : [ - 'src/js/libs/jquery.js', - 'src/js/*.js', - 'src/js/**/*.js', - 'test/unit/**/*.js' - ], + // list of files/patterns to load in the browser + files: [ + 'src/js/libs/jquery.js', + 'src/js/**/*.js', + 'test/unit/**/*.js' + ], - // list of files to exclude - exclude: [], + // preprocessors: { + // '**/src/js/**/*.js': 'coverage' + // }, - // use dolts reporter, as travis terminal does not support escaping sequences - // possible values: 'dots', 'progress', 'junit', 'teamcity' - // CLI --reporters progress - reporters: ['progress'], + // list of files to exclude + exclude: [], - // web server port - // CLI --port 9876 - port: 9876, + // use dolts reporter, as travis terminal does not support escaping sequences + // possible values: 'dots', 'progress', 'junit', 'teamcity' + // CLI --reporters progress + reporters: ['progress'], - // cli runner port - // CLI --runner-port 9100 - runnerPort: 9100, + // coverageReporter: { + // type: 'html', + // dir: 'coverage/' + // }, - // enable / disable colors in the output (reporters and logs) - // CLI --colors --no-colors - colors: true, + // web server port + // CLI --port 9876 + port: 9876, - // enable / disable watching file and executing tests whenever any file changes - // CLI --auto-watch --no-auto-watch - autoWatch : true, + // cli runner port + // CLI --runner-port 9100 + runnerPort: 9100, - // load jasmine (this replaces JASMINE and JASMINE_ADAPTER file references) - frameworks: ['jasmine'], + // enable / disable colors in the output (reporters and logs) + // CLI --colors --no-colors + colors: true, - // Start these browsers, currently available: - // - Chrome - // - ChromeCanary - // - Firefox - // - Opera - // - Safari (only Mac) - // - PhantomJS - // - IE (only Windows) - // CLI --browsers Chrome,Firefox,Safari - browsers : ['PhantomJS'], + // enable / disable watching file and executing tests whenever any file changes + // CLI --auto-watch --no-auto-watch + autoWatch: true, - // If browser does not capture in given timeout [ms], kill it - // CLI --capture-timeout 5000 - captureTimeout: 5000, + // load jasmine (this replaces JASMINE and JASMINE_ADAPTER file references) + frameworks: ['jasmine'], - // report which specs are slower than 500ms - // CLI --report-slower-than 500 - reportSlowerThan: 500, + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + // CLI --browsers Chrome,Firefox,Safari + browsers: ['PhantomJS'], + //browsers: ['Chrome'], - // load the needed plugins (according to karma docs, this should not be needed tho) - plugins : [ - 'karma-jasmine', - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-phantomjs-launcher' - ] - }); + // If browser does not capture in given timeout [ms], kill it + // CLI --capture-timeout 5000 + captureTimeout: 8000, + + // report which specs are slower than 500ms + // CLI --report-slower-than 500 + reportSlowerThan: 500, + + // load the needed plugins (according to karma docs, this should not be needed tho) + plugins: [ + 'karma-jasmine', + 'karma-chrome-launcher', + 'karma-firefox-launcher', + 'karma-phantomjs-launcher' + ] + }); }; \ No newline at end of file diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index 449c1e6..63fadd1 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -48,8 +48,9 @@ describe("Test main js file", function() { * Test logging function, for debugging mode */ describe("test log function", function() { // suite + it("MODULE.config.debug should be true", function() { // specification or spec - expect(MODULE.config.debug).toEqual(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the + expect(MODULE.config.debug).toBe(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the //toEqual matcher }); From 6679623fded92de23b6f289d49389465255d1d2c Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 15:39:13 +0530 Subject: [PATCH 32/63] Setup travis-ci integration to run test suite. --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..6e5919d --- /dev/null +++ b/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + - "0.10" From 6fe8fed8adab083e15f24bab5b5152761e19464c Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 21:15:45 +0530 Subject: [PATCH 33/63] Updated the .jshintrc for jasmine reserved words --- .jshintrc | 45 ++++++++++++++++++++++----------------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/.jshintrc b/.jshintrc index dc44846..6f9723d 100644 --- a/.jshintrc +++ b/.jshintrc @@ -6,33 +6,32 @@ "newcap":false, "globals": { "jQuery": true, + "$": true, "console": true, "module": true, "document": true, "window": true, "FB": true, "localStorage": true, - "require": true + "require": true, + "_": false, + "_V_": false, + "afterEach": false, + "beforeEach": false, + "confirm": false, + "context": false, + "describe": false, + "expect": true, + "it": false, + "jasmine": false, + "JSHINT": false, + "mostRecentAjaxRequest": false, + "qq": false, + "runs": false, + "spyOn": false, + "spyOnEvent": false, + "waitsFor": false, + "xdescribe": false, + "xit": false } -} - -var globals = { - _: false, - _V_: false, - afterEach: false, - beforeEach: false, - confirm: false, - context: false, - describe: false, - expect: false, - it: false, - jasmine: false, - JSHINT: false, - mostRecentAjaxRequest: false, - qq: false, - runs: false, - spyOn: false, - spyOnEvent: false, - waitsFor: false, - xdescribe: false -}; \ No newline at end of file +} \ No newline at end of file From c3fb98b770ad2b5289ecd17b8295f8fc14bcb21f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 21:19:44 +0530 Subject: [PATCH 34/63] Added scripts 'test' which would trigger npm test after fetching the project on Travis --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 982b7ce..8d89846 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,9 @@ "repository": { "type": "git", "url": "https://github.com/mdarif/JavaScript-Boilerplate.git" + }, + "scripts": { + "test": "grunt travis --verbose" }, "dependencies": {}, "devDependencies": { @@ -51,4 +54,4 @@ }, "version": "1.0.2", "license": "MIT/GPL" -} +} \ No newline at end of file From da9edb7068ee9e4347ce74a86b0baddba0a50f52 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 21:27:37 +0530 Subject: [PATCH 35/63] Have added grunt-cli dependency to run the build successfully on Travis server --- .travis.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 6e5919d..0ce3be2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,5 @@ language: node_js node_js: - "0.10" +before_script: + - npm install -g grunt-cli \ No newline at end of file From b4f4f322f3ca5dadc75e8f140ee5b14233d0dc98 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 21:58:44 +0530 Subject: [PATCH 36/63] Fixed small issue in travis config --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 0ce3be2..f563239 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ language: node_js node_js: - "0.10" -before_script: +before_install: - npm install -g grunt-cli \ No newline at end of file From 1971c85c4de4581ad010fa1fe3a4c5d9b9f6dbe9 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 22:03:39 +0530 Subject: [PATCH 37/63] Have grunt-cli as dependency to mitigate the Travis build issue --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 8d89846..a0e51c5 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", + "grunt-cli": "0.1.13", "grunt-contrib-jshint": "~0.8.0", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-concat": "~0.3.0", @@ -54,4 +55,4 @@ }, "version": "1.0.2", "license": "MIT/GPL" -} \ No newline at end of file +} From f767f8505d215d5bc7b2788344f1a991964c866f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 22:19:04 +0530 Subject: [PATCH 38/63] Fixed Travis build issue which happened due to grunt-cli --- .travis.yml | 4 ++-- GruntFile.js | 18 ++++++++++-------- README.md | 2 +- package.json | 3 +-- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/.travis.yml b/.travis.yml index f563239..c3d0c0b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ language: node_js node_js: - "0.10" -before_install: - - npm install -g grunt-cli \ No newline at end of file +before_script: + - npm install grunt-cli -g \ No newline at end of file diff --git a/GruntFile.js b/GruntFile.js index 86d8834..673c7be 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -249,6 +249,10 @@ module.exports = function(grunt) { compass: { files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] + }, + watch: { + files: 'src/js/**/*.js', + tasks: ['jasmine'] } }, notify: { @@ -342,14 +346,14 @@ module.exports = function(grunt) { }, karma: { unit: { - //configFile: 'test/karma.conf.js' + configFile: 'test/karma.conf.js' } }, jasmine: { src: 'src/js/*.js', options: { specs: 'test/unit/**/*.js', - helpers: ['src/js/_.config.js', 'src/js/_.main.js'], + //helpers: ['src/js/_.config.js'], keepRunner: true, // host : 'http://127.0.0.1:8000/', // summary: true, @@ -357,20 +361,16 @@ module.exports = function(grunt) { "src/js/libs/*.js" //"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ] - }, + } // watch: { // pivotal: { // files: ['src/js/*.js','test/unit/**/*.js'], // tasks: 'jasmine:pivotal:build' // } // } - watch: { - files: 'src/js/**/*.js', - tasks: ['jasmine'] - } }, }); -// + // /* Don't need to load the individual tasks anymore as we have been using 'matchdep' task in the start to load all the tasks from node_modules automatically */ @@ -397,6 +397,7 @@ module.exports = function(grunt) { 'htmlmin', //'sass', 'compare_size', + 'test', 'notify:server' ]); @@ -412,6 +413,7 @@ module.exports = function(grunt) { ]); grunt.registerTask('test', [ + 'jshint', 'karma' ]); diff --git a/README.md b/README.md index aafb42b..808586b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [JavaScript Boilerplate v1.2](https://github.com/mdarif/JavaScript-Boilerplate) +# [JavaScript Boilerplate v1.2](https://github.com/mdarif/JavaScript-Boilerplate) [![Build Status](https://travis-ci.org/mdarif/JavaScript-Boilerplate.svg?branch=1.2)](https://travis-ci.org/mdarif/JavaScript-Boilerplate) JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. diff --git a/package.json b/package.json index a0e51c5..9b730c8 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,11 @@ "url": "https://github.com/mdarif/JavaScript-Boilerplate.git" }, "scripts": { - "test": "grunt travis --verbose" + "test": "grunt test" }, "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", - "grunt-cli": "0.1.13", "grunt-contrib-jshint": "~0.8.0", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-concat": "~0.3.0", From 38b60f6ccf08ae8333fa3508e239666fdd409e05 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Mon, 21 Apr 2014 22:29:11 +0530 Subject: [PATCH 39/63] Fixed Travis build issue which happened due to grunt-cli --- .travis.yml | 2 +- package.json | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index c3d0c0b..0ce3be2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,4 +2,4 @@ language: node_js node_js: - "0.10" before_script: - - npm install grunt-cli -g \ No newline at end of file + - npm install -g grunt-cli \ No newline at end of file diff --git a/package.json b/package.json index 9b730c8..b5a81fb 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "type": "git", "url": "https://github.com/mdarif/JavaScript-Boilerplate.git" }, - "scripts": { + "scripts": { "test": "grunt test" }, "dependencies": {}, @@ -50,7 +50,8 @@ "karma-firefox-launcher": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "karma-jasmine": "^0.2.2", - "grunt-contrib-jasmine": "^0.6.3" + "grunt-contrib-jasmine": "^0.6.3", + "grunt-cli": "^0.1.13" }, "version": "1.0.2", "license": "MIT/GPL" From ca70781090dc0ee37205425017a2e90ed292a8e5 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 10:52:16 +0530 Subject: [PATCH 40/63] Fixed Travis build issue which happened due to grunt-cli --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b5a81fb..b9fa9b4 100644 --- a/package.json +++ b/package.json @@ -50,9 +50,9 @@ "karma-firefox-launcher": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "karma-jasmine": "^0.2.2", - "grunt-contrib-jasmine": "^0.6.3", - "grunt-cli": "^0.1.13" + "grunt-contrib-jasmine": "^0.6.3" }, "version": "1.0.2", "license": "MIT/GPL" } + From 3ee0612cc3e0be78607e478ea9d076a79183cebc Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 11:15:14 +0530 Subject: [PATCH 41/63] Fixed Travis build issue which happened due to grunt-cli --- .travis.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 0ce3be2..4b7ebc9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,4 +2,5 @@ language: node_js node_js: - "0.10" before_script: - - npm install -g grunt-cli \ No newline at end of file + - npm install -g grunt-cli + - npm install grunt \ No newline at end of file From 1d7d4b01b17b2c305ecc0794553c7c8c0eae6acd Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 11:28:58 +0530 Subject: [PATCH 42/63] Fixed Travis build issue which happened due to grunt-cli --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index b9fa9b4..2a3c5b7 100644 --- a/package.json +++ b/package.json @@ -56,3 +56,5 @@ "license": "MIT/GPL" } + + From ec3e03217fe556bf077304dcc0c1ef406b357d6f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 11:35:07 +0530 Subject: [PATCH 43/63] Have changed the MODULE to JSB and also bring couple of helper methods into main js --- src/js/_.config.js | 8 +-- src/js/_.helper.js | 49 ++-------------- src/js/_.main.js | 135 ++++++++++++++++----------------------------- 3 files changed, 57 insertions(+), 135 deletions(-) diff --git a/src/js/_.config.js b/src/js/_.config.js index 8124792..9b0e378 100644 --- a/src/js/_.config.js +++ b/src/js/_.config.js @@ -12,9 +12,9 @@ * Any value that may change in the future */ -(function (MODULE, $, undefined) { +(function (JSB, $, undefined) { - MODULE.config = { + JSB.config = { language: 'english', debug: true, appId: '150352665021939', @@ -48,6 +48,6 @@ }; /** - * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal. + * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal. */ -}(window.MODULE = window.MODULE || {}, jQuery)); +}(window.JSB = window.JSB || {}, jQuery)); diff --git a/src/js/_.helper.js b/src/js/_.helper.js index 1e20f5e..52023f1 100644 --- a/src/js/_.helper.js +++ b/src/js/_.helper.js @@ -3,7 +3,7 @@ * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ -(function (MODULE, $, undefined) { +(function (JSB, $, undefined) { 'use strict'; /* @@ -13,7 +13,7 @@ * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. * This way it's always present when the script is executed and doesn't have to be instantiated separately. */ - MODULE.helper = (function () { + JSB.helper = (function () { function _helper() { /** @@ -162,45 +162,6 @@ } }; - /* - * Return the URI of site - * Return protocol, hostname and port if found - * - */ - this.getDomain = function () { - var port = "", - url = ""; - - if (window.location.port) { - port = ":" + window.location.port; - } - url = window.location.protocol + "//" + window.location.hostname + port + "/"; - return url; - }; - - /* - * This method will return the query string from the URL of the website - * Accept two parameters key, default_ - * key : The name of the key who's value need to be fetch - * default_ : The default value which will return when nothing will found or key does not exists. - * If not pass anything then it will return blank value. - */ - this.getQueryString = function (key, default_) { - if (default_ === null) { - default_ = ""; - } - - key = key.replace(/\[/,"\\[").replace(/\]/,"\\]"); - var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"), - qs = regex.exec(window.location.href); - - if (qs === null) { - return default_; - } else { - return qs[1]; - } - }; - /* * This method will check for blank value in the provided string * This will return true if provided string contain blank value and false if not @@ -273,13 +234,13 @@ return this; /*returning this from a method is a common way to allow "chaining" of methods together*/ }; - return this.init(); /*this refer to MODULE.helper.init()*/ + return this.init(); /*this refer to JSB.helper.init()*/ } return new _helper(); /*creating a new object of helper rather then a funtion*/ }()); /** - * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal + * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal */ -}(window.MODULE = window.MODULE || {}, jQuery)); +}(window.JSB = window.JSB || {}, jQuery)); diff --git a/src/js/_.main.js b/src/js/_.main.js index 7fe4214..497d531 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -3,7 +3,7 @@ * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate */ -/* MODULE (our namespace name) and undefined are passed here +/* JSB (our namespace name) and undefined are passed here * to ensure 1. namespace can be modified locally and isn't * overwritten outside of our function context * 2. the value of undefined is guaranteed as being truly @@ -11,14 +11,14 @@ * mutable pre-ES5. */ -(function(MODULE, $, undefined) { +(function(JSB, $, undefined) { 'use strict'; /** * Logging function, for debugging mode */ $.log = function(message) { - if (MODULE.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) { + if (JSB.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) { console.debug(message); } /*else { @@ -69,9 +69,9 @@ /** * Public methods and properties */ - MODULE.title = 'Interactive Developer'; - MODULE.sayHello = function() { - return "Hello World!" + JSB.title = 'Interactive Developer'; + JSB.sayHello = function() { + return "Hello World!"; }; /* @@ -81,8 +81,8 @@ * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. * This way it's always present when the script is executed and doesn't have to be instantiated separately. */ - MODULE.subModule = (function() { - function _subModule() { + JSB.helper = (function() { + function _helper() { /** * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. @@ -93,98 +93,59 @@ var _this = this; /* Store this to avoid scope conflicts */ - this.fbReady = function() { - /** - * This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots. - */ - window.fbAsyncInit = function() { - FB.init({ - appId: MODULE.config.appId, - /*read from config*/ - status: true, - cookie: true, - xfbml: true - }); - - /** - * The FB.Event.subscribe is used to subscribe to login events - */ - FB.Event.subscribe('auth.login', function() { - // do something when user logs in - //_this.login(); - }); - - /** - * The FB.Event.subscribe is used to subscribe to logout events - */ - FB.Event.subscribe('auth.logout', function() { - // do something when user logs out. - //_this.logout(); - }); - - /** - * To determine if a user is connected to your app - */ - FB.getLoginStatus(function(response) { - if (response.status === 'connected') { - // the user is logged in and connected to your - // app, and response.authResponse supplies - // the user's ID, a valid access token, a signed - // request, and the time the access token - // and signed request each expire - var uid = response.authResponse.userID, - accessToken = response.authResponse.accessToken; - $.log("uid: " + uid + "\nAccess Token: " + accessToken); - } else if (response.status === 'not_authorized') { - $.log("The user is logged in to Facebook but not connected to the app"); - } - }); - }; - - /** - * Load the SDK Asynchronously - */ - (function(d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) { - return; - } - js = d.createElement(s); - js.id = id; - js.src = "//connect.facebook.net/en_US/all.js"; - fjs.parentNode.insertBefore(js, fjs); - }(document, 'script', 'facebook-jssdk')); + /* + * Return the URI of site + * Return protocol, hostname and port if found + * + */ + this.getDomain = function () { + var port = "", + url = ""; + + if (window.location.port) { + port = ":" + window.location.port; + } + url = window.location.protocol + "//" + window.location.hostname + port + "/"; + return url; }; - /** - * facebookLogin - FB.login prompts the user to authorize your application - */ - this.facebookLogin = function() { - FB.login(function(response) { - if (response.status === 'connected') { - $.log('User is logged in and granted some permissions.'); - } else if ((response.status === 'not_authorized') || response.authResponse === null) { - $.log('User has not granted permissions!'); - } - }, { - scope: 'publish_stream' - }); + /* + * This method will return the query string from the URL of the website + * Accept two parameters key, default_ + * key : The name of the key who's value need to be fetch + * default_ : The default value which will return when nothing will found or key does not exists. + * If not pass anything then it will return blank value. + */ + this.getQueryString = function (key, default_) { + if (default_ === null) { + default_ = ""; + } + + key = key.replace(/\[/,"\\[").replace(/\]/,"\\]"); + var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"), + qs = regex.exec(window.location.href); + + if (qs === null) { + return default_; + } else { + return qs[1]; + } }; /** * Init call */ this.init = function() { - _this.fbReady(); - return this; /*this refer to MODULE.subModule*/ + _this.getDomain(); + return this; /*this refer to JSB.subModule*/ }; return this.init(); /*initialize the init()*/ } - return new _subModule(); /*creating a new object of subModule rather then a funtion*/ + return new _helper(); /*creating a new object of subModule rather then a funtion*/ }()); /** - * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal + * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal */ -}(window.MODULE = window.MODULE || {}, jQuery)); \ No newline at end of file +}(window.JSB = window.JSB || {}, jQuery)); \ No newline at end of file From 37a055e0e64e6b3569f28bfac9be9443ba019e8b Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 11:43:05 +0530 Subject: [PATCH 44/63] Have updated the test cases as well w.r.t module changed --- test/unit/_.mainSpec.js | 80 ++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index 63fadd1..def17b1 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -49,22 +49,22 @@ describe("Test main js file", function() { */ describe("test log function", function() { // suite - it("MODULE.config.debug should be true", function() { // specification or spec - expect(MODULE.config.debug).toBe(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the + it("JSB.config.debug should be true", function() { // specification or spec + expect(JSB.config.debug).toBe(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the //toEqual matcher }); it("typeof window.console should be object", function() { expect(typeof window.console !== 'undefined').toEqual(true); - }) + }); it("typeof window.console.log to be defined", function() { expect(typeof window.console.log !== 'undefined').toEqual(true); - }) + }); it("console.debug should be available", function() { expect(console.debug).toBeDefined(); - }) + }); }); /** @@ -73,85 +73,85 @@ describe("Test main js file", function() { describe("test toType function", function() { xit("test window object 'global'", function() { expect($.toType(window)).toEqual("global"); - }) + }); it("test array object", function() { expect($.toType([1, 2, 3])).toEqual("array"); - }) + }); it("test regex object", function() { expect($.toType(/a-z/)).toEqual("regexp"); - }) + }); it("test object", function() { expect($.toType({ a: 4 })).toEqual("object"); - }) + }); it("test error object", function() { expect($.toType(new ReferenceError)).toEqual("error"); - }) + }); it("test date object", function() { expect($.toType(new Date)).toEqual("date"); - }) + }); it("test Math object", function() { expect($.toType(Math)).toEqual("math"); - }) + }); it("test JSON object", function() { expect($.toType(JSON)).toEqual("json"); - }) + }); it("test Number object", function() { expect($.toType(3)).toEqual("number"); - }) + }); it("test String object", function() { expect($.toType("Arif")).toEqual("string"); - }) + }); it("test Boolean object", function() { expect($.toType(new Boolean(true))).toEqual("boolean"); - }) + }); xit("test null", function() { expect($.toType(null)).toEqual("null"); - }) + }); xit("test undefined", function() { expect($.toType(undefined)).toEqual("undefined"); - }) - }) + }); + }); describe("test public method", function() { - it("MODULE.sayHello", function() { - expect(MODULE.sayHello()).toEqual("Hello World!"); - }) - }) + it("JSB.sayHello", function() { + expect(JSB.sayHello()).toEqual("Hello World!"); + }); + }); - describe("Facebook", function() { - it("is FB available (i.e. is facebook library included)", function() { - expect(typeof FB != "undefined").not.toEqual(true); - }); + // describe("Facebook", function() { + // it("is FB available (i.e. is facebook library included)", function() { + // expect(typeof FB != "undefined").not.toEqual(true); + // }); - it("do we have an application id", function() { - expect(MODULE.config.appId != "").toEqual(true); - }); + // it("do we have an application id", function() { + // expect(JSB.config.appId != "").toEqual(true); + // }); - it("initialize the facebook library", function() { - MODULE.subModule.fbReady(); - }); + // it("initialize the facebook library", function() { + // JSB.subModule.fbReady(); + // }); - xit("Checking for active facebook session", function() { - FB.getLoginStatus(); - waitsFor(function() { - return FB.getLoginStatusResponse() && FB.getLoginStatusResponse().authResponse; - }, "response.authResponse", 7000); - }); - }); + // xit("Checking for active facebook session", function() { + // FB.getLoginStatus(); + // waitsFor(function() { + // return FB.getLoginStatusResponse() && FB.getLoginStatusResponse().authResponse; + // }, "response.authResponse", 7000); + // }); + // }); }) \ No newline at end of file From 95ffc4d86bdd4b8774614b3efb66c1af8f01d0ce Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 12:20:11 +0530 Subject: [PATCH 45/63] Changed test case runner to jasmine --- GruntFile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/GruntFile.js b/GruntFile.js index 673c7be..dcd93ee 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -414,7 +414,7 @@ module.exports = function(grunt) { grunt.registerTask('test', [ 'jshint', - 'karma' + 'jasmine' ]); }; \ No newline at end of file From 869f744c0e24abc61920e777d78b24b08ccc65c1 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 12:49:16 +0530 Subject: [PATCH 46/63] Removed the grunt setting --- .travis.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 4b7ebc9..0ce3be2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,5 +2,4 @@ language: node_js node_js: - "0.10" before_script: - - npm install -g grunt-cli - - npm install grunt \ No newline at end of file + - npm install -g grunt-cli \ No newline at end of file From 476111e92fe58645891125347da0ce563e9c653f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 17:48:16 +0530 Subject: [PATCH 47/63] Updated the README, author name, unit test case alongwith some small configuration changes --- .jshintrc | 1 + GruntFile.js | 13 +++++++------ README.md | 16 ++++++++-------- src/index.html | 22 +++++++++++----------- src/js/_.config.js | 3 ++- src/js/_.helper.js | 3 ++- src/js/_.main.js | 11 ++++++----- test/karma.conf.js | 2 +- test/unit/_.mainSpec.js | 25 +++++++++++++++++++++++++ 9 files changed, 63 insertions(+), 33 deletions(-) diff --git a/.jshintrc b/.jshintrc index 6f9723d..1297cce 100644 --- a/.jshintrc +++ b/.jshintrc @@ -6,6 +6,7 @@ "newcap":false, "globals": { "jQuery": true, + "JSB": true, "$": true, "console": true, "module": true, diff --git a/GruntFile.js b/GruntFile.js index dcd93ee..82a3bc0 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -51,7 +51,8 @@ module.exports = function(grunt) { jsb: { // Configurable paths app: 'src', - dist: 'dist' + dist: 'dist', + test: 'test' }, // Empties folders to start fresh clean: { @@ -224,7 +225,7 @@ module.exports = function(grunt) { // Watches files for changes and runs tasks based on the changed files watch: { js: { - files: ['<%= jsb.app %>/scripts/{,*/}*.js'], + files: ['<%= jsb.app %>/scripts/{,*/}*.js', 'Gruntfile.js'], tasks: ['jshint'], options: { livereload: true @@ -251,7 +252,7 @@ module.exports = function(grunt) { tasks: ['compass:server', 'autoprefixer'] }, watch: { - files: 'src/js/**/*.js', + files: '<%= jsb.test %>/unit/**/*.js', tasks: ['jasmine'] } }, @@ -355,7 +356,7 @@ module.exports = function(grunt) { specs: 'test/unit/**/*.js', //helpers: ['src/js/_.config.js'], keepRunner: true, - // host : 'http://127.0.0.1:8000/', + host : 'http://127.0.0.1:8000/', // summary: true, vendor: [ "src/js/libs/*.js" @@ -364,7 +365,7 @@ module.exports = function(grunt) { } // watch: { // pivotal: { - // files: ['src/js/*.js','test/unit/**/*.js'], + // files: ['<%= jsb.app %>/js/*.js','<%= jsb.test %>/unit/**/*.js'], // tasks: 'jasmine:pivotal:build' // } // } @@ -379,7 +380,7 @@ module.exports = function(grunt) { grunt.registerTask('server', [ 'open', 'connect:client', - 'watch:client' + 'watch:client', ]); // The default task can be run just by typing "grunt" on the command line diff --git a/README.md b/README.md index 808586b..01a1033 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ JavaScript Boilerplate is the collection of best practices using a design patter 3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. -4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components. +4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. JSB is main namespace that has been defined and JSB.helper is one of the components. 5. `src/css/style.css` - Style sheets for the html help file. @@ -22,20 +22,20 @@ JavaScript Boilerplate is the collection of best practices using a design patter The starting point is the `src/js/_main.js` file which has defined the main module and the component to be used. If you were to observe the code, - (function (MODULE, $, undefined) { + (function (JSB, $, undefined) { ...... (2) - })(window.MODULE = window.MODULE || {}, jQuery); + })(window.JSB = window.JSB || {}, jQuery); - The above code defines the `MODULE` namespace and also passes true values of `jquery` and `undefined` to the inner component. Instead of `MODULE` you can define your project name or application name as well and that would become your global namespace under which all the other components should be declared/defined. For e.g. if it is a project name `MYPROJECT` instead of `MODULE` you can even write `MYPROJECT` as well. + The above code defines the `JSB` namespace and also passes true values of `jquery` and `undefined` to the inner component. Instead of `JSB` you can define your project name or application name as well and that would become your global namespace under which all the other components should be declared/defined. For e.g. if it is a project name `MYPROJECT` instead of `JSB` you can even write `MYPROJECT` as well. Once you have defined the wrapper (global namespace), you can start of modules inside the global namespace. 2. The second step would be to define the components, which can be page level or widget level too. - MODULE.subModule = (function () { + JSB.subModule = (function () { function _subModule() { ... (3) } @@ -43,16 +43,16 @@ JavaScript Boilerplate is the collection of best practices using a design patter })(); - The above code has defined a component called helper as a sub module of `MODULE` namespace. `MODULE.helper` holds an object that gets returned through `new _subModule()`. We can define all the functions that we want for the helper module inside the function `_subModule()`. + The above code has defined a component called helper as a sub module of `JSB` namespace. `JSB.helper` holds an object that gets returned through `new _subModule()`. We can define all the functions that we want for the helper module inside the function `_subModule()`. 3. The third step would be to define the private values, private functions , priviledged functions etc. within the `_subModule` function. Comments have been provided as to which one is a private function and which is a priviledged one. At the end of the function the `init()` function is exposed which in turn returns the object itself. When the object is returned all the priviledged functions are exposed along with it and are accessible outside. -4. Next is the `src/js/_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `MODULE` namespace and we can access the parameters by specifying `MODULE.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally. +4. Next is the `src/js/_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `JSB` namespace and we can access the parameters by specifying `JSB.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally. -5. For creating utility methods to be used across application, you can leverage the `src/js/_helper.js` file. It works on the same principle as the `src/js/_main.js`. For E.g. the way to access a helper function outside the module would be `MODULE.helper.getCookie` for the `getCookie` function. +5. For creating utility methods to be used across application, you can leverage the `src/js/_helper.js` file. It works on the same principle as the `src/js/_main.js`. For E.g. the way to access a helper function outside the module would be `JSB.helper.getCookie` for the `getCookie` function. ## Quick start diff --git a/src/index.html b/src/index.html index da52079..a8b94dd 100644 --- a/src/index.html +++ b/src/index.html @@ -66,7 +66,7 @@

multiReplace(str, hash)

var str = "http://localhost.com/mywebsite/?name=NAME&age=AGE&company=COMPANY";
-MODULE.helper.multiReplace(str, {
+JSB.helper.multiReplace(str, {
     "NAME" : "Sam",
     "AGE" : "26yrs",
     "COMPANY" : "Sapient"
@@ -82,7 +82,7 @@ 
setCSS(el, styles)

                         Apply css to any element. Pass the name of element and the CSS in JSON format.
                     

                     

-
MODULE.helper.setCSS("main", {
+
JSB.helper.setCSS("main", {
     "width" : "300px",
     "background" : "red",
     "padding" : "10px"
@@ -96,7 +96,7 @@ 
hasClass(el, name)

                         Check if the given element has given class assign or not.
                     

                     

-                        
MODULE.helper.hasClass("main", "my_element");

+                        
JSB.helper.hasClass("main", "my_element");
@@ -106,7 +106,7 @@

addClass(el, name)

Add class to the given element.

- 
MODULE.helper.addClass("main", "my_element2");
+ 
JSB.helper.addClass("main", "my_element2");
@@ -116,7 +116,7 @@

removeClass(el, name)

Remove class from the given element.

- 
MODULE.helper.removeClass("main", "my_element2");
+ 
JSB.helper.removeClass("main", "my_element2");
@@ -126,7 +126,7 @@

getDomain()

Return the URI of site. Return protocol, hostname and port if found.

- 
MODULE.helper.getDomain();
+ 
JSB.helper.getDomain();
@@ -138,7 +138,7 @@

getQueryString(name, default_)

Copy "?name=RSR&age=26" and paste this at the address bar of the website and press enter.
-
MODULE.helper.getQueryString("name", "Not Found.");
+
JSB.helper.getQueryString("name", "Not Found.");
@@ -149,7 +149,7 @@

isBlank(string)

var test = " ";
-MODULE.helper.isBlank(test);
+JSB.helper.isBlank(test);
@@ -159,7 +159,7 @@

setInfo(name, value)

Store information to client machine using HTML5 localStorate method.

- 
MODULE.helper.setInfo("name", "RSR");
+ 
JSB.helper.setInfo("name", "RSR");
@@ -169,7 +169,7 @@

getInfo(name, checkCookie)

Get information from client machine. Get information for HTML5 localstorage if available else get information from cookie.

- 
MODULE.helper.getInfo("name");
+ 
JSB.helper.getInfo("name");
@@ -179,7 +179,7 @@

removeInfo(name, checkCookie)

Remove information from client machine.

- 
MODULE.helper.removeInfo("name");
+ 
JSB.helper.removeInfo("name");
diff --git a/src/js/_.config.js b/src/js/_.config.js index 9b0e378..74c5489 100644 --- a/src/js/_.config.js +++ b/src/js/_.config.js @@ -1,6 +1,7 @@ /* JavaScript Boilerplate configuration file * - * @version 1.1 + * @version 1.2 * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate + * Author - Mohammed Arif */ /* Why do we need config? diff --git a/src/js/_.helper.js b/src/js/_.helper.js index 52023f1..d1528e9 100644 --- a/src/js/_.helper.js +++ b/src/js/_.helper.js @@ -1,6 +1,7 @@ /* JavaScript Boilerplate helper file * - * @version 1.1 + * @version 1.2 * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate + * Author - Mohammed Arif */ (function (JSB, $, undefined) { diff --git a/src/js/_.main.js b/src/js/_.main.js index 497d531..d6263b4 100644 --- a/src/js/_.main.js +++ b/src/js/_.main.js @@ -1,6 +1,7 @@ /* JavaScript Boilerplate main scripting file * - * @version 1.1 + * @version 1.2 * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate + * Author - Mohammed Arif */ /* JSB (our namespace name) and undefined are passed here @@ -81,8 +82,8 @@ * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. * This way it's always present when the script is executed and doesn't have to be instantiated separately. */ - JSB.helper = (function() { - function _helper() { + JSB.subHelper = (function() { + function _subHelper() { /** * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. @@ -137,12 +138,12 @@ */ this.init = function() { _this.getDomain(); - return this; /*this refer to JSB.subModule*/ + return this; /*this refer to JSB.subHelper*/ }; return this.init(); /*initialize the init()*/ } - return new _helper(); /*creating a new object of subModule rather then a funtion*/ + return new _subHelper(); /*creating a new object of subHelper rather then a funtion*/ }()); /** diff --git a/test/karma.conf.js b/test/karma.conf.js index e072611..8d2fdda 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -61,7 +61,7 @@ module.exports = function(config) { // If browser does not capture in given timeout [ms], kill it // CLI --capture-timeout 5000 - captureTimeout: 8000, + captureTimeout: 15000, // report which specs are slower than 500ms // CLI --report-slower-than 500 diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index def17b1..308bc88 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -132,6 +132,31 @@ describe("Test main js file", function() { }); }); + describe("let's get the domain name", function() { + it("test protocol", function() { + expect(window.location.protocol).toContain("http"); + }); + + }); + + describe("test query strings", function() { + var name; + xit("check the output", function() { + expect(JSB.subHelper.getQueryString(name, 'Arif')).toEqual("Arif"); + }); + + beforeEach(function() { + spyOn(JSB.subHelper, 'getQueryString'); + JSB.subHelper.getQueryString(name, 'Arif'); + }); + + it("tracks that the spy was called", function() { + //Let's tracks calls to it and all arguments through spyOn method. + expect(JSB.subHelper.getQueryString).toHaveBeenCalled(); + }); + + }); + // describe("Facebook", function() { // it("is FB available (i.e. is facebook library included)", function() { From c5e3820534106489622cc145c4589119b33ed1b4 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 22 Apr 2014 19:28:44 +0530 Subject: [PATCH 48/63] Commented the host options in jasmine and also a suite --- GruntFile.js | 2 +- test/unit/_.mainSpec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index 82a3bc0..f389f32 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -356,7 +356,7 @@ module.exports = function(grunt) { specs: 'test/unit/**/*.js', //helpers: ['src/js/_.config.js'], keepRunner: true, - host : 'http://127.0.0.1:8000/', + //host : 'http://127.0.0.1:8000/', // summary: true, vendor: [ "src/js/libs/*.js" diff --git a/test/unit/_.mainSpec.js b/test/unit/_.mainSpec.js index 308bc88..f929597 100644 --- a/test/unit/_.mainSpec.js +++ b/test/unit/_.mainSpec.js @@ -133,7 +133,7 @@ describe("Test main js file", function() { }); describe("let's get the domain name", function() { - it("test protocol", function() { + xit("test protocol", function() { expect(window.location.protocol).toContain("http"); }); @@ -179,4 +179,4 @@ describe("Test main js file", function() { // }); // }); -}) \ No newline at end of file +}); \ No newline at end of file From e7f34c122d8f6a2dd919dc0f23de38ba09ea6038 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 14 May 2014 20:50:00 +0530 Subject: [PATCH 49/63] Updated the readme with testing instructions --- .gitignore | 2 ++ README.md | 11 ++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index b4707b5..26ef0c8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ dist *~ *.diff *.patch +/*.txt +/*.csv /*.html .DS_Store .sizecache.json diff --git a/README.md b/README.md index 01a1033..4c9736d 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,12 @@ You should be able to see the below message for a successful build and a folder Done, without errors. +### Testing + + $ grunt test + +We use jasmine as a unit testing framework to test our boilerplate code, as of now it's been only done for _.main.js, you would get all the test done in the next release. + ## Contributing @@ -117,11 +123,6 @@ Anyone and everyone is welcome to [contribute](#). * MIT/GPL license -## Change Log - - - - ## Author * Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif) From bc801f12d88814d398a4d20326633a68ec93f744 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 14 May 2014 21:03:27 +0530 Subject: [PATCH 50/63] Updated the readme with what's new. --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 4c9736d..c21e69f 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,16 @@ Anyone and everyone is welcome to [contribute](#). * MIT/GPL license + +## What's new in v1.2? +* Have added the Jasmine Test Suite to unit test the boilerplate code with or without PhantomJS, one can fire up the same through Chrome as well +* Grunt build has been enhanced tremendously +* JavaScript syntax highlighting has been added +* `MODULE` has been renamed to `JSB` for better JavaScript semantics +* Travis CI has been kicked off from the current version (v1.2) +* Made several small changes like `use strict`, dir changes, css fixes, added additional grunt plugins + + ## Author * Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif) From 1900e46aeec400a149debbe006084d2445c96696 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Wed, 14 May 2014 21:08:50 +0530 Subject: [PATCH 51/63] Fixed some typos in readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c21e69f..43fc442 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ JavaScript Boilerplate is the collection of best practices using a design patter The above code has defined a component called helper as a sub module of `JSB` namespace. `JSB.helper` holds an object that gets returned through `new _subModule()`. We can define all the functions that we want for the helper module inside the function `_subModule()`. -3. The third step would be to define the private values, private functions , priviledged functions etc. within the `_subModule` function. Comments have been provided as to which one is a private function and which is a priviledged one. At the end of the function the `init()` function is exposed which in turn returns the object itself. When the object is returned all the priviledged functions are exposed along with it and are accessible outside. +3. The third step would be to define the private values, private functions , privileged functions etc. within the `_subModule` function. Comments have been provided as to which one is a private function and which is a privileged one. At the end of the function the `init()` function is exposed which in turn returns the object itself. When the object is returned all the privileged functions are exposed along with it and are accessible outside. @@ -106,7 +106,7 @@ You should be able to see the below message for a successful build and a folder $ grunt test -We use jasmine as a unit testing framework to test our boilerplate code, as of now it's been only done for _.main.js, you would get all the test done in the next release. +We use jasmine as a unit testing framework to test our boilerplate code, as of now it's been only done for `_.main.js`, you would get all the test done in the next release. ## Contributing @@ -130,7 +130,7 @@ Anyone and everyone is welcome to [contribute](#). * JavaScript syntax highlighting has been added * `MODULE` has been renamed to `JSB` for better JavaScript semantics * Travis CI has been kicked off from the current version (v1.2) -* Made several small changes like `use strict`, dir changes, css fixes, added additional grunt plugins +* Made several small changes like `use strict`, dir changes, css fixes, added additional grunt plugins etc. ## Author From c47fe56d7da2d167633ece82e0ad7240f0dc8cf0 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 16:50:42 +0530 Subject: [PATCH 52/63] Updated the readme and also added icons for dependency managment, license and git tag. --- README.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 43fc442..abc7b59 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ -# [JavaScript Boilerplate v1.2](https://github.com/mdarif/JavaScript-Boilerplate) [![Build Status](https://travis-ci.org/mdarif/JavaScript-Boilerplate.svg?branch=1.2)](https://travis-ci.org/mdarif/JavaScript-Boilerplate) +# JavaScript Boilerplate [![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. +## What's new in v1.2? +* Have added the Jasmine Test Suite to unit test the boilerplate code with or without PhantomJS, one can fire up the same through Chrome as well +* Grunt build has been enhanced tremendously +* JavaScript syntax highlighting has been added +* `MODULE` has renamed to `JSB` for better JavaScript semantics +* Travis CI has been kicked off +* Made several small changes like `use strict`, dir changes, css fixes, additional grunt plug-ins also have been added etc. ## Files in Repository - 1. `src/index.html` - An html help file illustrating helper functions. 2. `src/js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application. @@ -124,15 +130,18 @@ Anyone and everyone is welcome to [contribute](#). * MIT/GPL license -## What's new in v1.2? -* Have added the Jasmine Test Suite to unit test the boilerplate code with or without PhantomJS, one can fire up the same through Chrome as well -* Grunt build has been enhanced tremendously -* JavaScript syntax highlighting has been added -* `MODULE` has been renamed to `JSB` for better JavaScript semantics -* Travis CI has been kicked off from the current version (v1.2) -* Made several small changes like `use strict`, dir changes, css fixes, added additional grunt plugins etc. - - ## Author * Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif) + +[build-image]: http://img.shields.io/travis/mdarif/JavaScript-Boilerplate.svg?style=flat +[build-url]: http://travis-ci.org/mdarif/JavaScript-Boilerplate + +[dependencies-image]: http://img.shields.io/gemnasium/CaryLandholt/AngularFun.svg?style=flat +[dependencies-url]: https://gemnasium.com/CaryLandholt/AngularFun + +[license-image]: http://img.shields.io/badge/license-MIT/GPL-blue.svg?style=flat +[license-url]: LICENSE + +[version-image]: http://img.shields.io/github/tag/mdarif/JavaScript-Boilerplate.svg?style=flat +[version-url]: https://github.com/mdarif/JavaScript-Boilerplate/tags \ No newline at end of file From da72a875781cc05a0b6ebde9f227b3d4820b6d25 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 16:52:01 +0530 Subject: [PATCH 53/63] Updated all the dependencies alongwith gemnasium system who keeps popping up incase any dependency needs to be updated. --- package.json | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 2a3c5b7..31a9db3 100644 --- a/package.json +++ b/package.json @@ -21,38 +21,38 @@ }, "dependencies": {}, "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-jshint": "~0.8.0", - "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-uglify": "~0.3.2", + "grunt": "~0.4.5", + "grunt-contrib-jshint": "~0.10.0", + "grunt-contrib-watch": "~0.6.1", + "grunt-contrib-concat": "~0.4.0", + "grunt-contrib-uglify": "~0.4.0", "grunt-contrib-copy": "~0.5.0", - "grunt-contrib-cssmin": "~0.7.0", - "grunt-contrib-htmlmin": "~0.2.0", + "grunt-contrib-cssmin": "~0.9.0", + "grunt-contrib-htmlmin": "~0.3.0", "grunt-contrib-clean": "~0.5.0", - "grunt-usemin": "~2.0.1", - "grunt-contrib-connect": "~0.2.0", - "connect-livereload": "~0.3.2", + "grunt-usemin": "~2.1.1", + "grunt-contrib-connect": "~0.7.1", + "connect-livereload": "~0.4.0", "grunt-open": "~0.2.3", "matchdep": "~0.3.0", - "grunt-notify": "~0.2.17", - "grunt-shell": "~0.6.4", + "grunt-notify": "~0.3.0", + "grunt-shell": "~0.7.0", "grunt-compare-size": "~0.4.0", - "grunt-jsdoc": "~0.5.1", - "grunt-contrib-sass": "~0.7.2", - "grunt-contrib-compass": "~0.7.2", - "grunt-uncss": "~0.2.0", - "grunt-concurrent": "~0.4.3", - "time-grunt": "~0.2.9", - "karma": "^0.12.6", - "grunt-karma": "^0.8.2", + "grunt-jsdoc": "~0.5.4", + "grunt-contrib-sass": "~0.7.3", + "grunt-contrib-compass": "~0.8.0", + "grunt-uncss": "~0.3.3", + "grunt-concurrent": "~0.5.0", + "time-grunt": "~0.3.1", + "karma": "^0.12.16", + "grunt-karma": "^0.8.3", "karma-chrome-launcher": "^0.1.3", "karma-firefox-launcher": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", - "karma-jasmine": "^0.2.2", - "grunt-contrib-jasmine": "^0.6.3" + "karma-jasmine": "^0.1.5", + "grunt-contrib-jasmine": "^0.6.4" }, - "version": "1.0.2", + "version": "1.2.0", "license": "MIT/GPL" } From 54e3e3e0b02c52934043ea63b99f594390ecdcff Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 16:56:15 +0530 Subject: [PATCH 54/63] Space has been added between icons. --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index abc7b59..60c7dc6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -# JavaScript Boilerplate [![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] +# JavaScript Boilerplate v1.2 + +[![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. From aa33648dc580bade0e57c4e1c490be8e982758a4 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 17:07:55 +0530 Subject: [PATCH 55/63] Checking tag. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 60c7dc6..ed4617d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JavaScript Boilerplate v1.2 -[![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] +[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. From 30f01442b077090d5d03ddcf9660630ff3f13c80 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 17:08:24 +0530 Subject: [PATCH 56/63] tag. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ed4617d..60c7dc6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JavaScript Boilerplate v1.2 -[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] +[![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. From 9ddb27bdf974d28485823c0e3269dea909c2dfb2 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 17:16:25 +0530 Subject: [PATCH 57/63] Added space in between of icons. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 60c7dc6..c2d4248 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JavaScript Boilerplate v1.2 -[![Version][version-image]][version-url] [![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] +[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] [![Version][version-image]][version-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. From 1792612fab4fc8e1462eb37747c0757b98b85a57 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 22:50:41 +0530 Subject: [PATCH 58/63] Fixed the dependency url in readme. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c2d4248..e855887 100644 --- a/README.md +++ b/README.md @@ -139,8 +139,8 @@ Anyone and everyone is welcome to [contribute](#). [build-image]: http://img.shields.io/travis/mdarif/JavaScript-Boilerplate.svg?style=flat [build-url]: http://travis-ci.org/mdarif/JavaScript-Boilerplate -[dependencies-image]: http://img.shields.io/gemnasium/CaryLandholt/AngularFun.svg?style=flat -[dependencies-url]: https://gemnasium.com/CaryLandholt/AngularFun +[dependencies-image]: http://img.shields.io/gemnasium/mdarif/JavaScript-Boilerplate.svg?style=flat +[dependencies-url]: https://gemnasium.com/mdarif/JavaScript-Boilerplate [license-image]: http://img.shields.io/badge/license-MIT/GPL-blue.svg?style=flat [license-url]: LICENSE From e478db67108e68bab7fd3fe702f213ad50f01a8f Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 17 May 2014 23:06:04 +0530 Subject: [PATCH 59/63] Updated the licensing info. --- LICENSE | 21 +++++++++++++++++++++ README.md | 5 ++--- 2 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..618e441 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2013 2014 Mohammed Arif + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index e855887..9857f2a 100644 --- a/README.md +++ b/README.md @@ -128,8 +128,7 @@ Anyone and everyone is welcome to [contribute](#). ## License - -* MIT/GPL license +See [LICENSE](LICENSE) ## Author @@ -142,7 +141,7 @@ Anyone and everyone is welcome to [contribute](#). [dependencies-image]: http://img.shields.io/gemnasium/mdarif/JavaScript-Boilerplate.svg?style=flat [dependencies-url]: https://gemnasium.com/mdarif/JavaScript-Boilerplate -[license-image]: http://img.shields.io/badge/license-MIT/GPL-blue.svg?style=flat +[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat [license-url]: LICENSE [version-image]: http://img.shields.io/github/tag/mdarif/JavaScript-Boilerplate.svg?style=flat From b79ba94db8527e9ac297f35134a8a383195818c7 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 20 Jun 2015 13:05:59 +0530 Subject: [PATCH 60/63] Updated the packages to latest, fixed the grunt file issue due to latest packages, and also readme content a bit. --- GruntFile.js | 745 ++++++++++++++++++++++++++------------------------- README.md | 48 ++-- package.json | 51 ++-- 3 files changed, 424 insertions(+), 420 deletions(-) diff --git a/GruntFile.js b/GruntFile.js index f389f32..6b879d0 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -14,408 +14,413 @@ var LIVERELOAD_PORT = 35729; // It's a piece of Connect middleware that injects // a script into the static served html. var lrSnippet = require('connect-livereload')({ - port: LIVERELOAD_PORT + port: LIVERELOAD_PORT }); // All the middleware necessary to serve static files. var livereloadMiddleware = function(connect, options) { - return [ - // Inject a livereloading script into static files. - lrSnippet, - // Serve static files. - connect.static(options.base), - // Make empty directories browsable. - connect.directory(options.base) - ]; + return [ + // Inject a livereloading script into static files. + lrSnippet, + // Serve static files. + connect.static(options.base[0]), + // Make empty directories browsable. + connect.directory(options.base[0]) + ]; }; // The first part is the "wrapper" function, which encapsulates your Grunt configuration module.exports = function(grunt) { - 'use strict'; + 'use strict'; - // Load grunt tasks automatically - require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + // Load grunt tasks automatically + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); - var plugins = ['karma-mocha']; - var browsers = []; + var plugins = ['karma-mocha']; + var browsers = []; - // Time how long tasks take. Can help when optimizing build times - require('time-grunt')(grunt); + // Time how long tasks take. Can help when optimizing build times + require('time-grunt')(grunt); - // Define the configuration for all the tasks - grunt.initConfig({ - // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. - pkg: grunt.file.readJSON('package.json'), + // Define the configuration for all the tasks + grunt.initConfig({ + // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file. + pkg: grunt.file.readJSON('package.json'), - // Project settings - jsb: { - // Configurable paths - app: 'src', - dist: 'dist', - test: 'test' - }, - // Empties folders to start fresh - clean: { - dist: { - files: [{ - dot: true, - src: [ - '.tmp', - '<%= jsb.dist %>/*', - '!<%= jsb.dist %>/.git*' - ] - }] - }, - server: '.tmp' - }, + // Project settings + jsb: { + // Configurable paths + app: 'src', + dist: 'dist', + test: 'test' + }, + // Empties folders to start fresh + clean: { + dist: { + files: [{ + dot: true, + src: [ + '.tmp', + '<%= jsb.dist %>/*', + '!<%= jsb.dist %>/.git*' + ] + }] + }, + server: '.tmp' + }, - // sass: { - // dist: { - // files: { - // '<%= jsb.dist %>/css/style.min.css': '<%= jsb.app %>/css/style.scss' - // } - // } - // }, + // sass: { + // dist: { + // files: { + // '<%= jsb.dist %>/css/style.min.css': '<%= jsb.app %>/css/style.scss' + // } + // } + // }, - // By default, your `index.html`'s will take care of - // minification. These next options are pre-configured if you do not wish - // to use the Usemin blocks. - // cssmin: { - // dist: { - // options: { - // keepSpecialComments: 0, - // report: "min", - // selectorsMergeMode: "ie8" - // }, - // files: { // Dictionary of files - // '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], - // '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] - // } - // } - // }, + // By default, your `index.html`'s will take care of + // minification. These next options are pre-configured if you do not wish + // to use the Usemin blocks. + // cssmin: { + // dist: { + // options: { + // keepSpecialComments: 0, + // report: "min", + // selectorsMergeMode: "ie8" + // }, + // files: { // Dictionary of files + // '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], + // '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] + // } + // } + // }, - // uglify: { - // options: { - // // The banner is inserted at the top of the output - // banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' - // }, - // dist: { // Target - // files: { // Dictionary of files - // 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], - // 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], - // 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], - // 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] - // } - // } - // }, + // uglify: { + // options: { + // // The banner is inserted at the top of the output + // banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' + // }, + // dist: { // Target + // files: { // Dictionary of files + // 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], + // 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], + // 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], + // 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] + // } + // } + // }, - // Make sure code styles are up to par and there are no obvious mistakes - jshint: { - // Define the files to lint - all: [ - 'Gruntfile.js', - '<%= jsb.app %>/js/*.js', - '<%= jsb.app %>/demo/js/*.js' - ], - // Configure JSHint (documented at http://www.jshint.com/docs/) - options: { - // More options here if you want to override JSHint defaults - jshintrc: '.jshintrc' - } - }, + // Make sure code styles are up to par and there are no obvious mistakes + jshint: { + // Define the files to lint + all: [ + 'Gruntfile.js', + '<%= jsb.app %>/js/*.js', + '<%= jsb.app %>/demo/js/*.js' + ], + // Configure JSHint (documented at http://www.jshint.com/docs/) + options: { + // More options here if you want to override JSHint defaults + jshintrc: '.jshintrc' + } + }, - // Compiles Sass to CSS and generates necessary files if requested - compass: { - options: { - sassDir: '<%= jsb.app %>/css', - cssDir: '.tmp/css', - // generatedImagesDir: '.tmp/images/generated', - // imagesDir: '<%= jsb.app %>/images', - // javascriptsDir: '<%= jsb.app %>/scripts', - // fontsDir: '<%= jsb.app %>/styles/fonts', - // importPath: '<%= jsb.app %>/bower_components', - // httpImagesPath: '/images', - // httpGeneratedImagesPath: '/images/generated', - // httpFontsPath: '/styles/fonts', - relativeAssets: false, - assetCacheBuster: false - }, - dist: { - options: { - //generatedImagesDir: '<%= jsb.dist %>/images/generated' - } - }, - server: { - options: { - debugInfo: true - } - } - }, + // Compiles Sass to CSS and generates necessary files if requested + compass: { + options: { + sassDir: '<%= jsb.app %>/css', + cssDir: '.tmp/css', + // generatedImagesDir: '.tmp/images/generated', + // imagesDir: '<%= jsb.app %>/images', + // javascriptsDir: '<%= jsb.app %>/scripts', + // fontsDir: '<%= jsb.app %>/styles/fonts', + // importPath: '<%= jsb.app %>/bower_components', + // httpImagesPath: '/images', + // httpGeneratedImagesPath: '/images/generated', + // httpFontsPath: '/styles/fonts', + relativeAssets: false, + assetCacheBuster: false + }, + dist: { + options: { + //generatedImagesDir: '<%= jsb.dist %>/images/generated' + } + }, + server: { + options: { + debugInfo: true + } + } + }, - // Reads HTML for usemin blocks to enable smart builds that automatically - // concat, minify and revision files. Creates configurations in memory so - // additional tasks can operate on them - useminPrepare: { - options: { - dest: '<%= jsb.dist %>' - }, - //staging: '.tmp', - html: ['<%= jsb.app %>/index.html'] - }, + // Reads HTML for usemin blocks to enable smart builds that automatically + // concat, minify and revision files. Creates configurations in memory so + // additional tasks can operate on them + useminPrepare: { + options: { + dest: '<%= jsb.dist %>' + }, + //staging: '.tmp', + html: ['<%= jsb.app %>/index.html'] + }, - // Performs rewrites based on rev and the useminPrepare configuration - usemin: { - options: { - assetsDirs: ['<%= jsb.dist %>'] - }, - html: ['<%= jsb.dist %>/{,*/}*.html'], - css: ['<%= jsb.dist %>/css/{,*/}*.css'] - }, + // Performs rewrites based on rev and the useminPrepare configuration + usemin: { + options: { + assetsDirs: ['<%= jsb.dist %>'] + }, + html: ['<%= jsb.dist %>/{,*/}*.html'], + css: ['<%= jsb.dist %>/css/{,*/}*.css'] + }, - htmlmin: { - dist: { - options: { - collapseBooleanAttributes: true, - collapseWhitespace: false, - removeAttributeQuotes: false, - removeCommentsFromCDATA: false, - removeEmptyAttributes: false, - removeOptionalTags: false, - removeRedundantAttributes: false, - useShortDoctype: false - }, - files: [{ - expand: true, - cwd: '<%= jsb.dist %>', - src: '{,*/}*.html', - dest: '<%= jsb.dist %>' - }] - } - }, + htmlmin: { + dist: { + options: { + collapseBooleanAttributes: true, + collapseWhitespace: false, + removeAttributeQuotes: false, + removeCommentsFromCDATA: false, + removeEmptyAttributes: false, + removeOptionalTags: false, + removeRedundantAttributes: false, + useShortDoctype: false + }, + files: [{ + expand: true, + cwd: '<%= jsb.dist %>', + src: '{,*/}*.html', + dest: '<%= jsb.dist %>' + }] + } + }, - // Compare CSS output's - compare_size: { - files: [ - '<%= jsb.app %>/css/**', - '<%= jsb.dist %>/css/**' - ] - }, - open: { - server: { - path: 'http://localhost:9000' - } + // Compare CSS output's + compare_size: { + files: [ + '<%= jsb.app %>/css/**', + '<%= jsb.dist %>/css/**' + ] + }, + open: { + server: { + path: 'http://localhost:9000' + } - }, - connect: { - client: { - options: { - // The server's port, and the folder to serve from: - // Ex: 'localhost:9000' would serve up 'client/index.html' - port: 9000, - // change this to '0.0.0.0' to access the server from outside - hostname: 'localhost', - base: '<%= jsb.app %>', - // Custom middleware for the HTTP server: - // The injected JavaScript reloads the page. - middleware: livereloadMiddleware - } - } - }, + }, + connect: { + client: { + options: { + // The server's port, and the folder to serve from: + // Ex: 'localhost:9000' would serve up 'client/index.html' + port: 9000, + // change this to '0.0.0.0' to access the server from outside + hostname: 'localhost', + base: '<%= jsb.app %>', + // Custom middleware for the HTTP server: + // The injected JavaScript reloads the page. + middleware: livereloadMiddleware + } + } + }, - // Watches files for changes and runs tasks based on the changed files - watch: { - js: { - files: ['<%= jsb.app %>/scripts/{,*/}*.js', 'Gruntfile.js'], - tasks: ['jshint'], - options: { - livereload: true - } - }, - gruntfile: { - files: ['Gruntfile.js'] - }, - client: { - // '**' is used to include all subdirectories - // and subdirectories of subdirectories, and so on, recursively. - files: ['<%= jsb.app %>/**/*'], - // In our case, we don't configure any additional tasks, - // since livereload is built into the watch task, - // and since the browser refresh is handled by the snippet. - // Any other tasks to run (e.g. compile CoffeeScript) go here: - tasks: [], - options: { - livereload: LIVERELOAD_PORT - } - }, - compass: { - files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], - tasks: ['compass:server', 'autoprefixer'] - }, - watch: { - files: '<%= jsb.test %>/unit/**/*.js', - tasks: ['jasmine'] - } - }, - notify: { - task_name: { - options: { - // Task-specific options go here. - } - }, - watch: { - options: { - title: 'Task Complete', // optional - message: 'SASS and Uglify finished running' //required - } - }, - server: { - options: { - message: 'Server is ready!' - } - }, - connect: { - options: { - message: 'Connected to server!' - } - } - }, - // shell: { - // docco: { - // command: 'docco -o jsdocumentation -l linear src/js/*.js' - // } - // }, - jsdoc: { - dist: { - src: ['<%= jsb.app %>/js/_.main.js'], - options: { - destination: '<%= jsb.dist %>/doc' - } - } - }, - // Removed unused css - uncss: { - dist: { - files: { - '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], - '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] - } - }, - options: { - compress: true, - report: 'min' - } - }, + // Watches files for changes and runs tasks based on the changed files + watch: { + js: { + files: ['<%= jsb.app %>/scripts/{,*/}*.js', 'Gruntfile.js'], + tasks: ['jshint'], + options: { + livereload: true + } + }, + gruntfile: { + files: ['Gruntfile.js'] + }, + client: { + // '**' is used to include all subdirectories + // and subdirectories of subdirectories, and so on, recursively. + files: ['<%= jsb.app %>/**/*'], + // In our case, we don't configure any additional tasks, + // since livereload is built into the watch task, + // and since the browser refresh is handled by the snippet. + // Any other tasks to run (e.g. compile CoffeeScript) go here: + tasks: [], + options: { + livereload: LIVERELOAD_PORT + } + }, + compass: { + files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], + tasks: ['compass:server', 'autoprefixer'] + }, + watch: { + files: '<%= jsb.test %>/unit/**/*.js', + tasks: ['jasmine'] + } + }, + notify: { + task_name: { + options: { + // Task-specific options go here. + } + }, + watch: { + options: { + title: 'Task Complete', // optional + message: 'SASS and Uglify finished running' //required + } + }, + server: { + options: { + message: 'Server is ready!' + } + }, + connect: { + options: { + message: 'Connected to server!' + } + } + }, + // shell: { + // docco: { + // command: 'docco -o jsdocumentation -l linear src/js/*.js' + // } + // }, + jsdoc: { + dist: { + src: ['<%= jsb.app %>/js/_.main.js'], + options: { + destination: '<%= jsb.dist %>/doc' + } + } + }, + // Removed unused css + uncss: { + dist: { + files: { + '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], + '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] + } + }, + options: { + compress: true, + report: 'min' + } + }, - // Copies remaining files to places other tasks can use - copy: { - dist: { - files: [{ - expand: true, - dot: true, - cwd: '<%= jsb.app %>', - dest: '<%= jsb.dist %>', - src: [ - '*.{ico,png,txt}', - '.htaccess', - 'images/{,*/}*.webp', - '{,*/}*.html' - ] - }] - }, - styles: { - expand: true, - dot: true, - cwd: '<%= jsb.app %>/css', - dest: '.tmp/css/', - src: '{,*/}*.css' - } - }, + // Copies remaining files to places other tasks can use + copy: { + dist: { + files: [{ + expand: true, + dot: true, + cwd: '<%= jsb.app %>', + dest: '<%= jsb.dist %>', + src: [ + '*.{ico,png,txt}', + '.htaccess', + 'images/{,*/}*.webp', + '{,*/}*.html' + ] + }] + }, + styles: { + expand: true, + dot: true, + cwd: '<%= jsb.app %>/css', + dest: '.tmp/css/', + src: '{,*/}*.css' + } + }, - // Run some tasks in parallel to speed up build process - concurrent: { - server: [ - 'compass:server', - 'copy:styles' - ], - test: [ - 'copy:styles' - ], - dist: [ - 'compass', - 'copy:styles' - ] - }, - karma: { - unit: { - configFile: 'test/karma.conf.js' - } - }, - jasmine: { - src: 'src/js/*.js', - options: { - specs: 'test/unit/**/*.js', - //helpers: ['src/js/_.config.js'], - keepRunner: true, - //host : 'http://127.0.0.1:8000/', - // summary: true, - vendor: [ - "src/js/libs/*.js" - //"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" - ] - } - // watch: { - // pivotal: { - // files: ['<%= jsb.app %>/js/*.js','<%= jsb.test %>/unit/**/*.js'], - // tasks: 'jasmine:pivotal:build' - // } - // } - }, - }); - // + // Run some tasks in parallel to speed up build process + concurrent: { + server: [ + 'compass:server', + 'copy:styles' + ], + test: [ + 'copy:styles' + ], + dist: [ + 'compass', + 'copy:styles' + ] + }, + karma: { + unit: { + configFile: 'test/karma.conf.js' + } + }, + jasmine: { + src: 'src/js/*.js', + options: { + specs: 'test/unit/**/*.js', + //helpers: ['src/js/_.config.js'], + keepRunner: true, + //host : 'http://127.0.0.1:8000/', + // summary: true, + vendor: [ + "src/js/libs/*.js" + //"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" + ] + } + // watch: { + // pivotal: { + // files: ['<%= jsb.app %>/js/*.js','<%= jsb.test %>/unit/**/*.js'], + // tasks: 'jasmine:pivotal:build' + // } + // } + }, + }); + // - /* Don't need to load the individual tasks anymore as we have been using + /* Don't need to load the individual tasks anymore as we have been using 'matchdep' task in the start to load all the tasks from node_modules automatically */ - // Let's set up some tasks - grunt.registerTask('server', [ - 'open', - 'connect:client', - 'watch:client', - ]); + // Let's set up some tasks + grunt.registerTask('server', [ + 'open', + 'connect:client', + 'watch:client', + ]); - // The default task can be run just by typing "grunt" on the command line - grunt.registerTask('default', [ - 'clean:dist', - 'useminPrepare', - 'concurrent:dist', - 'jshint', - 'concat', - 'cssmin', - //'uncss', - 'uglify', - 'copy:dist', - 'usemin', - 'htmlmin', - //'sass', - 'compare_size', - 'test', - 'notify:server' - ]); + // The default task can be run just by typing "grunt" on the command line + grunt.registerTask('default', [ + 'clean:dist', + 'useminPrepare', + 'concurrent:dist', + 'jshint', + 'concat', + 'cssmin', + //'uncss', + 'uglify', + 'copy:dist', + 'usemin', + 'htmlmin', + //'sass', + 'compare_size', + 'test', + 'notify:server' + ]); - grunt.registerTask('build-uncss', [ - 'default', - 'uncss' - ]); + grunt.registerTask('build-uncss', [ + 'default', + 'uncss' + ]); - // Let's generate the JavaScript documentation - grunt.registerTask('js-doc', [ - 'jsdoc' - ]); + // Let's generate the JavaScript documentation + grunt.registerTask('js-doc', [ + 'jsdoc' + ]); - grunt.registerTask('test', [ - 'jshint', - 'jasmine' - ]); + grunt.registerTask('test', [ + 'jshint', + 'jasmine' + ]); -}; \ No newline at end of file + // To debug the values + // grunt.event.on('watch', function(action, filepath, target) { + // grunt.log.writeln(target + ': ' + filepath + ' has ' + action); + // }); + +}; diff --git a/README.md b/README.md index 9857f2a..413baf0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JavaScript Boilerplate v1.2 -[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] [![Version][version-image]][version-url] +[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] [![Version][version-image]][version-url] [![Code Climate](https://codeclimate.com/repos/558392546956804e780009ea/badges/9cb6feeef61e41a567ad/gpa.svg)](https://codeclimate.com/repos/558392546956804e780009ea/feed) JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. @@ -28,27 +28,27 @@ JavaScript Boilerplate is the collection of best practices using a design patter 1. Clone the repository using the quick start guide. To get started include the JS files in your js directory. - The starting point is the `src/js/_main.js` file which has defined the main module and the component to be used. If you were to observe the code, + The starting point is the `src/js/_main.js` file which has defined the main module and the component to be used. If you were to observe the code, - (function (JSB, $, undefined) { + (function (JSB, $, undefined) { - ...... (2) + ...... (2) - })(window.JSB = window.JSB || {}, jQuery); + })(window.JSB = window.JSB || {}, jQuery); - The above code defines the `JSB` namespace and also passes true values of `jquery` and `undefined` to the inner component. Instead of `JSB` you can define your project name or application name as well and that would become your global namespace under which all the other components should be declared/defined. For e.g. if it is a project name `MYPROJECT` instead of `JSB` you can even write `MYPROJECT` as well. + The above code defines the `JSB` namespace and also passes true values of `jquery` and `undefined` to the inner component. Instead of `JSB` you can define your project name or application name as well and that would become your global namespace under which all the other components should be declared/defined. For e.g. if it is a project name `MYPROJECT` instead of `JSB` you can even write `MYPROJECT` as well. - Once you have defined the wrapper (global namespace), you can start of modules inside the global namespace. + Once you have defined the wrapper (global namespace), you can start of modules inside the global namespace. 2. The second step would be to define the components, which can be page level or widget level too. - JSB.subModule = (function () { - function _subModule() { - ... (3) - } - return new _subModule() - })(); + JSB.subModule = (function () { + function _subModule() { + ... (3) + } + return new _subModule() + })(); The above code has defined a component called helper as a sub module of `JSB` namespace. `JSB.helper` holds an object that gets returned through `new _subModule()`. We can define all the functions that we want for the helper module inside the function `_subModule()`. @@ -69,27 +69,29 @@ Clone the git repo - `git clone git://github.com/mdarif/JavaScript-Boilerplate.g You can also get the JavaScript Boilerplate through npm if you have already installed node. - npm install javascript-boilerplate + npm install javascript-boilerplate + +*Make sure, you should have [node](https://nodejs.org/download/) installed on your machine before running `npm` command ## Grunt Build Install [Grunt](http://gruntjs.com/getting-started). -OR +OR ###Follow the below instructions to install and setup the `Grunt` Install Grunt CLI, this will put the grunt command in your system path, allowing it to be run from any directory. - $ npm install -g grunt-cli + $ npm install -g grunt-cli Now install Grunt - $ npm install grunt + $ npm install grunt You should also install all the dependencies - $ npm install + $ npm install ###Follow the below instructions to install and setup the `compass task` _Run this task with the `grunt compass` command._ @@ -100,19 +102,19 @@ This task requires you to have [Ruby](http://www.ruby-lang.org/en/downloads/), [ ### Fire up the grunt server command and see the preview in browser with live-reload enabled for `app` folder content - $ grunt server + $ grunt server ### Build the Project - $ grunt + $ grunt You should be able to see the below message for a successful build and a folder name `dist` has been created with all the expected output, parallel to `src` folder, with all the tasks completed. - Done, without errors. + Done, without errors. ### Testing - $ grunt test + $ grunt test We use jasmine as a unit testing framework to test our boilerplate code, as of now it's been only done for `_.main.js`, you would get all the test done in the next release. @@ -145,4 +147,4 @@ See [LICENSE](LICENSE) [license-url]: LICENSE [version-image]: http://img.shields.io/github/tag/mdarif/JavaScript-Boilerplate.svg?style=flat -[version-url]: https://github.com/mdarif/JavaScript-Boilerplate/tags \ No newline at end of file +[version-url]: https://github.com/mdarif/JavaScript-Boilerplate/tags diff --git a/package.json b/package.json index 31a9db3..1b0edb1 100644 --- a/package.json +++ b/package.json @@ -21,40 +21,37 @@ }, "dependencies": {}, "devDependencies": { + "connect-livereload": "~0.5.3", "grunt": "~0.4.5", - "grunt-contrib-jshint": "~0.10.0", + "grunt-compare-size": "~0.4.0", + "grunt-concurrent": "~2.0.0", + "grunt-contrib-clean": "~0.6.0", + "grunt-contrib-compass": "~1.0.3", + "grunt-contrib-concat": "~0.5.1", + "grunt-contrib-connect": "~0.10.1", + "grunt-contrib-copy": "~0.8.0", + "grunt-contrib-cssmin": "~0.12.3", + "grunt-contrib-htmlmin": "~0.4.0", + "grunt-contrib-jasmine": "^0.6.4", + "grunt-contrib-jshint": "~0.11.2", + "grunt-contrib-sass": "~0.9.2", + "grunt-contrib-uglify": "~0.9.1", "grunt-contrib-watch": "~0.6.1", - "grunt-contrib-concat": "~0.4.0", - "grunt-contrib-uglify": "~0.4.0", - "grunt-contrib-copy": "~0.5.0", - "grunt-contrib-cssmin": "~0.9.0", - "grunt-contrib-htmlmin": "~0.3.0", - "grunt-contrib-clean": "~0.5.0", - "grunt-usemin": "~2.1.1", - "grunt-contrib-connect": "~0.7.1", - "connect-livereload": "~0.4.0", + "grunt-jsdoc": "~0.6.7", + "grunt-karma": "^0.11.0", + "grunt-notify": "~0.4.1", "grunt-open": "~0.2.3", - "matchdep": "~0.3.0", - "grunt-notify": "~0.3.0", - "grunt-shell": "~0.7.0", - "grunt-compare-size": "~0.4.0", - "grunt-jsdoc": "~0.5.4", - "grunt-contrib-sass": "~0.7.3", - "grunt-contrib-compass": "~0.8.0", - "grunt-uncss": "~0.3.3", - "grunt-concurrent": "~0.5.0", - "time-grunt": "~0.3.1", + "grunt-shell": "~1.1.2", + "grunt-uncss": "~0.4.2", + "grunt-usemin": "~3.0.0", "karma": "^0.12.16", - "grunt-karma": "^0.8.3", "karma-chrome-launcher": "^0.1.3", "karma-firefox-launcher": "^0.1.3", - "karma-phantomjs-launcher": "^0.1.4", - "karma-jasmine": "^0.1.5", - "grunt-contrib-jasmine": "^0.6.4" + "karma-jasmine": "^0.3.5", + "karma-phantomjs-launcher": "^0.2.0", + "matchdep": "~0.3.0", + "time-grunt": "~1.2.1" }, "version": "1.2.0", "license": "MIT/GPL" } - - - From 91507ea995f91560f994113810b2564492e5d77e Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 20 Jun 2015 13:09:03 +0530 Subject: [PATCH 61/63] Adding the codeclimate file to create better software with matrix. --- codeclimate.yml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 codeclimate.yml diff --git a/codeclimate.yml b/codeclimate.yml new file mode 100644 index 0000000..2d54eca --- /dev/null +++ b/codeclimate.yml @@ -0,0 +1,5 @@ +# Save as .codeclimate.yml (note leading .) in project root directory +languages: + JavaScript: true +# exclude_paths: +# - "foo/bar.rb" \ No newline at end of file From eff1423afe2a2d871066d87e6756f712e685edf6 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 20 Jun 2015 13:34:32 +0530 Subject: [PATCH 62/63] Updated few more packages. --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1b0edb1..bd76120 100644 --- a/package.json +++ b/package.json @@ -32,22 +32,22 @@ "grunt-contrib-copy": "~0.8.0", "grunt-contrib-cssmin": "~0.12.3", "grunt-contrib-htmlmin": "~0.4.0", - "grunt-contrib-jasmine": "^0.6.4", + "grunt-contrib-jasmine": "~0.8.2", "grunt-contrib-jshint": "~0.11.2", "grunt-contrib-sass": "~0.9.2", "grunt-contrib-uglify": "~0.9.1", "grunt-contrib-watch": "~0.6.1", "grunt-jsdoc": "~0.6.7", - "grunt-karma": "^0.11.0", + "grunt-karma": "~0.11.1", "grunt-notify": "~0.4.1", "grunt-open": "~0.2.3", "grunt-shell": "~1.1.2", "grunt-uncss": "~0.4.2", "grunt-usemin": "~3.0.0", - "karma": "^0.12.16", - "karma-chrome-launcher": "^0.1.3", - "karma-firefox-launcher": "^0.1.3", - "karma-jasmine": "^0.3.5", + "karma": "~0.12.36", + "karma-chrome-launcher": "~0.1.12", + "karma-firefox-launcher": "~0.1.6", + "karma-jasmine": "~0.3.5", "karma-phantomjs-launcher": "^0.2.0", "matchdep": "~0.3.0", "time-grunt": "~1.2.1" From b48bfbcfe2f417fa5ece0b50046bf08dcd673ec0 Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Sat, 20 Jun 2015 13:50:54 +0530 Subject: [PATCH 63/63] Deleted require.js and updated the readme. --- README.md | 8 +- src/js/libs/require.js | 2063 ---------------------------------------- 2 files changed, 6 insertions(+), 2065 deletions(-) delete mode 100644 src/js/libs/require.js diff --git a/README.md b/README.md index 413baf0..64d0ea6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JavaScript Boilerplate v1.2 -[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] [![Version][version-image]][version-url] [![Code Climate](https://codeclimate.com/repos/558392546956804e780009ea/badges/9cb6feeef61e41a567ad/gpa.svg)](https://codeclimate.com/repos/558392546956804e780009ea/feed) +[![Build Status][build-image]][build-url] [![Dependency Status][dependencies-image]][dependencies-url] [![License][license-image]][license-url] [![Version][version-image]][version-url] [![Code Climate][codeclimate-image]] [codeclimate-url] JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it. @@ -140,7 +140,7 @@ See [LICENSE](LICENSE) [build-image]: http://img.shields.io/travis/mdarif/JavaScript-Boilerplate.svg?style=flat [build-url]: http://travis-ci.org/mdarif/JavaScript-Boilerplate -[dependencies-image]: http://img.shields.io/gemnasium/mdarif/JavaScript-Boilerplate.svg?style=flat +[dependencies-image]: https://gemnasium.com/mdarif/JavaScript-Boilerplate.svg?style=flat [dependencies-url]: https://gemnasium.com/mdarif/JavaScript-Boilerplate [license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat @@ -148,3 +148,7 @@ See [LICENSE](LICENSE) [version-image]: http://img.shields.io/github/tag/mdarif/JavaScript-Boilerplate.svg?style=flat [version-url]: https://github.com/mdarif/JavaScript-Boilerplate/tags + +[codeclimate-image]: https://codeclimate.com/repos/558392546956804e780009ea/badges/9cb6feeef61e41a567ad/gpa.svg?style=flat +[codeclimate-url]: https://codeclimate.com/repos/558392546956804e780009ea/feed + diff --git a/src/js/libs/require.js b/src/js/libs/require.js deleted file mode 100644 index 068e34c..0000000 --- a/src/js/libs/require.js +++ /dev/null @@ -1,2063 +0,0 @@ -/** vim: et:ts=4:sw=4:sts=4 - * @license RequireJS 1.0.8 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. - * Available via the MIT or new BSD license. - * see: http://github.com/jrburke/requirejs for details - */ -/*jslint strict: false, plusplus: false, sub: true */ -/*global window, navigator, document, importScripts, jQuery, setTimeout, opera */ - -var requirejs, require, define; -(function (undefined) { - //Change this version number for each release. - var version = "1.0.8", - commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, - cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g, - currDirRegExp = /^\.\//, - jsSuffixRegExp = /\.js$/, - ostring = Object.prototype.toString, - ap = Array.prototype, - aps = ap.slice, - apsp = ap.splice, - isBrowser = !!(typeof window !== "undefined" && navigator && document), - isWebWorker = !isBrowser && typeof importScripts !== "undefined", - //PS3 indicates loaded and complete, but need to wait for complete - //specifically. Sequence is "loading", "loaded", execution, - // then "complete". The UA check is unfortunate, but not sure how - //to feature test w/o causing perf issues. - readyRegExp = isBrowser && navigator.platform === 'PLAYSTATION 3' ? - /^complete$/ : /^(complete|loaded)$/, - defContextName = "_", - //Oh the tragedy, detecting opera. See the usage of isOpera for reason. - isOpera = typeof opera !== "undefined" && opera.toString() === "[object Opera]", - empty = {}, - contexts = {}, - globalDefQueue = [], - interactiveScript = null, - checkLoadedDepth = 0, - useInteractive = false, - reservedDependencies = { - require: true, - module: true, - exports: true - }, - req, cfg = {}, currentlyAddingScript, s, head, baseElement, scripts, script, - src, subPath, mainScript, dataMain, globalI, ctx, jQueryCheck, checkLoadedTimeoutId; - - function isFunction(it) { - return ostring.call(it) === "[object Function]"; - } - - function isArray(it) { - return ostring.call(it) === "[object Array]"; - } - - /** - * Simple function to mix in properties from source into target, - * but only if target does not already have a property of the same name. - * This is not robust in IE for transferring methods that match - * Object.prototype names, but the uses of mixin here seem unlikely to - * trigger a problem related to that. - */ - function mixin(target, source, force) { - for (var prop in source) { - if (!(prop in empty) && (!(prop in target) || force)) { - target[prop] = source[prop]; - } - } - return req; - } - - /** - * Constructs an error with a pointer to an URL with more information. - * @param {String} id the error ID that maps to an ID on a web page. - * @param {String} message human readable error. - * @param {Error} [err] the original error, if there is one. - * - * @returns {Error} - */ - function makeError(id, msg, err) { - var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id); - if (err) { - e.originalError = err; - } - return e; - } - - /** - * Used to set up package paths from a packagePaths or packages config object. - * @param {Object} pkgs the object to store the new package config - * @param {Array} currentPackages an array of packages to configure - * @param {String} [dir] a prefix dir to use. - */ - function configurePackageDir(pkgs, currentPackages, dir) { - var i, location, pkgObj; - - for (i = 0; (pkgObj = currentPackages[i]); i++) { - pkgObj = typeof pkgObj === "string" ? { name: pkgObj } : pkgObj; - location = pkgObj.location; - - //Add dir to the path, but avoid paths that start with a slash - //or have a colon (indicates a protocol) - if (dir && (!location || (location.indexOf("/") !== 0 && location.indexOf(":") === -1))) { - location = dir + "/" + (location || pkgObj.name); - } - - //Create a brand new object on pkgs, since currentPackages can - //be passed in again, and config.pkgs is the internal transformed - //state for all package configs. - pkgs[pkgObj.name] = { - name: pkgObj.name, - location: location || pkgObj.name, - //Remove leading dot in main, so main paths are normalized, - //and remove any trailing .js, since different package - //envs have different conventions: some use a module name, - //some use a file name. - main: (pkgObj.main || "main") - .replace(currDirRegExp, '') - .replace(jsSuffixRegExp, '') - }; - } - } - - /** - * jQuery 1.4.3-1.5.x use a readyWait/ready() pairing to hold DOM - * ready callbacks, but jQuery 1.6 supports a holdReady() API instead. - * At some point remove the readyWait/ready() support and just stick - * with using holdReady. - */ - function jQueryHoldReady($, shouldHold) { - if ($.holdReady) { - $.holdReady(shouldHold); - } else if (shouldHold) { - $.readyWait += 1; - } else { - $.ready(true); - } - } - - if (typeof define !== "undefined") { - //If a define is already in play via another AMD loader, - //do not overwrite. - return; - } - - if (typeof requirejs !== "undefined") { - if (isFunction(requirejs)) { - //Do not overwrite and existing requirejs instance. - return; - } else { - cfg = requirejs; - requirejs = undefined; - } - } - - //Allow for a require config object - if (typeof require !== "undefined" && !isFunction(require)) { - //assume it is a config object. - cfg = require; - require = undefined; - } - - /** - * Creates a new context for use in require and define calls. - * Handle most of the heavy lifting. Do not want to use an object - * with prototype here to avoid using "this" in require, in case it - * needs to be used in more super secure envs that do not want this. - * Also there should not be that many contexts in the page. Usually just - * one for the default context, but could be extra for multiversion cases - * or if a package needs a special context for a dependency that conflicts - * with the standard context. - */ - function newContext(contextName) { - var context, resume, - config = { - waitSeconds: 7, - baseUrl: "./", - paths: {}, - pkgs: {}, - catchError: {} - }, - defQueue = [], - specified = { - "require": true, - "exports": true, - "module": true - }, - urlMap = {}, - defined = {}, - loaded = {}, - waiting = {}, - waitAry = [], - urlFetched = {}, - managerCounter = 0, - managerCallbacks = {}, - plugins = {}, - //Used to indicate which modules in a build scenario - //need to be full executed. - needFullExec = {}, - fullExec = {}, - resumeDepth = 0; - - /** - * Trims the . and .. from an array of path segments. - * It will keep a leading path segment if a .. will become - * the first path segment, to help with module name lookups, - * which act like paths, but can be remapped. But the end result, - * all paths that use this function should look normalized. - * NOTE: this method MODIFIES the input array. - * @param {Array} ary the array of path segments. - */ - function trimDots(ary) { - var i, part; - for (i = 0; (part = ary[i]); i++) { - if (part === ".") { - ary.splice(i, 1); - i -= 1; - } else if (part === "..") { - if (i === 1 && (ary[2] === '..' || ary[0] === '..')) { - //End of the line. Keep at least one non-dot - //path segment at the front so it can be mapped - //correctly to disk. Otherwise, there is likely - //no path mapping for a path starting with '..'. - //This can still fail, but catches the most reasonable - //uses of .. - break; - } else if (i > 0) { - ary.splice(i - 1, 2); - i -= 2; - } - } - } - } - - /** - * Given a relative module name, like ./something, normalize it to - * a real name that can be mapped to a path. - * @param {String} name the relative name - * @param {String} baseName a real name that the name arg is relative - * to. - * @returns {String} normalized name - */ - function normalize(name, baseName) { - var pkgName, pkgConfig; - - //Adjust any relative paths. - if (name && name.charAt(0) === ".") { - //If have a base name, try to normalize against it, - //otherwise, assume it is a top-level require that will - //be relative to baseUrl in the end. - if (baseName) { - if (config.pkgs[baseName]) { - //If the baseName is a package name, then just treat it as one - //name to concat the name with. - baseName = [baseName]; - } else { - //Convert baseName to array, and lop off the last part, - //so that . matches that "directory" and not name of the baseName's - //module. For instance, baseName of "one/two/three", maps to - //"one/two/three.js", but we want the directory, "one/two" for - //this normalization. - baseName = baseName.split("/"); - baseName = baseName.slice(0, baseName.length - 1); - } - - name = baseName.concat(name.split("/")); - trimDots(name); - - //Some use of packages may use a . path to reference the - //"main" module name, so normalize for that. - pkgConfig = config.pkgs[(pkgName = name[0])]; - name = name.join("/"); - if (pkgConfig && name === pkgName + '/' + pkgConfig.main) { - name = pkgName; - } - } else if (name.indexOf("./") === 0) { - // No baseName, so this is ID is resolved relative - // to baseUrl, pull off the leading dot. - name = name.substring(2); - } - } - return name; - } - - /** - * Creates a module mapping that includes plugin prefix, module - * name, and path. If parentModuleMap is provided it will - * also normalize the name via require.normalize() - * - * @param {String} name the module name - * @param {String} [parentModuleMap] parent module map - * for the module name, used to resolve relative names. - * - * @returns {Object} - */ - function makeModuleMap(name, parentModuleMap) { - var index = name ? name.indexOf("!") : -1, - prefix = null, - parentName = parentModuleMap ? parentModuleMap.name : null, - originalName = name, - normalizedName, url, pluginModule; - - if (index !== -1) { - prefix = name.substring(0, index); - name = name.substring(index + 1, name.length); - } - - if (prefix) { - prefix = normalize(prefix, parentName); - } - - //Account for relative paths if there is a base name. - if (name) { - if (prefix) { - pluginModule = defined[prefix]; - if (pluginModule && pluginModule.normalize) { - //Plugin is loaded, use its normalize method. - normalizedName = pluginModule.normalize(name, function (name) { - return normalize(name, parentName); - }); - } else { - normalizedName = normalize(name, parentName); - } - } else { - //A regular module. - normalizedName = normalize(name, parentName); - - url = urlMap[normalizedName]; - if (!url) { - //Calculate url for the module, if it has a name. - //Use name here since nameToUrl also calls normalize, - //and for relative names that are outside the baseUrl - //this causes havoc. Was thinking of just removing - //parentModuleMap to avoid extra normalization, but - //normalize() still does a dot removal because of - //issue #142, so just pass in name here and redo - //the normalization. Paths outside baseUrl are just - //messy to support. - url = context.nameToUrl(name, null, parentModuleMap); - - //Store the URL mapping for later. - urlMap[normalizedName] = url; - } - } - } - - return { - prefix: prefix, - name: normalizedName, - parentMap: parentModuleMap, - url: url, - originalName: originalName, - fullName: prefix ? prefix + "!" + (normalizedName || '') : normalizedName - }; - } - - /** - * Determine if priority loading is done. If so clear the priorityWait - */ - function isPriorityDone() { - var priorityDone = true, - priorityWait = config.priorityWait, - priorityName, i; - if (priorityWait) { - for (i = 0; (priorityName = priorityWait[i]); i++) { - if (!loaded[priorityName]) { - priorityDone = false; - break; - } - } - if (priorityDone) { - delete config.priorityWait; - } - } - return priorityDone; - } - - function makeContextModuleFunc(func, relModuleMap, enableBuildCallback) { - return function () { - //A version of a require function that passes a moduleName - //value for items that may need to - //look up paths relative to the moduleName - var args = aps.call(arguments, 0), lastArg; - if (enableBuildCallback && - isFunction((lastArg = args[args.length - 1]))) { - lastArg.__requireJsBuild = true; - } - args.push(relModuleMap); - return func.apply(null, args); - }; - } - - /** - * Helper function that creates a require function object to give to - * modules that ask for it as a dependency. It needs to be specific - * per module because of the implication of path mappings that may - * need to be relative to the module name. - */ - function makeRequire(relModuleMap, enableBuildCallback, altRequire) { - var modRequire = makeContextModuleFunc(altRequire || context.require, relModuleMap, enableBuildCallback); - - mixin(modRequire, { - nameToUrl: makeContextModuleFunc(context.nameToUrl, relModuleMap), - toUrl: makeContextModuleFunc(context.toUrl, relModuleMap), - defined: makeContextModuleFunc(context.requireDefined, relModuleMap), - specified: makeContextModuleFunc(context.requireSpecified, relModuleMap), - isBrowser: req.isBrowser - }); - return modRequire; - } - - /* - * Queues a dependency for checking after the loader is out of a - * "paused" state, for example while a script file is being loaded - * in the browser, where it may have many modules defined in it. - */ - function queueDependency(manager) { - context.paused.push(manager); - } - - function execManager(manager) { - var i, ret, err, errFile, errModuleTree, - cb = manager.callback, - map = manager.map, - fullName = map.fullName, - args = manager.deps, - listeners = manager.listeners, - execCb = config.requireExecCb || req.execCb, - cjsModule; - - //Call the callback to define the module, if necessary. - if (cb && isFunction(cb)) { - if (config.catchError.define) { - try { - ret = execCb(fullName, manager.callback, args, defined[fullName]); - } catch (e) { - err = e; - } - } else { - ret = execCb(fullName, manager.callback, args, defined[fullName]); - } - - if (fullName) { - //If setting exports via "module" is in play, - //favor that over return value and exports. After that, - //favor a non-undefined return value over exports use. - cjsModule = manager.cjsModule; - if (cjsModule && - cjsModule.exports !== undefined && - //Make sure it is not already the exports value - cjsModule.exports !== defined[fullName]) { - ret = defined[fullName] = manager.cjsModule.exports; - } else if (ret === undefined && manager.usingExports) { - //exports already set the defined value. - ret = defined[fullName]; - } else { - //Use the return value from the function. - defined[fullName] = ret; - //If this module needed full execution in a build - //environment, mark that now. - if (needFullExec[fullName]) { - fullExec[fullName] = true; - } - } - } - } else if (fullName) { - //May just be an object definition for the module. Only - //worry about defining if have a module name. - ret = defined[fullName] = cb; - - //If this module needed full execution in a build - //environment, mark that now. - if (needFullExec[fullName]) { - fullExec[fullName] = true; - } - } - - //Clean up waiting. Do this before error calls, and before - //calling back listeners, so that bookkeeping is correct - //in the event of an error and error is reported in correct order, - //since the listeners will likely have errors if the - //onError function does not throw. - if (waiting[manager.id]) { - delete waiting[manager.id]; - manager.isDone = true; - context.waitCount -= 1; - if (context.waitCount === 0) { - //Clear the wait array used for cycles. - waitAry = []; - } - } - - //Do not need to track manager callback now that it is defined. - delete managerCallbacks[fullName]; - - //Allow instrumentation like the optimizer to know the order - //of modules executed and their dependencies. - if (req.onResourceLoad && !manager.placeholder) { - req.onResourceLoad(context, map, manager.depArray); - } - - if (err) { - errFile = (fullName ? makeModuleMap(fullName).url : '') || - err.fileName || err.sourceURL; - errModuleTree = err.moduleTree; - err = makeError('defineerror', 'Error evaluating ' + - 'module "' + fullName + '" at location "' + - errFile + '":\n' + - err + '\nfileName:' + errFile + - '\nlineNumber: ' + (err.lineNumber || err.line), err); - err.moduleName = fullName; - err.moduleTree = errModuleTree; - return req.onError(err); - } - - //Let listeners know of this manager's value. - for (i = 0; (cb = listeners[i]); i++) { - cb(ret); - } - - return undefined; - } - - /** - * Helper that creates a callack function that is called when a dependency - * is ready, and sets the i-th dependency for the manager as the - * value passed to the callback generated by this function. - */ - function makeArgCallback(manager, i) { - return function (value) { - //Only do the work if it has not been done - //already for a dependency. Cycle breaking - //logic in forceExec could mean this function - //is called more than once for a given dependency. - if (!manager.depDone[i]) { - manager.depDone[i] = true; - manager.deps[i] = value; - manager.depCount -= 1; - if (!manager.depCount) { - //All done, execute! - execManager(manager); - } - } - }; - } - - function callPlugin(pluginName, depManager) { - var map = depManager.map, - fullName = map.fullName, - name = map.name, - plugin = plugins[pluginName] || - (plugins[pluginName] = defined[pluginName]), - load; - - //No need to continue if the manager is already - //in the process of loading. - if (depManager.loading) { - return; - } - depManager.loading = true; - - load = function (ret) { - depManager.callback = function () { - return ret; - }; - execManager(depManager); - - loaded[depManager.id] = true; - - //The loading of this plugin - //might have placed other things - //in the paused queue. In particular, - //a loader plugin that depends on - //a different plugin loaded resource. - resume(); - }; - - //Allow plugins to load other code without having to know the - //context or how to "complete" the load. - load.fromText = function (moduleName, text) { - /*jslint evil: true */ - var hasInteractive = useInteractive; - - //Indicate a the module is in process of loading. - loaded[moduleName] = false; - context.scriptCount += 1; - - //Indicate this is not a "real" module, so do not track it - //for builds, it does not map to a real file. - context.fake[moduleName] = true; - - //Turn off interactive script matching for IE for any define - //calls in the text, then turn it back on at the end. - if (hasInteractive) { - useInteractive = false; - } - - req.exec(text); - - if (hasInteractive) { - useInteractive = true; - } - - //Support anonymous modules. - context.completeLoad(moduleName); - }; - - //No need to continue if the plugin value has already been - //defined by a build. - if (fullName in defined) { - load(defined[fullName]); - } else { - //Use parentName here since the plugin's name is not reliable, - //could be some weird string with no path that actually wants to - //reference the parentName's path. - plugin.load(name, makeRequire(map.parentMap, true, function (deps, cb) { - var moduleDeps = [], - i, dep, depMap; - //Convert deps to full names and hold on to them - //for reference later, when figuring out if they - //are blocked by a circular dependency. - for (i = 0; (dep = deps[i]); i++) { - depMap = makeModuleMap(dep, map.parentMap); - deps[i] = depMap.fullName; - if (!depMap.prefix) { - moduleDeps.push(deps[i]); - } - } - depManager.moduleDeps = (depManager.moduleDeps || []).concat(moduleDeps); - return context.require(deps, cb); - }), load, config); - } - } - - /** - * Adds the manager to the waiting queue. Only fully - * resolved items should be in the waiting queue. - */ - function addWait(manager) { - if (!waiting[manager.id]) { - waiting[manager.id] = manager; - waitAry.push(manager); - context.waitCount += 1; - } - } - - /** - * Function added to every manager object. Created out here - * to avoid new function creation for each manager instance. - */ - function managerAdd(cb) { - this.listeners.push(cb); - } - - function getManager(map, shouldQueue) { - var fullName = map.fullName, - prefix = map.prefix, - plugin = prefix ? plugins[prefix] || - (plugins[prefix] = defined[prefix]) : null, - manager, created, pluginManager, prefixMap; - - if (fullName) { - manager = managerCallbacks[fullName]; - } - - if (!manager) { - created = true; - manager = { - //ID is just the full name, but if it is a plugin resource - //for a plugin that has not been loaded, - //then add an ID counter to it. - id: (prefix && !plugin ? - (managerCounter++) + '__p@:' : '') + - (fullName || '__r@' + (managerCounter++)), - map: map, - depCount: 0, - depDone: [], - depCallbacks: [], - deps: [], - listeners: [], - add: managerAdd - }; - - specified[manager.id] = true; - - //Only track the manager/reuse it if this is a non-plugin - //resource. Also only track plugin resources once - //the plugin has been loaded, and so the fullName is the - //true normalized value. - if (fullName && (!prefix || plugins[prefix])) { - managerCallbacks[fullName] = manager; - } - } - - //If there is a plugin needed, but it is not loaded, - //first load the plugin, then continue on. - if (prefix && !plugin) { - prefixMap = makeModuleMap(prefix); - - //Clear out defined and urlFetched if the plugin was previously - //loaded/defined, but not as full module (as in a build - //situation). However, only do this work if the plugin is in - //defined but does not have a module export value. - if (prefix in defined && !defined[prefix]) { - delete defined[prefix]; - delete urlFetched[prefixMap.url]; - } - - pluginManager = getManager(prefixMap, true); - pluginManager.add(function (plugin) { - //Create a new manager for the normalized - //resource ID and have it call this manager when - //done. - var newMap = makeModuleMap(map.originalName, map.parentMap), - normalizedManager = getManager(newMap, true); - - //Indicate this manager is a placeholder for the real, - //normalized thing. Important for when trying to map - //modules and dependencies, for instance, in a build. - manager.placeholder = true; - - normalizedManager.add(function (resource) { - manager.callback = function () { - return resource; - }; - execManager(manager); - }); - }); - } else if (created && shouldQueue) { - //Indicate the resource is not loaded yet if it is to be - //queued. - loaded[manager.id] = false; - queueDependency(manager); - addWait(manager); - } - - return manager; - } - - function main(inName, depArray, callback, relModuleMap) { - var moduleMap = makeModuleMap(inName, relModuleMap), - name = moduleMap.name, - fullName = moduleMap.fullName, - manager = getManager(moduleMap), - id = manager.id, - deps = manager.deps, - i, depArg, depName, depPrefix, cjsMod; - - if (fullName) { - //If module already defined for context, or already loaded, - //then leave. Also leave if jQuery is registering but it does - //not match the desired version number in the config. - if (fullName in defined || loaded[id] === true || - (fullName === "jquery" && config.jQuery && - config.jQuery !== callback().fn.jquery)) { - return; - } - - //Set specified/loaded here for modules that are also loaded - //as part of a layer, where onScriptLoad is not fired - //for those cases. Do this after the inline define and - //dependency tracing is done. - specified[id] = true; - loaded[id] = true; - - //If module is jQuery set up delaying its dom ready listeners. - if (fullName === "jquery" && callback) { - jQueryCheck(callback()); - } - } - - //Attach real depArray and callback to the manager. Do this - //only if the module has not been defined already, so do this after - //the fullName checks above. IE can call main() more than once - //for a module. - manager.depArray = depArray; - manager.callback = callback; - - //Add the dependencies to the deps field, and register for callbacks - //on the dependencies. - for (i = 0; i < depArray.length; i++) { - depArg = depArray[i]; - //There could be cases like in IE, where a trailing comma will - //introduce a null dependency, so only treat a real dependency - //value as a dependency. - if (depArg) { - //Split the dependency name into plugin and name parts - depArg = makeModuleMap(depArg, (name ? moduleMap : relModuleMap)); - depName = depArg.fullName; - depPrefix = depArg.prefix; - - //Fix the name in depArray to be just the name, since - //that is how it will be called back later. - depArray[i] = depName; - - //Fast path CommonJS standard dependencies. - if (depName === "require") { - deps[i] = makeRequire(moduleMap); - } else if (depName === "exports") { - //CommonJS module spec 1.1 - deps[i] = defined[fullName] = {}; - manager.usingExports = true; - } else if (depName === "module") { - //CommonJS module spec 1.1 - manager.cjsModule = cjsMod = deps[i] = { - id: name, - uri: name ? context.nameToUrl(name, null, relModuleMap) : undefined, - exports: defined[fullName] - }; - } else if (depName in defined && !(depName in waiting) && - (!(fullName in needFullExec) || - (fullName in needFullExec && fullExec[depName]))) { - //Module already defined, and not in a build situation - //where the module is a something that needs full - //execution and this dependency has not been fully - //executed. See r.js's requirePatch.js for more info - //on fullExec. - deps[i] = defined[depName]; - } else { - //Mark this dependency as needing full exec if - //the current module needs full exec. - if (fullName in needFullExec) { - needFullExec[depName] = true; - //Reset state so fully executed code will get - //picked up correctly. - delete defined[depName]; - urlFetched[depArg.url] = false; - } - - //Either a resource that is not loaded yet, or a plugin - //resource for either a plugin that has not - //loaded yet. - manager.depCount += 1; - manager.depCallbacks[i] = makeArgCallback(manager, i); - getManager(depArg, true).add(manager.depCallbacks[i]); - } - } - } - - //Do not bother tracking the manager if it is all done. - if (!manager.depCount) { - //All done, execute! - execManager(manager); - } else { - addWait(manager); - } - } - - /** - * Convenience method to call main for a define call that was put on - * hold in the defQueue. - */ - function callDefMain(args) { - main.apply(null, args); - } - - /** - * jQuery 1.4.3+ supports ways to hold off calling - * calling jQuery ready callbacks until all scripts are loaded. Be sure - * to track it if the capability exists.. Also, since jQuery 1.4.3 does - * not register as a module, need to do some global inference checking. - * Even if it does register as a module, not guaranteed to be the precise - * name of the global. If a jQuery is tracked for this context, then go - * ahead and register it as a module too, if not already in process. - */ - jQueryCheck = function (jqCandidate) { - if (!context.jQuery) { - var $ = jqCandidate || (typeof jQuery !== "undefined" ? jQuery : null); - - if ($) { - //If a specific version of jQuery is wanted, make sure to only - //use this jQuery if it matches. - if (config.jQuery && $.fn.jquery !== config.jQuery) { - return; - } - - if ("holdReady" in $ || "readyWait" in $) { - context.jQuery = $; - - //Manually create a "jquery" module entry if not one already - //or in process. Note this could trigger an attempt at - //a second jQuery registration, but does no harm since - //the first one wins, and it is the same value anyway. - callDefMain(["jquery", [], function () { - return jQuery; - }]); - - //Ask jQuery to hold DOM ready callbacks. - if (context.scriptCount) { - jQueryHoldReady($, true); - context.jQueryIncremented = true; - } - } - } - } - }; - - function findCycle(manager, traced) { - var fullName = manager.map.fullName, - depArray = manager.depArray, - fullyLoaded = true, - i, depName, depManager, result; - - if (manager.isDone || !fullName || !loaded[fullName]) { - return result; - } - - //Found the cycle. - if (traced[fullName]) { - return manager; - } - - traced[fullName] = true; - - //Trace through the dependencies. - if (depArray) { - for (i = 0; i < depArray.length; i++) { - //Some array members may be null, like if a trailing comma - //IE, so do the explicit [i] access and check if it has a value. - depName = depArray[i]; - if (!loaded[depName] && !reservedDependencies[depName]) { - fullyLoaded = false; - break; - } - depManager = waiting[depName]; - if (depManager && !depManager.isDone && loaded[depName]) { - result = findCycle(depManager, traced); - if (result) { - break; - } - } - } - if (!fullyLoaded) { - //Discard the cycle that was found, since it cannot - //be forced yet. Also clear this module from traced. - result = undefined; - delete traced[fullName]; - } - } - - return result; - } - - function forceExec(manager, traced) { - var fullName = manager.map.fullName, - depArray = manager.depArray, - i, depName, depManager, prefix, prefixManager, value; - - - if (manager.isDone || !fullName || !loaded[fullName]) { - return undefined; - } - - if (fullName) { - if (traced[fullName]) { - return defined[fullName]; - } - - traced[fullName] = true; - } - - //Trace through the dependencies. - if (depArray) { - for (i = 0; i < depArray.length; i++) { - //Some array members may be null, like if a trailing comma - //IE, so do the explicit [i] access and check if it has a value. - depName = depArray[i]; - if (depName) { - //First, make sure if it is a plugin resource that the - //plugin is not blocked. - prefix = makeModuleMap(depName).prefix; - if (prefix && (prefixManager = waiting[prefix])) { - forceExec(prefixManager, traced); - } - depManager = waiting[depName]; - if (depManager && !depManager.isDone && loaded[depName]) { - value = forceExec(depManager, traced); - manager.depCallbacks[i](value); - } - } - } - } - - return defined[fullName]; - } - - /** - * Checks if all modules for a context are loaded, and if so, evaluates the - * new ones in right dependency order. - * - * @private - */ - function checkLoaded() { - var waitInterval = config.waitSeconds * 1000, - //It is possible to disable the wait interval by using waitSeconds of 0. - expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(), - noLoads = "", hasLoadedProp = false, stillLoading = false, - cycleDeps = [], - i, prop, err, manager, cycleManager, moduleDeps; - - //If there are items still in the paused queue processing wait. - //This is particularly important in the sync case where each paused - //item is processed right away but there may be more waiting. - if (context.pausedCount > 0) { - return undefined; - } - - //Determine if priority loading is done. If so clear the priority. If - //not, then do not check - if (config.priorityWait) { - if (isPriorityDone()) { - //Call resume, since it could have - //some waiting dependencies to trace. - resume(); - } else { - return undefined; - } - } - - //See if anything is still in flight. - for (prop in loaded) { - if (!(prop in empty)) { - hasLoadedProp = true; - if (!loaded[prop]) { - if (expired) { - noLoads += prop + " "; - } else { - stillLoading = true; - if (prop.indexOf('!') === -1) { - //No reason to keep looking for unfinished - //loading. If the only stillLoading is a - //plugin resource though, keep going, - //because it may be that a plugin resource - //is waiting on a non-plugin cycle. - cycleDeps = []; - break; - } else { - moduleDeps = managerCallbacks[prop] && managerCallbacks[prop].moduleDeps; - if (moduleDeps) { - cycleDeps.push.apply(cycleDeps, moduleDeps); - } - } - } - } - } - } - - //Check for exit conditions. - if (!hasLoadedProp && !context.waitCount) { - //If the loaded object had no items, then the rest of - //the work below does not need to be done. - return undefined; - } - if (expired && noLoads) { - //If wait time expired, throw error of unloaded modules. - err = makeError("timeout", "Load timeout for modules: " + noLoads); - err.requireType = "timeout"; - err.requireModules = noLoads; - err.contextName = context.contextName; - return req.onError(err); - } - - //If still loading but a plugin is waiting on a regular module cycle - //break the cycle. - if (stillLoading && cycleDeps.length) { - for (i = 0; (manager = waiting[cycleDeps[i]]); i++) { - if ((cycleManager = findCycle(manager, {}))) { - forceExec(cycleManager, {}); - break; - } - } - - } - - //If still waiting on loads, and the waiting load is something - //other than a plugin resource, or there are still outstanding - //scripts, then just try back later. - if (!expired && (stillLoading || context.scriptCount)) { - //Something is still waiting to load. Wait for it, but only - //if a timeout is not already in effect. - if ((isBrowser || isWebWorker) && !checkLoadedTimeoutId) { - checkLoadedTimeoutId = setTimeout(function () { - checkLoadedTimeoutId = 0; - checkLoaded(); - }, 50); - } - return undefined; - } - - //If still have items in the waiting cue, but all modules have - //been loaded, then it means there are some circular dependencies - //that need to be broken. - //However, as a waiting thing is fired, then it can add items to - //the waiting cue, and those items should not be fired yet, so - //make sure to redo the checkLoaded call after breaking a single - //cycle, if nothing else loaded then this logic will pick it up - //again. - if (context.waitCount) { - //Cycle through the waitAry, and call items in sequence. - for (i = 0; (manager = waitAry[i]); i++) { - forceExec(manager, {}); - } - - //If anything got placed in the paused queue, run it down. - if (context.paused.length) { - resume(); - } - - //Only allow this recursion to a certain depth. Only - //triggered by errors in calling a module in which its - //modules waiting on it cannot finish loading, or some circular - //dependencies that then may add more dependencies. - //The value of 5 is a bit arbitrary. Hopefully just one extra - //pass, or two for the case of circular dependencies generating - //more work that gets resolved in the sync node case. - if (checkLoadedDepth < 5) { - checkLoadedDepth += 1; - checkLoaded(); - } - } - - checkLoadedDepth = 0; - - //Check for DOM ready, and nothing is waiting across contexts. - req.checkReadyState(); - - return undefined; - } - - /** - * Resumes tracing of dependencies and then checks if everything is loaded. - */ - resume = function () { - var manager, map, url, i, p, args, fullName; - - //Any defined modules in the global queue, intake them now. - context.takeGlobalQueue(); - - resumeDepth += 1; - - if (context.scriptCount <= 0) { - //Synchronous envs will push the number below zero with the - //decrement above, be sure to set it back to zero for good measure. - //require() calls that also do not end up loading scripts could - //push the number negative too. - context.scriptCount = 0; - } - - //Make sure any remaining defQueue items get properly processed. - while (defQueue.length) { - args = defQueue.shift(); - if (args[0] === null) { - return req.onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1])); - } else { - callDefMain(args); - } - } - - //Skip the resume of paused dependencies - //if current context is in priority wait. - if (!config.priorityWait || isPriorityDone()) { - while (context.paused.length) { - p = context.paused; - context.pausedCount += p.length; - //Reset paused list - context.paused = []; - - for (i = 0; (manager = p[i]); i++) { - map = manager.map; - url = map.url; - fullName = map.fullName; - - //If the manager is for a plugin managed resource, - //ask the plugin to load it now. - if (map.prefix) { - callPlugin(map.prefix, manager); - } else { - //Regular dependency. - if (!urlFetched[url] && !loaded[fullName]) { - (config.requireLoad || req.load)(context, fullName, url); - - //Mark the URL as fetched, but only if it is - //not an empty: URL, used by the optimizer. - //In that case we need to be sure to call - //load() for each module that is mapped to - //empty: so that dependencies are satisfied - //correctly. - if (url.indexOf('empty:') !== 0) { - urlFetched[url] = true; - } - } - } - } - - //Move the start time for timeout forward. - context.startTime = (new Date()).getTime(); - context.pausedCount -= p.length; - } - } - - //Only check if loaded when resume depth is 1. It is likely that - //it is only greater than 1 in sync environments where a factory - //function also then calls the callback-style require. In those - //cases, the checkLoaded should not occur until the resume - //depth is back at the top level. - if (resumeDepth === 1) { - checkLoaded(); - } - - resumeDepth -= 1; - - return undefined; - }; - - //Define the context object. Many of these fields are on here - //just to make debugging easier. - context = { - contextName: contextName, - config: config, - defQueue: defQueue, - waiting: waiting, - waitCount: 0, - specified: specified, - loaded: loaded, - urlMap: urlMap, - urlFetched: urlFetched, - scriptCount: 0, - defined: defined, - paused: [], - pausedCount: 0, - plugins: plugins, - needFullExec: needFullExec, - fake: {}, - fullExec: fullExec, - managerCallbacks: managerCallbacks, - makeModuleMap: makeModuleMap, - normalize: normalize, - /** - * Set a configuration for the context. - * @param {Object} cfg config object to integrate. - */ - configure: function (cfg) { - var paths, prop, packages, pkgs, packagePaths, requireWait; - - //Make sure the baseUrl ends in a slash. - if (cfg.baseUrl) { - if (cfg.baseUrl.charAt(cfg.baseUrl.length - 1) !== "/") { - cfg.baseUrl += "/"; - } - } - - //Save off the paths and packages since they require special processing, - //they are additive. - paths = config.paths; - packages = config.packages; - pkgs = config.pkgs; - - //Mix in the config values, favoring the new values over - //existing ones in context.config. - mixin(config, cfg, true); - - //Adjust paths if necessary. - if (cfg.paths) { - for (prop in cfg.paths) { - if (!(prop in empty)) { - paths[prop] = cfg.paths[prop]; - } - } - config.paths = paths; - } - - packagePaths = cfg.packagePaths; - if (packagePaths || cfg.packages) { - //Convert packagePaths into a packages config. - if (packagePaths) { - for (prop in packagePaths) { - if (!(prop in empty)) { - configurePackageDir(pkgs, packagePaths[prop], prop); - } - } - } - - //Adjust packages if necessary. - if (cfg.packages) { - configurePackageDir(pkgs, cfg.packages); - } - - //Done with modifications, assing packages back to context config - config.pkgs = pkgs; - } - - //If priority loading is in effect, trigger the loads now - if (cfg.priority) { - //Hold on to requireWait value, and reset it after done - requireWait = context.requireWait; - - //Allow tracing some require calls to allow the fetching - //of the priority config. - context.requireWait = false; - //But first, call resume to register any defined modules that may - //be in a data-main built file before the priority config - //call. - resume(); - - context.require(cfg.priority); - - //Trigger a resume right away, for the case when - //the script with the priority load is done as part - //of a data-main call. In that case the normal resume - //call will not happen because the scriptCount will be - //at 1, since the script for data-main is being processed. - resume(); - - //Restore previous state. - context.requireWait = requireWait; - config.priorityWait = cfg.priority; - } - - //If a deps array or a config callback is specified, then call - //require with those args. This is useful when require is defined as a - //config object before require.js is loaded. - if (cfg.deps || cfg.callback) { - context.require(cfg.deps || [], cfg.callback); - } - }, - - requireDefined: function (moduleName, relModuleMap) { - return makeModuleMap(moduleName, relModuleMap).fullName in defined; - }, - - requireSpecified: function (moduleName, relModuleMap) { - return makeModuleMap(moduleName, relModuleMap).fullName in specified; - }, - - require: function (deps, callback, relModuleMap) { - var moduleName, fullName, moduleMap; - if (typeof deps === "string") { - if (isFunction(callback)) { - //Invalid call - return req.onError(makeError("requireargs", "Invalid require call")); - } - - //Synchronous access to one module. If require.get is - //available (as in the Node adapter), prefer that. - //In this case deps is the moduleName and callback is - //the relModuleMap - if (req.get) { - return req.get(context, deps, callback); - } - - //Just return the module wanted. In this scenario, the - //second arg (if passed) is just the relModuleMap. - moduleName = deps; - relModuleMap = callback; - - //Normalize module name, if it contains . or .. - moduleMap = makeModuleMap(moduleName, relModuleMap); - fullName = moduleMap.fullName; - - if (!(fullName in defined)) { - return req.onError(makeError("notloaded", "Module name '" + - moduleMap.fullName + - "' has not been loaded yet for context: " + - contextName)); - } - return defined[fullName]; - } - - //Call main but only if there are dependencies or - //a callback to call. - if (deps && deps.length || callback) { - main(null, deps, callback, relModuleMap); - } - - //If the require call does not trigger anything new to load, - //then resume the dependency processing. - if (!context.requireWait) { - while (!context.scriptCount && context.paused.length) { - resume(); - } - } - return context.require; - }, - - /** - * Internal method to transfer globalQueue items to this context's - * defQueue. - */ - takeGlobalQueue: function () { - //Push all the globalDefQueue items into the context's defQueue - if (globalDefQueue.length) { - //Array splice in the values since the context code has a - //local var ref to defQueue, so cannot just reassign the one - //on context. - apsp.apply(context.defQueue, - [context.defQueue.length - 1, 0].concat(globalDefQueue)); - globalDefQueue = []; - } - }, - - /** - * Internal method used by environment adapters to complete a load event. - * A load event could be a script load or just a load pass from a synchronous - * load call. - * @param {String} moduleName the name of the module to potentially complete. - */ - completeLoad: function (moduleName) { - var args; - - context.takeGlobalQueue(); - - while (defQueue.length) { - args = defQueue.shift(); - - if (args[0] === null) { - args[0] = moduleName; - break; - } else if (args[0] === moduleName) { - //Found matching define call for this script! - break; - } else { - //Some other named define call, most likely the result - //of a build layer that included many define calls. - callDefMain(args); - args = null; - } - } - if (args) { - callDefMain(args); - } else { - //A script that does not call define(), so just simulate - //the call for it. Special exception for jQuery dynamic load. - callDefMain([moduleName, [], - moduleName === "jquery" && typeof jQuery !== "undefined" ? - function () { - return jQuery; - } : null]); - } - - //Doing this scriptCount decrement branching because sync envs - //need to decrement after resume, otherwise it looks like - //loading is complete after the first dependency is fetched. - //For browsers, it works fine to decrement after, but it means - //the checkLoaded setTimeout 50 ms cost is taken. To avoid - //that cost, decrement beforehand. - if (req.isAsync) { - context.scriptCount -= 1; - } - resume(); - if (!req.isAsync) { - context.scriptCount -= 1; - } - }, - - /** - * Converts a module name + .extension into an URL path. - * *Requires* the use of a module name. It does not support using - * plain URLs like nameToUrl. - */ - toUrl: function (moduleNamePlusExt, relModuleMap) { - var index = moduleNamePlusExt.lastIndexOf("."), - ext = null; - - if (index !== -1) { - ext = moduleNamePlusExt.substring(index, moduleNamePlusExt.length); - moduleNamePlusExt = moduleNamePlusExt.substring(0, index); - } - - return context.nameToUrl(moduleNamePlusExt, ext, relModuleMap); - }, - - /** - * Converts a module name to a file path. Supports cases where - * moduleName may actually be just an URL. - */ - nameToUrl: function (moduleName, ext, relModuleMap) { - var paths, pkgs, pkg, pkgPath, syms, i, parentModule, url, - config = context.config; - - //Normalize module name if have a base relative module name to work from. - moduleName = normalize(moduleName, relModuleMap && relModuleMap.fullName); - - //If a colon is in the URL, it indicates a protocol is used and it is just - //an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?) - //or ends with .js, then assume the user meant to use an url and not a module id. - //The slash is important for protocol-less URLs as well as full paths. - if (req.jsExtRegExp.test(moduleName)) { - //Just a plain path, not module name lookup, so just return it. - //Add extension if it is included. This is a bit wonky, only non-.js things pass - //an extension, this method probably needs to be reworked. - url = moduleName + (ext ? ext : ""); - } else { - //A module that needs to be converted to a path. - paths = config.paths; - pkgs = config.pkgs; - - syms = moduleName.split("/"); - //For each module name segment, see if there is a path - //registered for it. Start with most specific name - //and work up from it. - for (i = syms.length; i > 0; i--) { - parentModule = syms.slice(0, i).join("/"); - if (paths[parentModule]) { - syms.splice(0, i, paths[parentModule]); - break; - } else if ((pkg = pkgs[parentModule])) { - //If module name is just the package name, then looking - //for the main module. - if (moduleName === pkg.name) { - pkgPath = pkg.location + '/' + pkg.main; - } else { - pkgPath = pkg.location; - } - syms.splice(0, i, pkgPath); - break; - } - } - - //Join the path parts together, then figure out if baseUrl is needed. - url = syms.join("/") + (ext || ".js"); - url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? "" : config.baseUrl) + url; - } - - return config.urlArgs ? url + - ((url.indexOf('?') === -1 ? '?' : '&') + - config.urlArgs) : url; - } - }; - - //Make these visible on the context so can be called at the very - //end of the file to bootstrap - context.jQueryCheck = jQueryCheck; - context.resume = resume; - - return context; - } - - /** - * Main entry point. - * - * If the only argument to require is a string, then the module that - * is represented by that string is fetched for the appropriate context. - * - * If the first argument is an array, then it will be treated as an array - * of dependency string names to fetch. An optional function callback can - * be specified to execute when all of those dependencies are available. - * - * Make a local req variable to help Caja compliance (it assumes things - * on a require that are not standardized), and to give a short - * name for minification/local scope use. - */ - req = requirejs = function (deps, callback) { - - //Find the right context, use default - var contextName = defContextName, - context, config; - - // Determine if have config object in the call. - if (!isArray(deps) && typeof deps !== "string") { - // deps is a config object - config = deps; - if (isArray(callback)) { - // Adjust args if there are dependencies - deps = callback; - callback = arguments[2]; - } else { - deps = []; - } - } - - if (config && config.context) { - contextName = config.context; - } - - context = contexts[contextName] || - (contexts[contextName] = newContext(contextName)); - - if (config) { - context.configure(config); - } - - return context.require(deps, callback); - }; - - /** - * Support require.config() to make it easier to cooperate with other - * AMD loaders on globally agreed names. - */ - req.config = function (config) { - return req(config); - }; - - /** - * Export require as a global, but only if it does not already exist. - */ - if (!require) { - require = req; - } - - /** - * Global require.toUrl(), to match global require, mostly useful - * for debugging/work in the global space. - */ - req.toUrl = function (moduleNamePlusExt) { - return contexts[defContextName].toUrl(moduleNamePlusExt); - }; - - req.version = version; - - //Used to filter out dependencies that are already paths. - req.jsExtRegExp = /^\/|:|\?|\.js$/; - s = req.s = { - contexts: contexts, - //Stores a list of URLs that should not get async script tag treatment. - skipAsync: {} - }; - - req.isAsync = req.isBrowser = isBrowser; - if (isBrowser) { - head = s.head = document.getElementsByTagName("head")[0]; - //If BASE tag is in play, using appendChild is a problem for IE6. - //When that browser dies, this can be removed. Details in this jQuery bug: - //http://dev.jquery.com/ticket/2709 - baseElement = document.getElementsByTagName("base")[0]; - if (baseElement) { - head = s.head = baseElement.parentNode; - } - } - - /** - * Any errors that require explicitly generates will be passed to this - * function. Intercept/override it if you want custom error handling. - * @param {Error} err the error object. - */ - req.onError = function (err) { - throw err; - }; - - /** - * Does the request to load a module for the browser case. - * Make this a separate function to allow other environments - * to override it. - * - * @param {Object} context the require context to find state. - * @param {String} moduleName the name of the module. - * @param {Object} url the URL to the module. - */ - req.load = function (context, moduleName, url) { - req.resourcesReady(false); - - context.scriptCount += 1; - req.attach(url, context, moduleName); - - //If tracking a jQuery, then make sure its ready callbacks - //are put on hold to prevent its ready callbacks from - //triggering too soon. - if (context.jQuery && !context.jQueryIncremented) { - jQueryHoldReady(context.jQuery, true); - context.jQueryIncremented = true; - } - }; - - function getInteractiveScript() { - var scripts, i, script; - if (interactiveScript && interactiveScript.readyState === 'interactive') { - return interactiveScript; - } - - scripts = document.getElementsByTagName('script'); - for (i = scripts.length - 1; i > -1 && (script = scripts[i]); i--) { - if (script.readyState === 'interactive') { - return (interactiveScript = script); - } - } - - return null; - } - - /** - * The function that handles definitions of modules. Differs from - * require() in that a string for the module should be the first argument, - * and the function to execute after dependencies are loaded should - * return a value to define the module corresponding to the first argument's - * name. - */ - define = function (name, deps, callback) { - var node, context; - - //Allow for anonymous functions - if (typeof name !== 'string') { - //Adjust args appropriately - callback = deps; - deps = name; - name = null; - } - - //This module may not have dependencies - if (!isArray(deps)) { - callback = deps; - deps = []; - } - - //If no name, and callback is a function, then figure out if it a - //CommonJS thing with dependencies. - if (!deps.length && isFunction(callback)) { - //Remove comments from the callback string, - //look for require calls, and pull them into the dependencies, - //but only if there are function args. - if (callback.length) { - callback - .toString() - .replace(commentRegExp, "") - .replace(cjsRequireRegExp, function (match, dep) { - deps.push(dep); - }); - - //May be a CommonJS thing even without require calls, but still - //could use exports, and module. Avoid doing exports and module - //work though if it just needs require. - //REQUIRES the function to expect the CommonJS variables in the - //order listed below. - deps = (callback.length === 1 ? ["require"] : ["require", "exports", "module"]).concat(deps); - } - } - - //If in IE 6-8 and hit an anonymous define() call, do the interactive - //work. - if (useInteractive) { - node = currentlyAddingScript || getInteractiveScript(); - if (node) { - if (!name) { - name = node.getAttribute("data-requiremodule"); - } - context = contexts[node.getAttribute("data-requirecontext")]; - } - } - - //Always save off evaluating the def call until the script onload handler. - //This allows multiple modules to be in a file without prematurely - //tracing dependencies, and allows for anonymous module support, - //where the module name is not known until the script onload event - //occurs. If no context, use the global queue, and get it processed - //in the onscript load callback. - (context ? context.defQueue : globalDefQueue).push([name, deps, callback]); - - return undefined; - }; - - define.amd = { - multiversion: true, - plugins: true, - jQuery: true - }; - - /** - * Executes the text. Normally just uses eval, but can be modified - * to use a more environment specific call. - * @param {String} text the text to execute/evaluate. - */ - req.exec = function (text) { - return eval(text); - }; - - /** - * Executes a module callack function. Broken out as a separate function - * solely to allow the build system to sequence the files in the built - * layer in the right sequence. - * - * @private - */ - req.execCb = function (name, callback, args, exports) { - return callback.apply(exports, args); - }; - - - /** - * Adds a node to the DOM. Public function since used by the order plugin. - * This method should not normally be called by outside code. - */ - req.addScriptToDom = function (node) { - //For some cache cases in IE 6-8, the script executes before the end - //of the appendChild execution, so to tie an anonymous define - //call to the module name (which is stored on the node), hold on - //to a reference to this node, but clear after the DOM insertion. - currentlyAddingScript = node; - if (baseElement) { - head.insertBefore(node, baseElement); - } else { - head.appendChild(node); - } - currentlyAddingScript = null; - }; - - /** - * callback for script loads, used to check status of loading. - * - * @param {Event} evt the event from the browser for the script - * that was loaded. - * - * @private - */ - req.onScriptLoad = function (evt) { - //Using currentTarget instead of target for Firefox 2.0's sake. Not - //all old browsers will be supported, but this one was easy enough - //to support and still makes sense. - var node = evt.currentTarget || evt.srcElement, contextName, moduleName, - context; - - if (evt.type === "load" || (node && readyRegExp.test(node.readyState))) { - //Reset interactive script so a script node is not held onto for - //to long. - interactiveScript = null; - - //Pull out the name of the module and the context. - contextName = node.getAttribute("data-requirecontext"); - moduleName = node.getAttribute("data-requiremodule"); - context = contexts[contextName]; - - contexts[contextName].completeLoad(moduleName); - - //Clean up script binding. Favor detachEvent because of IE9 - //issue, see attachEvent/addEventListener comment elsewhere - //in this file. - if (node.detachEvent && !isOpera) { - //Probably IE. If not it will throw an error, which will be - //useful to know. - node.detachEvent("onreadystatechange", req.onScriptLoad); - } else { - node.removeEventListener("load", req.onScriptLoad, false); - } - } - }; - - /** - * Attaches the script represented by the URL to the current - * environment. Right now only supports browser loading, - * but can be redefined in other environments to do the right thing. - * @param {String} url the url of the script to attach. - * @param {Object} context the context that wants the script. - * @param {moduleName} the name of the module that is associated with the script. - * @param {Function} [callback] optional callback, defaults to require.onScriptLoad - * @param {String} [type] optional type, defaults to text/javascript - * @param {Function} [fetchOnlyFunction] optional function to indicate the script node - * should be set up to fetch the script but do not attach it to the DOM - * so that it can later be attached to execute it. This is a way for the - * order plugin to support ordered loading in IE. Once the script is fetched, - * but not executed, the fetchOnlyFunction will be called. - */ - req.attach = function (url, context, moduleName, callback, type, fetchOnlyFunction) { - var node; - if (isBrowser) { - //In the browser so use a script tag - callback = callback || req.onScriptLoad; - node = context && context.config && context.config.xhtml ? - document.createElementNS("http://www.w3.org/1999/xhtml", "html:script") : - document.createElement("script"); - node.type = type || (context && context.config.scriptType) || - "text/javascript"; - node.charset = "utf-8"; - //Use async so Gecko does not block on executing the script if something - //like a long-polling comet tag is being run first. Gecko likes - //to evaluate scripts in DOM order, even for dynamic scripts. - //It will fetch them async, but only evaluate the contents in DOM - //order, so a long-polling script tag can delay execution of scripts - //after it. But telling Gecko we expect async gets us the behavior - //we want -- execute it whenever it is finished downloading. Only - //Helps Firefox 3.6+ - //Allow some URLs to not be fetched async. Mostly helps the order! - //plugin - node.async = !s.skipAsync[url]; - - if (context) { - node.setAttribute("data-requirecontext", context.contextName); - } - node.setAttribute("data-requiremodule", moduleName); - - //Set up load listener. Test attachEvent first because IE9 has - //a subtle issue in its addEventListener and script onload firings - //that do not match the behavior of all other browsers with - //addEventListener support, which fire the onload event for a - //script right after the script execution. See: - //https://connect.microsoft.com/IE/feedback/details/648057/script-onload-event-is-not-fired-immediately-after-script-execution - //UNFORTUNATELY Opera implements attachEvent but does not follow the script - //script execution mode. - if (node.attachEvent && - // check if node.attachEvent is artificially added by custom script or - // natively supported by browser - // read https://github.com/jrburke/requirejs/issues/187 - // if we can NOT find [native code] then it must NOT natively supported. - // in IE8, node.attachEvent does not have toString() - // TODO: a better way to check interactive mode - !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code]') < 0) && - !isOpera) { - //Probably IE. IE (at least 6-8) do not fire - //script onload right after executing the script, so - //we cannot tie the anonymous define call to a name. - //However, IE reports the script as being in "interactive" - //readyState at the time of the define call. - useInteractive = true; - - - if (fetchOnlyFunction) { - //Need to use old school onreadystate here since - //when the event fires and the node is not attached - //to the DOM, the evt.srcElement is null, so use - //a closure to remember the node. - node.onreadystatechange = function (evt) { - //Script loaded but not executed. - //Clear loaded handler, set the real one that - //waits for script execution. - if (node.readyState === 'loaded') { - node.onreadystatechange = null; - node.attachEvent("onreadystatechange", callback); - fetchOnlyFunction(node); - } - }; - } else { - node.attachEvent("onreadystatechange", callback); - } - } else { - node.addEventListener("load", callback, false); - } - node.src = url; - - //Fetch only means waiting to attach to DOM after loaded. - if (!fetchOnlyFunction) { - req.addScriptToDom(node); - } - - return node; - } else if (isWebWorker) { - //In a web worker, use importScripts. This is not a very - //efficient use of importScripts, importScripts will block until - //its script is downloaded and evaluated. However, if web workers - //are in play, the expectation that a build has been done so that - //only one script needs to be loaded anyway. This may need to be - //reevaluated if other use cases become common. - importScripts(url); - - //Account for anonymous modules - context.completeLoad(moduleName); - } - return null; - }; - - //Look for a data-main script attribute, which could also adjust the baseUrl. - if (isBrowser) { - //Figure out baseUrl. Get it from the script tag with require.js in it. - scripts = document.getElementsByTagName("script"); - - for (globalI = scripts.length - 1; globalI > -1 && (script = scripts[globalI]); globalI--) { - //Set the "head" where we can append children by - //using the script's parent. - if (!head) { - head = script.parentNode; - } - - //Look for a data-main attribute to set main script for the page - //to load. If it is there, the path to data main becomes the - //baseUrl, if it is not already set. - if ((dataMain = script.getAttribute('data-main'))) { - if (!cfg.baseUrl) { - //Pull off the directory of data-main for use as the - //baseUrl. - src = dataMain.split('/'); - mainScript = src.pop(); - subPath = src.length ? src.join('/') + '/' : './'; - - //Set final config. - cfg.baseUrl = subPath; - //Strip off any trailing .js since dataMain is now - //like a module name. - dataMain = mainScript.replace(jsSuffixRegExp, ''); - } - - //Put the data-main script in the files to load. - cfg.deps = cfg.deps ? cfg.deps.concat(dataMain) : [dataMain]; - - break; - } - } - } - - //See if there is nothing waiting across contexts, and if not, trigger - //resourcesReady. - req.checkReadyState = function () { - var contexts = s.contexts, prop; - for (prop in contexts) { - if (!(prop in empty)) { - if (contexts[prop].waitCount) { - return; - } - } - } - req.resourcesReady(true); - }; - - /** - * Internal function that is triggered whenever all scripts/resources - * have been loaded by the loader. Can be overridden by other, for - * instance the domReady plugin, which wants to know when all resources - * are loaded. - */ - req.resourcesReady = function (isReady) { - var contexts, context, prop; - - //First, set the public variable indicating that resources are loading. - req.resourcesDone = isReady; - - if (req.resourcesDone) { - //If jQuery with DOM ready delayed, release it now. - contexts = s.contexts; - for (prop in contexts) { - if (!(prop in empty)) { - context = contexts[prop]; - if (context.jQueryIncremented) { - jQueryHoldReady(context.jQuery, false); - context.jQueryIncremented = false; - } - } - } - } - }; - - //FF < 3.6 readyState fix. Needed so that domReady plugin - //works well in that environment, since require.js is normally - //loaded via an HTML script tag so it will be there before window load, - //where the domReady plugin is more likely to be loaded after window load. - req.pageLoaded = function () { - if (document.readyState !== "complete") { - document.readyState = "complete"; - } - }; - if (isBrowser) { - if (document.addEventListener) { - if (!document.readyState) { - document.readyState = "loading"; - window.addEventListener("load", req.pageLoaded, false); - } - } - } - - //Set up default context. If require was a configuration object, use that as base config. - req(cfg); - - //If modules are built into require.js, then need to make sure dependencies are - //traced. Use a setTimeout in the browser world, to allow all the modules to register - //themselves. In a non-browser env, assume that modules are not built into require.js, - //which seems odd to do on the server. - if (req.isAsync && typeof setTimeout !== "undefined") { - ctx = s.contexts[(cfg.context || defContextName)]; - //Indicate that the script that includes require() is still loading, - //so that require()'d dependencies are not traced until the end of the - //file is parsed (approximated via the setTimeout call). - ctx.requireWait = true; - setTimeout(function () { - ctx.requireWait = false; - - if (!ctx.scriptCount) { - ctx.resume(); - } - req.checkReadyState(); - }, 0); - } -}());