Skip to content

Commit f4b374d

Browse files
modularcodermodularcoder
committed
Migrate few libraries from bower to npm
Update quill editor version
1 parent caee0af commit f4b374d

File tree

4 files changed

+164
-132
lines changed

4 files changed

+164
-132
lines changed

‎build/paths/vendor.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@ var bowerDir = config.bowerDir;
5151
config.npmDir + '/jquery-flot/jquery.flot.pie.js',
5252
config.npmDir + '/jquery-flot/jquery.flot.time.js',
5353
config.npmDir + '/jquery.flot.tooltip/js/jquery.flot.tooltip.js',
54+
config.npmDir + '/jquery-validation/dist/jquery.validate.js',
55+
config.npmDir + '/jquery-sparkline/jquery.sparkline.js',
56+
config.npmDir + '/jqvmap/dist/jquery.vmap.js',
57+
config.npmDir + '/jqvmap/dist/maps/jquery.vmap.world.js',
58+
config.npmDir + '/metismenu/dist/metisMenu.js',
59+
config.npmDir + '/nprogress/nprogress.js',
60+
config.npmDir + '/quill/dist/quill.js',
5461
];
5562

5663
var bowerScripts = mainBowerFiles({
@@ -61,7 +68,7 @@ var bowerDir = config.bowerDir;
6168
paths: rootDir
6269
});
6370

64-
bowerScripts.splice(0, npmScripts.length);
71+
bowerScripts.splice(0, npmScripts.length + 2);
6572

6673
var scripts = [].concat(npmScripts, bowerScripts);
6774

@@ -74,14 +81,32 @@ var bowerDir = config.bowerDir;
7481
* Vendor style files
7582
************************************************/
7683

