Facebook Friends List
30 |31 | FB.api makes API calls to the Graph API or Deprecated REST API. 32 |
33 | Read more 34 |├── .gitignore ├── .jshintrc ├── .travis.yml ├── GruntFile.js ├── LICENSE ├── README.md ├── codeclimate.yml ├── package.json ├── src ├── css │ ├── prism.css │ └── style.css ├── demo │ ├── css │ │ └── style.css │ ├── facebook_friends_list.html │ └── js │ │ ├── fb.config.js │ │ └── fb.friends.list.js ├── index.html └── js │ ├── _.config.js │ ├── _.helper.js │ ├── _.main.js │ └── libs │ ├── jquery.js │ └── prism.js └── test ├── karma.conf.js └── unit └── _.mainSpec.js /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .project 3 | .settings 4 | *~ 5 | *.diff 6 | *.patch 7 | /*.txt 8 | /*.csv 9 | /*.html 10 | .DS_Store 11 | .sizecache.json 12 | node_modules 13 | .sass-cache/ 14 | .tmp/ 15 | src/css/style.scss 16 | jsb.sublime-project 17 | jsb.sublime-workspace 18 | .grunt 19 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqnull": true, 4 | "eqeqeq": true, 5 | "undef": true, 6 | "newcap":false, 7 | "globals": { 8 | "jQuery": true, 9 | "JSB": true, 10 | "$": true, 11 | "console": true, 12 | "module": true, 13 | "document": true, 14 | "window": true, 15 | "FB": true, 16 | "localStorage": true, 17 | "require": true, 18 | "_": false, 19 | "_V_": false, 20 | "afterEach": false, 21 | "beforeEach": false, 22 | "confirm": false, 23 | "context": false, 24 | "describe": false, 25 | "expect": true, 26 | "it": false, 27 | "jasmine": false, 28 | "JSHINT": false, 29 | "mostRecentAjaxRequest": false, 30 | "qq": false, 31 | "runs": false, 32 | "spyOn": false, 33 | "spyOnEvent": false, 34 | "waitsFor": false, 35 | "xdescribe": false, 36 | "xit": false 37 | } 38 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | before_script: 5 | - npm install -g grunt-cli -------------------------------------------------------------------------------- /GruntFile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunt 3 | * http://gruntjs.com/ 4 | * 5 | * Copyright (c) 2013 "Cowboy" Ben Alman 6 | * Licensed under the MIT license. 7 | * https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT 8 | */ 9 | 10 | // This is the default port that livereload listens on; 11 | // change it if you configure livereload to use another port. 12 | var LIVERELOAD_PORT = 35729; 13 | // lrSnippet is just a function. 14 | // It's a piece of Connect middleware that injects 15 | // a script into the static served html. 16 | var lrSnippet = require('connect-livereload')({ 17 | port: LIVERELOAD_PORT 18 | }); 19 | // All the middleware necessary to serve static files. 20 | var livereloadMiddleware = function(connect, options) { 21 | return [ 22 | // Inject a livereloading script into static files. 23 | lrSnippet, 24 | // Serve static files. 25 | connect.static(options.base[0]), 26 | // Make empty directories browsable. 27 | connect.directory(options.base[0]) 28 | ]; 29 | }; 30 | 31 | // The first part is the "wrapper" function, which encapsulates your Grunt configuration 32 | module.exports = function(grunt) { 33 | 34 | 'use strict'; 35 | 36 | // Load grunt tasks automatically 37 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 38 | 39 | var plugins = ['karma-mocha']; 40 | var browsers = []; 41 | 42 | // Time how long tasks take. Can help when optimizing build times 43 | require('time-grunt')(grunt); 44 | 45 | // Define the configuration for all the tasks 46 | grunt.initConfig({ 47 | // 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. 48 | pkg: grunt.file.readJSON('package.json'), 49 | 50 | // Project settings 51 | jsb: { 52 | // Configurable paths 53 | app: 'src', 54 | dist: 'dist', 55 | test: 'test' 56 | }, 57 | // Empties folders to start fresh 58 | clean: { 59 | dist: { 60 | files: [{ 61 | dot: true, 62 | src: [ 63 | '.tmp', 64 | '<%= jsb.dist %>/*', 65 | '!<%= jsb.dist %>/.git*' 66 | ] 67 | }] 68 | }, 69 | server: '.tmp' 70 | }, 71 | 72 | // sass: { 73 | // dist: { 74 | // files: { 75 | // '<%= jsb.dist %>/css/style.min.css': '<%= jsb.app %>/css/style.scss' 76 | // } 77 | // } 78 | // }, 79 | 80 | // By default, your `index.html`'s will take care of 81 | // minification. These next options are pre-configured if you do not wish 82 | // to use the Usemin blocks. 83 | // cssmin: { 84 | // dist: { 85 | // options: { 86 | // keepSpecialComments: 0, 87 | // report: "min", 88 | // selectorsMergeMode: "ie8" 89 | // }, 90 | // files: { // Dictionary of files 91 | // '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/css/style.css'], 92 | // '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/css/style.css'] 93 | // } 94 | // } 95 | // }, 96 | 97 | // uglify: { 98 | // options: { 99 | // // The banner is inserted at the top of the output 100 | // banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' 101 | // }, 102 | // dist: { // Target 103 | // files: { // Dictionary of files 104 | // 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'], 105 | // 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'], 106 | // 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'], 107 | // 'dist/js/libs/require.min.js': ['src/js/libs/require.js'] 108 | // } 109 | // } 110 | // }, 111 | 112 | // Make sure code styles are up to par and there are no obvious mistakes 113 | jshint: { 114 | // Define the files to lint 115 | all: [ 116 | 'Gruntfile.js', 117 | '<%= jsb.app %>/js/*.js', 118 | '<%= jsb.app %>/demo/js/*.js' 119 | ], 120 | // Configure JSHint (documented at http://www.jshint.com/docs/) 121 | options: { 122 | // More options here if you want to override JSHint defaults 123 | jshintrc: '.jshintrc' 124 | } 125 | }, 126 | 127 | // Compiles Sass to CSS and generates necessary files if requested 128 | compass: { 129 | options: { 130 | sassDir: '<%= jsb.app %>/css', 131 | cssDir: '.tmp/css', 132 | // generatedImagesDir: '.tmp/images/generated', 133 | // imagesDir: '<%= jsb.app %>/images', 134 | // javascriptsDir: '<%= jsb.app %>/scripts', 135 | // fontsDir: '<%= jsb.app %>/styles/fonts', 136 | // importPath: '<%= jsb.app %>/bower_components', 137 | // httpImagesPath: '/images', 138 | // httpGeneratedImagesPath: '/images/generated', 139 | // httpFontsPath: '/styles/fonts', 140 | relativeAssets: false, 141 | assetCacheBuster: false 142 | }, 143 | dist: { 144 | options: { 145 | //generatedImagesDir: '<%= jsb.dist %>/images/generated' 146 | } 147 | }, 148 | server: { 149 | options: { 150 | debugInfo: true 151 | } 152 | } 153 | }, 154 | 155 | // Reads HTML for usemin blocks to enable smart builds that automatically 156 | // concat, minify and revision files. Creates configurations in memory so 157 | // additional tasks can operate on them 158 | useminPrepare: { 159 | options: { 160 | dest: '<%= jsb.dist %>' 161 | }, 162 | //staging: '.tmp', 163 | html: ['<%= jsb.app %>/index.html'] 164 | }, 165 | 166 | // Performs rewrites based on rev and the useminPrepare configuration 167 | usemin: { 168 | options: { 169 | assetsDirs: ['<%= jsb.dist %>'] 170 | }, 171 | html: ['<%= jsb.dist %>/{,*/}*.html'], 172 | css: ['<%= jsb.dist %>/css/{,*/}*.css'] 173 | }, 174 | 175 | htmlmin: { 176 | dist: { 177 | options: { 178 | collapseBooleanAttributes: true, 179 | collapseWhitespace: false, 180 | removeAttributeQuotes: false, 181 | removeCommentsFromCDATA: false, 182 | removeEmptyAttributes: false, 183 | removeOptionalTags: false, 184 | removeRedundantAttributes: false, 185 | useShortDoctype: false 186 | }, 187 | files: [{ 188 | expand: true, 189 | cwd: '<%= jsb.dist %>', 190 | src: '{,*/}*.html', 191 | dest: '<%= jsb.dist %>' 192 | }] 193 | } 194 | }, 195 | 196 | // Compare CSS output's 197 | compare_size: { 198 | files: [ 199 | '<%= jsb.app %>/css/**', 200 | '<%= jsb.dist %>/css/**' 201 | ] 202 | }, 203 | open: { 204 | server: { 205 | path: 'http://localhost:9000' 206 | } 207 | 208 | }, 209 | connect: { 210 | client: { 211 | options: { 212 | // The server's port, and the folder to serve from: 213 | // Ex: 'localhost:9000' would serve up 'client/index.html' 214 | port: 9000, 215 | // change this to '0.0.0.0' to access the server from outside 216 | hostname: 'localhost', 217 | base: '<%= jsb.app %>', 218 | // Custom middleware for the HTTP server: 219 | // The injected JavaScript reloads the page. 220 | middleware: livereloadMiddleware 221 | } 222 | } 223 | }, 224 | 225 | // Watches files for changes and runs tasks based on the changed files 226 | watch: { 227 | js: { 228 | files: ['<%= jsb.app %>/scripts/{,*/}*.js', 'Gruntfile.js'], 229 | tasks: ['jshint'], 230 | options: { 231 | livereload: true 232 | } 233 | }, 234 | gruntfile: { 235 | files: ['Gruntfile.js'] 236 | }, 237 | client: { 238 | // '**' is used to include all subdirectories 239 | // and subdirectories of subdirectories, and so on, recursively. 240 | files: ['<%= jsb.app %>/**/*'], 241 | // In our case, we don't configure any additional tasks, 242 | // since livereload is built into the watch task, 243 | // and since the browser refresh is handled by the snippet. 244 | // Any other tasks to run (e.g. compile CoffeeScript) go here: 245 | tasks: [], 246 | options: { 247 | livereload: LIVERELOAD_PORT 248 | } 249 | }, 250 | compass: { 251 | files: ['<%= jsb.app %>/css/{,*/}*.{scss,sass}'], 252 | tasks: ['compass:server', 'autoprefixer'] 253 | }, 254 | watch: { 255 | files: '<%= jsb.test %>/unit/**/*.js', 256 | tasks: ['jasmine'] 257 | } 258 | }, 259 | notify: { 260 | task_name: { 261 | options: { 262 | // Task-specific options go here. 263 | } 264 | }, 265 | watch: { 266 | options: { 267 | title: 'Task Complete', // optional 268 | message: 'SASS and Uglify finished running' //required 269 | } 270 | }, 271 | server: { 272 | options: { 273 | message: 'Server is ready!' 274 | } 275 | }, 276 | connect: { 277 | options: { 278 | message: 'Connected to server!' 279 | } 280 | } 281 | }, 282 | // shell: { 283 | // docco: { 284 | // command: 'docco -o jsdocumentation -l linear src/js/*.js' 285 | // } 286 | // }, 287 | jsdoc: { 288 | dist: { 289 | src: ['<%= jsb.app %>/js/_.main.js'], 290 | options: { 291 | destination: '<%= jsb.dist %>/doc' 292 | } 293 | } 294 | }, 295 | // Removed unused css 296 | uncss: { 297 | dist: { 298 | files: { 299 | '<%= jsb.dist %>/css/style.min.css': ['<%= jsb.app %>/index.html'], 300 | '<%= jsb.dist %>/demo/css/style.min.css': ['<%= jsb.app %>/demo/facebook_friends_list.html'] 301 | } 302 | }, 303 | options: { 304 | compress: true, 305 | report: 'min' 306 | } 307 | }, 308 | 309 | // Copies remaining files to places other tasks can use 310 | copy: { 311 | dist: { 312 | files: [{ 313 | expand: true, 314 | dot: true, 315 | cwd: '<%= jsb.app %>', 316 | dest: '<%= jsb.dist %>', 317 | src: [ 318 | '*.{ico,png,txt}', 319 | '.htaccess', 320 | 'images/{,*/}*.webp', 321 | '{,*/}*.html' 322 | ] 323 | }] 324 | }, 325 | styles: { 326 | expand: true, 327 | dot: true, 328 | cwd: '<%= jsb.app %>/css', 329 | dest: '.tmp/css/', 330 | src: '{,*/}*.css' 331 | } 332 | }, 333 | 334 | // Run some tasks in parallel to speed up build process 335 | concurrent: { 336 | server: [ 337 | 'compass:server', 338 | 'copy:styles' 339 | ], 340 | test: [ 341 | 'copy:styles' 342 | ], 343 | dist: [ 344 | 'compass', 345 | 'copy:styles' 346 | ] 347 | }, 348 | karma: { 349 | unit: { 350 | configFile: 'test/karma.conf.js' 351 | } 352 | }, 353 | jasmine: { 354 | src: 'src/js/*.js', 355 | options: { 356 | specs: 'test/unit/**/*.js', 357 | //helpers: ['src/js/_.config.js'], 358 | keepRunner: true, 359 | //host : 'http://127.0.0.1:8000/', 360 | // summary: true, 361 | vendor: [ 362 | "src/js/libs/*.js" 363 | //"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 364 | ] 365 | } 366 | // watch: { 367 | // pivotal: { 368 | // files: ['<%= jsb.app %>/js/*.js','<%= jsb.test %>/unit/**/*.js'], 369 | // tasks: 'jasmine:pivotal:build' 370 | // } 371 | // } 372 | }, 373 | }); 374 | // 375 | 376 | /* Don't need to load the individual tasks anymore as we have been using 377 | 'matchdep' task in the start to load all the tasks from node_modules automatically */ 378 | 379 | // Let's set up some tasks 380 | grunt.registerTask('server', [ 381 | 'open', 382 | 'connect:client', 383 | 'watch:client', 384 | ]); 385 | 386 | // The default task can be run just by typing "grunt" on the command line 387 | grunt.registerTask('default', [ 388 | 'clean:dist', 389 | 'useminPrepare', 390 | 'concurrent:dist', 391 | 'jshint', 392 | 'concat', 393 | 'cssmin', 394 | //'uncss', 395 | 'uglify', 396 | 'copy:dist', 397 | 'usemin', 398 | 'htmlmin', 399 | //'sass', 400 | 'compare_size', 401 | 'test', 402 | 'notify:server' 403 | ]); 404 | 405 | 406 | grunt.registerTask('build-uncss', [ 407 | 'default', 408 | 'uncss' 409 | ]); 410 | 411 | // Let's generate the JavaScript documentation 412 | grunt.registerTask('js-doc', [ 413 | 'jsdoc' 414 | ]); 415 | 416 | grunt.registerTask('test', [ 417 | 'jshint', 418 | 'jasmine' 419 | ]); 420 | 421 | // To debug the values 422 | // grunt.event.on('watch', function(action, filepath, target) { 423 | // grunt.log.writeln(target + ': ' + filepath + ' has ' + action); 424 | // }); 425 | 426 | }; 427 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 2014 Mohammed Arif 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Boilerplate v1.2 2 | 3 | [![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] 4 | 5 | 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. 6 | 7 | ## What's new in v1.2? 8 | * 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 9 | * Grunt build has been enhanced tremendously 10 | * JavaScript syntax highlighting has been added 11 | * `MODULE` has renamed to `JSB` for better JavaScript semantics 12 | * Travis CI has been kicked off 13 | * Made several small changes like `use strict`, dir changes, css fixes, additional grunt plug-ins also have been added etc. 14 | 15 | ## Files in Repository 16 | 17 | 1. `src/index.html` - An html help file illustrating helper functions. 18 | 19 | 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. 20 | 21 | 3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module. 22 | 23 | 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. 24 | 25 | 5. `src/css/style.css` - Style sheets for the html help file. 26 | 27 | ## Usage 28 | 29 | 1. Clone the repository using the quick start guide. To get started include the JS files in your js directory. 30 | 31 | 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, 32 | 33 | (function (JSB, $, undefined) { 34 | 35 | ...... (2) 36 | 37 | })(window.JSB = window.JSB || {}, jQuery); 38 | 39 | 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. 40 | 41 | Once you have defined the wrapper (global namespace), you can start of modules inside the global namespace. 42 | 43 | 2. The second step would be to define the components, which can be page level or widget level too. 44 | 45 | 46 | JSB.subModule = (function () { 47 | function _subModule() { 48 | ... (3) 49 | } 50 | return new _subModule() 51 | })(); 52 | 53 | 54 | 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()`. 55 | 56 | 57 | 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. 58 | 59 | 60 | 61 | 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. 62 | 63 | 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. 64 | 65 | 66 | ## Quick start 67 | 68 | Clone the git repo - `git clone git://github.com/mdarif/JavaScript-Boilerplate.git` - or [download it](https://github.com/mdarif/JavaScript-Boilerplate/zipball/master) 69 | 70 | You can also get the JavaScript Boilerplate through npm if you have already installed node. 71 | 72 | npm install javascript-boilerplate 73 | 74 | *Make sure, you should have [node](https://nodejs.org/download/) installed on your machine before running `npm` command 75 | 76 | ## Grunt Build 77 | 78 | Install [Grunt](http://gruntjs.com/getting-started). 79 | 80 | OR 81 | 82 | ###Follow the below instructions to install and setup the `Grunt` 83 | 84 | Install Grunt CLI, this will put the grunt command in your system path, allowing it to be run from any directory. 85 | 86 | $ npm install -g grunt-cli 87 | 88 | Now install Grunt 89 | 90 | $ npm install grunt 91 | 92 | You should also install all the dependencies 93 | 94 | $ npm install 95 | 96 | ###Follow the below instructions to install and setup the `compass task` 97 | _Run this task with the `grunt compass` command._ 98 | 99 | [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. 100 | 101 | 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. 102 | 103 | ### Fire up the grunt server command and see the preview in browser with live-reload enabled for `app` folder content 104 | 105 | $ grunt server 106 | 107 | ### Build the Project 108 | 109 | $ grunt 110 | 111 | 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. 112 | 113 | Done, without errors. 114 | 115 | ### Testing 116 | 117 | $ grunt test 118 | 119 | 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. 120 | 121 | 122 | ## Contributing 123 | 124 | Anyone and everyone is welcome to [contribute](#). 125 | 126 | 127 | ## Project information 128 | 129 | * Source: https://github.com/mdarif/JavaScript-Boilerplate 130 | 131 | 132 | ## License 133 | See [LICENSE](LICENSE) 134 | 135 | 136 | ## Author 137 | 138 | * Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif) 139 | 140 | [build-image]: http://img.shields.io/travis/mdarif/JavaScript-Boilerplate.svg?style=flat 141 | [build-url]: http://travis-ci.org/mdarif/JavaScript-Boilerplate 142 | 143 | [dependencies-image]: https://gemnasium.com/mdarif/JavaScript-Boilerplate.svg?style=flat 144 | [dependencies-url]: https://gemnasium.com/mdarif/JavaScript-Boilerplate 145 | 146 | [license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat 147 | [license-url]: LICENSE 148 | 149 | [version-image]: http://img.shields.io/github/tag/mdarif/JavaScript-Boilerplate.svg?style=flat 150 | [version-url]: https://github.com/mdarif/JavaScript-Boilerplate/tags 151 | 152 | [codeclimate-image]: https://codeclimate.com/repos/558392546956804e780009ea/badges/9cb6feeef61e41a567ad/gpa.svg?style=flat 153 | [codeclimate-url]: https://codeclimate.com/repos/558392546956804e780009ea/feed 154 | 155 | -------------------------------------------------------------------------------- /codeclimate.yml: -------------------------------------------------------------------------------- 1 | # Save as .codeclimate.yml (note leading .) in project root directory 2 | languages: 3 | JavaScript: true 4 | # exclude_paths: 5 | # - "foo/bar.rb" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "name": "Mohammed Arif", 4 | "email": "arif_iq@yahoo.co.in" 5 | }, 6 | "name": "javascript-boilerplate", 7 | "title": "JavaScript-Boilerplate", 8 | "description": "JavaScript Boilerplate is the collection of best practices.", 9 | "keywords": [ 10 | "javascript-boilerplate", 11 | "js-boilerplate", 12 | "boilerplate", 13 | "javascript" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/mdarif/JavaScript-Boilerplate.git" 18 | }, 19 | "scripts": { 20 | "test": "grunt test" 21 | }, 22 | "dependencies": {}, 23 | "devDependencies": { 24 | "connect-livereload": "~0.5.3", 25 | "grunt": "~0.4.5", 26 | "grunt-compare-size": "~0.4.0", 27 | "grunt-concurrent": "~2.0.0", 28 | "grunt-contrib-clean": "~0.6.0", 29 | "grunt-contrib-compass": "~1.0.3", 30 | "grunt-contrib-concat": "~0.5.1", 31 | "grunt-contrib-connect": "~0.10.1", 32 | "grunt-contrib-copy": "~0.8.0", 33 | "grunt-contrib-cssmin": "~0.12.3", 34 | "grunt-contrib-htmlmin": "~0.4.0", 35 | "grunt-contrib-jasmine": "~0.8.2", 36 | "grunt-contrib-jshint": "~0.11.2", 37 | "grunt-contrib-sass": "~0.9.2", 38 | "grunt-contrib-uglify": "~0.9.1", 39 | "grunt-contrib-watch": "~0.6.1", 40 | "grunt-jsdoc": "~0.6.7", 41 | "grunt-karma": "~0.11.1", 42 | "grunt-notify": "~0.4.1", 43 | "grunt-open": "~0.2.3", 44 | "grunt-shell": "~1.1.2", 45 | "grunt-uncss": "~0.4.2", 46 | "grunt-usemin": "~3.0.0", 47 | "karma": "~0.12.36", 48 | "karma-chrome-launcher": "~0.1.12", 49 | "karma-firefox-launcher": "~0.1.6", 50 | "karma-jasmine": "~0.3.5", 51 | "karma-phantomjs-launcher": "^0.2.0", 52 | "matchdep": "~0.3.0", 53 | "time-grunt": "~1.2.1" 54 | }, 55 | "version": "1.2.0", 56 | "license": "MIT/GPL" 57 | } 58 | -------------------------------------------------------------------------------- /src/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | text-shadow: 0 1px white; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 30 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 31 | text-shadow: none; 32 | background: #b3d4fc; 33 | } 34 | 35 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 36 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 37 | text-shadow: none; 38 | background: #b3d4fc; 39 | } 40 | 41 | @media print { 42 | code[class*="language-"], 43 | pre[class*="language-"] { 44 | text-shadow: none; 45 | } 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | :not(pre) > code[class*="language-"], 56 | pre[class*="language-"] { 57 | background: #f5f2f0; 58 | } 59 | 60 | /* Inline code */ 61 | :not(pre) > code[class*="language-"] { 62 | padding: .1em; 63 | border-radius: .3em; 64 | } 65 | 66 | .token.comment, 67 | .token.prolog, 68 | .token.doctype, 69 | .token.cdata { 70 | color: slategray; 71 | } 72 | 73 | .token.punctuation { 74 | color: #999; 75 | } 76 | 77 | .namespace { 78 | opacity: .7; 79 | } 80 | 81 | .token.property, 82 | .token.tag, 83 | .token.boolean, 84 | .token.number, 85 | .token.constant, 86 | .token.symbol { 87 | color: #905; 88 | } 89 | 90 | .token.selector, 91 | .token.attr-name, 92 | .token.string, 93 | .token.builtin { 94 | color: #690; 95 | } 96 | 97 | .token.operator, 98 | .token.entity, 99 | .token.url, 100 | .language-css .token.string, 101 | .style .token.string, 102 | .token.variable { 103 | color: #a67f59; 104 | background: hsla(0,0%,100%,.5); 105 | } 106 | 107 | .token.atrule, 108 | .token.attr-value, 109 | .token.keyword { 110 | color: #07a; 111 | } 112 | 113 | 114 | .token.regex, 115 | .token.important { 116 | color: #e90; 117 | } 118 | 119 | .token.important { 120 | font-weight: bold; 121 | } 122 | 123 | .token.entity { 124 | cursor: help; 125 | } 126 | 127 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | HTML5 Boilerplate CSS: h5bp.com/css 3 | ========================================================================== */ 4 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { 5 | display: block; 6 | } 7 | audio, canvas, video { 8 | display: inline-block; 9 | *display: inline; 10 | *zoom: 1; 11 | } 12 | audio:not([controls]) { 13 | display: none; 14 | } 15 | [hidden] { 16 | display: none; 17 | } 18 | html { 19 | font-size: 100%; 20 | -webkit-text-size-adjust: 100%; 21 | -ms-text-size-adjust: 100%; 22 | } 23 | html, button, input, select, textarea { 24 | font-family: sans-serif; 25 | color: #222; 26 | } 27 | body { 28 | margin: 0; 29 | font-size: 1em; 30 | line-height: 1.4; 31 | } 32 | ::-moz-selection { 33 | background:#FF0; 34 | color:#000; 35 | text-shadow: none; 36 | } 37 | ::selection { 38 | background: #FF0; 39 | color:#000; 40 | text-shadow: none; 41 | } 42 | a { 43 | color: #00e; 44 | outline:none 45 | } 46 | a:visited { 47 | color: #551a8b; 48 | } 49 | a:hover { 50 | color: #06e; 51 | } 52 | a:focus { 53 | outline: thin dotted; 54 | } 55 | a:hover, a:active { 56 | outline: 0; 57 | } 58 | abbr[title] { 59 | border-bottom: 1px dotted; 60 | } 61 | b, strong { 62 | font-weight: bold; 63 | } 64 | blockquote { 65 | margin: 1em 40px; 66 | } 67 | dfn { 68 | font-style: italic; 69 | } 70 | hr { 71 | display: block; 72 | height: 1px; 73 | border: 0; 74 | border-top: 1px solid #ccc; 75 | margin: 1em 0; 76 | padding: 0; 77 | } 78 | ins { 79 | background: #ff9; 80 | color: #000; 81 | text-decoration: none; 82 | } 83 | mark { 84 | background: #ff0; 85 | color: #000; 86 | font-style: italic; 87 | font-weight: bold; 88 | } 89 | pre, code, kbd, samp { 90 | font-family: monospace, serif; 91 | _font-family:'courier new', monospace; 92 | font-size: 1em; 93 | } 94 | pre { 95 | white-space: pre; 96 | white-space: pre-wrap; 97 | word-wrap: break-word; 98 | } 99 | q { 100 | quotes: none; 101 | } 102 | q:before, q:after { 103 | content:""; 104 | content: none; 105 | } 106 | small { 107 | font-size: 85%; 108 | } 109 | sub, sup { 110 | font-size: 75%; 111 | line-height: 0; 112 | position: relative; 113 | vertical-align: baseline; 114 | } 115 | sup { 116 | top: -0.5em; 117 | } 118 | sub { 119 | bottom: -0.25em; 120 | } 121 | ul, ol { 122 | margin: 1em 0; 123 | padding: 0 0 0 40px; 124 | } 125 | dd { 126 | margin: 0 0 0 40px; 127 | } 128 | nav ul, nav ol { 129 | list-style: none; 130 | list-style-image: none; 131 | margin: 0; 132 | padding: 0; 133 | } 134 | img { 135 | border: 0; 136 | -ms-interpolation-mode: bicubic; 137 | vertical-align: middle; 138 | } 139 | svg:not(:root) { 140 | overflow: hidden; 141 | } 142 | figure { 143 | margin: 0; 144 | } 145 | form { 146 | margin: 0; 147 | } 148 | fieldset { 149 | border: 0; 150 | margin: 0; 151 | padding: 0; 152 | } 153 | label { 154 | cursor: pointer; 155 | } 156 | legend { 157 | border: 0; 158 | *margin-left: -7px; 159 | padding: 0; 160 | white-space: normal; 161 | } 162 | button, input, select, textarea { 163 | font-size: 100%; 164 | margin: 0; 165 | vertical-align: baseline; 166 | *vertical-align: middle; 167 | } 168 | button, input { 169 | line-height: normal; 170 | } 171 | button, input[type="button"], input[type="reset"], input[type="submit"] { 172 | cursor: pointer; 173 | -webkit-appearance: button; 174 | *overflow: visible; 175 | } 176 | button[disabled], input[disabled] { 177 | cursor: default; 178 | } 179 | input[type="checkbox"], input[type="radio"] { 180 | box-sizing: border-box; 181 | padding: 0; 182 | *width: 13px; 183 | *height: 13px; 184 | } 185 | input[type="search"] { 186 | -webkit-appearance: textfield; 187 | -moz-box-sizing: content-box; 188 | -webkit-box-sizing: content-box; 189 | box-sizing: content-box; 190 | } 191 | input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { 192 | -webkit-appearance: none; 193 | } 194 | button::-moz-focus-inner, input::-moz-focus-inner { 195 | border: 0; 196 | padding: 0; 197 | } 198 | textarea { 199 | overflow: auto; 200 | vertical-align: top; 201 | resize: vertical; 202 | } 203 | input:valid, textarea:valid { 204 | } 205 | input:invalid, textarea:invalid { 206 | background-color: #f0dddd; 207 | } 208 | table { 209 | border-collapse: collapse; 210 | border-spacing: 0; 211 | } 212 | td { 213 | vertical-align: top; 214 | } 215 | .chromeframe { 216 | margin: 0.2em 0; 217 | background: #ccc; 218 | color: black; 219 | padding: 0.2em 0; 220 | } 221 | h1, h2, h3, h4, h5, h6, ul, li, pre { 222 | margin:0; 223 | padding:0 224 | } 225 | /* ===== Primary Styles ======================================================== 226 | Author: SapientNitro (2011) (http://www.sapient.com) 227 | ========================================================================== */ 228 | 229 | /** Basic settings **/ 230 | body { 231 | background:#FFC; 232 | color:#171717; 233 | font-size:100%; 234 | font-family:Arial, Helvetica, sans-serif; 235 | font-weight:normal; 236 | line-height:1em; 237 | padding:10px 238 | } 239 | h1, h2, h3, h4, h5, h6, section, article, p { 240 | display:block; 241 | margin:0; 242 | padding:10px 243 | } 244 | h1 { 245 | font-size:2em 246 | } 247 | h2 { 248 | background:#F04E00; 249 | color:#FFF; 250 | font-size:1.7em; 251 | margin-bottom:10px 252 | } 253 | h3 { 254 | background:#666; 255 | color:#FFF; 256 | font-size:1.4emp; 257 | padding:8px; 258 | margin-bottom:10px 259 | } 260 | h4 { 261 | font-size:1.2em 262 | } 263 | h5 { 264 | font-size:1em 265 | } 266 | h6 { 267 | font-size:0.8em 268 | } 269 | a { 270 | text-decoration:none; 271 | outline:none 272 | } 273 | section { 274 | background:#FFF; 275 | font-size:1em; 276 | line-height:1.2em; 277 | padding:10px 278 | } 279 | section.example { 280 | background:#EEE 281 | } 282 | article { 283 | padding:0; 284 | margin-bottom:10px 285 | } 286 | p { 287 | font-size:1em; 288 | line-height:1.4em 289 | } 290 | ul { 291 | padding:0 50px 292 | } 293 | ul li { 294 | padding:5px 0; 295 | line-height:1.2em 296 | } 297 | #main { 298 | border:#FC0 1px dashed 299 | } 300 | /* ============================================================================= 301 | Non-Semantic Helper Classes 302 | ========================================================================== */ 303 | .ir { 304 | display: block; 305 | border: 0; 306 | text-indent: -999em; 307 | overflow: hidden; 308 | background-color: transparent; 309 | background-repeat: no-repeat; 310 | text-align: left; 311 | direction: ltr; 312 | *line-height: 0; 313 | } 314 | .ir br { 315 | display: none; 316 | } 317 | .hidden { 318 | display: none !important; 319 | visibility: hidden; 320 | } 321 | .visuallyhidden { 322 | border: 0; 323 | clip: rect(0 0 0 0); 324 | height: 1px; 325 | margin: -1px; 326 | overflow: hidden; 327 | padding: 0; 328 | position: absolute; 329 | width: 1px; 330 | } 331 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 332 | clip: auto; 333 | margin: 0; 334 | overflow: visible; 335 | position: static 336 | } 337 | .invisible { 338 | visibility: hidden; 339 | } 340 | .clear_fix:before, .clear_fix:after { 341 | content:""; 342 | display: table; 343 | } 344 | .clear_fix:after { 345 | clear: both; 346 | } 347 | .clear_fix { 348 | *zoom: 1; 349 | } -------------------------------------------------------------------------------- /src/demo/css/style.css: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | HTML5 Boilerplate CSS: h5bp.com/css 3 | ========================================================================== */ 4 | 5 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { 6 | display: block; 7 | } 8 | audio, canvas, video { 9 | display: inline-block; 10 | *display: inline; 11 | *zoom: 1; 12 | } 13 | audio:not([controls]) { 14 | display: none; 15 | } 16 | [hidden] { 17 | display: none; 18 | } 19 | html { 20 | font-size: 100%; 21 | -webkit-text-size-adjust: 100%; 22 | -ms-text-size-adjust: 100%; 23 | } 24 | html, button, input, select, textarea { 25 | font-family: sans-serif; 26 | color: #222; 27 | } 28 | body { 29 | margin: 0; 30 | font-size: 1em; 31 | line-height: 1.4; 32 | } 33 | 34 | ::-moz-selection { 35 | background:#FF0; 36 | color:#000; 37 | text-shadow: none; 38 | } 39 | ::selection { 40 | background: #FF0; 41 | color:#000; 42 | text-shadow: none; 43 | } 44 | a { 45 | color:#3B5998; 46 | outline:none 47 | } 48 | a:visited { 49 | color: #F04E00; 50 | } 51 | a:hover { 52 | color: #06e; 53 | } 54 | a:focus { 55 | outline: thin dotted; 56 | } 57 | a:hover, a:active { 58 | outline: 0; 59 | } 60 | abbr[title] { 61 | border-bottom: 1px dotted; 62 | } 63 | b, strong { 64 | font-weight: bold; 65 | } 66 | blockquote { 67 | margin: 1em 40px; 68 | } 69 | dfn { 70 | font-style: italic; 71 | } 72 | hr { 73 | display: block; 74 | height: 1px; 75 | border: 0; 76 | border-top: 1px solid #ccc; 77 | margin: 1em 0; 78 | padding: 0; 79 | } 80 | ins { 81 | background: #ff9; 82 | color: #000; 83 | text-decoration: none; 84 | } 85 | mark { 86 | background: #ff0; 87 | color: #000; 88 | font-style: italic; 89 | font-weight: bold; 90 | } 91 | pre, code, kbd, samp { 92 | font-family: monospace, serif; 93 | _font-family: 'courier new', monospace; 94 | font-size: 1em; 95 | } 96 | pre { 97 | white-space: pre; 98 | white-space: pre-wrap; 99 | word-wrap: break-word; 100 | } 101 | q { 102 | quotes: none; 103 | } 104 | q:before, q:after { 105 | content: ""; 106 | content: none; 107 | } 108 | small { 109 | font-size: 85%; 110 | } 111 | sub, sup { 112 | font-size: 75%; 113 | line-height: 0; 114 | position: relative; 115 | vertical-align: baseline; 116 | } 117 | sup { 118 | top: -0.5em; 119 | } 120 | sub { 121 | bottom: -0.25em; 122 | } 123 | ul, ol { 124 | margin: 1em 0; 125 | padding: 0 0 0 40px; 126 | } 127 | dd { 128 | margin: 0 0 0 40px; 129 | } 130 | nav ul, nav ol { 131 | list-style: none; 132 | list-style-image: none; 133 | margin: 0; 134 | padding: 0; 135 | } 136 | img { 137 | border: 0; 138 | -ms-interpolation-mode: bicubic; 139 | vertical-align: middle; 140 | } 141 | svg:not(:root) { 142 | overflow: hidden; 143 | } 144 | figure { 145 | margin: 0; 146 | } 147 | form { 148 | margin: 0; 149 | } 150 | fieldset { 151 | border: 0; 152 | margin: 0; 153 | padding: 0; 154 | } 155 | label { 156 | cursor: pointer; 157 | } 158 | legend { 159 | border: 0; 160 | *margin-left: -7px; 161 | padding: 0; 162 | white-space: normal; 163 | } 164 | button, input, select, textarea { 165 | font-size: 100%; 166 | margin: 0; 167 | vertical-align: baseline; 168 | *vertical-align: middle; 169 | } 170 | button, input { 171 | line-height: normal; 172 | } 173 | button, input[type="button"], input[type="reset"], input[type="submit"] { 174 | cursor: pointer; 175 | -webkit-appearance: button; 176 | *overflow: visible; 177 | } 178 | button[disabled], input[disabled] { 179 | cursor: default; 180 | } 181 | input[type="checkbox"], input[type="radio"] { 182 | box-sizing: border-box; 183 | padding: 0; 184 | *width: 13px; 185 | *height: 13px; 186 | } 187 | input[type="search"] { 188 | -webkit-appearance: textfield; 189 | -moz-box-sizing: content-box; 190 | -webkit-box-sizing: content-box; 191 | box-sizing: content-box; 192 | } 193 | input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { 194 | -webkit-appearance: none; 195 | } 196 | button::-moz-focus-inner, input::-moz-focus-inner { 197 | border: 0; 198 | padding: 0; 199 | } 200 | textarea { 201 | overflow: auto; 202 | vertical-align: top; 203 | resize: vertical; 204 | } 205 | input:valid, textarea:valid { 206 | } 207 | input:invalid, textarea:invalid { 208 | background-color: #f0dddd; 209 | } 210 | table { 211 | border-collapse: collapse; 212 | border-spacing: 0; 213 | } 214 | td { 215 | vertical-align: top; 216 | } 217 | .chromeframe { 218 | margin: 0.2em 0; 219 | background: #ccc; 220 | color: black; 221 | padding: 0.2em 0; 222 | } 223 | h1, h2, h3, h4, h5, h6, ul, li, pre { 224 | margin:0; 225 | padding:0 226 | } 227 | /* ===== Primary Styles ======================================================== 228 | Author: SapientNitro (2011) (http://www.sapient.com) 229 | ========================================================================== */ 230 | 231 | /** Basic settings **/ 232 | body { 233 | background:#FFC; 234 | color:#171717; 235 | font-size:100%; 236 | font-family:Verdana, Arial, Helvetica, sans-serif; 237 | font-weight:normal; 238 | line-height:1em; 239 | padding:40px; 240 | } 241 | h1, h2, h3, h4, h5, h6, section, article, p, .round-corner { 242 | width:98%; 243 | border-radius:7px; 244 | -webkit-border-radius:7px; 245 | -moz-border-radius:7px; 246 | -khtml-border-radius:7px; 247 | display:block; 248 | margin:0; 249 | padding:10px 1%; 250 | float:left; 251 | } 252 | h1 { 253 | font-size:2em; 254 | } 255 | h2 { 256 | background:#F04E00; 257 | color:#FFF; 258 | font-size:1.7em; 259 | margin-bottom:10px; 260 | } 261 | h3 { 262 | width:98%; 263 | background:#F2F2F2; 264 | color:#3B5998; 265 | font-size:1.4emp; 266 | padding:8px 1%; 267 | margin-bottom:10px; 268 | float:left; 269 | } 270 | h4 { 271 | font-size:1.2em; 272 | } 273 | h5 { 274 | font-size:1em; 275 | } 276 | h6 { 277 | font-size:0.8em; 278 | } 279 | a, a:visited { 280 | color:#3B5998; 281 | text-decoration:underline; 282 | outline:none; 283 | } 284 | a:visited { 285 | color:#F04E00; 286 | } 287 | a.read-more { 288 | clear:both; 289 | margin-bottom:10px; 290 | float:left 291 | } 292 | .hide { 293 | display:none; 294 | } 295 | iframe { 296 | border:0; 297 | } 298 | 299 | /* "fb_iframe_widget" class genreate from facebook */ 300 | 301 | .fb_iframe_widget iframe { 302 | width:750px; 303 | } 304 | button, a.button, a.back-to-index { 305 | background:#bdbdbd; 306 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d0d0'); 307 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d0d0d0)); 308 | background:-webkit-linear-gradient(top, #ffffff, #d0d0d0); 309 | background:-ms-linear-gradient(top, #ffffff, #d0d0d0); 310 | background:-moz-linear-gradient(top, #ffffff, #d0d0d0); 311 | background:-o-linear-gradient(top, #ffffff, #d0d0d0); 312 | background:linear-gradient(top bottom, #ffffff, #d0d0d0); 313 | -webkit-border-radius:20px; 314 | -moz-border-radius:20px; 315 | -khtml-border-radius:20px; 316 | padding:5px 15px; 317 | text-decoration:none; 318 | color:#222222; 319 | } 320 | button:hover, a.button:hover, a.back-to-index:hover, button.highlight, a.button.highlight, a.back-to-index.highlight { 321 | background:#ffffff; 322 | -webkit-box-shadow:0px 0px 12px #c3c2c2; 323 | -moz-box-shadow:0px 0px 12px #c3c2c2; 324 | box-shadow:0px 0px 12px #c3c2c2; 325 | } 326 | .top-round { 327 | border-radius:0; 328 | -webkit-border-radius:0; 329 | -moz-border-radius:0; 330 | -khtml-border-radius:0; 331 | -moz-border-radius-topleft:7px; 332 | -khtml-border-top-left-radius:7px; 333 | -webkit-border-top-left-radius:7px; 334 | border-top-left-radius:7px; 335 | -moz-border-radius-topright:7px; 336 | -khtml-border-top-right-radius:7px; 337 | -webkit-border-top-right-radius:7px; 338 | border-top-right-radius:7px; 339 | border-radius:7px 7px 0 0; 340 | } 341 | a.back-to-index { 342 | position:absolute; 343 | color:#171717; 344 | font-size:11px; 345 | top:5px; 346 | right:6%; 347 | padding:4px 15px; 348 | } 349 | #wrapper { 350 | width:96%; 351 | max-width:1100px; 352 | background:#FFF; 353 | border-radius:7px; 354 | -webkit-border-radius:7px; 355 | -moz-border-radius:7px; 356 | -khtml-border-radius:7px; 357 | -webkit-box-shadow:0px 0px 12px #636363; 358 | -moz-box-shadow:0px 0px 12px #636363; 359 | box-shadow:0px 0px 12px #636363; 360 | font-size:12px; 361 | padding:20px 2%; 362 | margin:0px auto; 363 | } 364 | ul.topics { 365 | width:92%; 366 | padding:0 0 0 4%; 367 | float:left; 368 | } 369 | ul.topics li { 370 | width:100%; 371 | padding-bottom:5px; 372 | float:left; 373 | } 374 | section.content { 375 | width:100%; 376 | background:#f5f5f5; 377 | border:#d9d7d8 1px solid; 378 | padding:0; 379 | margin-bottom:20px; 380 | float:left; 381 | } 382 | section.content article { 383 | width:98%; 384 | background:#ffffff; 385 | border-radius:0; 386 | -webkit-border-radius:0; 387 | -moz-border-radius:0; 388 | -khtml-border-radius:0; 389 | float:left; 390 | } 391 | .options-bar { 392 | width:98%; 393 | background:#7d7d7d; 394 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#7d7d7d'); 395 | background:-webkit-gradient(linear, left top, left bottom, from(#a6a6a6), to(#7d7d7d)); 396 | background:-webkit-linear-gradient(top, #a6a6a6, #7d7d7d); 397 | background:-ms-linear-gradient(top, #a6a6a6, #7d7d7d); 398 | background:-moz-linear-gradient(top, #a6a6a6, #7d7d7d); 399 | background:-o-linear-gradient(top, #a6a6a6, #7d7d7d); 400 | background:linear-gradient(to bottom, #a6a6a6, #7d7d7d); 401 | border:0; 402 | padding:5px 1%; 403 | float:left; 404 | } 405 | .sub-options-bar { 406 | width:100%; 407 | float:left; 408 | } 409 | section.content footer { 410 | width:98%; 411 | padding:5px 1%; 412 | float:left; 413 | } 414 | .round-corner { 415 | -webkit-box-shadow:0px 0px 12px #636363; 416 | -moz-box-shadow:0px 0px 12px #636363; 417 | box-shadow:0px 0px 12px #636363; 418 | float:left; 419 | } 420 | /* Types of message boxes */ 421 | .standard-message-box, .note-box, .alert-box, .error-box, .info-box, .success-box { 422 | width:98%; 423 | border-radius:7px; 424 | -webkit-border-radius:7px; 425 | -moz-border-radius:7px; 426 | -khtml-border-radius:7px; 427 | padding:12px 1% 10px 1%; 428 | margin-bottom:10px; 429 | float:left; 430 | } 431 | .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 { 432 | width:22px; 433 | height:25px; 434 | background:url(../img/sprite.png) top left no-repeat; 435 | margin:-4px 10px 0 0; 436 | float:left; 437 | } 438 | .note-box span:first-child { 439 | background-position:-31px 0; 440 | } 441 | .alert-box span:first-child { 442 | background-position:-60px 0; 443 | } 444 | .error-box span:first-child { 445 | background-position:-88px 0; 446 | } 447 | .info-box span:first-child { 448 | background-position:-118px 0; 449 | } 450 | .standard-message-box { 451 | background:#dddddd; 452 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); 453 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd)); 454 | background:-webkit-linear-gradient(top, #ffffff, #dddddd); 455 | background:-ms-linear-gradient(top, #ffffff, #dddddd); 456 | background:-moz-linear-gradient(top, #ffffff, #dddddd); 457 | background:-o-linear-gradient(top, #ffffff, #dddddd); 458 | background:linear-gradient(to bottom, #ffffff, #dddddd); 459 | border:#d8d8d8 1px solid; 460 | } 461 | .note-box { 462 | background:#ffecb1; 463 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fef2ca'); 464 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fef2ca)); 465 | background:-webkit-linear-gradient(top, #ffffff, #fef2ca); 466 | background:-ms-linear-gradient(top, #ffffff, #fef2ca); 467 | background:-moz-linear-gradient(top, #ffffff, #fef2ca); 468 | background:-o-linear-gradient(top, #ffffff, #fef2ca); 469 | background:linear-gradient(to bottom, #ffffff, #fef2ca); 470 | border:#ffe55d 1px solid; 471 | } 472 | .alert-box { 473 | background:#feee05; 474 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#feee05'); 475 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#feee05)); 476 | background:-webkit-linear-gradient(top, #ffffff, #feee05); 477 | background:-ms-linear-gradient(top, #ffffff, #feee05); 478 | background:-moz-linear-gradient(top, #ffffff, #feee05); 479 | background:-o-linear-gradient(top, #ffffff, #feee05); 480 | background:linear-gradient(to bottom, #ffffff, #feee05); 481 | border:#ffe55d 1px solid; 482 | } 483 | .error-box { 484 | background:#b60001; 485 | color:#ffffff; 486 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1315', endColorstr='#b60001'); 487 | background:-webkit-gradient(linear, left top, left bottom, from(#ff1315), to(#b60001)); 488 | background:-webkit-linear-gradient(top, #ff1315, #b60001); 489 | background:-ms-linear-gradient(top, #ff1315, #b60001); 490 | background:-moz-linear-gradient(top, #ff1315, #b60001); 491 | background:-o-linear-gradient(top, #ff1315, #b60001); 492 | background:linear-gradient(to bottom, #ff1315, #b60001); 493 | border:#971515 1px solid; 494 | } 495 | .info-box { 496 | background:#6ae1ff; 497 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#6ae1ff'); 498 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#6ae1ff)); 499 | background:-webkit-linear-gradient(top, #ffffff, #6ae1ff); 500 | background:-ms-linear-gradient(top, #ffffff, #6ae1ff); 501 | background:-moz-linear-gradient(top, #ffffff, #6ae1ff); 502 | background:-o-linear-gradient(top, #ffffff, #6ae1ff); 503 | background:linear-gradient(to bottom, #ffffff, #6ae1ff); 504 | border:#82f0fd 1px solid; 505 | } 506 | .success-box { 507 | background:#8dff48; 508 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#8dff48'); 509 | background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#8dff48)); 510 | background:-webkit-linear-gradient(top, #ffffff, #8dff48); 511 | background:-ms-linear-gradient(top, #ffffff, #8dff48); 512 | background:-moz-linear-gradient(top, #ffffff, #8dff48); 513 | background:-o-linear-gradient(top, #ffffff, #8dff48); 514 | background:linear-gradient(to bottom, #ffffff, #8dff48); 515 | border:#76fe76 1px solid; 516 | } 517 | .info-box p { 518 | width:auto; 519 | padding:0; 520 | } 521 | .avatars { 522 | width:100%; 523 | padding-bottom:5px; 524 | float:left; 525 | } 526 | .avatars div { 527 | display:inline; 528 | padding:0 0 0 10px; 529 | } 530 | .avatars div img { 531 | background:#FFF; 532 | border:#CCC 1px solid; 533 | padding:5px; 534 | } 535 | #countdown-dashboard { 536 | width:100%; 537 | padding:0; 538 | margin-bottom:20px; 539 | float:left; 540 | } 541 | .round-corner { 542 | padding:15px 0 20px 0; 543 | } 544 | #countdown-dashboard .dash { 545 | width:100px; 546 | border-radius:0; 547 | -webkit-border-radius:0; 548 | -moz-border-radius:0; 549 | -khtml-border-radius:0; 550 | padding:0; 551 | margin-left:40px; 552 | float:left; 553 | } 554 | #countdown-dashboard .dash:first-child { 555 | margin-left:0; 556 | } 557 | #countdown-dashboard span.dash-title { 558 | width:100%; 559 | padding-top:10px; 560 | text-transform:capitalize; 561 | float:left; 562 | } 563 | #countdown-dashboard .digit { 564 | font-size:60px; 565 | padding:5px; 566 | float:left; 567 | } 568 | #countdown-dashboard .dash .digit:first-child { 569 | border-right:#CCC 1px solid; 570 | } 571 | article ul { 572 | margin:0 0 20px 30px; 573 | float:left 574 | } 575 | #friends-list-container div { 576 | width:29%; 577 | background:#F2F2F2; 578 | padding:4px 1%; 579 | margin:4px 1%; 580 | float:left; 581 | } 582 | .hide-fb-like-comment .fb-edge-comment-widget { 583 | display:none 584 | } 585 | pre.code { 586 | width:98%; 587 | background:#EEE; 588 | padding:10px 1%; 589 | margin-bottom:15px; 590 | float:left; 591 | } 592 | .fb-ltr { 593 | height:800px !important 594 | } 595 | 596 | /* "fb_edge_widget_with_comment" class genreate from facebook */ 597 | 598 | .without-comment .fb_edge_widget_with_comment { 599 | height:20px; 600 | overflow:hidden 601 | } 602 | .like-logout .fb-like { 603 | float:left 604 | } 605 | .like-logout p { 606 | width:auto; 607 | padding: 0 0 10px 0; 608 | float:left; 609 | } 610 | /* ============================================================================= 611 | Non-Semantic Helper Classes 612 | ========================================================================== */ 613 | 614 | .ir { 615 | display: block; 616 | border: 0; 617 | text-indent: -999em; 618 | overflow: hidden; 619 | background-color: transparent; 620 | background-repeat: no-repeat; 621 | text-align: left; 622 | direction: ltr; 623 | *line-height: 0; 624 | } 625 | .ir br { 626 | display: none; 627 | } 628 | .hidden { 629 | display: none !important; 630 | visibility: hidden; 631 | } 632 | .visuallyhidden { 633 | border: 0; 634 | clip: rect(0 0 0 0); 635 | height: 1px; 636 | margin: -1px; 637 | overflow: hidden; 638 | padding: 0; 639 | position: absolute; 640 | width: 1px; 641 | } 642 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 643 | clip: auto; 644 | margin: 0; 645 | overflow: visible; 646 | position: static 647 | } 648 | .invisible { 649 | visibility: hidden; 650 | } 651 | .clear-fix:before, .clear-fix:after { 652 | content: ""; 653 | display: table; 654 | } 655 | .clear-fix:after { 656 | clear: both; 657 | } 658 | .clear-fix { 659 | *zoom: 1; 660 | } 661 | -------------------------------------------------------------------------------- /src/demo/facebook_friends_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 |31 | FB.api makes API calls to the Graph API or Deprecated REST API. 32 |
33 | Read more 34 |'var'
keyword inside the object, and can only be accessed by private functions and privileged methods.
32 | var functionName=function(){...})
and may only be called by privileged methods (including the object's constructor).
36 | this.methodName=function(){...}
and may invoked by code external to the object.
40 | this.variableName
and may be read/written from outside the object.
44 | Classname.prototype.methodName = function(){...}
and may be called from outside the object.
48 | Classname.prototype.propertyName = someValue
52 | Classname.propertyName = someValue
56 | 65 | Replace multiple value in a single string. Return the new string at the end. You can pass regExe also. 66 |
67 |var str = "http://localhost.com/mywebsite/?name=NAME&age=AGE&company=COMPANY";
69 | JSB.helper.multiReplace(str, {
70 | "NAME" : "Sam",
71 | "AGE" : "26yrs",
72 | "COMPANY" : "Sapient"
73 | });
74 |
75 | Final Output :
76 | http://localhost.com/mywebsite/?name=Sam&age=26yrs&company=Sapient
77 | 82 | Apply css to any element. Pass the name of element and the CSS in JSON format. 83 |
84 |JSB.helper.setCSS("main", {
86 | "width" : "300px",
87 | "background" : "red",
88 | "padding" : "10px"
89 | });
90 | 96 | Check if the given element has given class assign or not. 97 |
98 |JSB.helper.hasClass("main", "my_element");
100 | 106 | Add class to the given element. 107 |
108 |JSB.helper.addClass("main", "my_element2");
110 | 116 | Remove class from the given element. 117 |
118 |JSB.helper.removeClass("main", "my_element2");
120 | 126 | Return the URI of site. Return protocol, hostname and port if found. 127 |
128 |JSB.helper.getDomain();
130 | 136 | This method will return the query string from the URL of the website. 137 |
138 |Copy "?name=RSR&age=26" and paste this at the address bar of the website and press enter.140 | 141 |
JSB.helper.getQueryString("name", "Not Found.");
142 | 148 | 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. 149 |
150 |var test = " ";
152 | JSB.helper.isBlank(test);
153 | 159 | Store information to client machine using HTML5 localStorate method. 160 |
161 |JSB.helper.setInfo("name", "RSR");
163 | 169 | Get information from client machine. Get information for HTML5 localstorage if available else get information from cookie. 170 |
171 |JSB.helper.getInfo("name");
173 | 179 | Remove information from client machine. 180 |
181 |JSB.helper.removeInfo("name");
183 | 191 | This method return the element using javaScript getElementById() method. 192 |
193 |197 | Store informaiton in a cookie on user machine. 198 |
199 |203 | Get value of cookie by using its name from user machine. 204 |
205 |209 | Remove or delete cookie from user machine by its name. 210 |
211 |Something went wrong
" 42 | }, 43 | defaults : { 44 | noRecordsTrendingStories : 6, 45 | noRecordsOtherVideos : 10, 46 | noRecordsMoreSupporter : 3 47 | } 48 | } 49 | }; 50 | 51 | /** 52 | * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal. 53 | */ 54 | }(window.JSB = window.JSB || {}, jQuery)); 55 | -------------------------------------------------------------------------------- /src/js/_.helper.js: -------------------------------------------------------------------------------- 1 | /* JavaScript Boilerplate helper file * 2 | * @version 1.2 3 | * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate 4 | * Author - Mohammed Arif 5 | */ 6 | 7 | (function (JSB, $, undefined) { 8 | 'use strict'; 9 | 10 | /* 11 | * Singletons serve as a namespace provider which isolate implementation code 12 | * from the global namespace so as to provide a single point of access for functions, 13 | * this is useful for organizing code into logical sections. 14 | * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. 15 | * This way it's always present when the script is executed and doesn't have to be instantiated separately. 16 | */ 17 | JSB.helper = (function () { 18 | function _helper() { 19 | 20 | /** 21 | * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. 22 | * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. 23 | */ 24 | 25 | /*jshint validthis: true */ 26 | var _this = this, 27 | 28 | /* 29 | * This method return the element using javaScript getElementById() method. 30 | * This is the private method not meant for use as a public method. 31 | */ 32 | id = function (el) { 33 | return document.getElementById(el); 34 | }, 35 | 36 | /* 37 | * Store information in a cookie 38 | * Accept three param name, value, days 39 | */ 40 | setCookie = function (name, value, days) { 41 | var date = "", 42 | expires = ""; 43 | 44 | if (days) { 45 | date = new Date(); 46 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 47 | expires = "; expires=" + date.toGMTString(); 48 | } 49 | 50 | document.cookie = name + "=" + value + expires + "; path=/"; 51 | }, 52 | 53 | /* 54 | * Get cookie from user machine 55 | * Accept one parameters name 56 | * name : name of the cookie 57 | */ 58 | getCookie = function (name) { 59 | var nameEQ = name + "=", 60 | i, 61 | ca = document.cookie.split(';'); 62 | for (i = 0; i < ca.length; i += 1) { 63 | var c = ca[i]; 64 | while (c.charAt(0) === ' ') { 65 | c = c.substring(1, c.length); 66 | } 67 | if (c.indexOf(nameEQ) === 0) { 68 | return c.substring(nameEQ.length, c.length); 69 | } 70 | } 71 | return null; 72 | }, 73 | 74 | /* 75 | * Erase or delete cookie from user machine 76 | * Accept one parameters name 77 | * name : name of the cookie 78 | */ 79 | removeCookie = function (name) { 80 | setCookie(name, "", -1); 81 | }; 82 | 83 | /* 84 | * Replace multiple value in a single string. 85 | * Accept two parameters str, hash 86 | * str : String on which replace operation is to be performed 87 | * hash : JSON object contain string to be replaced with there replaced value 88 | * Return the new string at the end. 89 | */ 90 | this.multiReplace = function (str, hash) { 91 | var key; 92 | for (key in hash) { 93 | if (Object.prototype.hasOwnProperty.call(hash, key)) { 94 | str = str.replace(new RegExp(key, 'g'), hash[key]); 95 | } 96 | } 97 | return str; 98 | }; 99 | 100 | /* 101 | * Set the CSS on a particular element 102 | * Accept two parameters el, styles 103 | * el : The name of element on which CSS is to be apply. 104 | * styles : Various CSS property with their values. Accept data in JSON format 105 | * This method calls a private method setStyle 106 | */ 107 | this.setCSS = function (el, styles) { 108 | var prop; 109 | for (prop in styles) { 110 | if (styles.hasOwnProperty(prop)) { 111 | _this.setStyle(el, prop, styles[prop]); 112 | } 113 | } 114 | }; 115 | 116 | /* 117 | * Apply the CSS to the given element 118 | * Accept three parameters elements, prop, val 119 | * element : The element on which CSS is to be apply. 120 | * This method will automatically search for element using getElementById() method. 121 | * prop : CSS properties 122 | * val : Vale for CSS property 123 | */ 124 | this.setStyle = function (el, prop, val) { 125 | id(el).style[prop] = val; 126 | }; 127 | 128 | /* 129 | * Check if the given element has given class assign or not. 130 | * Accept two parameters el, name 131 | * el : Element for testing. This method will search for element using JavaScript getElementById() method. 132 | * name : name of class to be test 133 | * This method return true and false 134 | */ 135 | this.hasClass = function (el, name) { 136 | el = id(el); 137 | return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className); 138 | }; 139 | 140 | /* 141 | * Add class to the given element 142 | * Accept two parameters el, name 143 | * el : element on which class to be add 144 | * name : name of class 145 | */ 146 | this.addClass = function (el, name) { 147 | if (!_this.hasClass(el, name)) { 148 | el = id(el); 149 | el.className += (el.className ? ' ' : '') + name; 150 | } 151 | }; 152 | 153 | /* 154 | * Remove class from given element 155 | * Accept two parameters el, name 156 | * el : element from which class is to be remove 157 | * name : name of the class to be remove 158 | */ 159 | this.removeClass = function (el, name) { 160 | if (_this.hasClass(el, name)) { 161 | el = id(el); 162 | el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, ''); 163 | } 164 | }; 165 | 166 | /* 167 | * This method will check for blank value in the provided string 168 | * This will return true if provided string contain blank value and false if not 169 | */ 170 | this.isBlank = function (string) { 171 | var isNonblank_re = /\S/; 172 | return String(string).search(isNonblank_re) === -1; 173 | }; 174 | 175 | /* 176 | * Store information to client machine 177 | * Accept two parameters name, value 178 | * name : name of the localStorage 179 | * value : value for the localStorage 180 | * Store information in HTML5 localstorage if available 181 | * else store information in cookie 182 | */ 183 | this.setInfo = function (name, value) { 184 | if (typeof window.localStorage !== 'undefined') { 185 | localStorage.setItem(name, value); 186 | } else { 187 | setCookie(name, value); 188 | } 189 | }; 190 | 191 | /* 192 | * Get information from client machine 193 | * Accept two parameters name, checkCookie 194 | * name : name of the localstorage 195 | * checkCookie : This will either be true or false. 196 | * If set to true then scan cookie even if user system support localStorage 197 | * Get information for HTML5 localstorage if available 198 | * else get information from cookie 199 | */ 200 | this.getInfo = function (name, checkCookie) { 201 | var value = ""; 202 | if (typeof window.localStorage !== 'undefined') { 203 | value = localStorage.getItem(name); 204 | } else { 205 | value = getCookie(name); 206 | } 207 | 208 | if (checkCookie === true) { 209 | value = getCookie(name); 210 | } 211 | return value; 212 | }; 213 | 214 | /* 215 | * Remove information from client machine 216 | * Accept two parameters name, checkCookie 217 | * name : name of the localstorage for removing it permanently 218 | * checkCookie : This will either be true or false. 219 | * If set to true then scan cookie and remove if found even if user system support localStorage 220 | * Remove information for HTML5 localstorage if available 221 | * else remove information from cookie 222 | */ 223 | this.removeInfo = function (name, checkCookie) { 224 | if (typeof window.localStorage !== 'undefined') { 225 | localStorage.removeItem(name); 226 | } else { 227 | removeCookie(name); 228 | } 229 | if (checkCookie === true) { 230 | removeCookie(name); 231 | } 232 | }; 233 | 234 | this.init = function () { 235 | return this; /*returning this from a method is a common way to allow "chaining" of methods together*/ 236 | }; 237 | 238 | return this.init(); /*this refer to JSB.helper.init()*/ 239 | } 240 | 241 | return new _helper(); /*creating a new object of helper rather then a funtion*/ 242 | }()); 243 | 244 | /** 245 | * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal 246 | */ 247 | }(window.JSB = window.JSB || {}, jQuery)); 248 | -------------------------------------------------------------------------------- /src/js/_.main.js: -------------------------------------------------------------------------------- 1 | /* JavaScript Boilerplate main scripting file * 2 | * @version 1.2 3 | * GIT URL - https://github.com/mdarif/JavaScript-Boilerplate 4 | * Author - Mohammed Arif 5 | */ 6 | 7 | /* JSB (our namespace name) and undefined are passed here 8 | * to ensure 1. namespace can be modified locally and isn't 9 | * overwritten outside of our function context 10 | * 2. the value of undefined is guaranteed as being truly 11 | * undefined. This is to avoid issues with undefined being 12 | * mutable pre-ES5. 13 | */ 14 | 15 | (function(JSB, $, undefined) { 16 | 'use strict'; 17 | 18 | /** 19 | * Logging function, for debugging mode 20 | */ 21 | $.log = function(message) { 22 | if (JSB.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) { 23 | console.debug(message); 24 | } 25 | /*else { 26 | alert(message); 27 | }*/ 28 | }; 29 | 30 | /** 31 | * Angus Croll awesome typeof fix from http://goo.gl/GtvsU 32 | */ 33 | $.toType = (function toType(global) { 34 | return function(obj) { 35 | if (obj === global) { 36 | return 'global'; 37 | } 38 | return ({}).toString.call(obj).match(/\s([a-z|A-Z]+)/)[1].toLowerCase(); 39 | }; 40 | }(this)); 41 | 42 | /*$.toType(window); //'global' (all browsers) 43 | $.toType([1,2,3]); //'array' (all browsers) 44 | $.toType(/a-z/); //'regexp' (all browsers) 45 | $.toType(JSON); //'json' (all browsers) 46 | $.toType(null); //'null' (all browsers) 47 | $.toType(undefined); //'undefined' (all browsers)*/ 48 | //etc.. 49 | 50 | /** 51 | * Private properties 52 | */ 53 | var name = 'Mohammed Arif', 54 | age = 30; 55 | 56 | /** 57 | * Private method 58 | */ 59 | 60 | /* Benefits: 61 | * 1. Makes it easier to understand 'functions as an object'. 62 | * 2. It enforces good semicolon habits. 63 | * 3. Doesn't have much of the baggage traditionally associated with functions and scope. 64 | */ 65 | var getName = function() { 66 | return 'My name is ' + name + ', I am ' + age + ' old.'; 67 | }; 68 | 69 | 70 | /** 71 | * Public methods and properties 72 | */ 73 | JSB.title = 'Interactive Developer'; 74 | JSB.sayHello = function() { 75 | return "Hello World!"; 76 | }; 77 | 78 | /* 79 | * Singletons serve as a namespace provider which isolate implementation code 80 | * from the global namespace so as to provide a single point of access for functions, 81 | * this is useful for organizing code into logical sections. 82 | * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed. 83 | * This way it's always present when the script is executed and doesn't have to be instantiated separately. 84 | */ 85 | JSB.subHelper = (function() { 86 | function _subHelper() { 87 | 88 | /** 89 | * In non-strict mode, 'this' is bound to the global scope when it isn't bound to anything else. 90 | * In strict mode it is 'undefined'. That makes it an error to use it outside of a method. 91 | */ 92 | 93 | /*jshint validthis: true */ 94 | var _this = this; 95 | /* Store this to avoid scope conflicts */ 96 | 97 | /* 98 | * Return the URI of site 99 | * Return protocol, hostname and port if found 100 | * 101 | */ 102 | this.getDomain = function () { 103 | var port = "", 104 | url = ""; 105 | 106 | if (window.location.port) { 107 | port = ":" + window.location.port; 108 | } 109 | url = window.location.protocol + "//" + window.location.hostname + port + "/"; 110 | return url; 111 | }; 112 | 113 | /* 114 | * This method will return the query string from the URL of the website 115 | * Accept two parameters key, default_ 116 | * key : The name of the key who's value need to be fetch 117 | * default_ : The default value which will return when nothing will found or key does not exists. 118 | * If not pass anything then it will return blank value. 119 | */ 120 | this.getQueryString = function (key, default_) { 121 | if (default_ === null) { 122 | default_ = ""; 123 | } 124 | 125 | key = key.replace(/\[/,"\\[").replace(/\]/,"\\]"); 126 | var regex = new RegExp("[\\?&]" + key + "=([^]*)"), 127 | qs = regex.exec(window.location.href); 128 | 129 | if (qs === null) { 130 | return default_; 131 | } else { 132 | return qs[1]; 133 | } 134 | }; 135 | 136 | /** 137 | * Init call 138 | */ 139 | this.init = function() { 140 | _this.getDomain(); 141 | return this; /*this refer to JSB.subHelper*/ 142 | }; 143 | 144 | return this.init(); /*initialize the init()*/ 145 | } 146 | return new _subHelper(); /*creating a new object of subHelper rather then a funtion*/ 147 | }()); 148 | 149 | /** 150 | * Check to evaluate whether 'JSB' exists in the global namespace - if not, assign window.JSB an object literal 151 | */ 152 | }(window.JSB = window.JSB || {}, jQuery)); -------------------------------------------------------------------------------- /src/js/libs/prism.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 4 | * @author Lea Verou http://lea.verou.me 5 | */(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+""+s.tag+">"};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)}})();; 6 | 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(/&/,"&"))});; 7 | 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}}});; 8 | 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}; 9 | ; 10 | 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}}}); 11 | ; 12 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | config.set({ 3 | 4 | // base path, that will be used to resolve files and exclude 5 | basePath: '../', 6 | 7 | // list of files/patterns to load in the browser 8 | files: [ 9 | 'src/js/libs/jquery.js', 10 | 'src/js/**/*.js', 11 | 'test/unit/**/*.js' 12 | ], 13 | 14 | // preprocessors: { 15 | // '**/src/js/**/*.js': 'coverage' 16 | // }, 17 | 18 | // list of files to exclude 19 | exclude: [], 20 | 21 | // use dolts reporter, as travis terminal does not support escaping sequences 22 | // possible values: 'dots', 'progress', 'junit', 'teamcity' 23 | // CLI --reporters progress 24 | reporters: ['progress'], 25 | 26 | // coverageReporter: { 27 | // type: 'html', 28 | // dir: 'coverage/' 29 | // }, 30 | 31 | // web server port 32 | // CLI --port 9876 33 | port: 9876, 34 | 35 | // cli runner port 36 | // CLI --runner-port 9100 37 | runnerPort: 9100, 38 | 39 | // enable / disable colors in the output (reporters and logs) 40 | // CLI --colors --no-colors 41 | colors: true, 42 | 43 | // enable / disable watching file and executing tests whenever any file changes 44 | // CLI --auto-watch --no-auto-watch 45 | autoWatch: true, 46 | 47 | // load jasmine (this replaces JASMINE and JASMINE_ADAPTER file references) 48 | frameworks: ['jasmine'], 49 | 50 | // Start these browsers, currently available: 51 | // - Chrome 52 | // - ChromeCanary 53 | // - Firefox 54 | // - Opera 55 | // - Safari (only Mac) 56 | // - PhantomJS 57 | // - IE (only Windows) 58 | // CLI --browsers Chrome,Firefox,Safari 59 | browsers: ['PhantomJS'], 60 | //browsers: ['Chrome'], 61 | 62 | // If browser does not capture in given timeout [ms], kill it 63 | // CLI --capture-timeout 5000 64 | captureTimeout: 15000, 65 | 66 | // report which specs are slower than 500ms 67 | // CLI --report-slower-than 500 68 | reportSlowerThan: 500, 69 | 70 | // load the needed plugins (according to karma docs, this should not be needed tho) 71 | plugins: [ 72 | 'karma-jasmine', 73 | 'karma-chrome-launcher', 74 | 'karma-firefox-launcher', 75 | 'karma-phantomjs-launcher' 76 | ] 77 | }); 78 | }; -------------------------------------------------------------------------------- /test/unit/_.mainSpec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* jasmine specs for _.main.js go here */ 4 | 5 | /*Matchers Reference 6 | • toEqual checks for equality, not necessarily the same object. 7 | • toBe checks if two objects are the same. 8 | • toBeTruthy checks if a value is truthy (not just true). 9 | • toBeFalsy checks if a value is falsy (not just false). 10 | • toContain checks if a value is inside another. 11 | • toBeDefined checks if a value is defined. 12 | • toBeUndefined checks if a value is undefined. 13 | • toBeNull checks if a value is null. 14 | • toBeNaN checks if a value is NaN. 15 | • toBeCloseTo checks decimal proximity. 16 | • toMatch checks if a value matches a given regular expression. 17 | • toThrow checks if a function throws an error. 18 | • .not inverts the meaning of the following matcher. 19 | */ 20 | 21 | /*Reserved Words in Jasmine 22 | • jasmine (and everything in its namespace) 23 | • describe 24 | • it 25 | • expect 26 | • beforeEach 27 | • afterEach 28 | • runs 29 | • waits 30 | • waitsFor 31 | • spyOn 32 | • xdescribe 33 | • xit 34 | */ 35 | 36 | /*List of Falsy Values 37 | • false 38 | • 0 39 | • "" 40 | • undefined (note that the variable undefined isn’t always undefined!) 41 | • null 42 | • NaN 43 | */ 44 | 45 | describe("Test main js file", function() { 46 | 47 | /** 48 | * Test logging function, for debugging mode 49 | */ 50 | describe("test log function", function() { // suite 51 | 52 | it("JSB.config.debug should be true", function() { // specification or spec 53 | expect(JSB.config.debug).toBe(true); // matcher, if you want to make sure something is literally true or false and nothing else, use the 54 | //toEqual matcher 55 | }); 56 | 57 | it("typeof window.console should be object", function() { 58 | expect(typeof window.console !== 'undefined').toEqual(true); 59 | }); 60 | 61 | it("typeof window.console.log to be defined", function() { 62 | expect(typeof window.console.log !== 'undefined').toEqual(true); 63 | }); 64 | 65 | it("console.debug should be available", function() { 66 | expect(console.debug).toBeDefined(); 67 | }); 68 | }); 69 | 70 | /** 71 | * Test $.toType() function 72 | */ 73 | describe("test toType function", function() { 74 | xit("test window object 'global'", function() { 75 | expect($.toType(window)).toEqual("global"); 76 | }); 77 | 78 | it("test array object", function() { 79 | expect($.toType([1, 2, 3])).toEqual("array"); 80 | }); 81 | 82 | it("test regex object", function() { 83 | expect($.toType(/a-z/)).toEqual("regexp"); 84 | }); 85 | 86 | it("test object", function() { 87 | expect($.toType({ 88 | a: 4 89 | })).toEqual("object"); 90 | }); 91 | 92 | it("test error object", function() { 93 | expect($.toType(new ReferenceError)).toEqual("error"); 94 | }); 95 | 96 | it("test date object", function() { 97 | expect($.toType(new Date)).toEqual("date"); 98 | }); 99 | 100 | it("test Math object", function() { 101 | expect($.toType(Math)).toEqual("math"); 102 | }); 103 | 104 | it("test JSON object", function() { 105 | expect($.toType(JSON)).toEqual("json"); 106 | }); 107 | 108 | it("test Number object", function() { 109 | expect($.toType(3)).toEqual("number"); 110 | }); 111 | 112 | it("test String object", function() { 113 | expect($.toType("Arif")).toEqual("string"); 114 | }); 115 | 116 | it("test Boolean object", function() { 117 | expect($.toType(new Boolean(true))).toEqual("boolean"); 118 | }); 119 | 120 | xit("test null", function() { 121 | expect($.toType(null)).toEqual("null"); 122 | }); 123 | 124 | xit("test undefined", function() { 125 | expect($.toType(undefined)).toEqual("undefined"); 126 | }); 127 | }); 128 | 129 | describe("test public method", function() { 130 | it("JSB.sayHello", function() { 131 | expect(JSB.sayHello()).toEqual("Hello World!"); 132 | }); 133 | }); 134 | 135 | describe("let's get the domain name", function() { 136 | xit("test protocol", function() { 137 | expect(window.location.protocol).toContain("http"); 138 | }); 139 | 140 | }); 141 | 142 | describe("test query strings", function() { 143 | var name; 144 | xit("check the output", function() { 145 | expect(JSB.subHelper.getQueryString(name, 'Arif')).toEqual("Arif"); 146 | }); 147 | 148 | beforeEach(function() { 149 | spyOn(JSB.subHelper, 'getQueryString'); 150 | JSB.subHelper.getQueryString(name, 'Arif'); 151 | }); 152 | 153 | it("tracks that the spy was called", function() { 154 | //Let's tracks calls to it and all arguments through spyOn method. 155 | expect(JSB.subHelper.getQueryString).toHaveBeenCalled(); 156 | }); 157 | 158 | }); 159 | 160 | 161 | // describe("Facebook", function() { 162 | // it("is FB available (i.e. is facebook library included)", function() { 163 | // expect(typeof FB != "undefined").not.toEqual(true); 164 | // }); 165 | 166 | // it("do we have an application id", function() { 167 | // expect(JSB.config.appId != "").toEqual(true); 168 | // }); 169 | 170 | // it("initialize the facebook library", function() { 171 | // JSB.subModule.fbReady(); 172 | // }); 173 | 174 | // xit("Checking for active facebook session", function() { 175 | // FB.getLoginStatus(); 176 | // waitsFor(function() { 177 | // return FB.getLoginStatusResponse() && FB.getLoginStatusResponse().authResponse; 178 | // }, "response.authResponse", 7000); 179 | // }); 180 | // }); 181 | 182 | }); --------------------------------------------------------------------------------