https://www.pckeyboard.com/mm5/clientside.mvc?T=6652a9f0&Filename=ImageMachine.js

1// Miva Merchant
2//
3// This file and the source codes contained herein are the property of
4// Miva, Inc.  Use of this file is restricted to the specific terms and
5// conditions in the License Agreement associated with this file.  Distribution
6// of this file or portions of this file for uses not covered by the License
7// Agreement is not allowed without a written agreement signed by an officer of
8// Miva, Inc.
9//
10// Copyright 1998-2019 Miva, Inc.  All rights reserved.
11// http://www.miva.com
12//
13
14(function( obj, eventType, fn )
15{
16	if ( obj.addEventListener )
17	{
18		obj.addEventListener( eventType, fn, false );
19	}
20	else if ( obj.attachEvent )
21	{
22		obj.attachEvent( 'on' + eventType, fn );
23	}
24})( window, 'load', function() { ImageMachine_Initialize(); } );
25
26function ImageMachine_Initialize()
27{
28	FireEvent( window, 'imagemachine_override' );
29	FireEvent( window, 'imagemachine_initialize' );
30}
31
32function ImageMachine( product_code, variant_id, main_image, thumbnails, closeup_div, closeup_image, closeup_close, image_type, image_size, image_width, image_height, closeup_active, closeup_size, closeup_width, closeup_height, thumb_active, thumb_width, thumb_height, preload, legacy_uri )
33{
34	var self					= this;
35
36	this.main_image				= ( document.getElementById( main_image ) )		? document.getElementById( main_image )		: 'undefined';
37	this.thumbnails				= ( document.getElementById( thumbnails ) )		? document.getElementById( thumbnails )		: 'undefined';
38	this.closeup_div			= ( document.getElementById( closeup_div ) )	? document.getElementById( closeup_div )	: 'undefined';
39	this.closeup_image			= ( document.getElementById( closeup_image ) )	? document.getElementById( closeup_image )	: 'undefined';
40	this.closeup_close			= ( document.getElementById( closeup_close ) )	? document.getElementById( closeup_close )	: 'undefined';
41	this.closeup_backing		= document.createElement( 'div' );
42
43	this.product_code			= product_code;
44	this.variant_id				= variant_id;
45	this.current_type			= image_type;
46	this.main_size				= image_size;
47	this.main_width				= image_width;
48	this.main_height			= image_height;
49	this.closeup_active			= closeup_active;
50	this.closeup_size			= closeup_size;
51	this.closeup_width			= closeup_width;
52	this.closeup_height			= closeup_height;
53	this.thumb_active			= thumb_active;
54	this.thumb_width			= thumb_width;
55	this.thumb_height			= thumb_height;
56	this.preload				= preload;
57	this.legacy_uri				= legacy_uri;
58
59	this.main_image_loaded		= false;
60	this.closeup_image_loaded	= false;
61
62	this.main_index				= 0;
63
64	if( this.thumb_active )							this.thumb_index	= 1;
65	if( this.thumb_index && this.closeup_active )	this.closeup_index	= 2;
66	else if( this.closeup_active )					this.closeup_index	= 1;
67
68	if( typeof MivaEvents !== 'undefined' )
69	{
70		MivaEvents.SubscribeToEvent( 'variant_changed', function( product_data )
71		{
72			if( product_data.product_code === self.product_code )
73			{
74				self.Update_Variant( product_data.variant_id );
75			}
76		} );
77	}
78
79	if( this.closeup_image !== 'undefined' && this.closeup_active )
80	{
81		AddEvent( this.closeup_image, 'load', function(){ self.closeup_image.style.display = 'inline'; self.Closeup_Position(); } );
82
83		this.closeup_backing.className	= 'closeup_backing';
84		
85		AddEvent( window, 'load', function(){ document.body.appendChild( self.closeup_backing ); } );	
86	}
87}
88
89ImageMachine.prototype.oninitialize				= function( data )
90{
91	this.Initialize( data );
92}
93
94ImageMachine.prototype.onthumbnailimageclick	= function( data )
95{
96	this.Thumbnail_Click( data );
97}
98
99ImageMachine.prototype.onmainimageclick			= null;
100ImageMachine.prototype.oncloseupimageclick		= null;
101
102ImageMachine.prototype.Initialize = function( data )
103{
104	var self = this;
105	var i, thumbnail;
106
107	this.data	= data;
108
109	if( this.main_image === 'undefined' )		return;
110
111	if( this.thumbnails !== 'undefined' )		this.Clear_Thumbnails( this.thumbnails );
112	if( this.closeup_image !== 'undefined' )	this.closeup_image.src = '';
113	
114	if( data.length === 0 )
115	{
116		if( this.legacy_uri )
117		{
118			this.main_image.src = this.legacy_uri;
119		}
120		else
121		{
122			this.main_image.src = 'graphics/en-US/admin/blank.gif';
123		}
124
125		return;
126	}
127	
128	this.main_image.src = data[ 0 ].image_data[ this.main_index ];
129
130	if( this.closeup_active && this.closeup_div !== 'undefined' && this.closeup_image !== 'undefined' && this.closeup_close !== 'undefined' )
131	{
132		if ( this.onmainimageclick )	AddEvent( this.main_image, 'click', function(){ self.onmainimageclick(); } );
133		else							AddEvent( this.main_image, 'click', function(){ self.Closeup_Open(); } );
134
135		if ( this.oncloseupimageclick )
136		{
137			AddEvent( this.closeup_div,		'click', function(){ self.oncloseupimageclick(); } );
138			AddEvent( this.closeup_backing, 'click', function(){ self.oncloseupimageclick(); } );
139		}
140		else
141		{
142			AddEvent( this.closeup_div,		'click', function(){ self.Closeup_Close(); } );
143			AddEvent( this.closeup_backing, 'click', function(){ self.Closeup_Close(); } );
144		}
145
146		this.closeup_image.src = data[ 0 ].image_data[ this.closeup_index ];
147
148		if( this.main_image !== 'undefined' ) this.main_image.style.cursor = 'pointer';
149		
150	}
151
152	if( this.thumb_active && ( this.thumbnails !== 'undefined' ) )
153	{
154		for( i = 0; i < data.length; i++ )
155		{
156			if( this.current_type && ( data[ i ].type_code === this.current_type ) )
157			{
158				this.main_image.src = data[ i ].image_data[ this.main_index ];
159				if( this.closeup_active && this.closeup_image !== 'undefined' ) this.closeup_image.src = data[ i ].image_data[ this.closeup_index ];
160			}
161			
162			thumbnail		= this.ImageMachine_Generate_Thumbnail( data[ i ].image_data[ this.thumb_index ]	? data[ i ].image_data[ this.thumb_index ] :	null,
163																	data[ i ].image_data[ this.main_index ]		? data[ i ].image_data[ this.main_index ] :		null,
164																	data[ i ].image_data[ this.closeup_index ]	? data[ i ].image_data[ this.closeup_index ]:	null,
165																	data[ i ].type_code );
166			thumbnail.mm5_thumbnail = data[ i ];
167
168			AddEvent( thumbnail, 'click', function()
169			{
170				var node;
171
172				if ( this.mm5_thumbnail )	node = this;
173				else if ( window.event )	node = window.event.srcElement;
174				else						node = null;
175
176				while ( node && !node.mm5_thumbnail )
177				{
178					node = node.parentNode;
179				}
180
181				if ( node )					self.onthumbnailimageclick( node.mm5_thumbnail );
182			} );
183
184			if( data.length > 1 ){	this.thumbnails.appendChild( thumbnail ); }
185		}
186	}
187	else
188	{
189		if( this.closeup_active && this.closeup_image !== 'undefined' ) this.closeup_image.src = data[ 0 ].image_data[ this.closeup_index ];
190	}
191
192
193	if( ! this.main_image.getAttribute( 'src', 2 ) && this.current_type.length ) this.main_image.src = data[ 0 ].image_data[ this.main_index ];
194	
195	if( this.preload ) { this.Preload( data, 0 ); }
196}
197
198ImageMachine.prototype.Thumbnail_Click = function( image_object )
199{
200	this.main_image.src = image_object.image_data[ this.main_index ];
201	this.current_type	= image_object.type_code;
202
203	if( this.closeup_active && this.closeup_image !== 'undefined' )
204	{
205		this.closeup_image.style.display	= 'none';
206		this.closeup_image.src				= '';
207		this.closeup_image.src				= image_object.image_data[ this.closeup_index ];
208	}
209}
210
211ImageMachine.prototype.Update_Variant = function( variant_id )
212{
213	var self	= this;
214	var query	= []
215
216	if ( this.variant_id === variant_id )
217	{
218		return;
219	}
220
221	query.push( ( this.main_size === 'N' ) ? 'original' : this.main_width + 'x' + this.main_height );
222	
223	if( this.thumb_active )		query.push( this.thumb_width + 'x' + this.thumb_height + ':MultipleOnly' );
224	if( this.closeup_active )	query.push( ( this.closeup_size === 'N' ) ? 'original' : this.closeup_width + 'x' + this.closeup_height );
225	
226	Runtime_ProductImageList_Load_Product_Variant( this.product_code, variant_id, query, function( response )
227	{ 
228		if( !response.success )
229		{
230			return;
231		}
232	
233		self.variant_id = variant_id;	
234		self.oninitialize( response.data );
235	} );
236}
237
238ImageMachine.prototype.Clear_Thumbnails = function( container )
239{
240	while( container.hasChildNodes() )
241	{
242		container.removeChild( this.thumbnails.lastChild );
243	}
244}
245
246ImageMachine.prototype.Closeup_Open = function()
247{
248	var self = this;
249
250	window.onresize = function(){ self.Closeup_Resize( self ); }
251	
252	this.closeup_div.style.display		= 'inline';
253	this.closeup_backing.style.display	= 'inline';
254
255	if( document.documentElement.clientHeight > document.body.scrollHeight )
256	{
257		this.closeup_backing.style.height	=	document.documentElement.clientHeight + 'px';
258	}
259	else
260	{
261		this.closeup_backing.style.height	= ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
262	}
263
264	this.Closeup_Position();
265}
266
267ImageMachine.prototype.Closeup_Resize = function( self )
268{
269	if( document.documentElement.clientHeight > document.body.scrollHeight )
270	{
271		self.closeup_backing.style.height	=	document.documentElement.clientHeight + 'px';
272	}
273	else
274	{
275		self.closeup_backing.style.height	= ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
276	}
277
278	self.Closeup_Position();
279}
280
281ImageMachine.prototype.Closeup_Close = function()
282{
283	window.onresize						= null;
284
285	this.closeup_backing.style.display	= 'none';
286	this.closeup_div.style.display		= 'none';
287}
288
289ImageMachine.prototype.Closeup_Position = function()
290{
291	this.closeup_div.style.left = ( ( document.body.offsetWidth / 2 ) - ( this.closeup_div.offsetWidth / 2 ) ) + 'px';
292}
293
294ImageMachine.prototype.Preload = function( image_array, pos )
295{
296	var self = this;
297	var main, closeup;
298
299	this.main_image_loaded		= false;

300	this.closeup_image_loaded	= false;
301
302	if ( pos >= image_array.length )
303	{
304		return;
305	}
306
307	main = new Image();
308
309	AddEvent( main, 'load', function()
310	{
311		self.main_image_loaded = true;
312
313		if ( self.closeup_image_loaded )
314		{
315			self.Preload( image_array, ( pos + 1 ) );
316		}
317	} );
318
319	main.src = image_array[ pos ].image_data[ this.main_index ];
320
321	if ( this.closeup_active && this.closeup_index && image_array[ pos ].image_data[ this.closeup_index ] )
322	{
323		closeup = new Image();
324
325		AddEvent( closeup, 'load', function()
326		{
327			self.closeup_image_loaded = true;
328
329			if ( self.main_image_loaded )
330			{
331				self.Preload( image_array, ( pos + 1 ) );
332			}
333		} );
334		
335		closeup.src = image_array[ pos ].image_data[ this.closeup_index ];
336	}
337}