First commit

application/demo/comment/comment.body.js

@@ -0,0 +1,11 @@
+
+
+import column 	from '/unify/column.js';
+
+
+export default class body extends column {
+
+}
+
+
+

application/demo/comment/comment.js

@@ -0,0 +1,22 @@
+
+import table		from '/unify/table.js';
+
+import user			from '/user/user.js';
+
+import body			from './comment.body.js';
+
+import title		from './comment.title.js';
+
+
+export default class comment extends table{
+
+	author				= new user();
+	
+	title				= new title();
+
+	body				= new body();
+	
+	flexDirection		= "column";
+
+}
+

application/demo/comment/comment.title.js

@@ -0,0 +1,40 @@
+
+
+import column 	from '/unify/column.js';
+
+
+export default class title extends column {
+
+	padding			= 20;
+
+	color			= "black";
+	
+	label			= "title";
+	
+	useCustomElement	= true;
+
+	
+	async keyup( event ){
+		
+		this.value = event.target.value;
+
+		this.animate(150, 400, function( value ){
+		
+			this.height = value;
+		
+		})
+
+		var result = await this.socketManager.get( "column", "update", this, "keyup" );
+
+	}
+
+	serverKeyup( object ) {
+
+		this.value = object.value;
+
+	}
+
+}
+
+
+

application/demo/comment/comments.messages.js

@@ -0,0 +1,48 @@
+
+import renderCollection				from '/unify/renderCollection.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+import OR							from '/unify/sql/OR.js';
+
+import AND							from '/unify/sql/AND.js';
+	
+import LIKE							from '/unify/sql/LIKE.js';
+
+
+export default class commentsMessages extends renderCollection { 
+
+	flexFlow		= "column";
+
+	direction		= "desc";
+
+	width			= "-webkit-fill-available";
+
+	marginTop		= 20;
+
+	debug			= true;
+
+	node async search( value ) {
+
+		var filter 			= this.getFilter();
+
+		filter.search 		= OR( LIKE( filter.body, value ), LIKE( filter.title, value ) );
+		
+		filter.direction 	= "desc";
+
+	}
+
+	permission() {
+
+		this.allow( groups.visitor, "READ" );
+	
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+
+		
+
+	}
+
+}

application/demo/comment/create/comment.create.author.js

@@ -0,0 +1,8 @@
+
+import user				from '/user/user.js';
+
+export default class commentEditAuthor extends user{
+	
+	display = 	"none";
+
+}

application/demo/comment/create/comment.create.body.js

@@ -0,0 +1,16 @@
+
+
+import commentBody 	from '../comment.body.js';
+
+import textarea 	from '/elements/textarea.js';
+
+
+export default class commentEditBody extends commentBody, textarea{
+	
+	useCustomElement 			= true;
+
+    height						= "97px";
+
+    placeholder					= "Message";
+
+}

application/demo/comment/create/comment.create.js

@@ -0,0 +1,103 @@
+
+import comment 					from '../comment.js';
+
+import saveButton 				from './comment.saveButton.js';
+
+import userLabel 				from './comment.userLabel.js';
+
+import commentEditTitle			from './comment.create.title.js';
+
+import commentEditBody			from './comment.create.body.js';
+
+import commentEditAuthor		from './comment.create.author.js';
+
+import header	 				from '/elements/header.js';
+
+import collection				from '/unify/collection.js';
+
+import groups					from '/user/group/user.group.permission.js';
+
+
+
+export default class createComment extends comment{
+
+	display			= "flex";
+
+	body 			= new commentEditBody();
+
+	saveButton 		= new saveButton();
+
+	title 			= false;
+
+	author 			= this.user; // bug destroys the permission system
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background			= "#00000042";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffffd1";
+
+		#endif
+
+	#endif
+
+	width 			= "50vw";
+
+	debug			= true;
+
+	width			= "100%";
+
+	marginTop		= 40;
+
+
+	async create() {
+
+		this.body.value 	= "";
+
+		this.setID( false );
+
+	}
+
+	disableWRITE() {
+
+		this.hide();
+
+	}
+
+	enableWRITE() {
+
+		this.show();
+
+	}
+	
+	permission() {
+	
+		this.allow( groups.member, "WRITE" );
+
+		this.allow( groups.admin, "WRITE" );
+
+	}
+
+}
+
+

application/demo/comment/create/comment.create.title.js

@@ -0,0 +1,8 @@
+
+
+import commentTitle 	from '../comment.title.js';
+
+
+export default class commentEditTitle extends commentTitle{
+
+}

application/demo/comment/create/comment.saveButton.js

