@innovastudio/contentbuilder 1.0.32 → 1.0.36

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 (91) hide show
  1. package/README.md +1913 -0
  2. package/license.txt +80 -0
  3. package/package.json +40 -19
  4. package/public/contentbuilder/config.js +8 -0
  5. package/public/contentbuilder/contentbuilder.css +4284 -0
  6. package/public/contentbuilder/contentbuilder.esm.js +59529 -0
  7. package/public/contentbuilder/contentbuilder.min.js +122 -0
  8. package/public/contentbuilder/lang/en.js +299 -0
  9. package/public/contentbuilder/lang/fr.js +299 -0
  10. package/public/contentbuilder/plugins/buttoneditor/images/a.jpg +0 -0
  11. package/public/contentbuilder/plugins/buttoneditor/images/b.jpg +0 -0
  12. package/public/contentbuilder/plugins/buttoneditor/images/c.jpg +0 -0
  13. package/public/contentbuilder/plugins/buttoneditor/images/d.jpg +0 -0
  14. package/public/contentbuilder/plugins/buttoneditor/images/e.jpg +0 -0
  15. package/public/contentbuilder/plugins/buttoneditor/images/f.jpg +0 -0
  16. package/public/contentbuilder/plugins/buttoneditor/images/g.jpg +0 -0
  17. package/public/contentbuilder/plugins/buttoneditor/images/h.jpg +0 -0
  18. package/public/contentbuilder/plugins/buttoneditor/plugin.js +1566 -0
  19. package/public/contentbuilder/plugins/buttoneditor/readme.txt +7 -0
  20. package/public/contentbuilder/plugins/helloworld/plugin.js +15 -0
  21. package/public/contentbuilder/plugins/helloworld/readme.txt +23 -0
  22. package/public/contentbuilder/plugins/preview/plugin.js +301 -0
  23. package/public/contentbuilder/plugins/preview/readme.txt +23 -0
  24. package/public/contentbuilder/plugins/searchreplace/plugin.js +458 -0
  25. package/public/contentbuilder/plugins/searchreplace/readme.txt +23 -0
  26. package/public/contentbuilder/plugins/searchreplace/searchreplace.html +264 -0
  27. package/public/contentbuilder/plugins/showgrid/plugin.js +73 -0
  28. package/public/contentbuilder/plugins/showgrid/readme.txt +23 -0
  29. package/public/contentbuilder/plugins/symbols/plugin.js +2876 -0
  30. package/public/contentbuilder/plugins/symbols/readme.txt +23 -0
  31. package/public/contentbuilder/plugins/wordcount/plugin.js +75 -0
  32. package/public/contentbuilder/plugins/wordcount/readme.txt +23 -0
  33. package/public/contentbuilder/themes/colored-blue.css +1125 -0
  34. package/public/contentbuilder/themes/colored-blue2.css +1125 -0
  35. package/public/contentbuilder/themes/colored-blue3.css +1125 -0
  36. package/public/contentbuilder/themes/colored-blue4.css +1125 -0
  37. package/public/contentbuilder/themes/colored-blue5.css +1125 -0
  38. package/public/contentbuilder/themes/colored-blue6.css +1125 -0
  39. package/public/contentbuilder/themes/colored-blue7.css +1125 -0
  40. package/public/contentbuilder/themes/colored-blue8.css +1125 -0
  41. package/public/contentbuilder/themes/colored-dark.css +1125 -0
  42. package/public/contentbuilder/themes/colored-darkblue.css +1125 -0
  43. package/public/contentbuilder/themes/colored-gray.css +1125 -0
  44. package/public/contentbuilder/themes/colored-green.css +1125 -0
  45. package/public/contentbuilder/themes/colored-green2.css +1125 -0
  46. package/public/contentbuilder/themes/colored-green3.css +1125 -0
  47. package/public/contentbuilder/themes/colored-green4.css +1125 -0
  48. package/public/contentbuilder/themes/colored-green5.css +1125 -0
  49. package/public/contentbuilder/themes/colored-magenta.css +1125 -0
  50. package/public/contentbuilder/themes/colored-orange.css +1125 -0
  51. package/public/contentbuilder/themes/colored-orange2.css +1125 -0
  52. package/public/contentbuilder/themes/colored-orange3.css +1125 -0
  53. package/public/contentbuilder/themes/colored-pink.css +1125 -0
  54. package/public/contentbuilder/themes/colored-pink2.css +1125 -0
  55. package/public/contentbuilder/themes/colored-pink3.css +1125 -0
  56. package/public/contentbuilder/themes/colored-pink4.css +1125 -0
  57. package/public/contentbuilder/themes/colored-purple.css +1125 -0
  58. package/public/contentbuilder/themes/colored-purple2.css +1125 -0
  59. package/public/contentbuilder/themes/colored-red.css +1125 -0
  60. package/public/contentbuilder/themes/colored-red2.css +1125 -0
  61. package/public/contentbuilder/themes/colored-red3.css +1125 -0
  62. package/public/contentbuilder/themes/colored-red4.css +1125 -0
  63. package/public/contentbuilder/themes/colored-red5.css +1125 -0
  64. package/public/contentbuilder/themes/colored-yellow.css +1125 -0
  65. package/public/contentbuilder/themes/colored-yellow2.css +1125 -0
  66. package/public/contentbuilder/themes/dark-blue.css +1125 -0
  67. package/public/contentbuilder/themes/dark-blue2.css +1125 -0
  68. package/public/contentbuilder/themes/dark-blue3.css +1125 -0
  69. package/public/contentbuilder/themes/dark-gray.css +1125 -0
  70. package/public/contentbuilder/themes/dark-pink.css +1125 -0
  71. package/public/contentbuilder/themes/dark-purple.css +1125 -0
  72. package/public/contentbuilder/themes/dark-red.css +1125 -0
  73. package/public/contentbuilder/themes/dark.css +1124 -0
  74. package/public/contentbuilder/themes/light-blue.css +1125 -0
  75. package/public/contentbuilder/themes/light-blue2.css +1125 -0
  76. package/public/contentbuilder/themes/light-blue3.css +1125 -0
  77. package/public/contentbuilder/themes/light-cyan.css +1125 -0
  78. package/public/contentbuilder/themes/light-gray.css +1125 -0
  79. package/public/contentbuilder/themes/light-gray2.css +1125 -0
  80. package/public/contentbuilder/themes/light-green.css +1125 -0
  81. package/public/contentbuilder/themes/light-pink.css +1125 -0
  82. package/public/contentbuilder/themes/light-pink2.css +1125 -0
  83. package/public/contentbuilder/themes/light-purple.css +1125 -0
  84. package/public/contentbuilder/themes/light-purple2.css +1125 -0
  85. package/public/contentbuilder/themes/light-red.css +1125 -0
  86. package/public/contentbuilder/themes/light-yellow.css +1125 -0
  87. package/public/contentbuilder/themes/light-yellow2.css +1125 -0
  88. package/readme.txt +23 -0
  89. package/.eslintrc.json +0 -28
  90. package/lib/contentbuilder.js +0 -46704
  91. package/rollup.config.js +0 -23
