· 6 years ago · Sep 05, 2019, 06:12 PM
1
2
3angular.module("ContentLib",['slickCarousel','ngYoutube']).directive("contentKey", function(ApiCall,$location,$rootScope,$templateRequest,$compile,ytPlayer) {
4 // this directive need angular translate module + send $rootScope.UsedLang each time you change lang !!
5 return{
6 restrict: "E",
7 scope : {
8 key : '@',
9 customClass : '@',
10 fallbackMedia: '=',
11 fallbackText: '@',
12 loremSize: '@',
13 options : '=',
14 ContentType: '@type',
15 ContentTemplate: '@src',
16 emitfunc:'&emitFunc',
17 lang:'=translateLang'
18 },
19 link: function(scope, element, attrs)
20 {
21 // options is an object of params from Slick or youtube Api
22
23 loremipsumbuff = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices augue mi, eget scelerisque augue pretium sed. Nullam in ultricies ante. Mauris in egestas neque. Phasellus consectetur nisl imperdiet, vehicula est quis, tincidunt felis. Etiam rutrum nunc nec porta hendrerit. Integer in justo nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ornare ac urna a molestie. Nam massa nunc, convallis eget auctor vitae, interdum sit amet tortor. Fusce sagittis tristique sapien dignissim faucibus. Maecenas eu ligula ac est volutpat aliquam at nec ante. Praesent fringilla auctor semper. Sed vel porta mi, nec viverra eros. Ut varius mattis euismod. Nulla massa mauris, mollis vitae venenatis a, mollis et turpis. Sed pulvinar nisi a sem posuere vulputate.
24Etiam a dignissim purus, vel scelerisque sem. Sed maximus elementum posuere. Maecenas sit amet dolor elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris lacus dolor, pharetra in eros ut, egestas ornare leo. Praesent nec facilisis orci. Proin molestie neque vel ex interdum, sed ultricies nisi ornare. Proin fringilla turpis congue libero convallis vehicula. Vivamus quis ligula id augue imperdiet varius vitae bibendum felis. Pellentesque feugiat imperdiet risus, sed suscipit velit consequat non. Ut dapibus vitae erat nec venenatis. Praesent est diam, imperdiet a diam nec, condimentum pellentesque ligula. Cras ut ipsum non purus lacinia maximus ac sit amet magna. Nam maximus pharetra laoreet. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tincidunt ipsum vel fringilla volutpat. Aliquam tempor lacus mi, id faucibus ipsum iaculis eu. Nam augue lectus, vehicula dapibus aliquam sed, bibendum vitae augue. Mauris cursus eros sit amet lorem gravida cursus. In ac sem quam. Duis dictum, nulla auctor placerat auctor, justo augue consequat ante, vel efficitur mauris nulla ac dolor. Suspendisse potenti.
25Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer commodo massa lacus, sit amet tincidunt lacus suscipit id. Sed lorem nisl, sodales quis ligula in, tincidunt feugiat ipsum. Cras scelerisque lacinia placerat. Etiam consequat porttitor tortor sed dapibus. Sed in vestibulum lacus, cursus scelerisque metus. Nunc auctor varius dui blandit lobortis. Maecenas commodo mattis egestas. Vivamus vehicula mattis dictum. Etiam consequat imperdiet quam sed egestas. Donec quis nunc in nisi iaculis suscipit consequat vel mi. Cras placerat mi quis dapibus condimentum. Nullam eleifend maximus porttitor. Etiam elit metus, bibendum ac facilisis id, lobortis et mi. Sed condimentum dapibus magna et convallis.
26Sed condimentum neque a orci pulvinar ornare. Sed luctus, lectus non efficitur hendrerit, tortor ligula pulvinar risus, a laoreet purus ipsum sed lacus. Vivamus vitae imperdiet lectus. Proin faucibus tellus cursus nibh suscipit venenatis. Etiam pretium, justo ut consectetur dapibus, odio mi ornare dui, eu molestie sem enim ut sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae nisl ligula. Nullam pulvinar ipsum ac lectus facilisis, ut finibus libero tincidunt. Vestibulum tempus diam non pellentesque lacinia. Quisque tempor fringilla enim. Curabitur ut lacus eget lectus posuere congue id aliquet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec libero dignissim, iaculis orci fermentum, imperdiet. `;
27 scope.contentText = null;
28
29
30 scope.Content = null; // MAIN CONTENT VARIABLE
31
32
33 //all params from slick carousel api
34 scope.carouselOptions = null;
35 //all params from youtube api
36 scope.videoOptions = {};
37 scope.VideoStop = null;
38 scope.playerName = '';
39
40 if(scope.ContentType == undefined || ["singlemedia","media","text","menu"].indexOf(scope.ContentType) == -1)
41 return;
42
43 function LoadFallbackSlider()
44 {
45 if(scope.ContentType != undefined && scope.ContentType=="media")
46 {
47 if(scope.fallbackMedia!= undefined)
48 {
49 if(angular.isArray(scope.fallbackMedia))
50 scope.Content = scope.fallbackMedia.map( (v) => {
51 var res = {"type":"img","link":null,"title":null,"media":v};
52 if(angular.isString(v))
53 res.media = v;
54 else
55 {
56 res.media = (v.media != undefined) ? v.media : null;
57 res.link = (v.link != undefined) ? v.link : null;
58 res.title = (v.title != undefined) ? v.title : null;
59 res.type = (v.type != undefined) ? v.type : "img";
60 }
61
62 return res;
63 } );
64 else
65 scope.Content = [{"type":"img","link":null,"media": scope.fallbackMedia }];
66 }
67 else
68 scope.Content = [{"type":"img","link":null,"media": "https://via.placeholder.com/850.png?text=Slider#1"},{"type":"img","link":null,"media": "https://via.placeholder.com/850.png?text=Slider#2"}];
69 }
70 }
71
72 function LoadFallbackImage()
73 {
74 if(scope.ContentType != undefined && scope.ContentType=="singlemedia")
75 {
76 if(scope.fallbackMedia!= undefined )
77 {
78 scope.Content = {"type":"img","link":null,"media": null,"title":null };
79
80 if(angular.isString(scope.fallbackMedia))
81 scope.Content.media = scope.fallbackMedia;
82 else
83 {
84 scope.Content.media = (scope.fallbackMedia.media != undefined ) ? scope.fallbackMedia.media : null;
85 scope.Content.link = (scope.fallbackMedia.link != undefined ) ? scope.fallbackMedia.link : null;
86 scope.Content.title = (scope.fallbackMedia.title != undefined ) ? scope.fallbackMedia.link : null;
87 scope.Content.type = (scope.fallbackMedia.type != undefined ) ? scope.fallbackMedia.type : "img";
88
89 }
90 }
91 else
92 scope.Content = {"type":"img","link":null,"title":null,"media": "https://via.placeholder.com/850.png?text="+scope.key };
93 }
94 }
95
96 function LoadFallbackText()
97 {
98 if(scope.ContentType!= undefined && scope.ContentType == "text")
99 {
100 if(scope.loremSize!= undefined)
101 scope.Content = {'text':loremipsumbuff.substr(0,scope.loremSize) ,'translate':false};
102 else
103 {
104 if(scope.fallbackText != undefined)
105 scope.Content = {'text':scope.fallbackText ,'translate':false};
106 else
107 scope.Content = {'text':loremipsumbuff ,'translate':false};
108
109 }
110 }
111 }
112
113 if(scope.options != undefined )
114 {
115 if(scope.options.video != undefined)
116 scope.videoOptions = scope.options.video;
117 if(scope.options.carousel != undefined)
118 scope.carouselOptions = scope.options.carousel;
119 }
120 else
121 scope.carouselOptions = {
122 enabled: true,
123 autoplay: true,
124 autoplaySpeed: 3000,
125 arrows:false,
126 event: {
127 afterChange: function (e, slick, currentSlide, nextSlide)
128 {
129 if(typeof scope.VideoPause === "function")
130 {
131 scope.VideoPause();
132 scope.VideoPause = undefined;
133 }
134 }
135 }
136 };
137
138 function GetContent()
139 {
140 var data = {
141 'id' : scope.key,
142 'page' : $location.path()
143 }
144 ApiCall.Call("api/plugins/frontend/sections",data).then(function(response)
145 {
146 if(response.Success != undefined && response.Success)
147 {
148 if( !response.Info.enabled || response.Info.type != scope.ContentType )
149 return false;
150
151 scope.emitfunc({"$data":response.Info});
152 switch(response.Info.type)
153 {
154 case "text":
155 if(angular.isArray(response.Info.content) && !response.Info.content.length )
156 LoadFallbackText();
157 else
158 scope.Content = {"text":response.Info.content , "translate":true};
159 break;
160
161 case "media":
162 DisplaySlider(response.Info.content);
163 break;
164
165 case "singlemedia":
166 DisplayMedia(response.Info.content);
167 break;
168
169 case "menu":
170 DisplayMenu(response.Info.content);
171 break;
172 }
173 }
174 else
175 {
176 switch(scope.ContentType)
177 {
178 case "text":
179 LoadFallbackText();
180 break;
181
182 case "media":
183 LoadFallbackSlider();
184 break;
185
186 case "singlemedia":
187 LoadFallbackImage();
188 break;
189
190 }
191 }
192 });
193 }
194
195 //event handler in video carousel
196 scope.ytPlayer;
197 scope.$on('ngYoutubePlayer:onPlayerReady', function( event ,data, id) {
198 scope.ytPlayer = ytPlayer;
199 });
200
201 scope.$on('ngYoutubePlayer:PLAYING', function( event ,data, id)
202 {
203 var playerid = data.target.h.id;
204 scope.VideoPause = function()
205 {
206 scope.ytPlayer = ytPlayer;
207 scope.ytPlayer[playerid].pauseVideo();
208 }
209
210 });
211
212 scope.CheckType = function(value)
213 {
214 return value instanceof Array
215 }
216
217 function DisplayMenu(value)
218 {
219 scope.Content = value;
220 }
221
222 function DisplaySlider(value)
223 {
224 if(!value.length)
225 LoadFallbackSlider();
226 else
227 scope.Content = value;
228 }
229
230 function DisplayMedia(value)
231 {
232 if(value.media == undefined)
233 LoadFallbackImage();
234 else
235 scope.Content = value;
236 }
237
238
239 switch(scope.ContentType)
240 {
241 case "singlemedia":
242 var url = (scope.ContentTemplate != undefined) ? scope.ContentTemplate : "/lib/content/MediaDefaultTemplate.html";
243 //var url = "/lib/content/MediaDefaultTemplate.html";
244 break;
245
246 case "media":
247 var url = (scope.ContentTemplate != undefined) ? scope.ContentTemplate : "/lib/content/CarouselDefaultTemplate.html";
248 //var url = "/lib/content/CarouselDefaultTemplate.html";
249 break;
250
251 case "text":
252 var url = (scope.ContentTemplate != undefined) ? scope.ContentTemplate : "/lib/content/TextDefaultTemplate.html";
253 break;
254
255 case "menu":
256 var url = (scope.ContentTemplate != undefined) ? scope.ContentTemplate : "/lib/content/MenuDefaultTemplate.html";
257 break;
258 }
259
260 $templateRequest(url).then(function(html){
261 var el = $compile(html)(scope);
262 element.html(el);
263 });
264
265 //############################## intial ###############################
266
267 GetContent();
268
269 }
270 }
271 });