editor toolbar position change done

bower.json

@@ -19,7 +19,7 @@
     "angular": "^1.5.5",
     "angular-material": "^1.0.8",
     "angular-ui-router": "^0.2.18",
-    "textAngular": "^1.5.1",
-    "material-design-icons": "^2.2.3"
+    "material-design-icons": "^2.2.3",
+    "angular-medium-editor": "^1.1.1"
   }
 }

gulpfile.js

@@ -22,7 +22,7 @@ gulp.task('server', function () {
 gulp.task('styles', function(){
 	return sass([
 			'./bower_components/angular-material/angular-material.scss',
-			'./src/scss/custom.scss'
+			'./src/scss/**/*.scss'
 		], {sourcemap: true})
 		.on('error', sass.logError)
 		.pipe(concat('all.css'))
@@ -35,7 +35,7 @@ gulp.task('styles', function(){
 		})
 });
 
-gulp.task('scripts', ['server'], function(){
+gulp.task('scripts', function(){
     return browserify({
     	entries: './src/js/app.js',
     	debug: true
@@ -50,9 +50,20 @@ gulp.task('scripts', ['server'], function(){
         .pipe(gulp.dest("dist/js"));
 });
 
+gulp.task('images', function() {
+	return gulp.src("./bower_components/material-design-icons/**/*.svg")
+		.pipe(gulp.dest("dist/imgs"))
+});
+
+gulp.task('templates', function() {
+	return gulp.src("./src/templates/**/*.html")
+		.pipe(gulp.dest("dist/templates"))
+});
+
 gulp.task('watch', function() {
 	gulp.watch('./src/js/**/*.js', ['scripts']);
 	gulp.watch('./src/scss/**/*.scss', ['styles']);
+	gulp.watch('./src/templates/**/*.html', ['templates']);
 });
 
-gulp.task('default', ['watch','scripts', 'styles']);
+gulp.task('default', ['watch','scripts', 'styles', 'templates', 'server']);

jwt.js

@@ -0,0 +1,20 @@
+'use strict';
+
+let jwt = require('jwt-simple');
+
+let payload = {
+  "d": {
+    "uid": "SALES_AGENT",
+    "isAdmin": true
+  },
+  "v": 0,
+  // "iat": (new Date()).getTime()/1000
+  "iat": 1462700502
+};
+
+let secret = 'B7ioKnRoaf6ORCU4p8qUeAETTVcqBVykYIbeSEpF';
+
+var token = jwt.encode(payload, secret);
+
+var decoded = jwt.decode(token, secret);
+console.log(decoded, token);

package.json

@@ -17,13 +17,13 @@
   },
   "homepage": "https://github.com/wishabhilash/ap_frontend#readme",
   "dependencies": {
-    "fs": "0.0.2",
     "koa": "^1.2.0",
     "koa-router": "^5.4.0",
     "koa-static-folder": "^0.1.6"
   },
   "devDependencies": {
     "browserify": "^13.0.0",
+    "browserify-shim": "^3.8.12",
     "del": "^2.2.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",

server.js

@@ -14,12 +14,11 @@ var render = function(src) {
   });
 }
 
-router.get('/', function * () {
-	this.body = yield render(__dirname + "/src/templates/index.html");
+router.get('/*', function * () {
+	this.body = yield render(__dirname + "/dist/templates/index.html");
 });
 
 app.use(serve('./dist'));
-app.use(serve('./src'));
 app.use(router.routes());
 app.use(router.allowedMethods());
 

src/js/app.js

@@ -1,35 +1,29 @@
 'use strict';
 
 require('angular');
-
 require('angular-ui-router');
 require('./controllers');
+require('./directives');
 
 require('angular-animate');
 require('angular-aria');
 require('angular-messages');
 require('angular-material');
-// console.log(controllers.name);
 
 
 var app = angular.module('poem', [
 	'ui.router',
 	'poem.controller',
 	'ngMaterial',
-	'ngMessages'
-]).run(function($state) {
-	"ngInject";
-	console.log('running app');
-
-	$state.go('wall');
-
-});
+	'ngMessages',
+	'poem.directives'
+]);
 
 app.config(
 	function($stateProvider, $urlRouterProvider, $locationProvider) {
 		"ngInject";
 
-		$urlRouterProvider.otherwise('/index');
+		$urlRouterProvider.otherwise('/');
 
 		$locationProvider.html5Mode({
 			enabled: true,

src/js/controllers/bookmarks.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = function ($scope) {
+	"ngInject";
+	$scope.times = function(num) {
+		return new Array(num);
+	}
+
+}

src/js/controllers/routes.js

@@ -19,5 +19,11 @@ module.exports = function($stateProvider, $urlRouterProvider) {
 		url: '/create',
 		templateUrl: '/src/templates/create.html',
 		controller: 'poem.controller.create'
+	})
+
+	.state('bookmarks', {
+		url: '/bookmarks',
+		templateUrl: '/src/templates/bookmarks.html',
+		controller: 'poem.controller.bookmarks'
 	});
 }

src/js/directives/editor.js

@@ -0,0 +1,155 @@
+"use strict";
+
+module.exports = function() {
+
+	let controller = function($scope, $document) {
+		"ngInject";
+		let editor = this;
+		const TOOLBAR_DEFAULT_POS = {x: -99999, y: -99999};
+
+		$scope.toggleToolbarOnTextSelect = toggleToolbarOnTextSelect;
+		editor.makeBold = makeBold;
+		editor.makeItalic = makeItalic;
+		editor.alignLeft = alignLeft;
+		editor.alignRight = alignRight;
+		editor.alignCenter = alignCenter;
+		editor.showEditorTools = showEditorTools;
+		editor.editorToolPosition = {
+			x: TOOLBAR_DEFAULT_POS.x,
+			y: TOOLBAR_DEFAULT_POS.y
+		};
+
+
+		function save() {
+
+		}
+
+		function toggleToolbarOnTextSelect($event) {
+			var text = "";
+			if (window.getSelection) {
+				text = window.getSelection().toString();
+			} else if (document.selection && document.selection.type != "Control") {
+				text = document.selection.createRange().text;
+			}
+			if(text.length) {
+				editor.showEditorTools(true);
+			} else {
+				editor.showEditorTools(false);
+			}
+		}
+
+		function showEditorTools(flag) {
+			let coords = null;
+			if (!flag) {
+				coords = {
+					x: TOOLBAR_DEFAULT_POS.x,
+					y: TOOLBAR_DEFAULT_POS.y
+				}
+			} else {
+				coords = getSelectionCoords();
+			}
+			editor.editorToolPosition = {
+				x: coords.x,
+				y: coords.y
+			}
+		}
+
+		function getToolbarWidth() {
+			return angular.element(document.querySelectorAll(".simple-editor-toolbar")[0])[0].clientWidth
+		}
+
+		function getSelectionCoords() {
+			var selection = window.getSelection();
+			var range = selection.getRangeAt(0);
+			var boundary = range.getBoundingClientRect();
+			return {
+				x: (boundary.left + boundary.right)/2 - getToolbarWidth()/2,
+				y: boundary.top - 45 + window.pageYOffset
+			};
+		}
+
+		// function _getSelectionCoords(win) {
+		// 	win = win || window;
+		// 	var doc = win.document;
+		// 	var sel = doc.selection, range, rects, rect;
+		// 	var x = 0, y = 0;
+		// 	if (sel) {
+		// 		if (sel.type != "Control") {
+		// 			range = sel.createRange();
+		// 			range.collapse(true);
+		// 			x = range.boundingLeft;
+		// 			y = range.boundingTop;
+		// 		}
+		// 	} else if (win.getSelection) {
+		// 		sel = win.getSelection();
+		// 		if (sel.rangeCount) {
+		// 			range = sel.getRangeAt(0).cloneRange();
+		// 			if (range.getClientRects) {
+		// 				range.collapse(true);
+		// 				rects = range.getClientRects();
+		// 				if (rects.length > 0) {
+		// 					rect = rects[0];
+		// 				}
+		// 				x = rect.left;
+		// 				y = rect.top;
+		// 			}
+		// 			if (x == 0 && y == 0) {
+		// 				var span = doc.createElement("span");
+		// 				if (span.getClientRects) {
+		// 					span.appendChild( doc.createTextNode("\u200b") );
+		// 					range.insertNode(span);
+		// 					rect = span.getClientRects()[0];
+		// 					x = rect.left;
+		// 					y = rect.top;
+		// 					var spanParent = span.parentNode;
+		// 					spanParent.removeChild(span);
+
+		// 					spanParent.normalize();
+		// 				}
+		// 			}
+		// 		}
+		// 	}
+		// 	return { x: x, y: y };
+		// }
+
+		function makeBold() {
+			document.execCommand('bold', false, '');
+		}
+
+		function makeItalic() {
+			document.execCommand('italic', false, '');
+		}
+
+		function alignLeft() {
+			document.execCommand('justifyLeft', false, '');
+			toggleToolbarOnTextSelect();
+		}
+
+		function alignRight() {
+			document.execCommand('justifyRight', false, '');
+			toggleToolbarOnTextSelect();
+		}
+
+		function alignCenter() {
+			document.execCommand('justifyCenter', false, '');
+			toggleToolbarOnTextSelect();
+		}
+
+		function makeLink() {
+
+		}
+
+		function makeHeader() {
+
+		}
+
+	};
+
+	return {
+		restrict: 'E',
+		controller: controller,
+		controllerAs: 'editor',
+		templateUrl: "./dist/templates/simple-editor-toolbar.html"
+	}
+}
+

src/js/directives/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var module = 'poem.directives';
+
+angular.module(module, [])
+	.directive('simpleEditor', require('./editor'));

src/scss/custom.scss

@@ -31,4 +31,8 @@ $background: #E9F7F9;
 	direction: ltr;
 	-webkit-font-feature-settings: 'liga';
 	-webkit-font-smoothing: antialiased;
+}
+
+md-content {
+	position: static !important;
 }

src/scss/simple-editor.scss

@@ -0,0 +1,45 @@
+simple-editor {
+	[contenteditable="true"]:active, [contenteditable="true"]:focus {
+		border:none;
+		outline:none;
+	}
+
+	// [contenteditable=true]:empty:before {
+	// 	content: attr(placeholder);
+	// 	display: block; /* For Firefox */
+	// }
+
+	.simple-editor-heading {
+		padding: 20px 10px;
+		font-size: 25px;
+		text-align: center;
+	}
+
+	.simple-editor-toolbar {
+		background-color: rgba(256,256,256,0.8);
+		position: absolute;
+		border-radius: 3px;
+		border: #dadada 1px solid;
+		z-index: 1;
+
+		button {
+			min-width: 50px;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	md-card {
+		// position: relative;
+		height: 100%;
+		outline: none;
+
+		md-card-content {
+			font-size: 18px;
+			height: 100%;
+			line-height: 150%;
+		}
+	}
+
+
+
+}