Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Refactoring CSS and utils creation

  • Loading branch information...
commit fa95414ac2596d767372bee88ce3c92488eb6dcd 1 parent 042a7b8
Senthil Padmanabhan authored August 23, 2011
3  README
... ...
@@ -1,4 +1,3 @@
1 1
 TODO
2 2
 1. refactor imagewrapper
3  
-2. Documentation
4  
-6. create Utils & CSS file
  3
+2. Documentation
186  arena.php
@@ -8,190 +8,7 @@
8 8
 	<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
9 9
 	<TITLE>Picture Uploader</TITLE>
10 10
 	<link rel="shortcut icon" href="favicon.ico" />
11  
-	<style type="text/css">
12  
-			body {
13  
-				font-family: Arial,Helvetica,sans-serif;
14  
-				font-size: 12px;			
15  
-				margin: 0 auto;
16  
-				width: 960px;
17  
-			}
18  
-			h1 {
19  
-				margin: 10px 0;
20  
-				color: gray;
21  
-				text-align: center;
22  
-			}
23  
-			.border {
24  
-				background-color: #F1F1F1;
25  
-				border: 1px solid gainsboro;
26  
-			}
27  
-			.piccontainer {				
28  
-				width: 200px;
29  
-				margin-right: 10px;
30  
-				float: left;				
31  
-			}
32  
-			.primary {
33  
-				border: 3px solid brown;
34  
-			}
35  
-			.picman {
36  
-				font-weight: bold;
37  
-			}
38  
-			.dropbox {			
39  
-    			border-radius: 2px 2px 2px 2px;
40  
-    			height: 360px;
41  
-    			margin-top: 20px;    			
42  
-    			padding: 20px 0 0 60px;
43  
-			}
44  
-			.droptext {
45  
-				display: none;
46  
-				color: #CCCCCC
47  
-			}
48  
-			.activate {
49  
-				border: 4px dashed #DDDDDD;
50  
-			}
51  
-			.dragenter {
52  
-				border-color: #3964C2;
53  
-			}
54  
-			.picman a {				
55  
-				text-decoration: none; 
56  
-			}
57  
-			.picholder {
58  
-				height: 131px;
59  
-				position: relative;
60  
-			}
61  
-			.add {
62  
-				text-align: center;			
63  
-				position: relative;			
64  
-			}
65  
-			.add span.extra {
66  
-				font-size: 16px;
67  
-			}
68  
-			div.browse {
69  
-				overflow: hidden; 
70  
-				width: 155px; 
71  
-				height: 20px; 
72  
-				position: absolute; 
73  
-				left: 375px; 
74  
-				top: 0;
75  
-			}
76  
-			.browse {
77  
-				opacity: 0;
78  
-				filter:alpha(opacity=0); 
79  
-				font-size: 20px; 
80  
-				height: 20px; 
81  
-				position: absolute; 
82  
-				right: 0px; 
83  
-				top: 0px;
84  
-			}
85  
-			.filename {
86  
-				text-align: center;
87  
-				color: gray;
88  
-				font-size: 12px;
89  
-				padding: 7px 0;
90  
-				visibility: hidden;
91  
-			}
92  
-			.error {
93  
-				color: red;
94  
-				text-align: center;
95  
-				margin-top: 55px;
96  
-			}
97  
-			.picbottom {
98  
-				text-align: center;
99  
-				margin: 5px 0;				
100  
-			}
101  
-			.controls {
102  
-				margin: 0 69px 1px;
103  
-				visibility: hidden;
104  
-			}
105  
-			.controls div {
106  
-				float: left;				
107  
-			}
108  
-			.controls div.icon-hover {
109  
-				border: 1px solid white;
110  
-				padding: 2px 0;
111  
-			}
112  
-			.controls div.icon-hover:hover {
113  
-				border-color: #A1BADF;
114  
-			}						
115  
-			.icons {
116  
-				background-image: url("image_edit_icons-v2.gif");
117  
-				height: 16px;
118  
-				width: 16px;
119  
-				margin: 0 2px;
120  
-			}
121  
-			.rleft {
122  
-				background-position: -16px 0;
123  
-			}
124  
-			.rright {
125  
-				background-position: -32px 0;
126  
-			}	
127  
-			.delete {
128  
-				background-position: -64px 0;
129  
-			}
130  
-			.primcontol {				
131  
-				font-family: cursive,Helvetica,sans-serif;
132  
-				font-size: 14px;
133  
-				height: 16px;
134  
-				width: 16px;					
135  
-			}
136  
-			.progressmeter {
137  
-				padding-top: 70px;
138  
-				color: gray;
139  
-				visibility: hidden;
140  
-			}				
141  
-			.progressmeter div{
142  
-				display: inline-block;
143  
-			}
144  
-			.progressmeter .progress {
145  
-				width: 0%;
146  
-				height: 8px;
147  
-				background-color: gray; 
148  
-			}
149  
-			.progressmeter .meter {				
150  
-				height: 7px;
151  
-				width: 148px;
152  
-				border: 1px solid gray;
153  
-				margin: 0 1px 0 10px;
154  
-			}	
155  
-			.overlay {
156  
-				position: absolute;
157  
-				display: none;
158  
-				z-index: 2000;
159  
-				left: 25%;
160  
-				top: 25%;
161  
-			}						
162  
-			.bigimage {
163  
-				border: 20px solid black;
164  
-				position: relative;
165  
-			}
166  
-			.close {
167  
-				position: absolute;
168  
-				left: 97%;
169  
-				top: -3%;
170  
-			}
171  
-			.close a {
172  
-				color: wheat;
173  
-				text-decoration: none;
174  
-				font-size: 16px;
175  
-			}
176  
-			.mask {
177  
-				opacity: 0;
178  
-				filter:alpha(opacity=0);
179  
-				background-color: #FFFFFF;
180  
-				left: 0;
181  
-				top: 0;
182  
-				width: 100%;
183  
-				height: 100%;
184  
-				z-index: 1000;
185  
-				position: absolute;
186  
-				display: none;							
187  
-			}
188  
-			.clear {
189  
-				clear: both;
190  
-			}
191  
-			.videodemo {
192  
-				margin-top: 20px;
193  
-			}
194  
-	</style>	
  11