@@ -0,0 +1,29 @@
+
+import button 			from '/elements/button.js';
+
+import tools	 		from '/unify/tools.js';
+
+
+export default class saveCommentButton extends button {
+	
+	label 				= "Create comment"; 
+
+	async click( event ){
+
+		var result = await this.socketManager.get( "table", "save", this.parent );
+
+		this.parent.create();
+		
+		await this.parent.parent.commentsMessages.sync();
+
+		this.parent.parent.customElement.scrollTo( 0, this.parent.parent.customElement.scrollHeight);
+
+		console.log("laatste", this.parent.parent.customElement.scrollHeight);
+
+	}
+	
+
+}
+
+
+

application/demo/comment/create/comment.userLabel.js

@@ -0,0 +1,38 @@
+
+import input	 	from '/elements/input.js';
+
+export default class userLabel extends input{
+
+	float					= "right";
+	
+	useCustomElement		= false;
+
+	height					= 20;
+
+	float					= "right";
+
+	marginLeft				= 100;
+
+	marginTop				= 20;
+
+
+	setAuthor( author ) {
+		
+		if( author.username ) {
+		
+			this.value = "author: " + author.username.value;
+			
+		}
+	}
+
+
+	create() {
+		
+		var author = this.parent.parent.author;
+		
+		this.setAuthor( author );
+		
+	}
+
+}
+

application/demo/comment/edit/comment.deleteButton.js

@@ -0,0 +1,37 @@
+
+import button 		from '/elements/button.js';
+
+export default class deleteButton extends button {
+
+	label				= "Delete";
+
+	#ifdef ANDROID
+
+		fontSize	= 12;
+
+		width		= "auto"
+
+		height		= "auto"
+		
+	#endif
+
+	async click() {
+
+		var sure = confirm("Are you sure you want to delete this Post");
+
+		if( sure ) {
+
+			this.parent.parent.delete();
+			
+			this.parent.parent.remove();
+
+		}
+	}
+}
+
+
+
+
+
+
+

application/demo/comment/edit/comment.edit.author.js

@@ -0,0 +1,10 @@
+
+
+import user				from '/user/user.js';
+
+
+export default class commentEditAuthor extends user{
+	
+	display = 	"none";
+
+}

application/demo/comment/edit/comment.edit.body.js

@@ -0,0 +1,109 @@
+
+import commentBody 	from '../comment.body.js';
+
+import textarea 	from '/elements/textarea.js';
+
+import document 	from '/unify/document.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+
+export default class commentEditBody extends  commentBody, flexbox{
+
+	customElement 			= document.createElement("textarea");
+	
+	useCustomElement		= true;
+
+	width					= "-webkit-fill-available"
+
+	padding					= 20;
+
+
+	#ifdef MACOS
+
+	#ifdef LIGHT
+
+		background			= "white";
+
+		color				= "black";
+
+		borderRadius		= 12;
+
+		margin				= 6;
+
+	#endif
+
+
+	#ifdef DARK
+
+		background		= "#282828!important";
+
+
+		//color			= "white";
+
+	#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background			= "none";
+
+			color				= "black";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#202020cc";
+
+			borderRadius		= 12;
+
+		#endif
+
+		margin				= 16;
+
+	#endif
+
+
+
+
+
+	async keyup( event ){
+
+		this.value = event.target.value;
+
+		var result = await this.socketManager.get( "column", "update", this, "keyup" );
+
+	}
+
+
+	create() {
+
+		this.deactivateTextarea()
+
+	}
+
+	activateTextarea() {
+
+		this.useCustomElement	= true;
+
+	}
+
+	deactivateTextarea() {
+
+		this.useCustomElement	= false;
+
+
+	}
+
+	useCustomElement 		= false;
+
+	fontSize				= 14;
+
+	//color	= "red";
+
+}

application/demo/comment/edit/comment.edit.js

@@ -0,0 +1,127 @@
+
+import comment 					from '../comment.js';
+
+import saveButton 				from './comment.saveButton.js';
+
+import commentEditTitle			from './comment.edit.title.js';
+
+import commentEditBody			from './comment.edit.body.js';
+
+import commentEditAuthor		from './comment.edit.author.js';
+
+import header	 				from '/elements/header.js';
+
+import collection				from '/unify/collection.js';
+
+import userLabel 				from './comment.userLabel.js';
+
+import deleteButton 			from './comment.deleteButton.js';
+
+import editButton 				from './comment.editButton.js';
+
+import information				from './comment.information.js';
+
+
+
+export default class editComment extends comment{
+
+
+
+
+	layers			= 1;
+
+	display			= "flex";
+
+	debug			= true;
+
+	flexFlow		= "column";
+
+	gridTemplate	=	"	'_information		' 	" +
+			    		"	'body						'			" +
+			    		"	'body  						' 			" +
+			    		"	'saveButton  			' 	";
+
+
+	_information 		= new information();
+
+	body 				= new commentEditBody();
+
+	title 				= new commentEditTitle();
+
+	saveButton 			= new saveButton();
+
+	
+
+
+	width				= "-webkit-fill-available";
+
+	#ifdef ANDROID
+
+		width			= "100vw"
+
+		borderRadius = 18
+
+		margin		 = 4
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+
+	create() {
+
+		this.title.hide();
+
+		this.author.disable = true;
+
+		if( !this.id ) {
+			
+			this.body.useCustomElement = true;
+			
+		}
+
+	}
+
+	enableWRITE() {
+		
+		this._information._editButton.show();
+	
+	}
+	
+	disableWRITE() {
+
+		this._information._editButton.hide();
+	
+		this.body.useCustomElement = false;
+
+		this.saveButton.hide();
+
+	}
+
+	enableDELETE() {
+		
+		this._information._deleteButton.show();
+
+	}
+	
+	disableDELETE() {
+	
+		this._information._deleteButton.hide();
+
+	}
+	
+	permission() {
+	
+		this.allow( this.author, "WRITE" );
+		this.allow( this.author, "DELETE" );
+		
+	}
+	
+}
+
+