@@ -0,0 +1,264 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title></title>
6
+ <style>
7
+ body {margin:20px 20px 0;overflow-x:hidden;overflow-y:auto;font-family:sans-serif;
8
+ font-size: 12px;
9
+ letter-spacing: 1px;
10
+ font-weight: 300;}
11
+ .container {}
12
+ .container > div {text-align:center;font-size:24px;cursor:pointer;margin: 0;display:inline-block;float:left;width:25%;height:80px;line-height:80px;border:#eee 1px solid;box-sizing:border-box;}
13
+ .clearfix:before, .clearfix:after {content: " ";display: table;}
14
+ .clearfix:after {clear: both;}
15
+ .clearfix {*zoom: 1;}
16
+
17
+ .inptext {
18
+ width: 90%;
19
+ height: 45px;
20
+ box-sizing: border-box;
21
+ margin: 0;
22
+ font-family: sans-serif;
23
+ font-size: 15px;
24
+ letter-spacing: 1px;
25
+ padding: 0;
26
+ padding-left: 8px;
27
+ color: #111111;
28
+ display: inline-block;
29
+ border: none;
30
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
31
+ border-radius: 0;
32
+ background-color: #fbfbfb;
33
+ }
34
+ button {
35
+ width: 55px;
36
+ height: 45px;
37
+ background-color: rgba(255, 255, 255, 0.95);
38
+ color: #111111;
39
+ font-family: sans-serif;
40
+ font-size: 12px;
41
+ letter-spacing: 1px;
42
+ font-weight: 300;
43
+ border: transparent 1px solid;
44
+ box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
45
+ opacity: 1;
46
+ line-height: 1;
47
+ display: inline-block;
48
+ box-sizing: border-box;
49
+ margin: 0;
50
+ padding: 0;
51
+ cursor: pointer;
52
+ text-transform: none;
53
+ text-align: center;
54
+ position: relative;
55
+ border-radius: 0;
56
+ user-select: none;
57
+ -moz-user-select: none;
58
+ -khtml-user-select: none;
59
+ -webkit-user-select: none;
60
+ -o-user-select: none;
61
+ white-space: nowrap;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ }
66
+ .inptext:focus {outline:none}
67
+ button:focus {outline:none;}
68
+ </style>
69
+ </head>
70
+ <body>
71
+
72
+ <div style="display:flex;justify-content:space-between;">
73
+ <input id="txtSearch" tabindex="1" class="inptext" type="text" style="width:100%;" value="" />
74
+ <button class="input-search" style="width:130px;">Search Next</button>
75
+ </div>
76
+ <div style="margin:10px 0">
77
+ <label for="txtReplaceWith">Replace with:</label>
78
+ </div>
79
+ <div style="display:flex;justify-content:space-between;">
80
+ <input id="txtReplaceWith" tabindex="2" class="inptext" type="text" style="width:100%;" value="" />
81
+ <button class="input-replace" style="width:130px;">Replace</button>
82
+ </div>
83
+ <div style="display:flex;justify-content:space-between;margin:17px 0;">
84
+ <div>
85
+ <label id="lblMatchCase" for="chkMatchCase">
86
+ <input type="checkbox" name="chkMatchCase" id="chkMatchCase"> Match case
87
+ </label>
88
+ <div id="divStatus" style="margin-top:12px;"></div>
89
+ </div>
90
+ <button class="input-replaceall" style="width:130px;">Replace All</button>
91
+ </div>
92
+
93
+
94
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
95
+ <script>
96
+ var nReplaceCount = 0;
97
+
98
+ jQuery(document).ready(function () {
99
+
100
+ jQuery('#txtSearch').focus();
101
+
102
+ jQuery('.input-replaceall').click(function () {
103
+ jQuery('#divStatus').html('');
104
+
105
+ var target = jQuery('#txtSearch').val();
106
+ var replaceWith = jQuery('#txtReplaceWith').val();
107
+ if (jQuery("#chkMatchCase").prop("checked")) {
108
+ var bMatchCase = true;
109
+ } else {
110
+ var bMatchCase = false;
111
+ }
112
+
113
+ var within = parent._cb.getScope();
114
+
115
+ var sel = parent.getSelection();
116
+
117
+ var r1 = parent.document.createRange();
118
+ r1.selectNodeContents(within);
119
+
120
+ // https://stackoverflow.com/questions/32192664/how-to-select-a-given-string-repeatedly-within-the-text-of-a-contenteditable-ele
121
+ if (sel.toString().search(target) > -1) {
122
+ var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
123
+ if (ok) {
124
+ var rng = parent.getSelection().getRangeAt(0);
125
+ rng.deleteContents();
126
+ rng.insertNode(document.createTextNode(replaceWith));
127
+ nReplaceCount++;
128
+ }
129
+ jQuery('.input-replaceall').trigger('click');
130
+ } else if (sel.toString().length > 0) {
131
+ var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
132
+ if (ok) {
133
+ var rng = parent.getSelection().getRangeAt(0);
134
+ rng.deleteContents();
135
+ rng.insertNode(document.createTextNode(replaceWith));
136
+ nReplaceCount++;
137
+ }
138
+ jQuery('.input-replaceall').trigger('click');
139
+ } else if (sel.rangeCount) {
140
+ var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
141
+ if (ok) {
142
+ var rng = parent.getSelection().getRangeAt(0);
143
+ rng.deleteContents();
144
+ rng.insertNode(document.createTextNode(replaceWith));
145
+ nReplaceCount++;
146
+ jQuery('.input-replaceall').trigger('click');
147
+ } else {
148
+ jQuery('#divStatus').html(nReplaceCount + ' occurrence(s) replaced.');
149
+ nReplaceCount = 0;
150
+ }
151
+ }
152
+ });
153
+
154
+ jQuery('.input-search').click(function () {
155
+
156
+ var target = jQuery('#txtSearch').val();
157
+ var replaceWith = jQuery('#txtReplaceWith').val();
158
+ if (jQuery("#chkMatchCase").prop("checked")) {
159
+ var bMatchCase = true;
160
+ } else {
161
+ var bMatchCase = false;
162
+ }
163
+
164
+ var within = parent._cb.getScope();
165
+
166
+ var sel = parent.getSelection();
167
+
168
+ var r1 = parent.document.createRange();
169
+ r1.selectNodeContents(within);
170
+
171
+ if (sel.toString().search(target) > -1) {
172
+ var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
173
+ if (ok) {
174
+ jQuery('#divStatus').html('');
175
+ } else {
176
+
177
+ }
178
+ } else if (sel.toString().length > 0) {
179
+ var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
180
+ if (ok) {
181
+ jQuery('#divStatus').html('');
182
+ } else {
183
+ jQuery('#divStatus').html('Passed the end of the content.');
184
+ var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
185
+ if (ok) {
186
+ jQuery('#divStatus').html('');
187
+ } else {
188
+ jQuery('#divStatus').html('The specified text was not found.');
189
+ }
190
+ }
191
+ } else if (sel.rangeCount) {
192
+ var ok = parent.findOne(target, bMatchCase, within, sel.anchorNode, sel.anchorOffset);
193
+ if (ok) {
194
+ jQuery('#divStatus').html('');
195
+ } else {
196
+ var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
197
+ if (ok) {
198
+ jQuery('#divStatus').html('');
199
+ } else {
200
+ jQuery('#divStatus').html('The specified text was not found.');
201
+ }
202
+ }
203
+ }
204
+
205
+ });
206
+
207
+ jQuery('.input-replace').click(function () {
208
+
209
+ var target = jQuery('#txtSearch').val();
210
+ var replaceWith = jQuery('#txtReplaceWith').val();
211
+ if (jQuery("#chkMatchCase").prop("checked")) {
212
+ var bMatchCase = true;
213
+ } else {
214
+ var bMatchCase = false;
215
+ }
216
+
217
+ var within = parent._cb.getScope();
218
+
219
+ var sel = parent.getSelection();
220
+
221
+ var r1 = parent.document.createRange();
222
+ r1.selectNodeContents(within);
223
+
224
+ var text = getSelected(parent);
225
+ if (text) {
226
+ if ((((text + '').toLowerCase() == target.toLowerCase()) && bMatchCase==false) ||
227
+ ((text == target) && bMatchCase == true)) {
228
+ var rng = parent.getSelection().getRangeAt(0);
229
+ rng.deleteContents();
230
+ rng.insertNode(document.createTextNode(replaceWith));
231
+ }
232
+ }
233
+
234
+ if (sel.rangeCount) {
235
+ var ok = parent.findOne(target, bMatchCase, within, sel.anchorNode, sel.anchorOffset);
236
+ if (ok) {
237
+ jQuery('#divStatus').html('');
238
+ } else {
239
+ var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
240
+ if (ok) {
241
+ jQuery('#divStatus').html('');
242
+ } else {
243
+ jQuery('#divStatus').html('The specified text was not found.');
244
+ }
245
+ }
246
+ }
247
+ });
248
+
249
+ });
250
+
251
+ function getSelected(window) {
252
+ if (window.getSelection) { return window.getSelection(); }
253
+ else if (document.getSelection) { return document.getSelection(); }
254
+ else {
255
+ var selection = document.selection && document.selection.createRange();
256
+ if (selection.text) { return selection.text; }
257
+ return false;
258
+ }
259
+ return false;
260
+ }
261
+
262
+ </script>
263
+ </body>
264
+ </html>
@@ -0,0 +1,73 @@
1
+ /*
2
+ Show Grid Plugin
3
+ */
4
+
5
+ (function () {
6
+
7
+ var icon_html = '<svg width="0" height="0" style="position:absolute;display:none;">' +
8
+ '<defs>' +
9
+ '<symbol viewBox="0 0 512 512" id="ion-ios-grid-view-outline"><path d="M448 192v-16H336V64h-16v112H192V64h-16v112H64v16h112v128H64v16h112v112h16V336h128v112h16V336h112v-16H336V192h112zM320 320H192V192h128v128z"></path></symbol>' +
10
+ '</defs>' +
11
+ '</svg>';
12
+
13
+ _cb.addHtml(icon_html);
14
+
15
+ var css = '<style>' +
16
+ '.container.showgrid > div > div {outline: 1px solid rgba(132, 132, 132, 0.27); outline-offset: 1px;}' +
17
+ '</style>';
18
+
19
+ _cb.addCss(css);
20
+
21
+ var button_html = '<button id="btnShowGrid" title="Grid Outline">' +
22
+ '<svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.7);width:14px;height:14px;"><use xlink:href="#ion-ios-grid-view-outline"></use></svg>' +
23
+ '</button>';
24
+
25
+ _cb.addButton('showgrid', button_html, '#btnShowGrid', function () {
26
+
27
+ showGrid();
28
+
29
+ });
30
+
31
+ _cb.addButton2('showgrid', button_html, '#btnShowGrid', function () {
32
+
33
+ showGrid();
34
+
35
+ });
36
+
37
+ function showGrid() {
38
+
39
+ // Get all editable areas
40
+ const areas = document.querySelectorAll('.container');
41
+ Array.prototype.forEach.call(areas, function(area){
42
+
43
+ if(hasClass(area,'showgrid')){
44
+ removeClass(area, 'showgrid');
45
+ } else {
46
+ addClass(area, 'showgrid');
47
+ }
48
+ });
49
+ }
50
+
51
+ function addClass(element, classname) {
52
+ if(!element) return;
53
+ if(hasClass(element,classname)) return;
54
+ if(element.classList.length===0) element.className = classname;
55
+ else element.className = element.className + ' ' + classname;
56
+ element.className = element.className.replace(/ +/g, ' ');
57
+ }
58
+
59
+ function removeClass(element, classname) {
60
+ if(!element) return;
61
+ if(element.classList.length>0) {
62
+ element.className = element.className.replace(new RegExp('\\b'+ classname+'\\b', 'g'), '');
63
+ element.className = element.className.replace(/ +/g, ' ');
64
+ }
65
+ }
66
+
67
+ function hasClass(element, classname) {
68
+ if(!element) return false;
69
+ return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);
70
+ }
71
+
72
+ })();
73
+
@@ -0,0 +1,23 @@
1
+ Show Grid Plugin
2
+
3
+ To install the plugin, modify config file (contentbuilder\config.js) as follow:
4
+
5
+ _cb.settings.plugins = ['showgrid'];
6
+
7
+ This plugin will add a 'show grid outline' button on the 'More' popup on toolbar (click the 'More' button).
8
+
9
+ You can also add the "showgrid" button on the buttons or buttonsMore parameters:
10
+
11
+ var obj = $.contentbuilder({
12
+ ...
13
+ buttons: [..., "showgrid", ...]
14
+ });
15
+
16
+ or
17
+
18
+ var obj = $.contentbuilder({
19
+ ...
20
+ buttonsMore: [..., "showgrid", ...]
21
+ });
22
+
23
+ For more info about buttons or buttonsMore parameters, please check the ContentBuilder.js readme.txt.