Travis GCC option + UI enhancements

.travis.yml

@@ -3,9 +3,14 @@ node_js:
 - '6'
 - '5'
 - '4.4'
-services:
-- redis-server
-- mongodb
+env:
+  - CXX=g++-6.2
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-6.2
 env:
   global:
   - secure: VCgscCCKhvHu0tW8e3jo6wydckE6jDkEfC2Zd5aSZytYAex05qahU45cmksqMIT1uBCcC4CKRK4caoKac/+818EyKBTV+vAL74cMMc8NeLNVY2m50+ohu8GYu+ByIffttK7cnXN7xIzyuK4csI7qz84jxLW0KYgYQ+6SPbUG3Hy6gr0P0CztNmAFfyhTam4OKSIiXyvQZW0fZoSruOpUYS5pxvCBi4AxpRY8+6IxCL8xYqF49P0l28nn0C/NYUklwag6l4JF32PrcLAU5S+NIXXgJX499cZO4C2m2GljJeolbvGue3ZEtadv5NkmQuFQ1WGb5aURHPkll0hXsWKxT0bH9P1a4Gt1h/J885acWG4U6QZA1Zds/Z4ymNeLA0MzzoAaDK1q8sRglhDJnZYb4Zm5jy7ZA3vFwb+zcGaOT//pCVpcsZINRnd0Qu9LC5NKPrfmyFAAMAXDdo78BEnwryUviWP5976JZmQAfDIWvmGGTs5i1yjiTRi+NVgH0YpfxtI9MTEJo++r5/zNH/jewxj1D8esaamphp6mQvxvpl388veQDw3REUZQ49muzrdK2YYmVRkzLfH2uMsHInN3WqEl3/mTpH76u0nlxMF6HlrVdgB2UNPjlXbSooWXLfdAw98NpCZ7BAFcCcT8Oa9cYw+40rJrdfem5J2EimG5ltw=

assets/js/app.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var s=t[n];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,n,s){return n&&e(t.prototype,n),s&&e(t,s),t}}(),Alerts=function(){function e(){_classCallCheck(this,e);var t=this;t.mdl=new Vue({el:"#alerts",data:{children:[]},methods:{acknowledge:function(e){t.close(e)}}}),t.uidNext=1}return _createClass(e,[{key:"push",value:function(e){var t=this,n=_.defaults(e,{_uid:t.uidNext,class:"is-info",message:"---",sticky:!1,title:"---"});t.mdl.children.push(n),n.sticky||_.delay(function(){t.close(n._uid)},5e3),t.uidNext++}},{key:"pushError",value:function(e,t){this.push({class:"is-danger",message:t,sticky:!1,title:e})}},{key:"pushSuccess",value:function(e,t){this.push({class:"is-success",message:t,sticky:!1,title:e})}},{key:"close",value:function(e){var t=this,n=_.findIndex(t.mdl.children,["_uid",e]),s=_.nth(t.mdl.children,n);n>=0&&s&&(s.class+=" exit",t.mdl.children.$set(n,s),_.delay(function(){t.mdl.children.$remove(s)},500))}}]),e}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-20});var t=(new Sticky(".stickyscroll"),new Alerts);if(alertsData&&_.forEach(alertsData,function(e){t.push(e)}),1===e("#mk-editor").length){new SimpleMDE({autofocus:!0,element:e("#mk-editor").get(0),autoDownloadFontAwesome:!1,placeholder:"Enter Markdown formatted content here...",hideIcons:["heading","quote"],showIcons:["strikethrough","heading-1","heading-2","heading-3","code","table","horizontal-rule"],spellChecker:!1})}});
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),Alerts=function(){function e(){_classCallCheck(this,e);var t=this;t.mdl=new Vue({el:"#alerts",data:{children:[]},methods:{acknowledge:function(e){t.close(e)}}}),t.uidNext=1}return _createClass(e,[{key:"push",value:function(e){var t=this,n=_.defaults(e,{_uid:t.uidNext,class:"is-info",message:"---",sticky:!1,title:"---"});t.mdl.children.push(n),n.sticky||_.delay(function(){t.close(n._uid)},5e3),t.uidNext++}},{key:"pushError",value:function(e,t){this.push({class:"is-danger",message:t,sticky:!1,title:e})}},{key:"pushSuccess",value:function(e,t){this.push({class:"is-success",message:t,sticky:!1,title:e})}},{key:"close",value:function(e){var t=this,n=_.findIndex(t.mdl.children,["_uid",e]),a=_.nth(t.mdl.children,n);n>=0&&a&&(a.class+=" exit",t.mdl.children.$set(n,a),_.delay(function(){t.mdl.children.$remove(a)},500))}}]),e}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-20});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;if(alertsData&&_.forEach(alertsData,function(e){t.push(e)}),1===e("#mk-editor").length){new SimpleMDE({autofocus:!0,autoDownloadFontAwesome:!1,element:e("#mk-editor").get(0),hideIcons:["heading","quote"],placeholder:"Enter Markdown formatted content here...",showIcons:["strikethrough","heading-1","heading-2","heading-3","code","table","horizontal-rule"],spellChecker:!1,status:!1})}e("#page-type-edit").length&&(e(".btn-edit-discard").on("click",function(t){e("#modal-edit-discard").toggleClass("is-active")}),e(".btn-edit-save").on("click",function(e){}))});

