https://22qfamily.org/cms3t/res/js/mw.media.js

1/** //** ----= mwImageReader	=--------------------------------------------------------------------------------------\**//** \
2*
3*	Fast loads image from File object and runs callback on it.	
4*
5*	@param		object(File)	$file		- File object to use as source.
6*	@param		function	$callback	- Callback to execute.
7*
8\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
9function mwImageReader ($file, $callback) {
10
11	// Using native DOM, so need to fallback if jQuery happen
12	if ( $file instanceof jQuery )
13		$file = $file.get(0);
14
15	// If file is DOM input - using first file
16	if ( $file instanceof HTMLInputElement ) 
17		$file = $file.files[0];
18
19	// Nothng to do if no files selected
20	if ( !$file )
21		return;
22
23	// Nothing to do for non image file
24	if ( !$file.type.match(/image.*/) )
25		return;
26
27	// Reading file
28	var $reader = new FileReader();
29	$reader.onload = function ($e) {
30		
31		// Issuing callback
32		if ( typeof($callback) == 'function' )
33			$callback($reader.result);
34		
35	}; //FUNC reader.onload
36	
37	$reader.readAsDataURL($file);
38	
39} //FUNC mwImageReader
40
41/** //** ----= mwImagePreview	=--------------------------------------------------------------------------------------\**//** \
42*
43*	Fast loads image from File object (usually obtained from file input) into <img> element using HTML5 filesAPI.	
44*
45*	@param		jQuery		$image	- Image to update.
46*	@param		object(File)	$file	- File object to use as source.
47*
48\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
49function mwImagePreview ($image, $file, $callback) {
50
51	// Using native DOM, so need to fallback if jQuery happen
52	if ( $image instanceof jQuery )
53		$image = $image.get(0);
54
55	// Reading image from file input and applying to image
56	mwImageReader($file, function ($src) {
57		
58		// Saving old event handler, replacing with own and then returning it back
59		var $oe = $image.onload; 
60
61		// Triggering callback after image was actually drawn
62		// Setting this before
63		$image.onload = function () {
64			
65			// Resetting onload we just added
66			$image.onload = $oe;
67			
68			// Issuing callback
69			if ( typeof($callback) == 'function' )
70				$callback($src);
71				
72		}; //FUNC image.onLoad
73		
74		// Now after event is setup, we can actually apply loaded image
75		$image.src = $src;
76		
77	}); //mwImageReader.callback
78
79} //FUNC mwImagePreview
80
81/** //** ----= mwBackgroundPreview	=------------------------------------------------------------------------------\**//** \
82*
83*	Fast loads image from File object (usually obtained from file input) into background of element using HTML5 filesAPI.	
84*
85*	@param		jQuery		$image	- Image to update.
86*	@param		object(File)	$file	- File object to use as source.
87*
88\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
89function mwBackgroundPreview ($image, $file, $callback) {
90
91	// Reading image from file input and applying to image
92	mwImageReader($file, function ($src) {
93
94		// Now after event is setup, we can actually apply loaded image
95		$image.css('background-image', "url('"+$src+"')");
96	
97		// Issuing callback
98		if ( typeof($callback) == 'function' )
99			$callback($src);
100		
101	}); //mwImageReader.callback
102
103} //FUNC mwBackgroundPreview
104
105/** //** ----= mwOnImageChange	=--------------------------------------------------------------------------------------\**//** \
106*
107*	Binds onChange event to given file input, and updates specified <img> element using HTML5 files API once input changes.	
108*
109*	@param		jQuery		$image		- Image to update.
110*	@param		jQuery		$imageInput	- File input to bing.
111*
112\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
113function mwOnImageChange ($image, $imageInput) {
114
115	// Need to check if files API is really available before do fancy tricks
116	if ( !isFilesAPI() ) return;
117
118	$imageInput
119		.off('change.mwOnImageChange')
120		.on('change.mwOnImageChange', function () {
121			
122			// Safety check
123			if ( !this.files.length )
124				return;
125			
126			// Using first given file (single image update essencially)
127			mwImagePreview($image, this.files[0]);
128
129		}) //onChange
130	; //jQuery imageInput
131	
132} //FUNC mwOnImageChange
133
134/** //** ----= mwLoadImage	=--------------------------------------------------------------------------------------\**//** \
135*
136*	Adds preloader to specified <img> element. Uses expected dimensions to draw proper loading box. 
137*	Uses native DOM tree methods, to be less depended on onLoad event (no need to wait other libs to load).
138*	Detects element proportinal changes (in case of dynamic image widths of responsive images).
139*
140*	@param		DOMElement	$image		- Image to load.
141*	@param		int		$width, $height	- Expected image dimensions.
142*
143\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
144function mwLoadImage ($image, $width, $height) {
145
146	if ( !$image )
147		return;
148
149	// Using native DOM, so need to fallback if jQuery happen
150	if ( $image instanceof jQuery || $image.jquery )
151		$image = $image.get(0);
152
153	// Not doing anyting if image is loaded already (cache?)

154	if ( $image.naturalWidth || $image.naturalHeight )
155		return;
156
157	// Have to have some defaults,
158	$width	= $width || $image.scrollWidth;
159	$height	= $height || 30;
160
161	// Calculating ratio for scticking sizes. Will calculate on place from width, for full responsive behavior
162	var $ratio	= $width / $height;
163	
164	// Saving original image styles, to restore after it's loaded
165	var $css = {
166		'width'		: $image.style.width,
167		'height'	: $image.style.height,
168	} //$css
169
170	// Also temprary removing alt text, so saving it too
171	var $alt = $image.getAttribute('alt');
172	$image.setAttribute('alt', '');
173
174	// Setting loading state	
175	$image.className += ' loading';
176
177	// Setting image size strictly while it loads (to make sure loader look correctly)
178	// Calculating through ratio, to make sure % widths/heights are handled correctly on responsive
179	// ToDo: Test source dimensions, might be clientWidth better to use as source
180	$image.style.width	= $width + 'px';
181	$image.style.height	= Math.round($width / $ratio) + 'px';
182	
183	// When image loaded - need to revert changes and remove loading state
184	$image.onload = function () {
185
186		// Removing class
187		$image.className = $image.className.replace('loading', '');
188		
189		// Setting height/width back
190		$image.style.width = $css.width;
191		$image.style.height = $css.height;
192		
193		// Restoring alt
194		$image.setAttribute('alt', $alt);
195		
196		// Unsetting onload
197		$image.onload = false;
198	} //FUNC $image.onLoad			
199	
200} //FUNC mwLoadImage
201
202/** //** ----= mwInitMedia	=--------------------------------------------------------------------------------------\**//** \
203*
204*	Initiates common morweb audion/video players on page.
205*
206*	@param		jQuery	[$context]	- Context to search within.	
207*
208\**//** ---------------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/
209function mwInitMedia ($context) {
210
211	// ToDo: Implement conditional media resources initiating
212	var $el = jQuery('audio, video', $context);
213	
214	if ( !$el.length )
215		return;
216		
217	// Initiating common audio/video
218	$el.mediaelementplayer({
219		enableAutosize		: false,
220		alwaysShowControls	: false,
221		iconSprite		: '/cms3/res/mediaelement/mejs-controls.svg',
222		enableKeyboard		: false,
223	//	controls		: false,
224	//	useDefaultControls	: false,
225
226	/*/	// For user with CDN
227		pluginPath		: '/cms/res/mediaelement/',
228		shimScriptAccess	: 'always',
229	/**/
230		success                 : function( $mediaElement, $originalNode, $instance ) {
231			
232			// Storing instance as element data for easy access later
233			jQuery($originalNode).data('mediaelement', $instance);
234			
235			// Workaround to retain controls attribute on video
236			// Somehow mediaelement looses it, and fails to init
237			// Required only on video
238			// ToDo: invesitgate conditions
239			// Discovered in 4.2.5
240			// In 2025 we don't need to control controls again. Browsers evolve.
241		/*/
242			jQuery($originalNode).attr({
243				'controls'      :       'controls'
244			});
245		
246			setTimeout( function () {
247			//	jQuery($originalNode).removeAttr('controls');
248			}, 10);
249		
250		/*/
251			// jQuery($originalNode).removeAttr('controls');
252		/**/	
253		}, //FUNC success
254
255	}); //mediaelementplayer.options
256	
257	// ToDo: Implement widget based initiations
258	
259} //FUNC mwInitMedia