Enhance Examples pages with code template update when user change option and prepare doc for multiple API version pages

Author: sarcadass

CHANGELOG.md

@@ -1,9 +1,20 @@
+## X.X.X
+
+### Features
+
+- Add custom direction ([rhanb](https://github.com/rhanb))
+
+### Miscellaneous
+
+- Update local server config to latest Hapi version
+
+
 ## 1.1.1
 
 ### Miscellaneous
 
 - Update dependencies
-- Update gulpfile with last gulp version
+- Update gulpfile with latest gulp version
 - Update node versions on for Travis CI tests
 
 
@@ -39,15 +50,15 @@
 
 - Reduce CPU footprint for Chrome
 - Add option to change default state name
-- Add Karma / Jasmine tests
-- Add Code coverage
+- Add Karma / Jasmine tests ([pranaygp](https://github.com/pranaygp))
+- Add Code coverage ([pranaygp](https://github.com/pranaygp))
+- Can set HTMLCanvasElement directly instead of CSS selector ([suhaotian](https://github.com/suhaotian))
 
 ### Miscellaneous
 
-- Add to NPM registry
-- Add to Bower registry
-- Add `CONTRIBUTING.md`
+- Add to NPM and Bower registry
+- Add `CONTRIBUTING.md` ([pranaygp](https://github.com/pranaygp))
 - Add `CHANGELOG.md`
 - Updated `README.md`
-- Docs fixes and improvements
+- Docs fixes and improvements ([howdy39](https://github.com/howdy39), [M-arcus](https://github.com/M-arcus) and [YLiohenki](https://github.com/YLiohenki))
 - Create a Gitter Channel

docs/api-v1.1.1.html

@@ -61,22 +61,22 @@
 				transition-property: color, border;
 				transition-duration: .3s;
 				&:first-child {margin-left: 0}
-				&.text:hover {
+				&.text-link:hover {
 					color: #1abc9c;
 					@include tab-desk {
 						border-color: #1abc9c;
 					}
 				}
-				&.text {
+				&.text-link {
 					padding: 15px 5px;
 					@include tab-desk {
 						border-bottom: solid 2px #eee;
 					}
 				}
-				&.text.active, &.text.active:hover  {
-					color: #16a085;
+				&.text-link.active, &.text-link.active:hover {
+					color: $color-green-main;
 					@include tab-desk {
-						border-color: #16a085;
+						border-color: $color-green-main;
 					}
 				}
 			}
@@ -142,7 +142,7 @@
 				position: absolute;
 				height: 5px;
 				width: 50%;
-				background: #16a085;
+				background: $color-green-main;
 				opacity: 1;
 				-webkit-transform: rotate(0deg);
 				-moz-transform: rotate(0deg);

docs/api-v2.0.0.html

@@ -4,11 +4,11 @@
 
 body {
 	margin: 0;
-	font-family: Roboto, Helvetica, Arial, sans-serif;
+	font-family: $font-main;
 	color: #252525;
 }
 
-h1, h2, h3 {color: #16a085}
+h1, h2, h3 {color: $color-green-main}
 
 h1 {
 	font-size: 2.875em;

docs/api.html

@@ -6,6 +6,33 @@ body.api {
 	padding-top: 50px;
 }
 
+.api-versions-list li {
+	font-size: 1.75em;
+	margin-bottom: 15px;
+	a {
+		color: #444;
+		&:hover {color: $color-green-main}
+	}
+}
+
+.title-bloc {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.api-version {
+		font-size: .5em;
+		font-weight: bold;
+	}
+
+	#version-select {
+		padding: 5px;
+    border-color: $color-green-main;
+    font-size: 1em;
+    font-family: $font-main;
+	}
+}
+
 table.api-list {
 	width: 100%;
 	text-align: left;

docs/assets/css/scss/header.scss

@@ -28,22 +28,29 @@ body.examples {
 
 .sandbox-footer {
 	position: relative;
+	display: flex;
+	align-items: baseline;
 	padding: 10px 20px;
 	background-color: #f5f2f0;
 	margin-top: -4px;
 	border-radius: 0 0 4px 4px;
 	z-index: 1;
 
-	span {
+	.option {
 		font-size: 14px;
 		font-weight: bold;
-	}
+		margin-right: 15px;
+		&:last-child {margin-right: 0}
 
-	select {margin-left: 5px}
+		input[type=checkbox] {
+			position: relative;
+			top: 2px;
+		}
+	
+		select {margin-left: 5px}
+	}
 }
 
-.sandbox-footer p {margin: 0}
-
 .code-wrapper {margin-top: 30px}
 
 #canvas-image {

docs/assets/css/scss/main.scss

@@ -1,3 +1,7 @@
+// Default value
+$font-main: Roboto, Helvetica, Arial, sans-serif;
+$color-green-main: #16a085;
+
 // Responsive breakpoints
 $sm: 768px;
 $md: 992px;

docs/assets/css/scss/pages/api.scss

@@ -2,7 +2,8 @@
 
 var main = require('./main.js'),
 	home = require('./pages/home.js'),
-	examples = require('./pages/examples.js');
+	examples = require('./pages/examples.js'),
+	api = require('./pages/api.js');
 
 $(document).on('DOMContentLoaded', function() {
 	switch(pageId) {
@@ -18,6 +19,7 @@ $(document).on('DOMContentLoaded', function() {
 
 		case 'api':
 			main.init();
+			api.init();
 			break;
 	}
 });

docs/assets/css/scss/pages/examples.scss

@@ -4,6 +4,7 @@ module.exports = {
 	init: function() {
 		this.logoAnimation();
 		this.hamburgerIcon();
+		this.setActiveClassOnCurrentNav();
 	},
 
 	logoAnimation: function() {
@@ -27,18 +28,23 @@ module.exports = {
 				}
 			});
 
-			$('.main-header .bloc-logo').css({
-				display: 'none',
-				visibility: 'visible'
-			})
+			$('.main-header .bloc-logo')
+				.css({
+					display: 'none',
+					visibility: 'visible'
+				})
 				.fadeIn();
 		}, 500);
 	},
 
 	hamburgerIcon: function() {
-		$('.hamburger-icon').click(function(){
+		$('.hamburger-icon').click(function() {
 			$(this).toggleClass('open');
 			$('.main-nav').toggleClass('open');
 		});
+	},
+
+	setActiveClassOnCurrentNav: function() {
+		$('#nav-' + pageId).addClass('active');
 	}
 };

docs/assets/css/scss/var.scss

@@ -0,0 +1,24 @@
+'use strict';
+
+module.exports = {
+	init: function() {
+		this.setDefaultVersionOnDropDown();
+		this.HandleVersionDropDown();
+		
+	},
+
+	setDefaultVersionOnDropDown: function() {
+		var pathName = document.location.pathname;
+		$('#version-select option').each(function(i, el) {
+			if (el.value === pathName) {
+				$(el).attr({ selected: true })
+			}
+		})
+	},
+
+	HandleVersionDropDown: function() {
+		$('#version-select').on('change', function(event) {
+			$(location).attr({ pathname: $(this).val() })
+		})
+	}
+};

docs/assets/css/style.css

@@ -1,5 +1,7 @@
 'use strict';
 
+var codeTemplates = require('../utils/codeTemplate.js');
+
 module.exports = {
 	init: function() {
 		this.examples.init();
@@ -8,7 +10,6 @@ module.exports = {
 	examples: {
 		init: function() {
 			this.basic();
-			this.basicCustom();
 			this.imageBlending();
 			this.imageMask();
 			this.interactive();
@@ -19,33 +20,12 @@ module.exports = {
 				element: '#canvas-basic',
 				name: 'basic-gradient',
 				direction: 'left-right',
-				opacity: [1, 1],
-				isPausedWhenNotInView: true,
-				states: {
-					"default-state": {
-						gradients: [
-							['#ff9966', '#ff5e62'],
-							['#00F260', '#0575E6'],
-							['#e1eec3', '#f05053']
-						]
-					}
-				}
-			});
-			$('#select-direction').on('change', function() {
-				animation.direction = $(this).val();
-			})
-		},
-		basicCustom: function() {
-			var animation = new Granim({
-				element: '#canvas-basic-custom',
-				name: 'basic-gradient-custom',
 				customDirection: {
-					x0: '20%',
-					y0: '200px',
-					x1: '30%',
-					y1: '400px'
+					x0: '40%',
+					y0: '10px',
+					x1: '60%',
+					y1: '50%'
 				},
-				direction: 'custom',
 				opacity: [1, 1],
 				isPausedWhenNotInView: true,
 				states: {
@@ -58,8 +38,15 @@ module.exports = {
 					}
 				}
 			});
+
 			$('#select-direction').on('change', function() {
-				animation.direction = $(this).val();
+				var directionValue = $(this).val();
+				animation.changeDirection(directionValue);
+
+				$('#canvas-basic-bloc .language-js').html(
+					$(codeTemplates.basic({ direction: directionValue }))
+				);
+				Prism.highlightAll();
 			})
 		},
 
@@ -89,7 +76,13 @@ module.exports = {
 			});
 
 			$('#select-blending-mode').on('change', function() {
-				animation.changeBlendingMode($(this).val());
+				var blendingModeValue = $(this).val();
+				animation.changeBlendingMode(blendingModeValue);
+
+				$('#canvas-image-blending-bloc .language-js').html(
+					$(codeTemplates.blendingMode({ blendingMode: blendingModeValue }))
+					);
+				Prism.highlightAll();
 			})
 		},