@innovastudio/contentbox 1.0.15 → 1.0.19

package/README.md

@@ -46,23 +46,36 @@ For viewing content, additional includes are also needed.
 On the head section:
 
 ```html
-<link href="box/box.css" rel="stylesheet" type="text/css" />
+<link href="box/box-flex.css" rel="stylesheet" type="text/css" />
 ```
 
-And before the end of body tag:
+Before the end of the body tag:
 
 ```html
-<script src="box/box.js" type="text/javascript"></script>
+<script src="box/box-flex.js" type="text/javascript"></script>
 ```
 
-In the previous version, ContentBox.js is implemented as a JQuery plugin. Now in version 5, it is rewritten in pure Javascript.
-However, ContentBox.js includes predesigned Sliders (using Slick slider) that require JQuery to run.
-So we need to add the JQuery include:
+#### If you are upgrading from the previous version of ContentBox
+
+(this is the same as in the previous version)
+
+On the head section:
 
 ```html
-<script src="path-to/jquery.min.js"></script> 
+<link href="box/box.css" rel="stylesheet" type="text/css" />
 ```
-    
+
+Before the end of the body tag:
+
+```html
+<script src="path-to/jquery.min.js"></script> /* for running the slider */
+<script src="box/box.js" type="text/javascript"></script>
+```
+
+The JQuery include is needed here because the previous version of ContentBox includes predesigned Sliders (using Slick slider) that require JQuery to run.
+If you are not using the slider in your content, then you do not need JQuery include and you can change the **box.css** & **box.js** includes with the **box-flex.css** & **box-flex.js** which exclude the JQuery dependency.
+
+
 ## Usage
 
 ```html
@@ -78,7 +91,7 @@ const builder = new ContentBox({
 
 To get the edited content:
 
-1) Get the HTML
+1) Get the HTML content
 
 ```javascript
 let html = builder.html();
@@ -93,6 +106,7 @@ let sectioncss = builder.sectioncss(); // Returns the typography styles for spec
 
 Then you can do anything with the content, for example, posting it to the server for saving, etc.
 
+In production, the saved HTML content should be rendered with its styles.
 
 ### Examples (HTML, PHP, React, Vue)
 
@@ -112,6 +126,7 @@ React and Vue project examples are provided in separate downloads in the user ar
   - example.php (PHP example)
   - example-bootstrap.html (using Bootstrap framework)
   - example-foundation.html (using Foundation framework)
+  - example-jquery.html (HTML example from the previous version using JQuery)
 - src/
   - contentbox/ (Only provided in Source Code package)
   - scss/ (Only provided in Source Code package)
@@ -122,7 +137,7 @@ React and Vue project examples are provided in separate downloads in the user ar
 
 ## Predesigned Sections (Templates)
 
-To start building a page, you can click the (+) button on the top left sidebar. This will opens a selection of predesigned sections that you can add into your page.
+To start building a page, you can click the (+) button on the top left sidebar. This will open a selection of predesigned sections that you can add into your page.
 
 ![Predesigned Sections](docs/predesigned-sections.png)
 
@@ -177,7 +192,7 @@ assets/minimalist-blocks/
 
 It contains:
 - content.js (snippets JSON file)
-- content.css (snippet css file)
+- content.css (snippets css file)
 - images (contains assets for the snippets)
 - preview (contains snippet thumbnails)
 
@@ -214,13 +229,13 @@ A selection of typography styles is provided for you to choose to format your pa
 
 ![Typography Styles](docs/typography.png)
 
-The style can be used to format the entire page or just a specific section or box area of your page. 
+The style can be used to format the entire page or just a specific section or a box area of your page. 
 
-If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose to replace all the sections' styles or keep the sections' style and format only the unstyled sections.
+If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose and replace all the sections' styles or keep the sections' style and format only the unstyled sections.
 
 ![Apply options](docs/typography2.png)
 
-To apply the typography style for a specific section or box area, open the Box Settings dialog, select 'Text' tab and click 'Change Style'.
+To apply the typography style for a specific section or box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.
 
 ![Apply to a specific section](docs/typography3.png)
 
