First commit

application/demo/page/news.page.backButton.js

@@ -0,0 +1,77 @@
+
+import icon						from "/elements/icon.js";
+
+export default class backButton{
+
+	text				= "<"
+
+	color				= "white"
+
+	fontWeight			= "bold"
+
+	cursor				= "pointer";
+
+	propegateEvent 		= false
+
+	transition			= "2s";
+
+	margin				= 10;
+
+	marginLeft			= 20;
+
+	fontFamily			= "unset"
+
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+		#endif
+
+		#ifdef LIGHT
+
+
+		#endif
+	
+	#endif
+
+	#ifdef MACOS
+	
+		#ifdef DARK
+
+			boxBackground		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			boxBackground		= "#ffffff";
+
+		#endif
+
+	#endif
+
+
+
+	click() {
+
+		this.stateMachine.composeState( "Home" );
+
+		this.openNewsItems();
+
+	}
+
+	state openNewsItems() {
+
+		var rightSide = this.parents("newsPages");
+
+		//rightSide.newsItemPage.marginLeft	= "0";
+
+		rightSide.newsItemPage.transform	= "translateX(0)";
+
+		rightSide.newsPage.transform		= "translateX(0)";
+
+	}
+
+}

application/demo/page/news.page.body.js

@@ -0,0 +1,57 @@
+
+import newsBody 		from '../news.body.js';
+
+import textarea 		from '/elements/textarea.js';
+
+import flexbox 			from '/elements/flexbox.js';
+
+export default class newsPageBody extends flexbox, newsBody{
+
+	padding				= 20;
+
+	width				= "-webkit-fill-available"
+	
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffff";
+
+		#endif
+	
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+
+		#endif
+	
+	#endif
+
+	#ifdef ANDROID
+
+		borderRadius = "0 0 18px 18px"
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+}

application/demo/page/news.page.edit.button.js

@@ -0,0 +1,49 @@
+
+import button						from "/elements/button.js";
+
+export default class backButton extends button{
+
+	text				= "Edit News"
+
+	color				= "white"
+
+	fontWeight			= "bold"
+
+	cursor				= "pointer";
+
+	float				= "right"
+
+	propegateEvent 		= false
+
+	transition			= "2s";
+
+	margin				= 10;
+
+	marginLeft			= 20;
+
+	fontFamily			= "unset"
+
+
+
+	click() {
+
+		this.stateMachine.composeState( "Edit" );
+
+		var rightSide	= this.parents("newsPages");
+
+		//this.parent.hide();
+
+		var newsEdit	= rightSide.newsEdit;
+
+		newsEdit.id = this.parent.id;
+
+		newsEdit.sync();
+
+		newsEdit.show();
+
+		//rightSide.newsPage.transform		= "translateX(-1200px)";
+
+	}
+
+
+}

application/demo/page/news.page.js

