Unify/application/demo/page/news.page.js

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" );
	
	}


}