web_editor_architecture.md

Web Editor workflow

1. Retrieve PAGE from the server.

Response will include HTML with div pointing the place where LAYOUT with BLOCKS will be injected.

This div has following format:

<div layout=""></div>

EXAMPLE PAGE:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Shop Homepage - Start Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/shop-homepage.css" rel="stylesheet">
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div layout=""></div>   
        
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

2. Retrieve LAYOUT from the server.

LAYOUT will include BLOCKS.

[{
  "section-id": 50385621434,
  "style": {
    "background-image": "url(https://example.com/427995871908465522.jpg)",
    "background-position": "center center",
    "vertical-align": "middle",
    "background-position": "50% 94.04%",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "background-color": "transparent"
  },
  "rows": [
    {
      "columns": [
        {
          "span": 12,
          "blocks": [ blocks will be included here ]
        }
      ]
    }
  ]
}, 
{
  "section-id": 60385621432,
  "style": {},
  "rows": [
    {
        "columns": [
          {
            "span": 12,
            "blocks": [ blocks will be included here ]
          }
        ]
    }
  ]
}]

BLOCKS will be of the following types:

A. editable

{
  "id": 111
  "type": "editable",
  "html": "<p><span style="color:red;">hello world</span></p>",
  "something_extra: {}
}

B. configurable

{
  "id": 122
  "type": "configurable",
  "html": "<iframe width="560" height="315" src="https://some_url.com" frameborder="0"></iframe>",
  "fields": { fields will be included here }
}

'fields' will by structured according to json structure forced by selected lib:

https://github.com/formly-js/angular-formly

https://github.com/json-schema-form/angular-schema-form

http://selmanh.github.io/angularjs-form-builder/#/

https://github.com/joshfire/jsonform

http://selmanh.github.io/angularjs-form-builder/#/

https://github.com/danhunsaker/angular-dynamic-forms

EXAMPLE 'fields':

  "fields": {
      "form": [
          "name",
          "email",
          {
            "key": "comment",
            "type": "textarea",
            "placeholder": "Make a comment"
          },
          {
            "type": "submit",
            "style": "btn-info",
            "title": "OK"
          }
	 ],
     "schema": {
        "type": "object",
        "title": "Comment",
        "properties": {
          "name": {
            "title": "Name",
            "type": "string"
          },
          "email": {
            "title": "Email",
            "type": "string",
            "pattern": "^\\S+@\\S+$",
            "description": "Email will be used for evil."
          },
          "comment": {
            "title": "Comment",
            "type": "string",
            "maxLength": 20,
            "validationMessage": "Don't be greedy!"
          }
        },
        "required": [
          "name",
          "email",
          "comment"
        ]
      },
      model: {
          "name": "Test",
          "email": "[email protected]",
          "comment": "Test Comment"
      }    
  },

lahdo/web_editor_architecture.md

Web Editor workflow

1. Retrieve PAGE from the server.

2. Retrieve LAYOUT from the server.

LAYOUT will include BLOCKS.

BLOCKS will be of the following types:

A. editable

B. configurable

'fields' will by structured according to json structure forced by selected lib:

EXAMPLE 'fields':

TODO what about partially dynamic forms?

TODO what about the form properties that will need to be applied on the fly?

3. Render HTML

API ENDPOINTS: