Skip to content

Commit 18b6640

Browse files
o5faruko5faruk
authored
Merge pull request #121 from nteske/carousel
Carousel
2 parents e2a127a + c52f48d commit 18b6640

File tree

3 files changed

+164
-24
lines changed

3 files changed

+164
-24
lines changed

‎control/content/app.services.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@
4949
"title": "image"
5050
}],
5151
"text": "<p>With the Folder plugin you can categorize existing plugins so that you can easily direct your users to the proper content. Check out our tutorial in our knowledge base for more information. HINT: You'll also want to check out our article on the WYSIWYG</p>",
52-
"loadAllPlugins": false
52+
"loadAllPlugins": false,
53+
"speed":5000,
54+
"order":0,
55+
"display":0
5356
},
5457
"design": {
5558
"backgroundImage": null,
@@ -71,7 +74,10 @@
7174
"content": {
7275
"carouselImages": [],
7376
"text": "",
74-
"loadAllPlugins": false
77+
"loadAllPlugins": false,
78+
"speed":5000,
79+
"order":0,
80+
"display":0
7581
},
7682
"design": {
7783
"backgroundImage": null,

‎control/content/content.controller.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
.controller('folderPluginCtrl', ['$scope', 'Messaging', 'Utility',
77
function ($scope, Messaging, Utility) {
88
var tmpCarousalData = null;
9-
var editor = new buildfire.components.carousel.editor("#carousel");
9+
var tmpCarousalSettings=null;
10+
var editor = new buildfire.components.carousel.editor("#carousel",{},5000,0,0);
1011
var _buildfire = {
1112
plugins: {
1213
dataType: "pluginInstance",
@@ -64,6 +65,15 @@
6465
if ($scope.data && $scope.data.content && $scope.data.content.carouselImages) {
6566
editor.loadItems($scope.data.content.carouselImages);
6667
}
68+
if ($scope.data && $scope.data.content && $scope.data.content.speed) {
69+
editor.setOptionSpeed($scope.data.content.speed);
70+
}
71+
if ($scope.data && $scope.data.content && $scope.data.content.order) {
72+
editor.setOptionOrder($scope.data.content.order);
73+
}
74+
if ($scope.data && $scope.data.content && $scope.data.content.display) {
75+
editor.setOptionDisplay($scope.data.content.display);
76+
}
6777
if ($scope.data && $scope.data._buildfire && $scope.data._buildfire.plugins && $scope.data._buildfire.plugins.result) {
6878
var pluginsData = Utility.getPluginDetails($scope.data._buildfire.plugins.result, $scope.data._buildfire.plugins.data);
6979
if ($scope.data.content && $scope.data.content.loadAllPlugins) {
@@ -160,6 +170,12 @@
160170
editor.loadItems([]);
161171
}
162172

173+
if(tmpCarousalSettings){
174+
newObj.content.speed= tmpCarousalSettings.speed;
175+
newObj.content.order= tmpCarousalSettings.order;
176+
newObj.content.display= tmpCarousalSettings.display;
177+
}
178+
163179
$scope.data = newObj;
164180
}
165181
tmrDelay = setTimeout(function () {
@@ -188,6 +204,24 @@
188204
Utility.digest($scope);
189205
};
190206

207+
editor.onOptionSpeedChange = function (speed) {
208+
tmpCarousalSettings = {speed:speed,order:0,display:0};
209+
$scope.data.content.speed = speed;
210+
Utility.digest($scope);
211+
};
212+
213+
editor.onOptionOrderChange = function (order) {
214+
tmpCarousalSettings = {speed:5000,order:order,display:0};
215+
$scope.data.content.order = order;
216+
Utility.digest($scope);
217+
};
218+
219+
editor.onOptionDisplayChange = function (display) {
220+
tmpCarousalSettings = {speed:5000,order:0,display:display};
221+
$scope.data.content.display = display;
222+
Utility.digest($scope);
223+
};
224+
191225
plugins.onAddItems = function () {
192226
var scopeItems = $scope.data._buildfire.plugins.data;
193227
var itemIds = getPluginsIds(plugins.items);

‎widget/index.html‎

Lines changed: 121 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,8 @@
120120

121121
var plugins = [];
122122
var compressImages = false;
123+
var changeTimer;
124+
var lastImage=null;
123125

124126
var lazyLoad = {
125127
loadImage: function (item) {
@@ -378,7 +380,7 @@
378380
pluginItemFrame.appendChild(pluginItemSlidesContainer);
379381
pluginsContainer.appendChild(pluginItemFrame);
380382

381-
renderCarousel(null, layout);
383+
renderCarousel(null, layout,0,0,0);
382384
}
383385

384386
//load image in first render
@@ -387,7 +389,10 @@
387389

388390
if (layout != 12) {
389391
//Render Carousel
390-
renderCarousel(obj.data.content.carouselImages, layout);
392+
var speed=(obj.data.content&&obj.data.content.speed)?obj.data.content.speed:5000;
393+
var order=(obj.data.content&&obj.data.content.order)?obj.data.content.order:0;
394+
var display=(obj.data.content&&obj.data.content.display)?obj.data.content.display:0;
395+
renderCarousel(obj.data.content.carouselImages, layout,speed,order,display);
391396
}
392397
}
393398

@@ -676,38 +681,133 @@
676681
});
677682
}
678683

679-
function renderCarousel(carouselImages, layout) {
684+
function shuffle(a,first,last) {
685+
var j, x, i;
686+
for (i = a.length - 1; i > 0; i--) {
687+
j = Math.floor(Math.random() * (i + 1));
688+
x = a[i];
689+
a[i] = a[j];
690+
a[j] = x;
691+
}
692+
if(last==a[0]||first==a[a.length-1]) return shuffle(a,first,last);
693+
else return a;
694+
}
695+
696+
function randomizeArray(sent){
697+
shuffle(sent,null,null);
698+
var dup=Array.from(sent);
699+
shuffle(dup,null,sent[sent.length - 1]);
700+
sent.push(...dup);
701+
shuffle(dup,sent[0],sent[sent.length - 1]);
702+
sent.push(...dup);
703+
}
704+
function changeImage(carouselImages,random){
705+
var oldState=carouselImages;
706+
if(random){
707+
carouselImages=[carouselImages[Math.floor(Math.random() * carouselImages.length)]];
708+
709+
if(carouselImages[0]!=lastImage[0]){
710+
lastImage=carouselImages;
711+
appendOneImage(carouselImages);
712+
}else changeImage(oldState);
713+
}else{
714+
var index=carouselImages.indexOf(lastImage[0]);
715+
var sendIndex=0;
716+
if(index==-1||index==carouselImages.length-1)carouselImages=[carouselImages[0]];
717+
else {carouselImages=[carouselImages[index+1]];sendIndex=index+1;}
718+
lastImage=carouselImages;
719+
var isHome=(new URLSearchParams(window.location.search).get('fid').split("=")[0]=="launcherPluginv");
720+
var storagePlace=(isHome)?"carouselLastImageHome":"carouselLastImage";
721+
buildfire.localStorage.setItem(storagePlace,sendIndex, function(e,r){
722+
appendOneImage(carouselImages);
723+
});
724+
}
725+
726+
}
727+
function appendOneImage(carouselImages){
728+
var myImg=document.getElementById("one_img");
729+
if(myImg==null){
730+
carouselContainer.innerHTML = '';
731+
var img = document.createElement('img');
732+
img.setAttribute("id", "one_img");
733+
img.setAttribute("src", buildfire.imageLib.cropImage(carouselImages[0].iconUrl, {
734+
width: window.innerWidth,
735+
height: Math.ceil(9 * (window.innerWidth) / 16)
736+
}));
737+
img.alt = "Carousel Image";
738+
carouselContainer.appendChild(img);
739+
img.addEventListener("click", function () {
740+
buildfire.actionItems.execute(carouselImages[0], function (err, result) {
741+
if (err) {
742+
console.warn('Error openning slider action: ', err);
743+
}
744+
});
745+
});
746+
}else{
747+
myImg.setAttribute("src", buildfire.imageLib.cropImage(carouselImages[0].iconUrl, {
748+
width: window.innerWidth,
749+
height: Math.ceil(9 * (window.innerWidth) / 16)
750+
}));
751+
myImg.removeEventListener("click",function(){});
752+
myImg.addEventListener("click", function () {
753+
buildfire.actionItems.execute(carouselImages[0], function (err, result) {
754+
if (err) {
755+
console.warn('Error openning slider action: ', err);
756+
}
757+
});
758+
});
759+
}
760+
}
761+
function renderCarousel(carouselImages, layout,speed,order,display) {
762+
if(changeTimer) clearInterval(changeTimer);
680763
if (layout != 12) {
681764
if (carouselImages && carouselImages.length > 0) {
682765
/*
683766
if more than one image add carousel else add image directly to the carousel container
684767
*/
768+
var isHome=(new URLSearchParams(window.location.search).get('fid').split("=")[0]=="launcherPluginv");
769+
var storagePlace=(isHome)?"carouselLastImageHome":"carouselLastImage";
770+
if(order == 0 && display== 1 && carouselImages.length > 1){
771+
buildfire.localStorage.getItem(storagePlace, function(e,r) {
772+
var images=carouselImages;
773+
var sendIndex=0;
774+
if(r==null){
775+
carouselImages=[carouselImages[0]];
776+
}else{
777+
var index=Number(r);
778+
if(index==-1||index==carouselImages.length-1)carouselImages=[carouselImages[0]];
779+
else {carouselImages=[carouselImages[index+1]];sendIndex=index+1;}
780+
}
781+
buildfire.localStorage.setItem(storagePlace,sendIndex, function(e,r){
782+
lastImage=carouselImages;
783+
if(speed!=0)changeTimer=setInterval(changeImage, speed,images,false);
784+
});
785+
});
786+
}
787+
else if(order == 1 && display== 1 && carouselImages.length > 1){
788+
if(speed!=0){
789+
changeTimer=setInterval(changeImage, speed,carouselImages,true);
790+
}
791+
carouselImages=[carouselImages[Math.floor(Math.random() * carouselImages.length)]];
792+
lastImage=carouselImages;
793+
buildfire.localStorage.removeItem(storagePlace);
794+
795+
}else if(order == 1 && display== 0 && carouselImages.length > 1){
796+
randomizeArray(carouselImages);
797+
buildfire.localStorage.removeItem(storagePlace);
798+
}
685799
if (carouselImages.length > 1) {
686800

687801
var carousel = new buildfire.components.carousel.view({
688802
selector: carouselContainer,
689803
items: carouselImages,
690-
speed: 1000
804+
loop: (speed!=0),
805+
infinite:false,
806+
autoInterval:speed
691807
});
692808

693809
} else {
694-
//add image directly to carousel container without adding the carousel lib
695-
carouselContainer.innerHTML = '';
696-
//append image tag
697-
var img = document.createElement('img');
698-
img.setAttribute("src", buildfire.imageLib.cropImage(carouselImages[0].iconUrl, {
699-
width: window.innerWidth,
700-
height: Math.ceil(9 * (window.innerWidth) / 16)
701-
}));
702-
img.alt = "Carousel Image";
703-
carouselContainer.appendChild(img);
704-
img.addEventListener("click", function () {
705-
buildfire.actionItems.execute(carouselImages[0], function (err, result) {
706-
if (err) {
707-
console.warn('Error openning slider action: ', err);
708-
}
709-
});
710-
});
810+
appendOneImage(carouselImages);
711811
}
712812

713813
carouselContainer.classList.remove('hide');

0 commit comments

Comments
 (0)