@@ -0,0 +1,254 @@
+
+import news 					from '../news.js';
+
+import newsPageTitle 			from './news.page.title.js';
+
+import newsPageBody				from './news.page.body.js';
+
+import groups					from '/user/group/user.group.permission.js';
+
+import commentsMessages			from '../comment/comments.messages.js';
+
+import editComment 				from '../comment/edit/comment.edit.js';
+
+import createComment 			from '../comment/create/comment.create.js';
+
+import saveButton				from './news.page.save.js';
+
+import backButton				from "./news.page.backButton.js"
+
+import editButton				from "./news.page.edit.button.js"
+
+import filler					from "/elements/filler.js";
+
+import searchComments			from "./search.comments.js";
+
+import tools					from "/unify/tools.js";
+
+
+
+
+class testDiv{
+
+	pageTitle				= new newsPageTitle();
+
+}
+
+class testSuffixes{
+
+	layers				= 1;
+
+	useCustomElement	= true;
+
+	customElement		= document.createElement("a")
+
+	text				= "visit Unify";
+
+
+
+	visitedColor		= "green";
+
+	linkColor			= "#009688"
+
+	activeColor			= "red"
+
+
+	create() {
+
+		this.element.setAttribute("href", "https://unifyjs.org")
+
+	}
+
+}
+
+
+export default class newsPage extends news{
+	
+	willChange					= "transform";
+
+	transform;
+
+	minHeight					= "100%";
+
+	transition					= "1s"
+
+
+	scrollbarWidth					= "6px";
+
+	scrollbarTrackBackground		= "#1c1d1e";
+
+	scrollbarThumbBackground		= "#404040"
+
+	scrollbarThumbBorderRadius		= "4px"
+
+	scrollbarThumbHoverBackground	= "grey";
+
+
+	#ifdef MACOS
+
+		#ifdef LIGHT
+
+			background			= "white"; 
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#282828";
+
+		#endif
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background			= "rgb(255 255 255 / 75%)";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#202020cc";
+
+		#endif
+
+	#endif
+
+
+	#ifdef ANDROID
+
+		height		= "100vh";
+
+		paddingTop	= "";
+
+		boxWidth	= "100vw";
+
+		width		= "100vw";
+
+		#ifdef LIGHT
+
+			background		= "#f2f2f2";
+
+		#endif
+
+
+	#endif
+
+
+	flexDirection		= "column"
+
+	_backButton			= new backButton();
+
+	_testDiv			= new testDiv();
+
+	body				= new newsPageBody();
+
+
+	editButton			= new editButton();
+	//testSuffixes			= new testSuffixes();
+
+	debug				= true;
+
+	width				= 600;
+
+	sizing				= "border-box";
+
+	layers				= 1;
+
+	height				= "70vh"
+
+	overflowY			= "auto"
+
+
+	searchComments		= new searchComments();
+
+	commentsMessages	= new commentsMessages( editComment, this.comments );
+
+	createComment		= new createComment( this.comments );
+
+	filler				= new filler();
+
+	async afterLoad() {
+
+		var pathName		= window.location.pathname;
+
+		var pathParts  		= pathName.split("/");
+
+		var id 				= parseFloat( pathParts[1] );
+
+
+		if( id ) {
+
+			this.stateMachine.composeState();
+
+			this.showParents();
+
+			this.show();
+
+			await this.loadPage( id )
+
+		}
+
+	}
+
+	state async loadPage( id ) {
+
+		var rightSide 	= this.parents("newsPages");
+
+		var boundBox	= this.defaultElement.getBoundingClientRect();
+
+		var width		= boundBox.width;
+		
+
+		#ifdef ANDROID
+
+			rightSide.newsItemPage.translateX	= -width;
+
+		#elif
+
+			rightSide.newsItemPage.transform	= "translateX(-600px)";
+
+			rightSide.newsPage.transform		= "translateX(-600px)";
+
+
+		#endif
+
+		this.id = id;
+
+		await this.sync();
+
+		this.createComment.create();
+
+	}
+
+	async create() {
+
+		await this.commentsMessages.sync();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member, "WRITE" );
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.visitor, "WRITE" );
+
+
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+	
+	}
+
+
+}

application/demo/page/news.page.price.js

@@ -0,0 +1,17 @@
+
+
+import newsPrice 	from '../news.price.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+export default class newsPagePrice extends newsPrice, flexbox{
+
+	useCustomElement	= false;
+
+	fontWeight			= "bold";
+
+	fontSize			= 30;
+
+	padding				= 20;
+
+}

application/demo/page/news.page.save.js

@@ -0,0 +1,16 @@
+
+
+import button 	from '/elements/button.js';
+
+export default class saveButton extends button {
+
+	label 		= "Save"; 
+
+	async click( event, object ){
+
+		var result = await this.parent.save();
+
+
+	}
+
+}

application/demo/page/news.page.title.js

@@ -0,0 +1,70 @@
+
+
+import newsTitle 	from '../news.title.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+export default class newsPageTitle extends newsTitle, flexbox{
+
+	useCustomElement	= false;
+
+	fontWeight			= "bold";
+
+	//padding				= 20;
+
+	//width				= "600px"
+
+	//boxSizing			= "border-box";
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffff";
+
+		#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			//background		= "#202020cc";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//background		= "rgb(255 255 255 / 75%)";
+
+		#endif
+	
+	#endif
+
+	#ifdef ANDROID
+
+		borderRadius = "18px 18px 0 0"
+
+		width	= "100%"
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+	fontSize			= 30;
+
+	padding				= 20;
+
+}

application/demo/page/search.comments.js

@@ -0,0 +1,28 @@
+
+import input 	from 	"/elements/input.js";
+
+
+
+
+export default class searchBar extends input {
+
+	placeholder		= "Search."
+
+
+	async keyup( event ) {
+
+		this.value = this.customElement.value;
+
+		var value 	= this.value;
+
+		console.log("search input", value);
+
+		var newsItems 	= this.parent.commentsMessages;
+
+		await newsItems.search( value );
+
+		await newsItems.sync();
+
+	}
+
+}