77-
exports.styles = mainBowerFiles({
84+
var npmStyles = [
85+
config.npmDir + '/quill/dist/quill.core.css',
86+
config.npmDir + '/quill/dist/quill.snow.css',
87+
];
88+
89+
var bowerStyles = mainBowerFiles({
7890
filter: [
7991
'**/*.css',
8092
'!**/*.min.css'
8193
],
8294
paths: rootDir
8395
});
8496

97+
bowerStyles = bowerStyles.filter((item) => {
98+
return !item.includes('quill.');
99+
});
100+
101+
// bowerStyles.splice(0, npmStyles.length);
102+
103+
var styles = [].concat(npmStyles, bowerStyles);
104+
105+
106+
console.log(styles);
107+
108+
exports.styles = styles;
109+
85110

86111
/***********************************************
87112
* Vendor assets files

‎src/app/_common/editor/editor.hbs

Lines changed: 111 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,117 @@
11
<div class="wyswyg">
22
<div class="toolbar">
3-
<span class="ql-format-group">
4-
<select title="Size" class="ql-size">
5-
<option value="10px">Small</option>
6-
<option value="13px" selected>Normal</option>
7-
<option value="18px">Large</option>
8-
<option value="32px">Huge</option>
9-
</select>
10-
</span>
11-
<span class="ql-format-group">
12-
<span title="Bold" class="ql-format-button ql-bold"></span>
13-
<span class="ql-format-separator"></span>
14-
<span title="Italic" class="ql-format-button ql-italic"></span>
15-
<span class="ql-format-separator"></span>
16-
<span title="Underline" class="ql-format-button ql-underline"></span>
17-
<span class="ql-format-separator"></span>
18-
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
19-
</span>
20-
<span class="ql-format-group">
21-
<select title="Text Color" class="ql-color">
22-
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected></option>
23-
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
24-
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
25-
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
26-
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
27-
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
28-
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
29-
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
30-
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
31-
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
32-
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
33-
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
34-
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
35-
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
36-
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
37-
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
38-
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
39-
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
40-
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
41-
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
42-
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
43-
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
44-
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
45-
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
46-
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
47-
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
48-
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
49-
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
50-
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
51-
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
52-
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
53-
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
54-
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
55-
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
56-
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
57-
</select>
58-
<span class="ql-format-separator"></span>
59-
<select title="Background Color" class="ql-background">
60-
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
61-
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
62-
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
63-
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
64-
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
65-
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
66-
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
67-
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected></option>
68-
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
69-
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
70-
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
71-
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
72-
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
73-
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
74-
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
75-
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
76-
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
77-
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
78-
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
79-
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
80-
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
81-
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
82-
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
83-
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
84-
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
85-
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
86-
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
87-
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
88-
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
89-
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
90-
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
91-
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
92-
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
93-
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
94-
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
95-
</select>
96-
</span>
97-
<span class="ql-format-group">
98-
<span title="List" class="ql-format-button ql-list"></span>
99-
<span class="ql-format-separator"></span>
100-
<span title="Bullet" class="ql-format-button ql-bullet"></span>
101-
<span class="ql-format-separator"></span>
102-
<select title="Text Alignment" class="ql-align">
103-
<option value="left" label="Left" selected></option>
104-
<option value="center" label="Center"></option>
105-
<option value="right" label="Right"></option>
106-
<option value="justify" label="Justify"></option>
107-
</select>
108-
</span>
109-
<span class="ql-format-group">
110-
<span title="Link" class="ql-format-button ql-link"></span>
111-
<span class="ql-format-separator"></span>
112-
{{!-- <span title="Image" class="ql-format-button ql-image"></span> --}}
113-
<button type="button" title="Image" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#modal-media">
114-
<i class="fa fa-image"></i> Media
115-
</button>
116-
</span>
117-
<span class="ql-format-group">
118-
</span>
119-
</div>
1203

121-
<!-- Create the editor container -->
4+
<select class="ql-size">
5+
<option value="small"></option>
6+
<option selected></option>
7+
<option value="large"></option>
8+
<option value="huge"></option>
9+
</select>
10+
11+
<button class="ql-bold"></button>
12+
<button class="ql-italic"></button>
13+
<button class="ql-underline"></button>
14+
<button class="ql-strike"></button>
15+
16+
<select title="Text Color" class="ql-color">
17+
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected></option>
18+
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
19+
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
20+
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
21+
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
22+
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
23+
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
24+
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
25+
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
26+
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
27+
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
28+
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
29+
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
30+
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
31+
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
32+
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
33+
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
34+
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
35+
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
36+
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
37+
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
38+
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
39+
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
40+
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
41+
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
42+
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
43+
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
44+
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
45+
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
46+
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
47+
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
48+
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
49+
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
50+
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
51+
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
52+
</select>
53+
<select title="Background Color" class="ql-background">
54+
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
55+
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
56+
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
57+
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
58+
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
59+
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
60+
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
61+
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected></option>
62+
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
63+
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
64+
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
65+
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
66+
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
67+
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
68+
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
69+
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
70+
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
71+
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
72+
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
73+
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
74+
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
75+
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
76+
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
77+
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
78+
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
79+
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
80+
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
81+
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
82+
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
83+
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
84+
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
85+
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
86+
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
87+
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
88+
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
89+
</select>
90+
91+
<button class="ql-list" value="ordered"></button>
92+
<button class="ql-list" value="bullet"></button>
93+
94+
<select title="Text Alignment" class="ql-align">
95+
<option selected></option>
96+
<option value="center" label="Center"></option>
97+
<option value="right" label="Right"></option>
98+
<option value="justify" label="Justify"></option>
99+
</select>
100+
101+
<button class="ql-link"></button>
102+
103+
<button
104+
style="width: auto;"
105+
type="button"
106+
title="Image"
107+
class="btn btn-secondary btn-sm"
108+
data-toggle="modal"
109+
data-target="#modal-media">
110+
<i class="fa fa-image"></i> Media
111+
</button>
112+
113+
</div>
122114
<div class="editor">
123115
{{{this.content}}}
124116
</div>
125-
</div>
117+
</div>

‎src/app/_common/editor/editor.js

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,35 @@ $(function() {
22

33
$(".wyswyg").each(function() {
44

5-
var $toolbar = $(this).find(".toolbar");
65
var $editor = $(this).find(".editor");
6+
var $toolbar = $(this).find(".toolbar");
77

8+
console.log("toolbar", $toolbar.get(0));
89

910
var editor = new Quill($editor.get(0), {
10-
theme: 'snow'
11+
theme: 'snow',
12+
// modules: {
13+
// toolbar: toolbarOptions
14+
// }
15+
modules: {
16+
toolbar: $toolbar.get(0)
17+
}
1118
});
1219

13-
editor.addModule('toolbar', {
14-
container: $toolbar.get(0) // Selector for toolbar container
15-
});
20+
// var $toolbar = $(this).find(".toolbar");
21+
// var $editor = $(this).find(".editor");
22+
23+
24+
// var editor = new Quill($editor.get(0), {
25+
// theme: 'snow'
26+
// });
27+
28+
// editor.addModule('toolbar', {
29+
// container: $toolbar.get(0) // Selector for toolbar container
30+
// });
1631

1732

1833

1934
});
20-
21-
});
35+
36+
});

‎src/app/items/editor/item-editor-page.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
layout: app/app-layout
33
pagename: item-editor
4-
images:
4+
images:
55
- url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
66
- url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
77
- url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
8-
gallery:
8+
gallery:
99
- url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
1010
- url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
1111
- url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
@@ -47,7 +47,7 @@ gallery:
4747
{{#editor}}
4848
Hello World
4949
{{/editor}}
50-
50+
5151
</div>
5252
</div>
5353

@@ -115,4 +115,4 @@ gallery:
115115

116116

117117
</div>
118-
</form>
118+
</form>

0 commit comments

Comments
 (0)