npm - @innovastudio/contentbuilder - Versions diffs - 1.3.84 → 1.3.86 - Mend

@innovastudio/contentbuilder 1.3.84 → 1.3.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.84",
+  "version": "1.3.86",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css CHANGED Viewed

@@ -3311,7 +3311,7 @@ button:focus-visible {
   color: #4a4a4a;
   border-radius: 5px;
   border: none;
-  background-color: #f0f0f0;
+  background-color: #f6f6f6;
   width: auto;
   display: inline-block;
   background-image: none;
@@ -3344,9 +3344,9 @@ button:focus-visible {
   color: #121212;
   display: inline-block;
   border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: none;
   border-radius: 1px;
-  background-color: #fafafa;
+  background-color: #f6f6f6;
 }
 #_cbhtml input[type=text]:focus,
 .is-ui input[type=text]:focus {
@@ -3775,7 +3775,7 @@ button:focus-visible {
   box-sizing: border-box;
   padding: 0 0 0 20px;
   color: #000;
-  background: #f0f0f0;
+  background: #f6f6f6;
   box-shadow: none;
   line-height: 40px !important;
   font-size: 14px;
@@ -3831,7 +3831,7 @@ button:focus-visible {
   box-sizing: border-box;
   padding: 0 0 0 15px;
   color: #000;
-  background: #f0f0f0;
+  background: #f6f6f6;
   box-shadow: none;
   font-size: 14px;
   cursor: pointer;

package/public/contentbuilder/contentbuilder.esm.js CHANGED Viewed

@@ -7212,6 +7212,167 @@ class Util {
     return html;
   }
+  getPageTemplate(framework) {
+    let pageTemplate = '';
+    if (framework === '') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'tailwind') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link href="[%PATH%]/assets/minimalist-blocks/content-tailwind.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <link rel="stylesheet" href="[%PATH%]/assets/frameworks/tailwindcss/styles.css">
+                <!-- To build your own, please see: https://tailwindcss.com/docs/installation -->
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'bootstrap') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {margin: 140px auto; max-width: 800px; width:100%; padding:0 35px; box-sizing: border-box;}
+                    /* Bootstrap css adjustment to enable column drag to resize */
+                    .row > *,
+                    .column {
+                        max-width: unset !important;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'foundation') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation-float.min.css">
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else {
+      pageTemplate = '[%CONTENT%]';
+    }
+    return pageTemplate;
+  }
 }
 class Dom {
   constructor(builder) {
@@ -52558,7 +52719,7 @@ class Hyperlink {
                     <input id="inpCreateLinkText" class="input-text" type="text" style="width:100%;"/>
                     <label for="inpCreateLinkTitle" style="margin-top:14px;display:block">${util.out('Title')}:</label>
-                    <input id="inpCreateLinkTitle" class="input-title" type="text" style="width:100%;border-top: none;"/>
+                    <input id="inpCreateLinkTitle" class="input-title" type="text" style="width:100%;"/>
                     <div style="text-align:right;margin-top:14px;">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -55426,7 +55587,6 @@ class RowTool {
     const dom = this.builder.dom;
     this.dom = dom;
     this.grid = new Grid(builder);
-    const htmlutil = new HtmlUtil(builder);
     let rowMore = builderStuff.querySelector('.rowmore');
     let htmlbutton = '';
     if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
@@ -55475,6 +55635,7 @@ class RowTool {
         }
         if (!row) return;
+        const htmlutil = new HtmlUtil(builder);
         htmlutil.view('row');
       });
     }
@@ -75467,39 +75628,6 @@ class ContentBuilder {
                 </div>
             </div>
             `,
-      pageTemplate: `<!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="utf-8">
-                <title>Page</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1">
-                <meta name="description" content="">
-                <link rel="shortcut icon" href="#" />
-                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
-                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
-                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
-                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
-                <style>
-                    .container {
-                        margin: 150px auto 0;
-                        max-width: 800px;
-                        width: 100%;
-                        padding: 0 20px;
-                        box-sizing: border-box;
-                    }
-                </style>
-            </head>
-            <body>
-            <div class="container">
-            [%CONTENT%]
-            </div>
-            </body>
-            </html>`,
       /*
       onZoomStart: () => {
@@ -76015,6 +76143,11 @@ class ContentBuilder {
     const util = new Util(this); // General utilities
     this.util = util;
+    if (!this.pageTemplate) {
+      this.pageTemplate = util.getPageTemplate(this.framework);
+    }
     const responsive = new Responsive(this); // General utilities
     this.responsive = responsive; // Content stuff
@@ -76082,6 +76215,7 @@ class ContentBuilder {
     this.colTool = new ColumnTool(this); // Render Column Tool
+    this._rowTool = new RowTool(this);
     this.mediaPicker = new MediaPicker(this); // Extend the onChange function
     var oldget = this.opts.onChange;
@@ -76604,8 +76738,8 @@ class ContentBuilder {
       // Render Row tool
-      this.rowtool = new RowTool(this);
-      this.rowtool.render(row); // Render Row Add tool
+      this._rowTool.render(row); // Render Row Add tool
       const rowaddtool = new RowAddTool(this);
       rowaddtool.render(row); // Apply behavior on each column
@@ -78219,8 +78353,7 @@ class ContentBuilder {
     this.element.click(col, e);
     this.colTool.click(col);
-    this.elmTool.click(col, e); //this.rowtool.click(col);
+    this.elmTool.click(col, e);
     this.rte.click(col, e); // Grid Editor Status
     // On/off lock button