application/demo/comment/edit/comment.edit.title.js

@@ -0,0 +1,31 @@
+
+
+import commentTitle 	from '../comment.title.js';
+
+
+export default class commentEditTitle extends commentTitle{
+
+
+	useCustomElement 		= false;
+
+	borderLeft				= "solid 1px #faebd7";
+
+	borderRight				= "solid 1px #faebd7";
+
+	enableInput() {
+
+		this.background = "#373b44";
+		
+		this.useCustomElement = true;
+
+	}
+
+	disableInput() {
+
+		this.background = "white";
+
+		this.useCustomElement = false;
+
+	}
+
+}

application/demo/comment/edit/comment.editButton.js

@@ -0,0 +1,35 @@
+
+import button 		from '/elements/button.js';
+
+export default class editButton extends button{
+
+	label				= "Edit";
+
+	#ifdef ANDROID
+
+		fontSize	= 12;
+
+		width		= "auto"
+
+		height		= "auto"
+		
+	#endif
+
+	async click() {
+		
+		this.parent.parent.body.activateTextarea();
+
+		this.parent.parent.saveButton.show();
+
+		this.hide();
+
+	}
+
+}
+
+
+
+
+
+
+

application/demo/comment/edit/comment.information.js

@@ -0,0 +1,70 @@
+
+import userLabel 				from './comment.userLabel.js';
+
+import deleteButton 			from './comment.deleteButton.js';
+
+import editButton 				from './comment.editButton.js';
+
+import icon 					from '/elements/icon.js';
+
+
+class chatIcon extends icon{
+
+	margin				= 12;
+
+
+}
+
+export default class information{
+
+
+	width				= "100%";
+
+	display				= "grid";
+
+	display				= "flex";
+
+	flexFlow			= "row";
+
+	layers				= 2;
+
+	borderBottom		= "#2b2c2d57";
+
+	borderTop			= "#2b2c2d57";
+
+
+	gridTemplate		=	"	'_deleteButton	_editButton' 	" +
+			    			"	'userLabel  	userLabel'		";
+
+	gridTemplateColumns	= "40px 100px";
+
+	gridTemplateRows	= "40px 60px";
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background		= "#4b94d31f";
+
+		#endif
+
+		#ifdef DARK
+
+			//background		= "rgb(48 51 56 / 86%)";
+
+		#endif
+
+	#endif
+
+
+	
+
+	_deleteButton	= new deleteButton(  );
+
+	_editButton		= new editButton( );
+
+	_userLabel		= new userLabel();
+
+	//_icon			= new chatIcon("ios-chatbubbles-outline.svg", true);
+
+}

application/demo/comment/edit/comment.saveButton.js

@@ -0,0 +1,36 @@
+
+import button 			from '/elements/button.js';
+
+import tools	 		from '/unify/tools.js';
+
+
+export default class saveEditButton extends button {
+
+	text				= "Save Message";
+
+	display				= "none";
+
+	userContract;
+
+
+	async click( event ){
+
+		var result = await this.socketManager.get( "table", "save", this, "sign" );
+		
+		this.parent.id = false;
+		
+		this.hide();
+
+		this.parent._information._editButton.show();
+
+		this.parent.body.useCustomElement = false;
+
+		//this.parent.background = "#cdf0ce";
+
+	}
+	
+
+}
+
+
+

application/demo/comment/edit/comment.userLabel.js

@@ -0,0 +1,34 @@
+
+import input	 	from '/elements/input.js';
+
+import label	 	from '/elements/label.js';
+
+export default class userLabel extends label {
+
+	float					= "left";
+	
+	fontWeight				= "bold";
+
+	padding					= "12px";
+
+	paddingLeft				= 26;
+
+	setAuthor( author ) {
+		
+		if( author.username ) {
+		
+			this.text = author.username.value;
+
+		}
+	}
+
+	create() {
+		
+		var author = this.parent.parent.author;
+		
+		this.setAuthor( author );
+		
+	}
+
+}
+