Merge pull request #22 from yakovlevga/container-fields

Container fields
yakovlevga · Dec 19, 2017 · e632e6d · e632e6d
2 parents 0e6eeab + 4a1b023
commit e632e6d
Show file tree

Hide file tree

Showing 42 changed files with 2,683 additions and 1,378 deletions.
diff --git a/README.md b/README.md
@@ -80,10 +80,12 @@ There is a list of options, you could pass to init: $("#editor").brickyeditor(op
 
 ### Template system
 
-In current version there are 3 type of fields you can use inside your templates.
- - Html Field - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
- - Image Field - *Div or img tag, that allows to upload image in base64 format.*
- - Embed Field - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+There are 4 base types of fields you can use inside your templates:
+ - **Html Field** - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
+ - **Image Field** - *Div or img tag, that allows to upload image in base64 format.*
+ - **Embed Field** - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+ - **Container Field** - *Container tag, that allows to put other templates inside. It's useful if you want to use layout templates.*
+
 Fields tags should be marked with attribute `data-bre-field="{ 'name' : 'caption', 'type' : 'html'}"`, with field settings inside it. 
 
 All templates should be placed inside `<div class="bre-template" data-name="Template Name"></div>`. 
@@ -102,3 +104,24 @@ If you want custom preview for your template, you could wrap preview html inside
 In this sample two editable fields - img (field type - image) and figcaption (field type = html). 
 Editor will get _templates/image-with-caption.jpg_ image as preview to render block inside tools panel.
 You could find more examples in `build/templates folder`.
+
+##Template groups
+You could use template grouping inside your template file for better semantics. Put templates inside div with class='bre-template-group' and set 'title' attribute to name the group.
+```html
+<div class="bre-template-group" title="Containers">
+    <div class="bre-template" data-name="Columns-2">
+        <div class="row">
+            <div class="col-md-6" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-6" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+        </div>
+    </div>
+
+    <div class="bre-template" data-name="Columns-3">
+        <div class="row">
+            <div class="col-md-4" data-bre-field='{ "name" : "col1", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col2", "type": "container" }'></div>
+            <div class="col-md-4" data-bre-field='{ "name" : "col3", "type": "container" }'></div>
+        </div>
+    </div>
+</>
+```
diff --git a/demo/css/jquery.brickyeditor.css b/demo/css/jquery.brickyeditor.css
@@ -256,6 +256,13 @@
     width: 100%;
     height: 99%;
     overflow: auto; }
+    .bre-tools .bre-tools-templates .bre-template-group {
+      color: #92819F;
+      font-size: .5rem;
+      padding: .5rem .5rem 0rem .5rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      cursor: pointer; }
     .bre-tools .bre-tools-templates .bre-template {
       cursor: pointer;
       background: #fff;
@@ -270,6 +277,18 @@
         zoom: 0.2; }
       .bre-tools .bre-tools-templates .bre-template:hover {
         background: #f2f2f2; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container {
+        padding: 1rem;
+        border: 1px solid #DDDDDD;
+        border-right-width: 0px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 1rem;
+        color: #92819F; }
+        .bre-tools .bre-tools-templates .bre-template .bre-field-container::after {
+          content: '\2295'; }
+      .bre-tools .bre-tools-templates .bre-template .bre-field-container:last-child {
+        border-right-width: 1px; }
     @media (min-width: 576px) and (max-width: 1023px) {
       .bre-tools .bre-tools-templates .bre-template > * {
         zoom: 0.3; } }
@@ -280,6 +299,9 @@
 .bre-tools-collapsed {
   right: -196px; }
 
+.bre-field-selected {
+  outline: dotted 1px #DDDDDD; }
+
 .bre * {
   font-family: sans-serif; }
 

diff --git a/demo/data.json b/demo/data.json
@@ -1,96 +1,10 @@
 [{
-    "template": "Display Heading 1",
+    "template": "Container",
     "fields": [
         {
             "name": "text",
             "type": "html",
             "html": "Hi! This is bricky editor example."
         }
     ]
-},
-{
-    "template": "Paragraph Lead",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "Ok, you put some traditional wysiwyg to your site and give html freedom to your editors.<div>But this freedom played a cruel joke&nbsp;<span style=\"font-size: 1.25rem;\">with you and now you need to correct every article by yourself.</span></div>"
-        }
-    ]
-},
-{
-    "template": "Paragraph",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I know this situation, cause I'm very often hear something like: \"I don't how this happens, it maked it by itself\". And this poor guys are right - sometimes wysiwygs made \"this\" by themselfs. And one day I decide to correct this situation."
-        }
-    ]
-},
-{
-    "template": "Paragraph",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "If you look closely, you will see, that 99 percents of all articles in web contains some typical blocks. Escpeccialy in pro media: headers, paragraps, photos, embed fragments from social networks, or, maybe, galleries. And I started creation of my own universal WYSIWYG plugin with predifined blocks. Of cource I made some quick googling for plugins of this type, but this field is still pure and have only a few solutions. And the best one is payed and it's vendor locked.&nbsp;I'm not greedy, but I really love open source because it speeds up the evolution of the solution (you know it buy yourself, couse 99% that you come here from github ;))."
-        }
-    ]
-},
-{
-    "template": "Blockquote Reverse",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I am fond of pigs. Dogs look up to us. Cats look down on us. Pigs treat us as equals."
-        },
-        {
-            "name": "author",
-            "type": "html",
-            "html": "Winston Churchill"
-        },
-        {
-            "name": "author",
-            "type": "html",
-            "html": "This quote is here, because I need to show, what brickyeditor can. And, yes, I', civ fan."
-        }
-    ]
-},
-{
-    "template": "Image with caption",
-    "fields": [
-        {
-            "name": "image",
-            "type": "image",
-            "src": "assets/photo.jpg"
-        },
-        {
-            "name": "caption",
-            "type": "html",
-            "html": "I don't love to write a lot. So I put here my cats photo, his name is Shprotski."
-        }
-    ]
-},
-{
-    "template": "Paragraph Lead",
-    "fields": [
-        {
-            "name": "text",
-            "type": "html",
-            "html": "I think I must write more marketing words here, but sorry, I don't have no time for that shit. But I can instagram embed photo, I like it."
-        }
-    ]
-},
-{
-    "template": "Embed",
-    "fields": [
-        {
-            "name": "embed",
-            "type": "embed",
-            "url": "http://instagr.am/p/BYJAes_HEI0/"
-        }
-    ]
-}
-]
+}]
diff --git a/demo/index.html b/demo/index.html
@@ -12,17 +12,15 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
   <script src="js/jquery.brickyeditor.js"></script>
+  <script src="js/locales/jquery.brickyeditor.ru.js"></script>
   <script>
     $(function () {
       $("#editor").brickyeditor({
         ignoreHtml: true,
         blocksUrl: 'data.json',
         templatesUrl: 'templates.html',
-        onBlockAdd: function(data) {
-          console.log('BrickyEditor block added.');
-        },
-        onBlockUpdate: function(data) {
-          console.log('BrickyEditor block updated. Property: ' + data.property + ', New value:' + data.newValue);
+        onChange: function(data) {
+          console.log(data.html);
         }
       });
     });