Merge branch 'release/0.3.0'

Classes/Application/ImageController.ts

@@ -1,6 +1,8 @@
 /// <reference path="../Domain/Model/Page.ts"/>
 /// <reference path="../Domain/Model/Image.ts"/>
+/// <reference path="../Domain/Model/Title.ts"/>
 /// <reference path="../Domain/Model/PhotoBook.ts"/>
+/// <reference path="../Domain/Model/Element.ts"/>
 
 /// <reference path="../Service/FileService.ts"/>
 
@@ -16,10 +18,15 @@ module app.application {
 
 		constructor($scope, $location) {
 			this.scope = $scope;
+			this.scope.currentElement = null;
 
+			this.scope.getTypeName = this.getTypeName.bind(this);
+			this.scope.setCurrentElement = this.setCurrentElement.bind(this);
 			this.scope.min = this.min.bind(this);
 			this.scope.isGroupStartPage = this.isGroupStartPage.bind(this);
-			this.scope.setVisiblePages = this.setVisiblePages.bind(this);
+			this.scope.getGroupEndPage = this.getGroupEndPage.bind(this);
+			this.scope.setVisiblePagesStart = this.setVisiblePagesStart.bind(this);
+			this.scope.isPageInGroup = this.isPageInGroup.bind(this);
 			this.scope.getNumberList = this.getNumberList.bind(this);
 			this.scope.save = this.save.bind(this);
 			this.scope.loadFile = this.loadFile.bind(this);
@@ -30,24 +37,52 @@ module app.application {
 			this.scope.availableLayouts = Object.keys(configuration.LayoutConfiguration.layouts);
 			this.scope.layouts = configuration.LayoutConfiguration.layouts;
 			this.scope.pagesPerGroup = 4;
+			this.scope.numberOfTitlePages = 1;
 			this.scope.visiblePagesStart = 0;
+			window['currentElement'] = this.scope.currentElement;
+
+			console.log(this.scope);
 
 			// prevent user from closing the browser accidentially
 			window.onbeforeunload = function() { return true; };
 		}
 
+		// TODO: improove
+		getTypeName(element: any): string {
+			if(element instanceof app.domain.model.Page) { return 'Page'; }
+			if(element instanceof app.domain.model.Image) { return 'Image'; }
+			if(element instanceof app.domain.model.Title) { return 'Title'; }
+			if(element instanceof app.domain.model.PhotoBook) { return 'PhotoBook'; }
+			return null;
+		}
+
+		setCurrentElement(element: app.domain.model.Element): void {
+			this.scope.currentElement = element;
+		}
 
 		min(num1: number, num2: number): number {
 			return Math.min(num1, num2);
 		}
 
 		isGroupStartPage(page: number): boolean {
-			return page % this.scope.pagesPerGroup == 0;
+			return page == 0 || (page - this.scope.numberOfTitlePages) % this.scope.pagesPerGroup == 0;
+		}
+
+		getGroupEndPage(groupStartPage: number): number {
+			if(groupStartPage > this.scope.numberOfTitlePages-1) {
+				return groupStartPage + this.scope.pagesPerGroup-1;
+			} else {
+				return this.scope.numberOfTitlePages-1;
+			}
 		}
 
-		setVisiblePages(startPage: number): void {
+		setVisiblePagesStart(startPage: number): void {
 			this.scope.visiblePagesStart = startPage;
 		}
+
+		isPageInGroup(page) {
+			return page >= this.scope.visiblePagesStart && page <= this.getGroupEndPage(this.scope.visiblePagesStart);
+		}
 
 		getNumberList(start:number = 0, end:number = 10, step:number = 1): number[] {
 			var numbers:number[] = [];

Classes/Domain/Model/Element.ts

@@ -0,0 +1,7 @@
+module app.domain.model {
+	'use strict';
+
+	export interface Element {
+		importFromObject(object: any):void;
+	}
+}

Classes/Domain/Model/Image.ts

@@ -1,7 +1,9 @@
+/// <reference path="../../Domain/Model/Element.ts"/>
+
 module app.domain.model {
 	'use strict';
 
-	export class Image {
+	export class Image implements app.domain.model.Element {
 		path: string;
 		properties: Object;
 		caption: string;

Classes/Domain/Model/Page.ts

@@ -3,10 +3,12 @@
 /// <reference path="../../Domain/Model/PhotoBook.ts"/>
 /// <reference path="../../Domain/Model/RelativePosition.ts"/>
 
+/// <reference path="../../Domain/Model/Element.ts"/>
+
 module app.domain.model {
 	'use strict';
 
-	export class Page {
+	export class Page implements app.domain.model.Element {
 		properties: Object;
 		images: Image[];
 		titles: Title[];

Classes/Domain/Model/PhotoBook.ts

@@ -28,6 +28,13 @@ module app.domain.model {
 			}
 		}
 
+		public createPageAfter(page:Page, numberOfLines: number = 2):void {
+			var pos: number = this.pages.indexOf(page);
+			if(pos >= 0) {
+				this.createPage(numberOfLines, pos+1);
+			}
+		}
+
 		public createPage(numberOfLines: number = 2, position: number = 0):void {
 			var page = new Page(numberOfLines);
 			page.setPhotobook(this);

Classes/Domain/Model/Title.ts

@@ -1,7 +1,9 @@
+/// <reference path="../../Domain/Model/Element.ts"/>
+
 module app.domain.model {
 	'use strict';
 
-	export class Title {
+	export class Title implements app.domain.model.Element {
 		value: string;
 		properties: Object;
 

Classes/Service/FileService.ts

@@ -10,7 +10,7 @@ module app.service.FileService {
 	export function readFile(file, callback) {
 		if (file) {
 			var reader = new FileReader();
-			reader.onload = function(event) {
+			reader.onload = function(event: any) {
 				callback(event.target.result);
 			};
 			reader.readAsText(file);
@@ -31,7 +31,7 @@ module app.service.FileService {
 			if (file) {
 				var reader = new FileReader();
 				(function(i) {
-					reader.onload = function(event) {
+					reader.onload = function(event: any) {
 						fileContents.push(event.target.result);
 						if(i == (files.length-1)) {
 							callback(fileContents);

README.md

@@ -52,3 +52,4 @@ Version | 			| Dependencies							| Features
 ---		|---		|---									|---
 0.1		| Alpha 1	| &bull; node: 10.25<br />&bull; tsc: 1.0<br />&bull; lessc: 2.2		| &bull; insert images & titles<br />&bull; save & load files
 0.2 	| Alpha 2	| &bull; node: 10.25<br />&bull; tsc: 1.0<br />&bull; lessc: 2.2		| &bull; add parts for better performance<br />&bull; refactor code
+0.3 	| Alpha 3	| &bull; node: 10.25<br />&bull; tsc: 1.0<br />&bull; lessc: 2.2		| &bull; add title page before parts<br />&bull; refactor code

Resources/Styles/app.less

@@ -2,11 +2,21 @@
 @elementMargin: 0.5em;
 
 * {
-	.box-sizing(border-box);
+	.box-sizing(border-box); margin: 0; padding: 0; text-indent: 0; color: black;
+	font: Ubuntu, Arial, Helvetica, sans-serif;
 }
-
+html, body { height: 100%; overflow: hidden; }
 body { padding-top: 2cm; font-family: Ubuntu, Arial, Helvetica, sans-serif; }
 
+.view { height: 100%; overflow: hidden; }
+
+.applicationFrame {
+	.flex; .flex-flow(row); height: 100%; overflow: hidden;
+
+	.sidebar { width: 20%; }
+	.main { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
+}
+
 /* templates */
 .listElement {
 	padding: @elementPadding;

Resources/Styles/controls.less

@@ -16,6 +16,49 @@
 	input[type=text] { color: black; }
 }
 
+.sidebar.controls {
+	background: silver; padding: 0;
+	.flex; .flex-flow(column);
+
+	.controlsSection {
+		.flex; .flex-flow(column);
+
+		h3 { padding: 0.25cm; background: gray; color: white;
+			.icon { margin-right: 0.25cm; color: #FFF; }
+		}
+		.controlsSectionContent {
+			&.buttonGrid {
+				.flex; .flex-wrap(wrap);
+
+				.control {
+					button, input, select, textarea { width: 100%; display: inline-block;
+						.icon { display: block; }
+					}
+					&[data-columns="2"] {
+						.flex; .flex-flow(row);
+
+						label, button, input, select, textarea { width: 50%; }
+					}
+					&[data-columns="3"] {
+						.flex; .flex-flow(row);
+
+						label { width: 33%; }
+						button, input, select, textarea { width: 66%; }
+					}
+				}
+				&[data-columns="3"] .control { width: 33%;
+					&[data-size="double"] { width: 66%; }
+					&[data-size="tribble"] { width: 100%; }
+				}
+				&[data-columns="2"] .control { width: 50%;
+					&[data-size="double"] { width: 100%; }
+					&[data-size="tribble"] { width: 100%; }
+				}
+			}
+		}
+	}
+}
+
 .welcomeControls {
 	opacity: 1; background: none; padding: 2cm;
 	display: flex; justify-content: space-around;
@@ -48,7 +91,7 @@
 }
 
 .pageContentControls {
-	position: absolute; box-shadow: 0 0 0.5cm black; border-radius: 0.1cm; width: 27.7cm;
+	/*position: absolute; box-shadow: 0 0 0.5cm black; border-radius: 0.1cm; width: 27.7cm;*/
 
 	.controlsBox {
 		padding: 0; margin: 0; margin-right: 0.2cm; border: 1px solid rgb(50,50,50);

Resources/Styles/crossBrowser.less

@@ -1,4 +1,4 @@
-.box-sizing (@sizing: border-box) {
+.box-sizing(@sizing: border-box) {
 	-khtml-box-sizing: @sizing;
 	-moz-box-sizing: @sizing;
 	-ms-box-sizing: @sizing;
@@ -26,39 +26,70 @@
 }
 
 .flex {
-	display: -webkit-flex;
-	display: -moz-flex;
-	display: -ms-flex;
-	display: flex;
+	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+	display: -ms-flexbox;      /* TWEENER - IE 10 */
+	display: -webkit-flex;     /* NEW - Chrome */
+	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
-.flex-flow (@flexFlow:column) {
+.flex-flow(@flexFlow:column) {
 	-moz-flex-flow: @flexFlow;
 	-ms-flex-flow: @flexFlow;
 	-webkit-flex-flow: @flexFlow;
 	flex-direction: @flexFlow;
 	flex-flow: @flexFlow;
 }
-.justify-content (@justify: space-between) {
+.justify-content(@justify: space-between) {
 	-khtml-justify-content: @justify;
 	-moz-justify-content: @justify;
 	-ms-justify-content: @justify;
 	-o-justify-content: @justify;
 	-webkit-justify-content: @justify;
 	justify-content: @justify;
 }
-.align-items (@align: center) {
+.align-items(@align: center) {
 	-khtml-align-items: @align;
 	-moz-align-items: @align;
 	-ms-align-items: @align;
 	-o-align-items: @align;
 	-webkit-align-items: @align;
 	align-items: @align;
 }
-.align-content (@align: stretch) {
+.align-content(@align: stretch) {
 	-khtml-align-items: @align;
 	-moz-align-items: @align;
 	-ms-align-items: @align;
 	-o-align-items: @align;
 	-webkit-align-items: @align;
 	align-items: @align;
+}
+.column-count(@count) {
+	-webkit-column-count: @count;
+	-moz-column-count: @count;
+	-ms-column-count: @count;
+	column-count: @count;
+}
+.column-gap(@gap) {
+	-webkit-column-gap: @gap;
+	-moz-column-gap: @gap;
+	-ms-column-gap: @gap;
+	column-gap: @gap;
+}
+.flex-grow(@growing) {
+	-webkit-flex-grow: @growing;
+	-moz-flex-grow: @growing;
+	-ms-flex-grow: @growing;
+	flex-grow: @growing;
+}
+.align-self(@alignment) {
+	-webkit-align-self: @alignment;
+	-moz-align-self: @alignment;
+	-ms-align-self: @alignment;
+	align-self: @alignment;
+}
+.flex-wrap(@wrap) {
+	-webkit-flex-wrap: @wrap;
+	-moz-flex-wrap: @wrap;
+	-ms-flex-wrap: @wrap;
+	flex-wrap: @wrap;
 }

Resources/Styles/form.less

@@ -19,5 +19,5 @@ span.inputFileWrapper {
 }
 
 textarea.dragArea {
-	width: 4cm; border: 2px dashed gray; background: white; padding: 0.1cm; text-align: center; height: 2.35em;
+	border: 2px dashed gray; background: white; padding: 0.1cm; text-align: center; height: 2cm;
 }

Resources/Styles/pages.less

@@ -1,18 +1,15 @@
-* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
-	margin: 0; padding: 0; text-indent: 0; color: black;
-	font: Ubuntu, Arial, Helvetica, sans-serif;
-}
-body { background: silver; }
-
 .page {
 	background: white; box-shadow: 0 0 0.5cm gray; width: 29.7cm; height: 21cm; padding: 1cm; margin: 0.5cm;
 	margin-bottom: 2.5cm; overflow: hidden;
+	position: relative;
 
 	> .content { width: 100%; height: 100%; background: rgb(245, 245, 245);
 		display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
 		align-content: space-between;
 		overflow: hidden;
 	}
+
+	&[data-ng-current="true"] { outline: 0.1cm solid cornflowerblue; }
 }
 
 .content .imageContainer { display: inline-flex; background-position: center center;