Angular.tile version 3

Developer
Anton
Size
3,114 Kb
Views
4,048
  1. Angular.tile version 3 Previews
  2. Angular.tile version 3 HTML Codes
  3. Angular.tile version 3 JS Codes

How do I make an angular.tile version 3?

What is a angular.tile version 3? How do you make a angular.tile version 3? This script and codes were developed by Anton on 11 January 2023, Wednesday.

Angular.tile version 3 Previews
IQ Test

Angular.tile version 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular.tile version 3</title>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular.tile version 3 - Script Codes JS Codes

var data = [{"Id": 0, "Name": "Ids/0.jpg", "callout":"sometext", "Category":"Mixed use", "colspan":4, "rawspan":2, "class":"yellow"}, {"Id": 1, "Name": "Ids/1.jpg", "callout":"sometext", "Category":"Studio", "colspan":4, "rawspan":2, "class":"purple"}, {"Id": 2, "Name": "Ids/2.jpg", "callout":"sometext", "Category":"Hospitality","colspan":8, "rawspan":2, "class":"red"}, {"Id": 3, "Name": "Ids/3.jpg", "callout":"sometext", "Category":"Offices", "colspan":4, "rawspan":4, "class":"yellow"}, {"Id": 4, "Name": "Ids/4.jpg", "callout":"sometext", "Category":"Museum", "colspan":2, "rawspan":2, "class":"green"}, {"Id": 5, "Name": "Ids/5.jpeg", "callout":"sometext", "Category":"Museum", "colspan":2, "rawspan":2, "class":"purple"}, {"Id": 6, "Name": "Ids/6.jpg", "callout":"sometext", "Category":"Offices", "colspan":4, "rawspan":4, "class":"green"}, {"Id": 7, "Name": "Ids/7.jpg", "callout":"sometext", "Category":"Hospitality","colspan":4, "rawspan":2, "class":"red"}, {"Id": 8, "Name": "Ids/eight.jpg", "callout":"sometext", "Category":"Studio", "colspan":4, "rawspan":2, "class":"gray"}, {"Id": 9, "Name": "Ids/nine.jpg", "callout":"sometext", "Category":"Mixed use","colspan":4, "rawspan":2, "class":"red"}, {"Id": 10, "Name": "Ids/nine.jpg", "callout":"sometext", "Category":"Mixed use","colspan":4, "rawspan":1, "class":"red"}, {"Id": 11, "Name": "Ids/ten.jpg", "callout":"sometext", "Category":"Studio", "colspan":4, "rawspan":1, "class":"yellow"}, {"Id": 12, "Name": "Ids/nine.jpg", "callout":"sometext", "Category":"Offices", "colspan":8, "rawspan":2, "class":"red"} ];
// run the test fot the last item:
// 2.2, 4.1, 4.2, 4.4, 8.2
var items = []
var main = []
var left = []
var leftovers = []
var two2 = []
var four2 = []
var four1 = []
var four4 = []
var eight2 =[]
var arr1 = []
var arr2 = []
var arr3 = []
var arr4 = []
var arr5 = []
var arr6 = []
var arr7 = []
;	for (var bob in data) { var item = {}; item.cols = data[bob].colspan; item.rows = data[bob].rawspan; item.id = data[bob].Id; items.push(item); document.write(' '+items[bob].id); } console.log(items); document.write('</br></br>'); var l = items.length;
var myData =[];
var x =0;
for (i=0;i<l;i++){ //x=x+items[i].rows; //document.write('</br>'+x); if (items[i].cols==2 && items[i].rows==2){ two2.push(items[i].id); } else if (items[i].cols==4 && items[i].rows==1){ four1.push(items[i].id); } else if (items[i].cols==4 && items[i].rows==2){ four2.push(items[i].id); } else if (items[i].cols==4 && items[i].rows==4){ four4.push(items[i].id); } else if (items[i].cols==8 && items[i].rows==2){ eight2.push(items[i].id); }
}
var box22 =_.size(two2);
var box41 = _.size(four1);
var box42 =_.size(four2);
var box44 =_.size(four4);
var box82 =_.size(eight2);
//check for the working space
document.write('</br> Size of 2:2 array is '+_.size(two2));
document.write('</br> Size of 4:1 array is '+_.size(four1));
document.write('</br> Size of 4:2 array is '+_.size(four2));
document.write('</br> Size of 4:4 array is '+_.size(four4));
document.write('</br> Size of 8:2 array is '+_.size(eight2));
var space = box22*(2*2)+box41*(4)+box42*(4*2)+box44*(4*4)+box82*(8*2);
document.write("</br>Space is "+space);
//check for the space that's not gonna be full
var chunk = space%8;
document.write("</br>Chunk is "+chunk);
//cut off the extra space so it could be appended to the end of array
var box = space - chunk;
var stage1 = box/8;
document.write("</br>The heigth is "+stage1);
//if stage1 is odd then 4.1 go next to each other
var iseven;
function oddeven(){ if (stage1%2==1){ iseven = 1; // four1 has to be next to each other //document.write('</br>ODD'); } else { iseven = 0; //four1 can be on top of each other //document.write('</br>EVEN'); }
}
function sparepiece (){ if (chunk>0){ //document.write('</br>There is still an extra chunk left somewhere'); if (chunk == 4 && box41%2==1){ items.splice(four1[0],1); //four1.splice(0,1); document.write('</br>Need to append 41 to the end of the array'); }else{ document.write('</br>') } } else { document.write('</br>there is no exra pieces to append'); }
}
// Seeks for 22 + 42
//else 22 + 41
function twentytwo(){ if (_.size(two2)>=2 && _.size(four2)>=1){ main.push(two2[0]); main.push(two2[1]); main.push(four2[0]); two2.splice(1,1); two2.splice(0,1); four2.splice(0,1); } else if(_.size(two2)>=2 && _.size(four1)>=2){ main.push(two2[0]); main.push(two2[1]); main.push(four1[0]); main.push(four1[1]); two2.splice(1,1); two2.splice(0,1); four1.splice(0,1); four1.splice(1,1); }else{ document.write('</br> function twentytwo either done or broken'); }
}
function fortyone (){ if (iseven==0){ document.write('</br>And the hight is even.'); //chech if anymore of 4.2 are left out there and if yes then add them if (_.size(four1)>=2 && _.size(four2)>=1){ main.push(four1[0]); main.push(four1[1]); main.push(four2[0]); four1.splice(1,1); four1.splice(0,1); four2.splice(0,1); } else { document.write('<br>Please check out function fortyone '); } } else if (iseven==1 && _.size(four1)>=2){ document.write('</br>4,1 blocks have been added as a separate block'); //push 4.1's to the end of the array main.push(four1[0]); main.push(four1[1]); four1.splice(1,1); four1.splice(0,1); } else { document.wrte('</br>function fortyone either done or broken'); }
}
function fortytwo(){
}
function fortyfour(){ if (_.size(four4)>2 && _.size(four2)>4){ main.push(four4[0]); main.push(four4[1]); four4.splice(1,1); four4.splice(0,1); } else if (_.size(four4)>=1 && _.size(four2)>=2){ main.push(four4[0]); main.push(four2[0]); main.push(four2[1]); four4.splice(0,1); four2.splice(1,1); four2.splice(0,1); document.write('</br>Function fortyfour either done or broken'); }
}
function eightytwo(){ if (_.size(eight2)>=1){ main.push(eight2[0]); eight2.splice(0,1); } else { document.write('</br>Function eighty two either done or broken'); }
}
sparepiece(); // has to be rubn only once
oddeven(); // has to be run only once
fortyone(); //only run once assuming there is only 2 4.1's needs improvement
fortyfour();
fortyfour();
fortyfour();
fortyfour();
eightytwo();
eightytwo();
eightytwo();
eightytwo();
twentytwo();
twentytwo();
twentytwo();
//document.write('X is '+x);
document.write('</br> Size of 2:2 array is '+_.size(two2));
document.write('</br> Size of 4:1 array is '+_.size(four1));
document.write('</br> Size of 4:2 array is '+_.size(four2));
document.write('</br> Size of 4:4 array is '+_.size(four4));
document.write('</br> Size of 8:2 array is '+_.size(eight2));
document.write('</br>Main array '+main);
Angular.tile version 3 - Script Codes
Angular.tile version 3 - Script Codes
Home Page Home
Developer Anton
Username antonandoff
Uploaded January 11, 2023
Rating 3
Size 3,114 Kb
Views 4,048
Do you need developer help for Angular.tile version 3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton (antonandoff) Script Codes
Name
More bubbles
Red bubbles
VE_webianr
Errors
VE_2
Array sorting
Pseudo spinner
Select option with images
Angular.tile
Checkbox
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!