Skip to content

Commit 277d8d7

Browse files
mas-iotamas-iota
authored
Merge pull request #77 from BuildFire/mcd-melinda
feat(mcd-melinda): handle setting tab , extract WYSIWYG content , han…
2 parents 3faa2f8 + e2f001f commit 277d8d7

File tree

17 files changed

+623
-171
lines changed

17 files changed

+623
-171
lines changed

‎plugin.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"enabled":true
1616
}
1717
, "settings":{
18-
"enabled":false
18+
"enabled":true
1919
}
2020
}
2121
,"widget":{

‎src/control/content/controlState.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// eslint-disable-next-line no-unused-vars
2+
const ControlState = {
3+
settings: null,
4+
};

‎src/control/content/index.html‎

Lines changed: 29 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -2,179 +2,48 @@
22
<html ng-app="textPlugin">
33
<head lang="en">
44
<meta charset="UTF-8">
5-
6-
<!-- CSS -->
7-
<link href="../../../../styles/helper.css" rel="stylesheet">
8-
<link href="../../../../styles/siteIcons.css" rel="stylesheet">
9-
5+
106
<!-- JS -->
117
<script src="../../../../scripts/buildfire.js"></script>
128
<script src="../../../../scripts/angular/angular.min.js"></script>
139
<script src="../../../../scripts/tinymce/tinymce.min.js"></script>
1410
<script src="../../../../scripts/tinymce/ui-tinymce.js"></script>
15-
11+
<script src="../../../../scripts/buildfire/services/searchEngine/searchEngine.js"></script>
12+
1613
<script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>
1714
<script src="../../../../scripts/sortable.min.js"></script>
1815
<script src="../../../../scripts/buildfire/components/carousel/carousel.js"></script>
19-
16+
17+
<script src="./controlState.js"></script>
18+
<script src="../../widget/global/js/services/AuthManager.js"></script>
19+
<script src="../../widget/global/js/models/Setting.js"></script>
20+
<script src="../../widget/global/js/repositories/Settings.js"></script>
21+
<script src="../../widget/global/js/utils.js"></script>
22+
<script src="../../widget/global/js/services/searchEngine.js"></script>
23+
<script src="./index.js"></script>
24+
25+
<!-- CSS -->
26+
<link href="../../../../styles/helper.css" rel="stylesheet">
27+
<link href="../../../../styles/siteIcons.css" rel="stylesheet">
28+
<link href="./style.css" rel="stylesheet"/>
2029

2130
</head>
31+
2232
<body ng-controller="textPluginCtrl" id="textApp">
23-
<div ng-form="frmMain">
24-
<div id="carousel"></div>
25-
<hr class="none">
26-
<div class="item clearfix row">
27-
<div class="labels col-md-3 padding-right-zero pull-left">
28-
<span>Text</span>
29-
</div>
33+
<div ng-form="frmMain" id="frMain" class="flex">
34+
<div id="carousel"></div>
35+
<hr class="none">
36+
<div class="item clearfix row">
37+
<div class="labels col-md-3 padding-right-zero pull-left">
38+
<span>Content</span>
3039
</div>
31-
<hr class="none">
32-
<div class="item clearfix row">
33-
<div class="main col-md-12 pull-left">
34-
<textarea id="text" ui-tinymce="editorOptions" class="form-control" rows="5" width="100%" ng-model="data.content.text"></textarea>
35-
</div>
40+
</div>
41+
<hr class="none">
42+
<div class="item clearfix row tinymce-editor">
43+
<div class="main col-md-12 pull-left">
44+
<textarea id="text" ui-tinymce="editorOptions" class="form-control" rows="5" width="100%" ng-model="data.content.text"></textarea>
3645
</div>
3746
</div>
38-
39-
<script>
40-
var textPluginApp = angular.module('textPlugin', [ 'ui.tinymce' ]);
41-
42-
textPluginApp.controller('textPluginCtrl', ['$scope', function ($scope) {
43-
var datastoreInitialized = false;
44-
45-
$scope.editorOptions = {
46-
plugins: 'advlist autolink link image lists charmap print preview',
47-
skin: 'lightgray',
48-
trusted: true,
49-
theme: 'modern',
50-
format: 'html',
51-
convert_urls : false,
52-
relative_urls : false
53-
54-
};
55-
56-
$scope.data = {
57-
content: {
58-
carouselImages: [],
59-
text: "<p>&nbsp;<br></p>"
60-
},
61-
design: {
62-
backgroundImage: null,
63-
backgroundBlur: 0,
64-
selectedLayout: 1
65-
}
66-
};
67-
68-
// create a new instance of the buildfire carousel editor
69-
var editor = new buildfire.components.carousel.editor("#carousel");
70-
71-
/*
72-
* Go pull any previously saved data
73-
* */
74-
buildfire.datastore.get(function (err, result) {
75-
76-
if (!err) {
77-
datastoreInitialized = true;
78-
} else {
79-
console.error("Error: ", err);
80-
return;
81-
}
82-
83-
if (result && result.data && !angular.equals({}, result.data) && result.id) {
84-
if(!result.data.design) result.data.design = $scope.data.design;
85-
$scope.data = result.data;
86-
$scope.id = result.id;
87-
if($scope.data.content && $scope.data.content.carouselImages)
88-
editor.loadItems($scope.data.content.carouselImages);
89-
if (tmrDelay) clearTimeout(tmrDelay);
90-
} else{
91-
$scope.data = { content :{
92-
text :
93-
'<p>The WYSIWYG (which stands for What You See Is What You Get) allows you to do some really cool stuff. You can add images like this</p>\
94-
<p><img src="https://static.pexels.com/photos/12057/pexels-photo-12057-large.jpeg" alt="" width="100%" height="auto" /></p>\
95-
<p>You can even create links like these:<br /> Link to web content like <a href="http://www.google.com">this</a><br /> Link to a phone number like this <a href="tel: 8005551234">8005551234</a><br /> Link to an email like this <a href="mailto:noreply@google.com">noreply@google.com</a></p>\
96-
<p>Want to add some super cool videos about this item? You can do that too!</p>\
97-
<p><iframe src="https://www.youtube.com/embed/wTcNtgA6gHs" width="100%" height="auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\
98-
<p>You can create bulleted and numbered lists like this:</p>\
99-
<ul>\
100-
<li>This is an item in a list</li>\
101-
<li>This is another item in a list</li>\
102-
<li>This is a last item in a list</li>\
103-
</ul>\
104-
<p>Want more info? Check out our tutorial by clicking the help button at the top of this page.</p>',
105-
106-
carouselImages :
107-
[{"action":"noAction","iconUrl":"http://imageserver.prod.s3.amazonaws.com/b55ee984-a8e8-11e5-88d3-124798dea82d/5db61d30-0854-11e6-8963-f5d737bc276b.jpg","title":"image 1"},{"action":"noAction","iconUrl":"http://imageserver.prod.s3.amazonaws.com/b55ee984-a8e8-11e5-88d3-124798dea82d/31c88a00-0854-11e6-8963-f5d737bc276b.jpeg","title":"image 2"}]
108-
},
109-
design: {
110-
backgroundImage: null,
111-
backgroundBlur: 0,
112-
selectedLayout: 1
113-
}
114-
};
115-
editor.loadItems($scope.data.content.carouselImages);
116-
}
117-
118-
/*
119-
* watch for changes in data and trigger the saveDataWithDelay function on change
120-
* */
121-
$scope.$watch('data', saveDataWithDelay, true);
122-
123-
if (!$scope.$$phase && !$scope.$root.$$phase) {
124-
$scope.$apply();
125-
}
126-
});
127-
128-
/*
129-
* Call the datastore to save the data object
130-
*/
131-
var saveData = function (newObj) {
132-
if (!datastoreInitialized) {
133-
console.error("Error with datastore didn't get called");
134-
return;
135-
}
136-
if(newObj.content.text.indexOf("src=\"//")!=-1){
137-
newObj.content.text= newObj.content.text.replace("src=\"//","src=\"https://")
138-
}
139-
if (newObj == undefined) return;
140-
141-
if ($scope.frmMain.$invalid) {
142-
console.warn('invalid data, details will not be saved');
143-
return;
144-
}
145-
146-
if(!newObj.content || !newObj.design)
147-
return;
148-
149-
buildfire.datastore.save(newObj, function (err, result) {
150-
if (err || !result) {
151-
console.error('Error saving the widget details: ', err);
152-
}
153-
else {
154-
console.info('Widget details saved');
155-
}
156-
});
157-
};
158-
159-
/*
160-
* create an artificial delay so api isnt called on every character entered
161-
* */
162-
var tmrDelay = null;
163-
var saveDataWithDelay = function (newObj, oldObj) {
164-
if (tmrDelay) clearTimeout(tmrDelay);
165-
if (angular.equals(newObj, oldObj)) return;
166-
tmrDelay = setTimeout(function () {
167-
saveData(newObj);
168-
}, 500);
169-
};
170-
171-
// this method will be called when a new item added to the list
172-
editor.onAddItems = editor.onDeleteItem = editor.onItemChange = editor.onOrderChange = function () {
173-
$scope.data.content.carouselImages = editor.items;
174-
saveData($scope.data);
175-
};
176-
177-
}]);
178-
</script>
47+
</div>
17948
</body>
18049
</html>

‎src/control/content/index.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
let textPluginApp = angular.module('textPlugin', ['ui.tinymce']);
2+
3+
textPluginApp.controller('textPluginCtrl', ['$scope', function ($scope) {
4+
var datastoreInitialized = false;
5+
6+
$scope.searchEngineIndexing = false;
7+
8+
$scope.editorOptions = {
9+
plugins: 'advlist autolink link image lists charmap print preview',
10+
skin: 'lightgray',
11+
trusted: true,
12+
theme: 'modern',
13+
format: 'html',
14+
convert_urls: false,
15+
relative_urls: false
16+
17+
};
18+
19+
$scope.data = {
20+
content: {
21+
carouselImages: [], text: "<p>&nbsp;<br></p>"
22+
}, design: {
23+
backgroundImage: null, backgroundBlur: 0, selectedLayout: 1
24+
}
25+
};
26+
27+
// create a new instance of the buildfire carousel editor
28+
var editor = new buildfire.components.carousel.editor("#carousel");
29+
30+
/*
31+
* Go pull any previously saved data
32+
* */
33+
buildfire.datastore.get(function (err, result) {
34+
35+
if (!err) {
36+
datastoreInitialized = true;
37+
} else {
38+
console.error("Error: ", err);
39+
return;
40+
}
41+
42+
if (result && result.data && !angular.equals({}, result.data) && result.id) {
43+
if (!result.data.design) result.data.design = $scope.data.design;
44+
$scope.data = result.data;
45+
$scope.id = result.id;
46+
if ($scope.data.content && $scope.data.content.carouselImages) editor.loadItems($scope.data.content.carouselImages);
47+
if (tmrDelay) clearTimeout(tmrDelay);
48+
} else {
49+
$scope.data = {
50+
content: {
51+
text: '<p>The WYSIWYG (which stands for What You See Is What You Get) allows you to do some really cool stuff. You can add images like this</p>\
52+
<p><img src="https://static.pexels.com/photos/12057/pexels-photo-12057-large.jpeg" alt="" width="100%" height="auto" /></p>\
53+
<p>You can even create links like these:<br /> Link to web content like <a href="http://www.google.com">this</a><br /> Link to a phone number like this <a href="tel: 8005551234">8005551234</a><br /> Link to an email like this <a href="mailto:noreply@google.com">noreply@google.com</a></p>\
54+
<p>Want to add some super cool videos about this item? You can do that too!</p>\
55+
<p><iframe src="https://www.youtube.com/embed/wTcNtgA6gHs" width="100%" height="auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\
56+
<p>You can create bulleted and numbered lists like this:</p>\
57+
<ul>\
58+
<li>This is an item in a list</li>\
59+
<li>This is another item in a list</li>\
60+
<li>This is a last item in a list</li>\
61+
</ul>\
62+
<p>Want more info? Check out our tutorial by clicking the help button at the top of this page.</p>',
63+
64+
carouselImages: [{
65+
"action": "noAction",
66+
"iconUrl": "http://imageserver.prod.s3.amazonaws.com/b55ee984-a8e8-11e5-88d3-124798dea82d/5db61d30-0854-11e6-8963-f5d737bc276b.jpg",
67+
"title": "image 1"
68+
}, {
69+
"action": "noAction",
70+
"iconUrl": "http://imageserver.prod.s3.amazonaws.com/b55ee984-a8e8-11e5-88d3-124798dea82d/31c88a00-0854-11e6-8963-f5d737bc276b.jpeg",
71+
"title": "image 2"
72+
}]
73+
}, design: {
74+
backgroundImage: null, backgroundBlur: 0, selectedLayout: 1
75+
}
76+
};
77+
editor.loadItems($scope.data.content.carouselImages);
78+
}
79+
80+
/*
81+
* watch for changes in data and trigger the saveDataWithDelay function on change
82+
* */
83+
$scope.$watch('data', saveDataWithDelay, true);
84+
85+
if (!$scope.$$phase && !$scope.$root.$$phase) {
86+
$scope.$apply();
87+
}
88+
});
89+
90+
AuthManager.refreshCurrentUser().then(function () {
91+
Settings.get().then((data) => $scope.searchEngineIndexing = data.searchEngineIndexing);
92+
});
93+
94+
/*
95+
* Call the datastore to save the data object
96+
*/
97+
var saveData = function (newObj, callBack) {
98+
if (!datastoreInitialized) {
99+
console.error("Error with datastore didn't get called");
100+
return;
101+
}
102+
if (newObj.content.text.indexOf("src=\"//") != -1) {
103+
newObj.content.text = newObj.content.text.replace("src=\"//", "src=\"https://")
104+
}
105+
if (newObj == undefined) return;
106+
107+
if ($scope.frmMain.$invalid) {
108+
console.warn('invalid data, details will not be saved');
109+
return;
110+
}
111+
112+
if (!newObj.content || !newObj.design) return;
113+
114+
buildfire.datastore.save(newObj, function (err, result) {
115+
if (err || !result) {
116+
console.error('Error saving the widget details: ', err);
117+
}
118+
callBack();
119+
});
120+
};
121+
var saveSearchEngine = function (content) {
122+
if (!$scope.searchEngineIndexing) return;
123+
buildfire.dynamic.expressions.evaluate({expression: content}, (err, result) => {
124+
if (err) return console.error(err);
125+
const content = prepareSearchEngineContent(result.evaluatedExpression);
126+
if (!content.title || !content.description) {
127+
SearchEngineService.delete().catch(()=>{
128+
buildfire.dialog.toast({
129+
message: 'Error indexing data.',
130+
type:'danger'
131+
});
132+
});
133+
return;
134+
}
135+
SearchEngineService.save(content.title, content.description).catch(()=>{
136+
buildfire.dialog.toast({
137+
message: 'Error indexing data.',
138+
type:'danger'
139+
});
140+
});
141+
})
142+
};
143+
/*
144+
* create an artificial delay so api isnt called on every character entered
145+
* */
146+
var tmrDelay = null;
147+
148+
var saveDataWithDelay = function (newObj, oldObj) {
149+
if (tmrDelay) clearTimeout(tmrDelay);
150+
if (angular.equals(newObj, oldObj)) return;
151+
tmrDelay = setTimeout(function () {
152+
saveData(newObj, function () {saveSearchEngine(newObj.content.text)});
153+
}, 500);
154+
};
155+
156+
// this method will be called when a new item added to the list
157+
editor.onAddItems = editor.onDeleteItem = editor.onItemChange = editor.onOrderChange = function () {
158+
$scope.data.content.carouselImages = editor.items;
159+
saveData($scope.data);
160+
};
161+
}]);

0 commit comments

Comments
 (0)