@@ -239,6 +254,29 @@ const builder = new ContentBox({
 });
 ```
 
+### Slider Feature
+
+The new version includes predesigned slider templates (using Glide slider) that require some includes:
+
+```html
+<link href="assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+<link href="assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+<script src="assets/scripts/glide/glide.js" type="text/javascript"></script>
+```
+To enable the slider:
+
+```javascript
+const builder = new ContentBox({
+    /*...*/
+    slider: 'glide' // default: 'slick' (old version slider)
+});
+```
+
+Values:
+- '' (default) => not using slider
+- 'glide' 
+- 'slick' => previous version slider (requires JQuery)
+
 ## Language File
 
 With the Language file, you can translate the ContentBox.js interface into another language.
@@ -262,11 +300,11 @@ _txt['Italic'] = 'Italic';
 
 You can create your own language file by copying/modifying this file. 
 
-## Adding Custon Buttons to the Sidebar
+## Adding Custom Buttons to the Sidebar
 
-To add custom buttons to the sidebar, use **addButton** method.
+To add custom buttons to the sidebar, use the **addButton** method.
 
-Here is an example of adding Undo & Redo button. For undo and redo operation, we call the **undo()** and **redo()** methods.
+Here is an example of adding the Undo & Redo button. For the undo and redo operation, we call the **undo()** and **redo()** methods.
 
 ```javascript
 builder.addButton({ 
@@ -316,15 +354,15 @@ builder.addButton({
 });
 ```
 
-Here we get the content and its styles using **html()**, **mainCss()**, and **sectionCss()** methods and save them into the browser's local storage. The content then will be used in the **preview.html** for viewing.
+Here we get the content and its styles using the **html()**, **mainCss()**, and **sectionCss()** methods and save them into the browser's local storage. The content will then be used in the **preview.html** for viewing.
 
 ## Embedding Box Cover (Background) Image
 
-In Box Settings, you can specify box's cover or background image.
+In the Box Settings, you can specify a box's cover or background image.
 
 ![Box Cover](docs/box-cover.png)
 
-However, for quick upload an image without opening the Box Settings, you can click the box's image button. This allows you to browse local images and select an image to upload as a box's image cover (background).
+However, to quickly upload an image without opening the Box Settings, you can click the box image button. This allows you to browse local images and select an image to upload as a box image cover (background).
 
 ![Box Cover](docs/box-cover2.png)
 
@@ -337,7 +375,7 @@ There are 2 methods for uploading cover image:
 
 #### Form Method
 
-Here we use **coverImageHandler** parameter to specify upload handler for saving image on the server.
+Here we use the **coverImageHandler** parameter to specify the upload handler for saving images on the server.
 
 ```javascript
 const builder = new ContentBox({
@@ -354,7 +392,7 @@ As examples, you can use the provided handler:
 
 #### AJAX Post Method
 
-Here we use **onUploadCoverImage** parameter to specify a custom upload function.
+Here we use the **onUploadCoverImage** parameter to specify a custom upload function.
 
 ```javascript
 const builder = new ContentBox({
@@ -383,7 +421,7 @@ const builder = new ContentBox({
 });
 ```
 
-Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use **boxImage(url)** method to apply the image url as a background cover.
+Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use the **boxImage(url)** method to apply the image url as a background cover.
 
 In this example, the image is posted to an endpoint: **/upload**
 If you’re using Node.js, you can implement the endpoint to save the image using:
@@ -420,7 +458,7 @@ let html = builder.html();
 let mainCss = builder.mainCss(); // Returns the default typography style for the page.
 let sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page
 ```
-You can save the HTML and its styles above into a database. And when you need to load the content back for editing, use **loadHtml()** and **loadStyles** methods.
+You can save the HTML and its styles above into a database. And when you need to load the content back for editing, use the **loadHtml()** and **loadStyles** methods.
 
 ```javascript
 builder.loadHtml(html);
@@ -453,9 +491,9 @@ builder.destroy();
 
 ## ContentBuilder.js Features
 
-ContentBox.js uses ContentBuilder.js as its HTML editor.  So most of the ContentBuilder.js options/parameters can be accessed through ContentBox.js object.
+ContentBox.js uses ContentBuilder.js as its HTML editor.  So most of the ContentBuilder.js options/parameters can be accessed through the ContentBox.js object.
 
-For example, to specify custom file browser (or Asset Manager):
+For example, to specify a custom file browser (or Asset Manager):
 
 ```javascript
 const builder = new ContentBox({
@@ -508,5 +546,5 @@ function uploadFile(e, callback) {
 }
 ``` 
 
-More configuration options can be found in ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf
+More configuration options can be found in the ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.15",
+  "version": "1.0.19",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,11 +38,11 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.49",
+    "@innovastudio/contentbuilder": "^1.0.50",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-session": "^1.17.2",
-    "pace-js": "^1.2.4"
+    "js-beautify": "^1.14.0"
   }
 }