client/js/app.js

@@ -2,7 +2,9 @@
 
 jQuery( document ).ready(function( $ ) {
 
+	// ====================================
 	// Scroll
+	// ====================================
 
 	$('a').smoothScroll({
 		speed: 400,
@@ -11,7 +13,18 @@ jQuery( document ).ready(function( $ ) {
 
 	var sticky = new Sticky('.stickyscroll');
 
-	// Alerts
+	// ====================================
+	// Notifications
+	// ====================================
+
+	$(window).bind('beforeunload', () => {
+		$('#notifload').addClass('active');
+	});
+	$(document).ajaxSend(() => {
+		$('#notifload').addClass('active');
+	}).ajaxComplete(() => {
+		$('#notifload').removeClass('active');
+	});
 
 	var alerts = new Alerts();
 	if(alertsData) {
@@ -20,20 +33,29 @@ jQuery( document ).ready(function( $ ) {
 		});
 	}
 
-	// Editor
+	// ====================================
+	// Markdown Editor
+	// ====================================
 
 	if($('#mk-editor').length === 1) {
 
 		let mde = new SimpleMDE({
 			autofocus: true,
-			element: $("#mk-editor").get(0),
 			autoDownloadFontAwesome: false,
-			placeholder: 'Enter Markdown formatted content here...',
+			element: $("#mk-editor").get(0),
 			hideIcons: ['heading', 'quote'],
+			placeholder: 'Enter Markdown formatted content here...',
 			showIcons: ['strikethrough', 'heading-1', 'heading-2', 'heading-3', 'code', 'table', 'horizontal-rule'],
-			spellChecker: false
+			spellChecker: false,
+			status: false
 		});
 
 	}
 
+	// ====================================
+	// Pages logic
+	// ====================================
+
+	//=include pages/edit.js
+
 });

client/js/pages/edit.js

@@ -0,0 +1,18 @@
+
+if($('#page-type-edit').length) {
+
+	//-> Discard
+
+	$('.btn-edit-discard').on('click', (ev) => {
+		$('#modal-edit-discard').toggleClass('is-active');
+	});
+
+	//-> Save
+
+	$('.btn-edit-save').on('click', (ev) => {
+
+		
+
+	});
+
+}

client/scss/app.scss

@@ -1,5 +1,6 @@
 //@import './layout/_fonts';
 @import './layout/_base';
+@import './layout/_mixins';
 
 $red: #E53935;
 $orange: #FB8C00;

client/scss/layout/_content.scss

@@ -110,6 +110,15 @@ p code {
 
 .card-header {
 	background-color: $turquoise;
+
+	&.is-warning {
+		background-color: $orange;
+	}
+
+	&.is-danger {
+		background-color: $red;
+	}
+
 }
 
 .card-header-title {
@@ -122,3 +131,7 @@ p code {
 .modal-content .card-footer-item {
 	font-weight: 500;
 }
+
+.modal-content .card-footer-item.featured {
+	animation: flash 4s ease 0 infinite;
+}

client/scss/layout/_header.scss

@@ -3,3 +3,22 @@ h2.nav-item {
 	font-size: 150%;
 	color: $orange;
 }
+
+#notifload {
+	width: 42px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	transition: opacity .5s ease;
+
+	&::before {
+		content: " ";
+		@include spinner($orange,0.5s,24px);
+	}
+
+	&.active {
+		opacity: 1;
+	}
+
+}

client/scss/layout/_mixins.scss

@@ -0,0 +1,85 @@
+/**
+ * Clearfix
+ *
+ * @return     {string}  Clearfix attribute
+ */
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+/**
+ * Placeholder attribute for inputs
+ *
+ * @return     {string}  Placeholder attributes
+ */
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content};
+	&::-moz-placeholder {@content}
+	&:-ms-input-placeholder {@content}
+	&:placeholder-shown {@content};
+}
+
+/**
+ * Spinner element
+ *
+ * @param      {string}  $color             - Color
+ * @param      {string}  $dur               - Animation Duration
+ * @param      {int}     $width             - Width
+ * @param      {int}     $height  [$width]  - height
+ *
+ * @return     {string}  Spinner element
+ */
+@mixin spinner($color,$dur,$width,$height:$width) {
+	width: $width;
+	height: $height;
+	border-radius: 50%;
+	box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
+	@include prefix(animation, spin $dur linear infinite);
+	@include keyframes(spin) {
+		100%{
+		 @include prefix(transform, rotate(360deg));
+		}
+	};
+}
+
+/**
+ * Prefixes for keyframes
+ *
+ * @param      {string}  $animation-name          - The animation name
+ *
+ * @return     {string}  Prefixed keyframes attributes
+ */
+@mixin keyframes($animation-name) {
+    @-webkit-keyframes #{$animation-name} {
+        @content;
+    }
+    @-moz-keyframes #{$animation-name} {
+        @content;
+    }
+    @-o-keyframes #{$animation-name} {
+        @content;
+    }  
+    @keyframes #{$animation-name} {
+        @content;
+    }
+}
+
+/**
+ * Prefix function for browser compatibility
+ *
+ * @param      {string}  $property          - Property name
+ * @param      {any}     $value             - Property value
+ *
+ * @return     {string}  Prefixed attributes
+ */
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+     -moz-#{$property}: #{$value};
+      -ms-#{$property}: #{$value};
+       -o-#{$property}: #{$value};
+          #{$property}: #{$value};
+}

gulpfile.js

@@ -101,6 +101,7 @@ gulp.task("scripts-app", function () {
 	return gulp.src(paths.scriptapps)
 	.pipe(plumber())
 	.pipe(concat('app.js'))
+	.pipe(include({ extensions: "js" }))
 	.pipe(babel())
 	.pipe(uglify())
 	.pipe(plumber.stop())

views/common/header.pug

@@ -16,6 +16,7 @@ nav.nav.has-shadow.stickyscroll
 		span
 	.nav-right.nav-menu
 		block rootNavRight
+			i.nav-item#notifload
 			a.nav-item(href='#')
 				| History
 			a.nav-item(href='#')

views/pages/edit.pug

@@ -4,21 +4,37 @@ block rootNavCenter
 	h2.nav-item= pageData.meta.title
 
 block rootNavRight
+	i.nav-item#notifload
 	a.nav-item(href='#')
 		| History
 	a.nav-item(href='#')
 		| Source
 	span.nav-item
-		a.button.is-danger(href='/' + pageData.meta.path)
+		a.button.is-warning.btn-edit-discard
 			span.icon
 				i.fa.fa-times
 			span Discard
-		a.button.is-success(href='#', onclick='$(".modal").addClass("is-active");')
+		a.button.is-success.btn-edit-save
 			span.icon
 				i.fa.fa-check
 			span Save Changes
 
 block content
 
+	#page-type-edit
 		section.section.is-small
 			textarea#mk-editor= pageData.markdown
+
+	.modal#modal-edit-discard
+		.modal-background
+		.modal-container
+			.modal-content
+				.card.is-fullwidth
+					header.card-header.is-warning
+						p.card-header-title Discard?
+					.card-content
+						.content
+							| Are you sure you want to leave this page and loose any modifications?
+					footer.card-footer
+						a.card-footer-item.btn-edit-discard Stay on page
+						a.card-footer-item(href='/' + pageData.meta.path) Discard

views/pages/view.pug

@@ -9,6 +9,7 @@ mixin tocMenu(ti)
 					+tocMenu(node.nodes)
 
 block rootNavRight
+	i.nav-item#notifload
 	a.nav-item(href='#')
 		| History
 	a.nav-item(href='#')
@@ -25,6 +26,7 @@ block rootNavRight
 
 block content
 
+	#page-type-view
 		section.section
 			.container.is-fluid
 				.columns
@@ -73,4 +75,4 @@ block content
 								input.input(type='text', placeholder='/path', value='/storage/new-page')
 					footer.card-footer
 						a.card-footer-item(onclick='$(".modal").removeClass("is-active");') Discard
-						a.card-footer-item Create
+						a.card-footer-item.featured Create