+	<link type="text/css" rel="stylesheet" href="picman.css" />
195 12
 </HEAD>
196 13
 <BODY>
197 14
 	<h1>Picture Uploader</h1>
@@ -224,6 +41,7 @@
224 41
 	<div id="videoDemo" class="clear videodemo">
225 42
 		<a target="_blank" href="http://www.youtube.com/watch?v=68rNuzYnxOI">Quick Demo</a>
226 43
 	</div>
  44
+	<script src="utils.js"></script>
227 45
 	<script src="progressmeter.js"></script>
228 46
 	<script src="picuploader.js"></script>
229 47
 	<script src="picmanager.js"></script>
183  picman.css
... ...
@@ -0,0 +1,183 @@
  1
+@CHARSET "UTF-8";
  2
+body {
  3
+	font-family: Arial,Helvetica,sans-serif;
  4
+	font-size: 12px;			
  5
+	margin: 0 auto;
  6
+	width: 960px;
  7
+}
  8
+h1 {
  9
+	margin: 10px 0;
  10
+	color: gray;
  11
+	text-align: center;
  12
+}
  13
+.border {
  14
+	background-color: #F1F1F1;
  15
+	border: 1px solid gainsboro;
  16
+}
  17
+.piccontainer {				
  18
+	width: 200px;
  19
+	margin-right: 10px;
  20
+	float: left;				
  21
+}
  22
+.primary {
  23
+	border: 3px solid brown;
  24
+}
  25
+.picman {
  26
+	font-weight: bold;
  27
+}
  28
+.dropbox {			
  29
+	border-radius: 2px 2px 2px 2px;
  30
+	height: 360px;
  31
+	margin-top: 20px;    			
  32
+	padding: 20px 0 0 60px;
  33
+}
  34
+.droptext {
  35
+	display: none;
  36
+	color: #CCCCCC
  37
+}
  38
+.activate {
  39
+	border: 4px dashed #DDDDDD;
  40
+}
  41
+.dragenter {
  42
+	border-color: #3964C2;
  43
+}
  44
+.picman a {				
  45
+	text-decoration: none; 
  46
+}
  47
+.picholder {
  48
+	height: 131px;
  49
+	position: relative;
  50
+}
  51
+.add {
  52
+	text-align: center;			
  53
+	position: relative;			
  54
+}
  55
+.add span.extra {
  56
+	font-size: 16px;
  57
+}
  58
+div.browse {
  59
+	overflow: hidden; 
  60
+	width: 155px; 
  61
+	height: 20px; 
  62
+	position: absolute; 
  63
+	left: 375px; 
  64
+	top: 0;
  65
+}
  66
