desizer/desizer.js at master · domoconnell/desizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

(function(window, doc){
	Desizer = function(container, callback){
		var that = this,
			i;
		that.callback = callback;
		that.wrapper = typeof container == 'object' ? container : doc.getElementById(container);
		that.options = {
			colcount: 9999,
			currentClass: 'ocs',
			newClass: null,
			currentWidth: that.wrapper.clientWidth,
			classSizeArray: {
				fcl: 1900,
				fcs: 1430,
				tcl: 1140,
				tcs: 1030,
				wcl: 876,
				wcs: 768,
				ocl: 440,
			}
		}
		for (var clName in that.options.classSizeArray) {
			size = parseInt(that.options.classSizeArray[clName]);
			if(parseInt(that.options.currentWidth)>size){
				that.options.newClass = clName;
				break;
			}
		}
		this.options.currentClass!=this.options.newClass
		this.sizeIt(that);
		window.addEventListener('resize', function() {
			that.checkResizeState();
		});
	},
	Desizer.prototype = {
		checkResizeState: function(){
			for (var clName in this.options.classSizeArray) {
				size = parseInt(this.options.classSizeArray[clName]);
				if(parseInt(this.wrapper.clientWidth)>size){
					this.options.newClass = clName;
					break;
				}
			}
			if(this.options.currentClass!=this.options.newClass){
				this.options.currentClass = this.options.newClass;
				this.sizeIt();
			}
		},
		sizeIt: function(){
			console.log(this);
			this.options.currentClass = this.options.newClass;
			this.wrapper.innerHTML = '';
			if(this.options.currentClass=='fcl' || this.options.currentClass=='fcs'){
				//adding for columns
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column1"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column2"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column3"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column4"></div>';
				this.options.colcount = 4;
			}else if(this.options.currentClass=='tcl' || this.options.currentClass=='tcs'){
				//adding for columns
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column1"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column2"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column3"></div>';
				this.options.colcount = 3;
			}else if(this.options.currentClass=='wcl' || this.options.currentClass=='wcs'){
				//adding for columns
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column1"></div>';
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column2"></div>';
				this.options.colcount = 2;
			}else if(this.options.currentClass=='ocl' || this.options.currentClass=='ocs'){
				//adding for columns
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column1"></div>';
				this.options.colcount = 1;
			}else{
				this.wrapper.innerHTML = this.wrapper.innerHTML + '<div class="ds-mod-column ds-column1"></div>';
				this.options.colcount = 1;
			}
			this.wrapper.innerHTML = this.wrapper.innerHTML + '<div style="clear:both"></div>';
			var nodes = this.wrapper.getElementsByClassName("ds-mod-column");
			for(i=0; i<nodes.length; i++) {
			    nodes[i].className+= ' ds-' + this.options.newClass;
			}
			this.callback(true);
		}
	}

})(window, document);