$3

#### ENVS setup

In order to fully use the setup, please open .env and update the following:
``
PROJECT_NAME=moment-editor
#the domain you like to use to work an the project
PROJECT_DOMAIN=moment-editor.createit.work


Set this variable to your unique name so that once configured with shop, you will not have any conflicts.

Once set, it will allow you to access your local API via public url like https://xxxxxxx.external.createit.work

Please change your username to your first letter and your last name

PROJECT_FRP_SUBDOMAIN=moment-editor-$username
`

#### Docker setup

- sudo docker-compose up or sudo docker-compose up -d to run in daemon mode.
- if needed you can connect to the app container via:
`
$ docker exec -it {project_name}_app bash
$ //run any command you want
`
- or using:
`
$ docker-compose exec app bash
`

#### Containers
- proxy - traeffik which is used to automatically redirect request to the correct container
- app - node container - served app
- frpc - service which generates public URL so it can be accessed via internet

#### Services
- https://{PROJECT_DOMAIN} - local url for development
- http://{PROJECT_FRP_SUBDOMAIN}.external.createit.work - external accessible URL to review the project
- http://proxy.{PROJECT_DOMAIN} - reverse proxy - shows what is connected


###Interface

interface file = Snake_case

all interface functions start with "I"

in the same File is a model without "I"

the model implements deserializable and the interface

default:

`
deserialize(input: ICheckBoxGroupItem) {
if (input) {
Object.assign(this, input);
}
return this;
}
`

###Service

service file: Snake_case with ending .service.ts
a service is in the most cases a restService how call external routes
and implements special functions
example:
account.service implements hasRole function

The konva service is a kind of bridge to konva class implements functions
that i use to let the code in the page clean

a Service is a controller and a init const
example:
`
class AccountServiceController extends RestService {
}
`

init:
`
export const AccountService = new AccountServiceController();
`

###helpers

helper file user {theme}-utils.ts

you can put code you using two times in helpers,
all helpers are collection by theme.
object are the functions for object,
router the functions for routing.
if you need a konva helper you can call konva-utils.ts and put your functions inside.

!Built With Stencil

Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

`bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
`

and run:

`bash
npm install
npm start
`

To build the component for production, run:

`bash
npm run build
`

To run the unit tests for the components, run:

`bash
npm test
`

Need help? Check out our docs here.




Naming Components

When creating new component tags, we recommend _not_ using stencil in the component name (ex: ). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.




Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

$3

- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3


- Run npm install my-component --save
- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3

- Run npm install my-component --save
- Add an import to the npm packages import my-component;
- Then you can use the element anywhere in your template, JSX, html etc

Using App Config

In file /src/interfaces/config.ts you may find additional application settings.

Moment editor methods:

- Use getFonts() to place fonts into your app. Example:
`javascript
const momentEditor = this.el.shadowRoot.querySelector('moment-editor');
momentEditor.getFonts().then((result) => {
result.map(elm => {
const link = document.createElement('link');
link.href = elm.fontUrl;
link.rel = "stylesheet";
document.querySelector('head').appendChild(link);
});
});
`
- Use saveButtonConfig to customize save button:
`javascript
saveButtonConfig = {
visible: boolean, // default true
text: string, // default 'Save'
saveType: 'download' | 'data', // is used as button export or download type, default 'data',
customSelector: string // to add custom class selector
}
`
- filters - pass filters to the component as props.
- appConfig - to change app settings located in src/app_config.ts. Example:

Moment editor events:

- save - Event for clicking save button.
`javascript
const momentEditor = document.querySelector('moment-editor');
momentEditor.addEventListener('save', (event) => {
console.log('save', event.detail);
});
`
event response:
`javascript
image: Blob
video: Blob
type: 'image' | 'video'
tagData: [ //Data about tags - mention, link
{
"id": string, //tag id
"requestData": { //requestData is data for the link and null for mention
"id": number,
"title": string,
"content": tring,
"thumbnail": string,
"url": string,
"linkTitle": string
},
"type": "link" | "mention",
"params": {
"position": {
"x": number,
"y": number
},
"width": number,
"height": number,
"type": "link" | "mention"
}
}
]
`

#
- close - Event for clicking close button.
`javascript
const momentEditor = document.querySelector('moment-editor');
momentEditor.addEventListener('close', (result) => {
console.log('close', result);
});
`

#
- request - Listen to 'request' event from link or mention modals.
`javascript
const momentEditor = document.querySelector('moment-editor');

// Passing linkData to link modal as a response from server
const linkData = [
{
id: 1,
title: 'Example',
content: 'Post content',
thumbnail: 'www.example.com',
url: 'example.com'
}
]

// Passing mentionData to mention modal as a response from server
const mentionData = [
{
id: 1,
title: 'John Doe',
content: '',
thumbnail: 'www.example.com',
url: 'John Doe',
}
]

//Listen to 'request' event from link or mention modals
//and passing data from data to modal accordingly
momentEditor.addEventListener('request', (event) => {
if (event.detail.type === 'link') {
momentEditor.tagResponse('link', linkData);
}

if (event.detail.type === 'mention') {
momentEditor.tagResponse('mention', mentionData);
}
});
`


Using moment viewer component:

- type - Use type video or image to determine viewer content'.
- source - Video or image src.
- tagsData - Pass tags info to display clickable links on viewer.
- parentSize: {width: number, height: number} - Pass parent width and height, default is window inner width and height.
- imageOriginalSize: {width: number, height: number} - width and height of original image to position on moment-viewer. If original image size was changed, use this param to display tags in right width, height and position.

$3

- close - Event for clicking close button.
- link - Event for clicking on tags.

`javascript
const momentViewer = document.querySelector('moment-viewer');
momentViewer.addEventListener('link', (event) => {
console.log('link', event)
});
`

$3


By default, all features are enabled.
To disable any of the feature use params:
`javascript
const momentEditor = this.el.shadowRoot.querySelector('moment-editor');
momentEditor.appConfig = {
videoEnabled: false,
giphyEnabled: false,
mentionEnabled: false,
linksEnabled: false,
};
`

- videoEnabled - video recording feature.
- mentionEnabled - mention tags feature.
- linksEnabled - links tags feature.
- giphyEnabled - gifs tags feature.
- - giphyKey` - provides giphy library API KEY [string].