+.browse {
  67
+	opacity: 0;
  68
+	filter:alpha(opacity=0); 
  69
+	font-size: 20px; 
  70
+	height: 20px; 
  71
+	position: absolute; 
  72
+	right: 0px; 
  73
+	top: 0px;
  74
+}
  75
+.filename {
  76
+	text-align: center;
  77
+	color: gray;
  78
+	font-size: 12px;
  79
+	padding: 7px 0;
  80
+	visibility: hidden;
  81
+}
  82
+.error {
  83
+	color: red;
  84
+	text-align: center;
  85
+	margin-top: 55px;
  86
+}
  87
+.picbottom {
  88
+	text-align: center;
  89
+	margin: 5px 0;				
  90
+}
  91
+.controls {
  92
+	margin: 0 69px 1px;
  93
+	visibility: hidden;
  94
+}
  95
+.controls div {
  96
+	float: left;				
  97
+}
  98
+.controls div.icon-hover {
  99
+	border: 1px solid white;
  100
+	padding: 2px 0;
  101
+}
  102
+.controls div.icon-hover:hover {
  103
+	border-color: #A1BADF;
  104
+}						
  105
+.icons {
  106
+	background-image: url("image_edit_icons-v2.gif");
  107
+	height: 16px;
  108
+	width: 16px;
  109
+	margin: 0 2px;
  110
+}
  111
+.rleft {
  112
+	background-position: -16px 0;
  113
+}
  114
+.rright {
  115
+	background-position: -32px 0;
  116
+}	
  117
+.delete {
  118
+	background-position: -64px 0;
  119
+}
  120
+.primcontol {				
  121
+	font-family: cursive,Helvetica,sans-serif;
  122
+	font-size: 14px;
  123
+	height: 16px;
  124
+	width: 16px;					
  125
+}
  126
+.progressmeter {
  127
+	padding-top: 70px;
  128
+	color: gray;
  129
+	visibility: hidden;
  130
+}				
  131
+.progressmeter div{
  132
+	display: inline-block;
  133
+}
  134
+.progressmeter .progress {
  135
+	width: 0%;
  136
+	height: 8px;
  137
+	background-color: gray; 
  138
+}
  139
+.progressmeter .meter {				
  140
+	height: 7px;
  141
+	width: 148px;
  142
+	border: 1px solid gray;
  143
+	margin: 0 1px 0 10px;
  144
+}	
  145
+.overlay {
  146
+	position: absolute;
  147
+	display: none;
  148
+	z-index: 2000;
  149
+	left: 25%;
  150
+	top: 25%;
  151
+}						
  152
+.bigimage {
  153
+	border: 20px solid black;
  154
+	position: relative;
  155
+}
  156
+.close {
  157
+	position: absolute;
  158
+	left: 97%;
  159
+	top: -3%;
  160
+}
  161
+.close a {
  162
+	color: wheat;
  163
+	text-decoration: none;
  164
+	font-size: 16px;
  165
+}
  166
+.mask {
  167
+	opacity: 0;
  168
+	filter:alpha(opacity=0);
  169
+	background-color: #FFFFFF;
  170
+	left: 0;
  171
+	top: 0;
  172
+	width: 100%;
  173
+	height: 100%;
  174
+	z-index: 1000;
  175
+	position: absolute;
  176
+	display: none;							
  177
+}
  178
+.clear {
  179
+	clear: both;
  180
+}
  181
+.videodemo {
  182
+	margin-top: 20px;
  183
+}
82  picmanager.js
@@ -9,6 +9,7 @@ var PicManager = function() {
9 9
 		},
10 10
 		d = document,
11 11
 		get = "getElementById",
  12
+		u = Utils, // Utils object reference
12 13
 		MAX_LIMIT, // Max number of files allowed to be uploaded
13 14
 		picManConfig, // Pic man config bean
14 15
 		file, // File browse HTML element
