@4based/moment-editor

Developments

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.

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:

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

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

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: <stencil-datepicker>). 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.

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• 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:

    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:

   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.

    const momentEditor = document.querySelector('moment-editor');
    momentEditor.addEventListener('save', (event) => {
        console.log('save', event.detail);
    });

event response:

    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.

    const momentEditor = document.querySelector('moment-editor');
    momentEditor.addEventListener('close', (result) => {
        console.log('close', result);
    });

• request - Listen to 'request' event from link or mention modals.

    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.

Moment viewer events:

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

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

App config

By default, all features are enabled. To disable any of the feature use params:

    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].