Welcome to Web-creation devtool!

• Test Your Theme <- link to the testing tool 🧰

Installation 💽

1. clone this repo ☁️
2. run ./init.sh 🔨
3. Enjoy! 🎉

this will ask you to create a first project ( Optional )

What you need to know ❓

This is a template that is strict to follow rules! you should first learn to use typescript and if you want to create themes with backend communication PHP is the language used.

Important

Our team will verify every Themes or Styles sended to us before deploying it to Web-creation app. If there is any errors or rule not followed the Theme/Style will be rejected with a reason

Note

If you want to create a project php ./dev/create.php and access the project created in ./dev/{ProjectName}/

You can send or Check the status of your themes and Styles in the Devlopper-zone on the app Web-creation.

Documentation 📋

Main table of contents

name	Description
Builder	window to manage the Theme/Action by the user
data	data to custom the Theme/Action managed by the user with the builder.
Theme	the bloc of code used in Web-creation app and into the compiled site [TypeScript, Html, css, php]
WebApp	Template use to create builder. and manage Events of your Theme and Action

Common methods (TypeScript)

Builder

• 💬 Description:
  • This is a window where the user can manage the Theme / Action

Builder Exemple:

code Exemple:

new dev.Action() 
/* OR */
new dev.Theme()
	.setBuilder((theme) => new ElementManager().call((self) => {
		/* Here you will create the builder */
	}));

---

Data

• 💬 Description:
  • the data is maintained to the compiled site

---

• Theme & Action have a variable data Accessed has showned

   new dev.Theme()
   	.setBuilder((theme) => new ElementManager().call(self => {
   		theme.data /* Contain the data of the theme and can be edited */
   		theme.assosiatedActions /* Array<Action> you can access data of actions related*/
   	}))
   	.addAction(new Action()
   		.setBuilder((action) => ElementManager().call((self) => {
   			action.data /* Contain the data related to the action and can be edited */
   			action.theme.data /* Contain the Theme data */
   		})
   	);

  ---

  [!WARNING] Action.data cannot Contain Class Object due to the fact that data is turned into JSON string and will crash! Theme.data can Contain Class object but will be destroyed each time the user change page or redo/undo event occure, so Theme.init_callback() must be set accordingly

---

Theme

Theme (TypeScript) 🖌️

theme typescript

• 💬 Description:
  • Is a block of code that can optionaly contain backend communication in php or purely frontend block.

---

Related features

• Builder 🔨
• Data
• WebApp.ElementManager

---

Initialise the builder with an ElementManager

	setBuilder((theme) => new ElementManager())

---

Theme (PHP) 🤖

theme php

• 💬 Description:
  • The backEnd is accessed via a class named WcBackendManager that is related with your Theme

---

Related features

---

WebApp

• 💬 Description:
  • this is the template used to build Theme in TypeScript

Note

this is a big part of the theme building so be sure to understand that is going on with ElementManager beeing the central element you must understand

---

ElementManager

ElementManager table of contents

| | name | Description | | | - | :-: | - | :-: | - | - | || Event | Event management like (click, mouseover, mouseleave, ...) || || Structure | the way you can add elements and access them || || Good practice | Good practice when using ElementManager || || Settings | set Class, style, id, placeholder, ... || || data | data storage global and local ||

---

ElementManager Event

this is how you can add event on an element represented by an ElementManager

new ElementManager().event('click', (self:ElementManager, event:Event) => void)

---

ElementManager structure

Note

this is a very important part to understand

To represent how the structure works:

• ElementManager can call a function triggered when the ElementManager is created

   	new ElementManager().call((self:ElementManager) => {
   		/* call when ElementManager is created */
   		// Code...
   	});

• The main ElementManager is containing chilrens of ElementManager

   	new ElementManager().call((self: ElementManager) => {
   		/* this way you can add ElementManager in the main and children can as well*/
   		self.add(
   			self.create('button'), // this is another instance of ElementManager
   			self.create('div').add(
   				self.create('button') // the child will get a child as well
   			),
   			/* add... */
   		);
   	});

• ElementManager object can be accessed everywhere in the structure

   new ElementManager().call((self) => {
   	self.add(
   		self.create('div').call((selfChild) => {
   			/* 
   				this will return the instance of ElementManager of 
   				the main ElementManager
   			*/ selfChild.bind('main-elementManager') 
   		}).make('child-of-main-elementManager')
   		// name the element as you wish to with make()
   	);
   	self.bind('child-of-main-elementManager') // this way you are now
   }).make('main-elementManager');

---

ElementManager Settings

Note

You can set any of the element propreities with set() but other methods are recommended

• set method:

	new ElementManager()
	// set(key, value) replace the current value of the element
	.set('placeholder', 'value of the placeholder')

• class add, remove and switch & id set and get:

	/* 
		__WC_ID__ is mendatory and will be replaced with the themeName 
		when used or compiled it resolve 
		the probleme of class name conflict or id
	*/
	new ElementManager()
		// add className if not exists
		.class('__WC_ID__className', '__WC_ID__otherClassName')
		// remove a className if exists
		.classRemove('__WC_ID__classNameToRemove')
		// switch between 2 classes 3th argument is optional 
		// but if it must be set to one of the 2 classes
		.classSwitch('__WC_ID__className1', '__WC_ID__className2', '__WC_ID__mustBeClass')
		// set the id of the element
		.id('__WC_ID__idSuffix')
		// get the id of the element
		._id()
	

• style set :

	new ElementManager()
		// set style to the element over-write if exists add if dont
		.style({width: '50px', height: '20px'})

---

Elementmanager Data

you can store data directly on the ElementManager instance

Important

you cannot put class object or reference into the data structure this will result in a crash you can store it under Theme data but will need to be reset every time, so must be properly create in Theme.InitCallback

• data can be access and set & can search data on other ElementManager of the structure:

	
	new ElementManager()
		// Over-write if exists
		.setdata({key: 'value'})
		// Access with the variable data
		.data;


	new ElementManager()
		.setdata({select: false})
		.call(self => {
			self.add(
				self.create('div')
					.setdata({select: true})
					// will return the parent due to the fact that: data = {select: false}
					.findData('select', false)
					.setdata({select: true}),
				self.create('div').setdata({select: true})
			);
		
			// return the first ElementManager with this {key: value}
			self.findData('select', true);
		
			// return Array<ElementManager> with given {key: value}
			self.findAllData('select', true);
	});