@@ -22,42 +23,7 @@ var PicManager = function() {
22 23
 		fileCounter, // Static closure to keep count of the files uploaded
23 24
 		imageHash = [], // Hash to hold the image list in order
24 25
 		imageWrapperCache = [], // A cache to hold the images
25  
-		picUploaderHash = [], // Hash to hold the pic uploader instances
26  
-		hide = function(elem, display) { // Hides a layer 
27  
-			if(display) { // If sets then hides display
28  
-				elem.style.display = "none";
29  
-			} else {
30  
-				elem.style.visibility = "hidden";
31  
-			}
32  
-		},	
33  
-		show = function(elem, display) { // Shows a layer
34  
-			if(display) { // If set makes display block
35  
-				elem.style.display = "block";
36  
-			} else {
37  
-				elem.style.visibility = "visible";
38  
-			}			
39  
-		},
40  
-		createImage = function(src, h, w) {
41  
-			var img = document.createElement('img');
42  
-			img.src = src;
43  
-			img.height = h;
44  
-			img.width = w;
45  
-			return img;
46  
-		},		
47  
-		attach = function(element, type, fn) {
48  
-		    if (element.addEventListener){
49  
-		        element.addEventListener(type, fn, false);
50  
-		    } else if (element.attachEvent){
51  
-		        element.attachEvent('on' + type, fn);
52  
-		    }			
53  
-		},	
54  
-		addClass = function(elem, className) {
55  
-			elem.className = elem.className + " " + className;
56  
-		},
57  
-		removeClass = function(elem, className) {
58  
-			var pattern = new RegExp(" " + className, "g");
59  
-			elem.className = elem.className.replace(pattern, "");
60  
-		},
  26
+		picUploaderHash = [], // Hash to hold the pic uploader instances	
61 27
 		getImageWrapper = function(index) {
62 28
 			var id = picManConfig.image.imageWrapper + index,
63 29
 				imageWrapper;
@@ -153,20 +119,20 @@ var PicManager = function() {
153 119
 					// Reset exit flag
154 120
 					exitFlag = 0;
155 121
 					// Highlight border
156  
-					addClass(elem, "dragenter");
  122
+					u.addClass(elem, "dragenter");
157 123
 				},
158 124
 				dragLeave = function(evt) {
159 125
 					// Prevent defaults
160 126
 					noOpHandler(evt);
161 127
 					// remove border highlight if exit flag is set
162  
-					exitFlag && removeClass(elem, "dragenter");						
  128
+					exitFlag && u.removeClass(elem, "dragenter");						
163 129
 					exitFlag = 1;
164 130
 				},
165 131
 				dragExit = function(evt) {
166 132
 					// Prevent defaults
167 133
 					noOpHandler(evt);
168 134
 					// remove border highlight
169  
-					removeClass(elem, "dragenter");
  135
+					u.removeClass(elem, "dragenter");
170 136
 				},
171 137
 				drop = function(evt) {
172 138
 					// Prevent defaults
@@ -181,21 +147,21 @@ var PicManager = function() {
181 147
 					file = evt.dataTransfer;
182 148
 					pm.upload();
183 149
 					// remove border highlight
184  
-					removeClass(elem, "dragenter");					
  150
+					u.removeClass(elem, "dragenter");					
185 151
 				};
186 152
 			
187 153
 			// Show the box
188  
-			addClass(elem, "activate");	
  154
+			u.addClass(elem, "activate");	
189 155
 			
190 156
 			// Attach drag events
191  
-			attach(elem, "dragenter", dragEnter);
192  
-			attach(elem, "dragleave", dragLeave); 
193  
-			attach(elem, "dragexit", dragExit); // For FF < 3.5
194  
-			attach(elem, "dragover", noOpHandler);
  157
+			u.attach(elem, "dragenter", dragEnter);
  158
+			u.attach(elem, "dragleave", dragLeave); 
  159
+			u.attach(elem, "dragexit", dragExit); // For FF < 3.5
  160
+			u.attach(elem, "dragover", noOpHandler);
195 161
 			
196 162
 			// Attach the drop event
197  
-			attach(elem, "drop", drop);
198  
-			attach(elem, "dragdrop", drop); // For FF < 3.5
  163
+			u.attach(elem, "drop", drop);
  164
+			u.attach(elem, "dragdrop", drop); // For FF < 3.5
199 165
 		},
200 166
 		// Creates picuploader instance
201 167
 		createPicuploader = function(index, scope) {
@@ -227,9 +193,9 @@ var PicManager = function() {
227 193
 						imageHash[index] = imgData;
228 194
 						if(fileCounter == selectedFilesCount) {
229 195
 							// Show add pic layer only if files upload less than MAX_LIMIT
230  
-							(startIndex < MAX_LIMIT) && show(addPicLayer);
  196
+							(startIndex < MAX_LIMIT) && u.show(addPicLayer);
231 197
 							// Remove the mash
232  
-							hide(maskLayer, 1);
  198
+							u.hide(maskLayer, 1);
233 199
 							inProgress = 0;
234 200
 							// Set primary if primeFlag is set 
235 201
 							if(primeFlag && !imageHash[primaryIndex].error){
@@ -244,7 +210,7 @@ var PicManager = function() {
244 210
 						// Do a reflow
245 211
 						scope.reflow();
246 212
 						// Show add layer if # of images less than MAX_LIMIT
247  
-						(startIndex < MAX_LIMIT) && show(addPicLayer);
  213
+						(startIndex < MAX_LIMIT) && u.show(addPicLayer);
248 214
 					},
249 215
 					primaryCb: function(index) {
250 216
 						// Set primary
@@ -281,10 +247,10 @@ var PicManager = function() {
281 247
 				fileElem.setAttribute("multiple", "multiple");
282 248
 				// Activate the drop box & show the drop text
283 249
 				activateDropbox(picManConfig.dropBox);
284  
-				show(d[get](picManConfig.dropText), 1);
  250
+				u.show(d[get](picManConfig.dropText), 1);
285 251
 			}
286 252
 			// Attaching on change event 
287  
-			attach(fileElem, "change", function() {
  253
+			u.attach(fileElem, "change", function() {
288 254
 				// If in progress then just return
289 255
 				if(inProgress) {
290 256
 					return;
@@ -319,9 +285,9 @@ var PicManager = function() {
319 285
 			}
320 286
 			
321 287
 			// Hide the app pic layer
322  
-			hide(addPicLayer);
  288
+			u.hide(addPicLayer);
323 289
 			// Show the Mask
324  
-			show(maskLayer, 1);
  290
+			u.show(maskLayer, 1);
325 291
 			
326 292
 			// Set in progress flag
327 293
 			inProgress = 1; 
@@ -365,10 +331,10 @@ var PicManager = function() {
365 331
 			}
366 332
 			imageWrapper = getImageWrapper(primaryIndex);
367 333
 			// Set the primary Class and set sttribute
368  
-			addClass(imageWrapper, "primary");			
  334
+			u.addClass(imageWrapper, "primary");			
369 335
 			imageWrapper.isPrimary = 1;
370 336
 			// Hide the primary control
371  
-			hide(d[get](picManConfig.image.primaryControl + primaryIndex), 1);
  337
+			u.hide(d[get](picManConfig.image.primaryControl + primaryIndex), 1);
372 338
 		},
373 339
 		removePrimary: function(index) {
374 340
 			var imageWrapper;
@@ -378,10 +344,10 @@ var PicManager = function() {
378 344
 			}
379 345
 			imageWrapper = getImageWrapper(index);
380 346
 			//Remove primary Class and reset sttribute
381  
-			removeClass(getImageWrapper(index), "primary");
  347
+			u.removeClass(getImageWrapper(index), "primary");
382 348
 			imageWrapper.isPrimary = 0;
383 349
 			// Show the primary control
384  
-			show(d[get](picManConfig.image.primaryControl + index), 1);			
  350
+			u.show(d[get](picManConfig.image.primaryControl + index), 1);			
385 351
 		},
386 352
 		reflow: function() {
387 353
 			var imageWrapper,
121  picuploader.js
... ...
@@ -1,5 +1,6 @@
1 1
 function PicUploader(dataObj){ 
2 2
 	/**
  3
+	 * Private static variables 
3 4
 	 * Math attributes for acurate progress meter 
4 5
 	 */	
5 6
 	var medianTime = dataObj.medianTime || PicUploader.MEDIAN_TIME, // Override from data object if avialble
@@ -40,7 +41,8 @@ function PicUploader(dataObj){
40 41
 		 */	
41 42
 		instance = this,
42 43
 		d = document, 
43  
-		get = "getElementById", // Shortcut for document.getElementById to enable compression			
  44
+		get = "getElementById", // Shortcut for document.getElementById to enable compression	
  45
+		u = Utils, // Utils object reference
44 46
 		imgLoadedState = 1, // Flag to maintain image loaded state. Default is 1 set to 0 when load failed
45 47
 		index = dataObj.index, // The index assoicated with this instance
46 48
 		uploadFormName = dataObj.uploadForm, // The form name to simulate AJAX
@@ -61,23 +63,6 @@ function PicUploader(dataObj){
61 63
 		progMeter = new ProgressMeter({progressLayer: dataObj.progressLayer, percentLayer: dataObj.percentLayer}), // creating Progress Meter Object instance
62 64
 		thumbnailImage, // Thumbnail image element
63 65
 		canvasElem, // Canvas element 
64  
-		hide = function(elem, display) { // Hides a layer 
65  
-			if(display) { // If sets then hides display
66  
-				elem.style.display = "none";
67  
-			} else {
68  
-				elem.style.visibility = "hidden";
69  
-			}
70  
-		},
71  
-		show = function(elem, display) { // Shows a layer
72  
-			if(display) { // If set makes display block
73  
-				elem.style.display = "block";
74  
-			} else {
75  
-				elem.style.visibility = "visible";
76  
-			}			
77  
-		},
78  
-		updateContent = function(elem, content) {
79  
-			elem.innerHTML = content;
80  
-		},
81 66
 		getInterval = function(size, rate, percentCompleted) {
82 67
 			!rate && (rate = uploadRate);
83 68
 			!percentCompleted && (percentCompleted = 0);
@@ -88,39 +73,6 @@ function PicUploader(dataObj){
88 73
 			// https://developer.mozilla.org/en/DOM/window.setTimeout#Minimum_delay_and_timeout_nesting
89 74
 			return interval < 5? 5: interval;
90 75
 		},
91  
-		createImage = function(src, h, w) {
92  
-			var img = document.createElement('img');
93  
-			img.src = src;
94  
-			img.height = h;
95  
-			img.width = w;			
96  
-			return img;
97  
-		},
98  
-		createIframe = function(id) {
99  
-			var iframe;
100  
-			try{
101  
-				// To overcome IE hack
102  
-				iframe = d.createElement('<iframe name="' + id + '">');
103  
-			} catch(ex) {
104  
-				iframe = d.createElement('iframe');
105  
-				iframe.setAttribute('name', id);
106  
-			}
107  
-			
108  
-			iframe.setAttribute('id', id);						
109  
-			iframe.style.display = 'none';
110  
-	        document.body.appendChild(iframe);
111  
-
112  
-	        return iframe;			
113  
-		},
114  
-		createForm = function(iframe, file) {
115  
-			var form = d.createElement('form');
116  
-	        form.setAttribute('action', serverURL);
117  
-	        form.setAttribute('target', iframe.name);
118  
-	        form.style.display = 'none';
119  
-	        document.body.appendChild(form);
120  
-	        form.appendChild(file);
121  
-	        
122  
-	        return form;			
123  
-		},
124 76
 		getIframeResponse = function(iframe) {
125 77
 	        // iframe.contentWindow.document - for IE<7
126 78
 	        var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
@@ -133,13 +85,6 @@ function PicUploader(dataObj){
133 85
 
134 86
 	        return response;
135 87
 		},
136  
-		attach = function(element, type, fn) {
137  
-		    if (element.addEventListener){
138  
-		        element.addEventListener(type, fn, false);
139  
-		    } else if (element.attachEvent){
140  
-		        element.attachEvent('on' + type, fn);
141  
-		    }			
142  
-		},
143 88
 		uploadAJAX = function(fileInfo, cb) {
144 89
 			var xhr = new XMLHttpRequest(),
145 90
 				clientUploadDone = 0;
@@ -180,10 +125,10 @@ function PicUploader(dataObj){
180 125
 	        xhr.send(fileInfo.file);	        
181 126
 		},
182 127
 		uploadIframe = function(fileInfo, cb) {
183  
-			var iframe = createIframe(fileInfo.name);
  128
+			var iframe = u.createIframe(fileInfo.name);
184 129
 			!uploadForm && (uploadForm = d[get](uploadFormName)); 
185 130
 			uploadForm.setAttribute('target', iframe.name);
186  
-			attach(iframe, 'load', function() {
  131
+			u.attach(iframe, 'load', function() {
187 132
 	            // when we remove iframe from dom
188 133
 	            // the request stops, but in IE load
189 134
 	            // event fires
@@ -235,13 +180,13 @@ function PicUploader(dataObj){
235 180
 		uploadServer = fileObj.multiUpload? uploadAJAX: uploadIframe; // AJAX based approach or hidden Iframe based approach
236 181
 		
237 182
 		// Update the file name
238  
-		updateContent(fileNameLayer, fileObj.name);			
  183
+		u.updateContent(fileNameLayer, fileObj.name);			
239 184
 		
240 185
 		// Show the file name Layer
241  
-		show(fileNameLayer);
  186
+		u.show(fileNameLayer);
242 187
 		
243 188
 		// Show the progress bar
244  
-		show(progMeterLayer);
  189
+		u.show(progMeterLayer);
245 190
 				
246 191
 		uploadServer(fileObj, function(res) {
247 192
 			t.handleResponse(res);
@@ -272,7 +217,7 @@ function PicUploader(dataObj){
272 217
 			imgData = {thumbnailUrl: res.data.thumbNail, mainUrl: res.data.mainUrl};
273 218
 			// Load the image before completing the progress meter, so the images are shown seemlessly		
274 219
 			// Hide the display to preserve the dimensions
275  
-			hide(imageWrapper, 1);
  220
+			u.hide(imageWrapper, 1);
276 221
 			// Set the thumbnail picture
277 222
 			this.setPicture(imgData);
278 223
 			
@@ -293,14 +238,14 @@ function PicUploader(dataObj){
293 238
 	this.complete = function(res) {
294 239
 		
295 240
 		// Hide the file name
296  
-		hide(fileNameLayer);
  241
+		u.hide(fileNameLayer);
297 242
 		
298 243
 		// Hide the progress meter layer
299  
-		hide(progMeterLayer);
  244
+		u.hide(progMeterLayer);
300 245
 		
301 246
 		// Show the wrapper (both visibility & display) 
302  
-		show(imageWrapper);
303  
-		show(imageWrapper, 1);
  247
+		u.show(imageWrapper);
  248
+		u.show(imageWrapper, 1);
304 249
 		
305 250
 		// Set progress meter to 0
306 251
 		progMeter.progress(0);
@@ -312,20 +257,20 @@ function PicUploader(dataObj){
312 257
 			if((thumbnailImage = imageWrapper.firstChild) && thumbnailImage.tagName.toUpperCase() == "IMG") { // Get the image if it is already created and set the source
313 258
 				thumbnailImage.src = imgData.thumbnailUrl;	
314 259
 			} else { // Create image and append
315  
-				updateContent(imageWrapper, ""); // Clear the content first 
316  
-				imageWrapper.appendChild(thumbnailImage = createImage(imgData.thumbnailUrl, 131, 200));
  260
+				u.updateContent(imageWrapper, ""); // Clear the content first 
  261
+				imageWrapper.appendChild(thumbnailImage = u.createImage(imgData.thumbnailUrl, 131, 200));
317 262
 			}			
318 263
 			// Do the same for zoom image
319 264
 			if(zoomImageLayer.firstChild) { // Get the image if it is already created and set the source	
320 265
 				zoomImageLayer.firstChild.src = imgData.mainUrl; 
321 266
 			} else { // Create image and append
322  
-				zoomImageLayer.appendChild(createImage(imgData.mainUrl, 531, 800));
  267
+				zoomImageLayer.appendChild(u.createImage(imgData.mainUrl, 531, 800));
323 268
 			}
324 269
 		
325 270
 		} else {
326 271
 			// If src not present clean up the image wrapper and 
327  
-			updateContent(imageWrapper, "");	
328  
-			updateContent(zoomImageLayer, "");
  272
+			u.updateContent(imageWrapper, "");	
  273
+			u.updateContent(zoomImageLayer, "");
329 274
 		}
330 275
 		// Update the image loaded state
331 276
 		imgLoadedState = 1;		
@@ -333,16 +278,16 @@ function PicUploader(dataObj){
333 278
 	
334 279
 	this.deleteImage = function() {
335 280
 		// Clear the image wrapper
336  
-		updateContent(imageWrapper, "");
  281
+		u.updateContent(imageWrapper, "");
337 282
 
338 283
 		// Clear the zoom image layer
339  
-		updateContent(zoomImageLayer, "");
  284
+		u.updateContent(zoomImageLayer, "");
340 285
 		
341 286
 		// Reset the Progress Meter
342 287
 		progMeter.progress(0);
343 288
 				
344 289
 		// Hide controls
345  
-		hide(controls);		
  290
+		u.hide(controls);		
346 291
 		
347 292
 		// Call the delete callback if present
348 293
 		deleteCb &&	deleteCb(index);	 
@@ -358,41 +303,41 @@ function PicUploader(dataObj){
358 303
 	};
359 304
 	
360 305
 	this.showControls = function() {
361  
-		imgLoadedState && imageWrapper.firstChild && show(controls);
  306
+		imgLoadedState && imageWrapper.firstChild && u.show(controls);
362 307
 	};
363 308
 	
364 309
 	this.hideControls = function() {
365  
-		imgLoadedState && imageWrapper.firstChild && hide(controls);
  310
+		imgLoadedState && imageWrapper.firstChild && u.hide(controls);
366 311
 	};
367 312
 	
368 313
 	this.zoomImage = function() {			
369  
-		show(maskLayer, 1);
370  
-		show(overlay, 1);
  314
+		u.show(maskLayer, 1);
  315
+		u.show(overlay, 1);
371 316
 	};
372 317
 	
373 318
 	this.closeOverlay = function() {
374  
-		hide(maskLayer, 1);
375  
-		hide(overlay, 1);			
  319
+		u.hide(maskLayer, 1);
  320
+		u.hide(overlay, 1);			
376 321
 	};
377 322
 	
378 323
 	// Bind events
379  
-	attach(d[get](dataObj.picContainer), "mouseover", function(){
  324
+	u.attach(d[get](dataObj.picContainer), "mouseover", function(){
380 325
 		instance.showControls();
381 326
 	});
382  
-	attach(d[get](dataObj.picContainer), "mouseout", function(){
  327
+	u.attach(d[get](dataObj.picContainer), "mouseout", function(){
383 328
 		instance.hideControls();
384 329
 	});
385  
-	attach(d[get](dataObj.closeZoomLink), "click", function(){
  330
+	u.attach(d[get](dataObj.closeZoomLink), "click", function(){
386 331
 		instance.closeOverlay();
387 332
 		return false;
388 333
 	});
389  
-	attach(d[get](dataObj.zoomControl), "click", function(){
  334
+	u.attach(d[get](dataObj.zoomControl), "click", function(){
390 335
 		instance.zoomImage();
391 336
 	});
392  
-	attach(d[get](dataObj.deleteControl), "click", function(){
  337
+	u.attach(d[get](dataObj.deleteControl), "click", function(){
393 338
 		instance.deleteImage();
394 339
 	});
395  
-	attach(d[get](dataObj.primaryControl), "click", function(){
  340
+	u.attach(d[get](dataObj.primaryControl), "click", function(){
396 341
 		instance.setPrimary();
397 342
 	});	
398 343
 };
56  utils.js
... ...
@@ -0,0 +1,56 @@
  1
+var Utils = {
  2
+	hide: function(elem, display) { // Hides a layer 
  3
+		if(display) { // If sets then hides display
  4
+			elem.style.display = "none";
  5
+		} else {
  6
+			elem.style.visibility = "hidden";
  7
+		}
  8
+	},
  9
+	show: function(elem, display) { // Shows a layer
  10
+		if(display) { // If set makes display block
  11
+			elem.style.display = "block";
  12
+		} else {
  13
+			elem.style.visibility = "visible";
  14
+		}			
  15
+	},
  16
+	updateContent: function(elem, content) {
  17
+		elem.innerHTML = content;
  18
+	},
  19
+	createImage: function(src, h, w) {
  20
+		var img = document.createElement('img');
  21
+		img.src = src;
  22
+		img.height = h;
  23
+		img.width = w;			
  24
+		return img;
  25
+	},
  26
+	createIframe: function(id) {
  27
+		var iframe, d = document;
  28
+		try{
  29
+			// To overcome IE hack
  30
+			iframe = d.createElement('<iframe name="' + id + '">');
  31
+		} catch(ex) {
  32
+			iframe = d.createElement('iframe');
  33
+			iframe.setAttribute('name', id);
  34
+		}
  35
+		
  36
+		iframe.setAttribute('id', id);						
  37
+		iframe.style.display = 'none';
  38
+        d.body.appendChild(iframe);
  39
+
  40
+        return iframe;			
  41
+	},
  42
+	attach: function(element, type, fn) {
  43
+	    if (element.addEventListener){
  44
+	        element.addEventListener(type, fn, false);
  45
+	    } else if (element.attachEvent){
  46
+	        element.attachEvent('on' + type, fn);
  47
+	    }			
  48
+	},	
  49
+	addClass: function(elem, className) {
  50
+		elem.className = elem.className + " " + className;
  51
+	},
  52
+	removeClass: function(elem, className) {
  53
+		var pattern = new RegExp(" " + className, "g");
  54
+		elem.className = elem.className.replace(pattern, "");
  55
+	}	
  56
+};

0 notes on commit fa95414

Please sign in to comment.
Something went wrong with that request. Please try again.