MediaWiki: Common.js

From ShareRice Wiki (AFN)
Jump to: navigation, search
Line 1: Line 1:
 
/* Any JavaScript here will be loaded for all users on every page load. */
 
/* Any JavaScript here will be loaded for all users on every page load. */
  
 +
var _asianfuse = {
 +
maxWidth: 425,
 +
maxHeight: 350,
 +
containers: [],
 +
embeds: [],
 +
restores: [],
 +
container:  function(id){ return(jQuery('#af-media-embed-container_' + id)); },
 +
embed:      function(id){ return(jQuery('#af-media-embed_' + id));          },
 +
restore:    function(id){ return(jQuery('#af-media-restore_' + id));        },
 +
ratio:      function(id) { return(_asianfuse.container(id_num).height() / _asianfuse.embed(id_num).height()); },
 +
is_maximized: function(id) {
 +
return parseInt(this.container(id).height()) == (this.maxHeight * this.ratio(id)) && parseInt(this.container(id).width()) == parseInt(_asianfuse.maxWidth);
 +
}
 +
}
  
video_panel = function(id, cfg) {
+
function setDefaults() {
this.config      = cfg
+
jQuery('.afv').each(function(i, el) {
this.container    = jQuery('#af-media-embed-container_' + id)
+
id_num = this.id.split('_', 2)[1]
this.embedded    = jQuery('#af-media-embed_' + id)
 
this.restorer    = jQuery('#af-media-restore_' + id)
 
this.widths      = { container: this.container.width(), embedded: this.embedded.width() }
 
this.heights      = { container: this.container.height(), embedded: this.embedded.height() }
 
  
this.maximize    = function(e) {
+
_asianfuse.containers[id_num] = { height: _asianfuse.container(id_num).height(), width: _asianfuse.container(id_num).width(), ratio: _asianfuse.ratio(id_num) }
if( e.button != 0 && this.is_maximized() ) { return; }
+
_asianfuse.embeds[id_num]    = { height: _asianfuse.embed(id_num).height(),    width: _asianfuse.embed(id_num).width()    }
this.container.width(this.config.maxWidth + 'px');
+
});
this.container.height(this.config.maxHeight + 45 + 'px');
 
  
this.embedded.width(this.config.maxWidth + 'px');
+
}
this.embedded.height(this.config.maxHeight + 'px');
+
 
 +
function setMouseDownEvents() {
 +
jQuery('.afv').mousedown(function(e) {
 +
id_num = this.id.split('_', 2)[1];
 +
 
 +
if( e.which != 1 || _asianfuse.is_maximized(id_num) ) { return; }
 +
 
 +
_asianfuse.container(id_num).width(_asianfuse.maxWidth + 'px');
 +
_asianfuse.container(id_num).height((_asianfuse.maxHeight * _asianfuse.containers[id_num].ratio) + 'px');
 +
 
 +
_asianfuse.embed(id_num).width(_asianfuse.maxWidth + 'px');
 +
_asianfuse.embed(id_num).height(_asianfuse.maxHeight + 'px');
  
 
// Reset the width relative to the width of the embedded video,  
 
// Reset the width relative to the width of the embedded video,  
 
// because we cannot count on it's parent element's calculated width to cause this to display as expected
 
// because we cannot count on it's parent element's calculated width to cause this to display as expected
this.restorer.width((this.config.maxWidth * 0.98) + 'px');
+
_asianfuse.restore(id_num).width((_asianfuse.maxWidth * 0.98) + 'px');
this.restorer.show();
+
_asianfuse.restore(id_num).show();
}
+
});
this.minimize    = function() {
+
}
if( this.is_maximized() ) {
 
this.restorer.hide();
 
this.embedded.width(this.widths.embedded + 'px')
 
this.embedded.height(this.heights.embedded + 'px');
 
  
this.container.width(this.widths.container + 'px')
+
function setRestoreEvents() {
this.container.height(this.heights.container + 'px')
+
jQuery('div.restore').click(function(e) {
}
+
id_num = this.id.split('_', 2)[1]
}
 
  
this.is_maximized = function() {
+
if( _asianfuse.is_maximized(id_num) ) {
o = (this.container.length > 0 ? 'container' : 'embedded');
+
_asianfuse.restore(id_num).hide();
return parseInt(this[o].height()) == parseInt(this.config.maxHeight + (this.container.length > 0 ? 45 : 0)) &&
+
_asianfuse.embed(id_num).width(_asianfuse.embeds[id_num].width + 'px');
      parseInt(this[o].width())  == parseInt(this.config.maxWidth);
+
_asianfuse.embed(id_num).height(_asianfuse.embeds[id_num].height + 'px');
}
 
}
 
  
// Provide easy access to default values, neatly hidden in a "namespace" that SHOULDN'T conflict with any other environmental variables.
+
_asianfuse.container(id_num).width(_asianfuse.containers[id_num].width + 'px');
var _asianfuse2 = {
+
_asianfuse.container(id_num).height(_asianfuse.containers[id_num].height + 'px');
maxWidth: 425,
+
}
maxHeight: 350,
+
});
video_panels: [],
 
add: function(id, config) {
 
this.video_panels[id] = new video_panel(id, config);
 
}
 
 
}
 
}
  
 
function initAsianFuseVideoPanels() {
 
function initAsianFuseVideoPanels() {
jQuery('.afv').each(function(i, el) {
+
setDefaults();
id = el.id.split('_', 2)
+
setMouseDownEvents();
_asianfuse2.add(id[1], _asianfuse2);
+
setRestoreEvents();
});
 
 
}
 
}
  
 
addOnloadHook( initAsianFuseVideoPanels );
 
