From fc15f4103aa220848b704a867704cfae87a306da Mon Sep 17 00:00:00 2001 From: Mohammed Arif Date: Tue, 21 May 2013 17:06:52 +0530 Subject: [PATCH 01/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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 1d06be71a21b2b3d8cad28f9437e5daa05f21eed Mon Sep 17 00:00:00 2001 From: sapient-studio-india Date: Mon, 3 Feb 2014 16:01:42 +0530 Subject: [PATCH 11/11] Update README.md --- README.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d323c58..4369ab3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [JavaScript Boilerplate](https://github.com/mdarif/JavaScript-Boilerplate) +# [JavaScript Boilerplate](https://github.com/sapient-studio-india/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. @@ -57,7 +57,7 @@ JavaScript Boilerplate is the collection of best practices using a design patter ## Quick start -Clone the git repo - `git clone git://github.com/mdarif/JavaScript-Boilerplate.git` - or [download it](https://github.com/mdarif/JavaScript-Boilerplate/zipball/master) +Clone the git repo - `git clone git://github.com/sapient-studio-india/JavaScript-Boilerplate.git` - or [download it](https://github.com/msapient-studio-india/JavaScript-Boilerplate/zipball/master) You can also get the JavaScript Boilerplate through npm if you have already installed node. @@ -100,7 +100,7 @@ Anyone and everyone is welcome to [contribute](#). ## Project information -* Source: https://github.com/mdarif/JavaScript-Boilerplate +* Source: https://github.com/sapient-studio-india/JavaScript-Boilerplate ## License @@ -108,6 +108,3 @@ Anyone and everyone is welcome to [contribute](#). * MIT/GPL license -## Author - -* Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif)