Merge pull request #18 from spacenomads/dev

Create a final PUG release

.editorconfig

@@ -0,0 +1,26 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# 2 tabs indentation
+[*]
+indent_style = tab
+indent_size = 2
+
+# 2 space indentation for .json and .md files
+[*.{json, md}]
+indent_style = space
+indent_size = 2
+
+# urf-8 character set
+[*]
+charset = utf-8
+
+# Remove any whitespace characters preceding newline characters
+[*]
+trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread":true
+    }
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "indent": [2, "tab"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "semi": [2, "always"],
+    "eqeqeq": 2,
+    "strict": [2, "global"],
+
+    "no-console": 1,
+    "array-callback-return": 1,
+    "block-scoped-var": 1,
+    "consistent-return": 1,
+    "curly": [1, "multi-line", "consistent"],
+    "no-empty-function": 1,
+    "no-useless-return": 1,
+    "vars-on-top": 1,
+    "no-use-before-define": [1, "nofunc"],
+    "global-require": 1,
+    "camelcase": 1,
+    "new-cap": 1,
+    "no-lonely-if": 1,
+    "no-multiple-empty-lines": [1, { "max": 5 }],
+    "no-trailing-spaces": 1,
+
+    "no-restricted-properties": [1, {
+      "property": "lenght",
+      "message": "Use length instead of lenght (notice the position of the h)"
+    }]
+
+  }
+}

.markdownlint.json

@@ -0,0 +1,5 @@
+{
+  "MD013": false,
+  "MD014": false,
+  "MD033": false
+}

README.md

@@ -1,51 +1,75 @@
+
 # Asteroids
-Ahoy! This is our all-new/all-old web starter kit. Use it well!
 
-<img src="asteroids-700.png" width="400">
+Ahoy! This kit is our all-new/all-old web starter kit. Use it well!
 
+<center>
+<img src="https://spacenomads.com/assets/img/projects/asteroids/asteroids-700.png" width="350">
+</center>
 
-Asteroids includes a SASS, jQuery and [PUG](https://github.com/pugjs/pug), a super cool template engine.
+Asteroids include SASS, jQuery and [PUG](https://github.com/pugjs/pug), a super cool template engine.
 
 ## Quickstart
-Install [Node.js](https://nodejs.org/) and [Gulp](https://gulpjs.com) to run this starter kit.
-1. Download or clone the repository (You can download it with Bower: `$ bower install asteroids-kit`)
-2. Install the local dependencies with `$ npm install`
-3. Run the kit with `$ gulp go`
 
-## Gulp tasks
-### Launch a webserver for development
-```
-$ gulp go
+Install [Node.js](https://nodejs.org/) and [Gulp4](https://gulpjs.com) to run this starter kit.
+
+1. Download or clone the repository
+2. Install the local dependencies with `$ npm i`
+3. Run the kit with `$ npm start`
+
+## Tasks
+
+### Launch a web server for development
+
+```shell
+$ npm start
 ```
-Launch a webserver with browserSync to work on your proyect. Several watchers will have their eyes on your PUG/SCSS/JS files to reload your connected browsers when needed.
+
+Launch a web server with browserSync to work on your project. Several watchers will have their eyes on your PUG/SCSS/JS files to reload your connected browsers when needed.
 
 ### Process a production-ready distribution
-```
+
+```shell
 $ gulp deploy
 ```
+
 Delete and reprocess the public folder with optimized versions of your HTML/CSS/JS files.
 
 ### Compress a production-ready distribution
-```
+
+```shell
 $ gulp zipit
 ```
 Delete and reprocess the public folder with optimized versions of your HTML/CSS/JS files and compress it in a .zip file.
 
+You can customize the name of the ZIP document editing the config.json file ;)
+
+Optionally you can add a keyword to this ZIP file:
+
+```shell
+$ gulp zipit -b keyword
+```
+It will generate an ignored `DDMMYY-keyword-project-name.zip` file
+
+
+
 ## Folder structure
-Our **gulpfile.js** uses a configuraton JSON file to set source and destination files of the project.
+
+Our **gulpfile.js** uses a configuration JSON file to set source and destination files of the project.
 Check config.json out and edit what you need.
 
-The folder structure looks like:
-```
+The project folder structure looks like this:
+
+```txt
 /
 |- _source
 |   |- assets
 |   |   |- icons
 |   |   |- img
-|   |   |   `- layout
 |   |   `- js
-|   |       `- vendor   
+|   |       `- vendor
 |   |- js
+|   |   |- components
 |   |   `- plugins
 |   |- scss
 |   |   |- components
@@ -59,39 +83,43 @@ The folder structure looks like:
    `- assets
        |- css
        |- img
-       |   `- layout
        `- js
-           `- vendor
 ```
 
-
 ## CSS
-Asteroids does not include a CSS reset stylesheet anymore but we have included two awesome tools:
+
+Asteroids do not include a CSS reset stylesheet anymore, but we have added two awesome tools:
+
 * A **csscomb** JSON file to use with your code editor as your own risk :)
-* The risky [**gulp-combine-mq**](https://www.npmjs.com/package/gulp-combine-mq) package to group ans combine all your mediaqueries.
+* The risky [**gulp-combine-mq**](https://www.npmjs.com/package/gulp-combine-mq) package to group and combine all your media queries.
 
 ## JS
-**Asteorids** uses JQuery, Modernizr and two JS files, main.js and plugins.js, located before the `</body>` tag. The custom build of Modernizr is loaded in the `<head>` section of the page.
+
+**Asteroids** use JQuery, Modernizr and two JS files, main.js, and plugins.js, located before the `</body>` tag. You can find the custom build of Modernizr in the `<head>` section of the page.
 
 | Item | Version | URL |
 | ------ | ------- | --- |
-| JQuery | v3.2.1 | https://jquery.com
-| Modernizr | v3.5.0 | https://modernizr.com
-| Width_snitch | v1 | https://github.com/oneeyedman/Width-Snitch/
-| Breakpoints | v1.0 | https://github.com/xoxco/breakpoints
-| jQuery Cookie Plugin | v1.4.0 | https://github.com/carhartl/jquery-cookie
+| JQuery | v3.2.1 | [https://jquery.com](https://jquery.com)
+| Modernizr | v3.5.0 | [https://modernizr.com](https://modernizr.com)
+| Width_snitch | v1 | [https://github.com/oneeyedman/Width-Snitch/](https://github.com/oneeyedman/Width-Snitch/)
+| Breakpoints | v1.0 | [https://github.com/xoxco/breakpoints](https://github.com/xoxco/breakpoints)
+| jQuery Cookie Plugin | v1.4.0 | [https://github.com/carhartl/jquery-cookie](https://github.com/carhartl/jquery-cookie)
 
 ## Browser Support
+
 That's up to you ;)
 
 ## TODO
+
 So, what is next?
 
-- [ ] Mobile icons + PSD source file
-- [ ] Gulp task to generate a timestamped deploy folder
-- [ ] Fix PUG/HTML reload loop
-- [ ] Add CSS Linters
-- [ ] Add JS Linters
+* [X] Gulp task to generate a timestamped deploy folder
+* [X] Add CSS Linters
+* [X] Add JS Linters
+* [ ] Use EJS/Nunjucks instead of PUG
+* [ ] Mobile icons + PSD source file
+* [ ] ~~Fix PUG/HTML reload loop~~
 
 ## Request a feature
-Do you miss something? Feel free to request a feature or contribute to make it better ;)
+
+Do you miss anything? Feel free to request a feature or contribute to making it better ;)

_source/js/_sn.cache.js

@@ -1,3 +1,4 @@
+'use strict';
 /**
  * SN.Cache
  * Cache common objects

_source/js/_sn.cookies.js

@@ -1,3 +1,4 @@
+'use strict';
 SN.cookies = {
 	gaID : null,
 	gaCode : null,

_source/js/_sn.externallinks.js

@@ -1,3 +1,4 @@
+'use strict';
 /**
  * SN.ExternalLinks
  * Add target="_blank" attribute to external links

_source/js/_sn.js

@@ -1,3 +1,4 @@
+'use strict';
 /**
  * SN Object
  */

_source/js/_sn.snitch.js

@@ -1,3 +1,4 @@
+'use strict';
 /**
  * SN.snitch
  * Show browser real width, FYI.

_source/js/components/accordion/_sn.accordion.js

@@ -0,0 +1,130 @@
+'use strict';
+/**
+ * SN.collapsible
+ * Manages Collapsible groups and accordion sections
+ *
+ */
+
+SN.collapsible = {
+	visible: 'none',
+	init: function(){
+		var $collapsible = SN.cache.$body.find('.js__collapsible');
+		var $collapsibleLabel = SN.cache.$body.find('.js__collapsible-label');
+
+
+		/**
+		 * Unfold every collapsible item
+		 * @param  {object} $obj Collapsible object
+		 */
+		var unfoldCollapsible = function($obj) {
+			$obj.find('.js__collapsible-content').show().attr('aria-hidden', false).parent('.js__collapsible-item').addClass('js__collapsible-item--visible');
+		};
+
+
+		/**
+		 * Fold every collapsible item
+		 * @param  {object} $obj Collapsible object
+		 */
+		var foldCollapsible = function($obj) {
+			$obj.find('.js__collapsible-content').hide().attr('aria-hidden', true).parent('.js__collapsible-item').removeClass('js__collapsible-item--visible');
+		};
+
+
+		/**
+		 * Unfold one collapsible item
+		 * @param  {object}  $obj Collapsible object
+		 * @param  {integer}  item Item index
+		 */
+		var unfoldThis = function($obj, item) {
+			$obj.find('.js__collapsible-item').eq( item ).children('.js__collapsible-content').slideDown('400').attr('aria-hidden', false).parent('.js__collapsible-item').addClass('js__collapsible-item--visible');
+		};
+
+		var foldThis = function($obj, item) {
+			$obj.find('.js__collapsible-item').eq( item ).children('.js__collapsible-content').slideUp('200').attr('aria-hidden', true).parent('.js__collapsible-item').removeClass('js__collapsible-item--visible');
+		};
+
+
+
+		/**
+		 * Initialize collapsible object
+		 * @param  {object} $el    Collapsible object
+		 * @param  {string} config Configuration string [all/none/number]
+		 */
+		var adjustCollapsibleOnLoad = function($el, config) {
+			var visibleItem;
+			if ( config === 'none') {
+				foldCollapsible( $el );
+			} else if ( config === 'all') {
+				unfoldCollapsible( $el );
+			} else {
+				visibleItem = parseInt(config);
+				foldCollapsible( $el );
+				unfoldThis( $el, visibleItem );
+			}
+		};
+
+
+
+
+
+
+		if ($collapsible.length) {
+
+			// > Each collapsible
+			$collapsible.each(function(index, el) {
+				var initialState = ($(this).attr('data-visible')) ? $(this).attr('data-visible') : SN.collapsible.visible;
+
+				$(this).find('.js__collapsible-item').each(function(index, el) {
+					$(this).data('item', index);
+
+					$(this).children('.js__collapsible-label').text( $(this).children('.js__collapsible-label').text() + ' ' + index); //delete
+					$(this).children('.js__collapsible-content').text( $(this).children('.js__collapsible-content').text() + ' ' + index); //delete
+				});
+
+				adjustCollapsibleOnLoad( $(this), initialState);
+			});
+
+
+			// > Label click
+			$collapsibleLabel.on('click', function(event) {
+				event.preventDefault();
+				var $block = $(this).parents('.js__collapsible');
+				var prevItem;
+				var item = $(this).parents('.js__collapsible-item').data('item');
+
+				if ( $(this).parents('.js__collapsible').hasClass('js__collapsible--accordion') ) {
+
+					// Is this an accordion block? YES
+					if ( $(this).parents('.js__collapsible-item').hasClass('js__collapsible-item--visible') ) {
+						// I am already open -> Close me
+						foldThis( $block, item );
+					} else {
+						if ( $(this).parents('.js__collapsible').find('.js__collapsible-item--visible').length ) {
+							// Another item is already open -> Close it and open me, Alice
+							prevItem = $(this).parents('.js__collapsible').find('.js__collapsible-item--visible').data('item');
+							foldThis( $block, prevItem );
+							unfoldThis( $block, item );
+						} else {
+							// No item is open -> Open me
+							unfoldThis( $block, item );
+						}
+					}
+				} else {
+					// Is this an accordion block? NOPE
+					if ( $(this).parents('.js__collapsible-item').hasClass('js__collapsible-item--visible') ) {
+						// I am already open -> Close me
+						foldThis( $block, item );
+					} else {
+						// I am closed -> Open me
+						unfoldThis( $block, item );
+					}
+				}
+
+
+
+
+			});
+
+		}
+	}
+};