addOnloadHook( initAsianFuseVideoPanels );

Revision as of 02:00, 5 August 2011

/* Any JavaScript here will be loaded for all users on every page load. */

var _asianfuse = {
	maxWidth: 425,
	maxHeight: 350,
	containers: [],
	embeds: [],
	restores: [],
	container:  function(id){ return(jQuery('#af-media-embed-container_' + id)); },
	embed:      function(id){ return(jQuery('#af-media-embed_' + id));           },
	restore:    function(id){ return(jQuery('#af-media-restore_' + id));         },
	ratio:      function(id) { return(_asianfuse.container(id_num).height() / _asianfuse.embed(id_num).height()); },
	is_maximized: function(id) {
		return parseInt(this.container(id).height()) == (this.maxHeight * this.ratio(id)) && parseInt(this.container(id).width()) == parseInt(_asianfuse.maxWidth);
	}
}

function setDefaults() {
	jQuery('.afv').each(function(i, el) {
		id_num = this.id.split('_', 2)[1]

		_asianfuse.containers[id_num] = { height: _asianfuse.container(id_num).height(), width: _asianfuse.container(id_num).width(), ratio: _asianfuse.ratio(id_num) }
		_asianfuse.embeds[id_num]     = { height: _asianfuse.embed(id_num).height(),     width: _asianfuse.embed(id_num).width()     }
	});

}

function setMouseDownEvents() {
	jQuery('.afv').mousedown(function(e) {
		id_num = this.id.split('_', 2)[1];

		if( e.which != 1 || _asianfuse.is_maximized(id_num) ) { return; }

		_asianfuse.container(id_num).width(_asianfuse.maxWidth + 'px');
		_asianfuse.container(id_num).height((_asianfuse.maxHeight * _asianfuse.containers[id_num].ratio) + 'px');

		_asianfuse.embed(id_num).width(_asianfuse.maxWidth + 'px');
		_asianfuse.embed(id_num).height(_asianfuse.maxHeight + 'px');

		// Reset the width relative to the width of the embedded video, 
		// because we cannot count on it's parent element's calculated width to cause this to display as expected
		_asianfuse.restore(id_num).width((_asianfuse.maxWidth * 0.98) + 'px');
		_asianfuse.restore(id_num).show();
	});
}

function setRestoreEvents() {
	jQuery('div.restore').click(function(e) {
		id_num = this.id.split('_', 2)[1]

		if( _asianfuse.is_maximized(id_num) ) {
			_asianfuse.restore(id_num).hide();
			_asianfuse.embed(id_num).width(_asianfuse.embeds[id_num].width + 'px');
			_asianfuse.embed(id_num).height(_asianfuse.embeds[id_num].height + 'px');

			_asianfuse.container(id_num).width(_asianfuse.containers[id_num].width + 'px');
			_asianfuse.container(id_num).height(_asianfuse.containers[id_num].height + 'px');
		}
	});
}

function initAsianFuseVideoPanels() {
	setDefaults();
	setMouseDownEvents();
	setRestoreEvents();
}

addOnloadHook( initAsianFuseVideoPanels );