lahdo/web_editor_architecture.md

## web_editor_architecture.md

      
    Raw
  

              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": "a@a.com",
          "comment": "Test Comment"
      }    
  },

TODO what about partially dynamic forms?

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

3. Render HTML

Convert JSON to HTML and render page
API ENDPOINTS:


Get the page
Get the layout
Update layout
Update single block