FANDOM


wikiMod is a javascript library for extending FANDOM, while depending on as few external resources as possible. Originally made for FANDOM's mobile skin, it has since been updated to work under any circumstance.

Usage

Simply include the wikiMod code where ever you need it.

wikiMod is currently used on the Dead Island Wiki to fix bugs related to the TabView and Tabber extensions. The TabView extensions is written in such a way that the urls generated by php link directly to a render page rather than an actual wiki page. This works fine as long as the extension's JS code is loaded. However, it is not on mobile devices and therefore mobile users can't view the wiki properly. This and more is fixed on the Dead Island Wiki using wikiMod.

Safe Initialization

If you are designing a mobile site extension using wikiMod, keep in mind that mobile devices are much slower and may load scripts out of order depending on connection speed, cache size, and the how big your script is. So it's important to ensure wikiMod exists before trying to use it. However, too many timer functions will just slow things down even more.

The following is an example of how to ensure your script executes cleanly every time, on any device.

Common.js:

// **************************************************
// Start Javascript Libraries
// **************************************************
 
// wikiMod watcher.
// Setter adds functions to a stack till wikiMod is ready.
// set using window.onWikiModReady = function(){};
+function(t,e,o,n,i){function r(t){var e=t[b],o=typeof e;if(o==w)try{j.push(e)}catch(n){}try{t[b]=i}catch(n){}try{delete t[b],t[b]=i}catch(n){}return"boolean"==o}function c(){$=m;for(var t,e=0;j.length>0&&100>e;){e++,t=j[0],j[0]=i,j.splice(0,1);try{t()}catch(o){n(o)}}}function f(t){try{if(t.displayName==g||t.name==g||h!=typeof t.$&&h!=typeof t.$$&&h!=typeof t.addStyle&&h!=typeof t.addScript)return m}catch(e){}return!1}function a(){return $}function u(t){var e=typeof t,o=e==w,n=t===!0;if(o||"object"==e||n)if(n||f(t))c();else if(o)if($)try{t()}catch(i){}else j.push(t)}function l(o){o=o||1,y=typeof wikiMod!==h?wikiMod:t[g]||e[g];try{if(!$&&!y&&35>o)return setTimeout(function(t){l((t||o)+1)},20,o)}catch(n){}c()}var y,p,d,s,h="undefined",w="function",g="wikiMod",b="onWikiModReady",m=!0,v=!1,M=o.defineProperty,W=h!=typeof exportFunction?exportFunction:i,$=!1,j=[],C={allowCallbacks:m,allowCrossOriginArguments:m};if(r(t)&&!d&&(d=t),r(e)&&!d&&(d=e),d)for(s=0;s<j.length;s++)try{d[b]=j[s]}catch(S){}else{p={get:a,set:u,enumerable:m,configurable:v};try{M(t,b,p)}catch(S){n(S)}if(h==typeof e[b])try{M(e,b,p)}catch(S){n(S)}l()}}(this,window,Object,console.log);
 
// wikiMod
importScriptPage('User:Jgjake2/js/wikiMod.min.js', 'deadisland');
 
// **************************************************
// End Javascript Libraries
// **************************************************
 
 
// **************************************************
// wikiMod Dependant Scripts
// **************************************************
 
importScriptPage('User:Jgjake2/js/TabView_Edit_Buttons.js', 'deadisland');
 
// **************************************************
// End wikiMod Dependant Scripts
// **************************************************

Imported Script:

+function(t,n,e,i){function o(){return typeof wikiMod!==e?wikiMod:t.wikiMod||n.wikiMod}function r(){a||(a=!0,i(t.jQuery||n.jQuery,o()))}function u(t){t=t||1;try{if(!a&&!o()&&35>t)return setTimeout(function(n){u((n||t)+1)},25,t)}catch(n){}r()}function c(){var i=t[f],o=n[f],c=!0;try{if(i===!0||o===!0)return r();try{n[f]=r}catch(a){}if(e!=typeof n[f]&&n[f]!==r&&(c=!1),i===!1||"function"!=typeof i){try{t[f]=r}catch(a){}e!=typeof t[f]&&t[f]!==r&&(c=!1)}}catch(a){}c&&u()}var f="onWikiModReady",a=!1;c()}(this,window,"undefined",
function($,wikiMod){
	// Your Code Goes Here!
	console.log("Init: ",$,wikiMod);
});

Doc

under construction

Properties

Name Definition Return Description
CSS Getter/Setter string A Getter/Setter property that stores a stack of CSS strings to be added to the page at a later time to avoid unnecessary reflows.
Setter: Adds to the value to the stored stack before addCSS is called. But after it is called, the CSS string is added immediately to the document.
Getter: Returns the CSS string currently stored.
wikiMod.CSS = "#foo.bar {width: 100%;}"; // Not added to document
/* ...other code... */
wikiMod.CSS = "#taco.bell {width: 75%;}"; // Not added to document
/* ...other code... */
wikiMod.addCSS(); // Adds CSS to document
/* ...other code... */
wikiMod.CSS = "#chips.salsa {height: 100%;}"; // Added to document immediately
isMobile get/set wikiMod.isMobile boolean Is FANDOM using the mobile skin.
alert(wikiMod.isMobile);

Events

wikiMod makes it easy to handle loading events when you are unsure if jQuery is loaded while still remaining cross-platform compatible. The following table is a list of setter properties that accept function values. The given function is added to a stack, to be called when the event if fired.

wikiMod events are either storing, or non-storing events. This just means if a storing event has already been fired and a new handler is attached, it will be fired immediately with the arguments used from the previous firing event. However, non-storing events will only fire the handlers already added. For example, the "onLoad" event will always fire new handlers attached after the page loads. But "beforescriptexecute" will only fire handlers when the event is first raised.

Each event also has a getter function that returns true if the event is storing and has fired at least once, otherwise it returns false.

Name Definition Stored Description
onLoad Getter/Setter true Fires on the window's "load" event.
wikiMod.onLoad = function(){console.log("Page Loaded!");}
onPageReady Getter/Setter true Fires when the document's "readyState" is "complete".
wikiMod.onPageReady = function(e){console.log("Page Ready!");}
onMediaWiki Getter/Setter true Fires once mediaWiki is available.
wikiMod.onMediaWiki = function(){console.log("MediaWiki Loaded!", wikiMod.mw);}
DOMContentLoaded Getter/Setter true Fires on the "DOMContentLoaded" event.
wikiMod.DOMContentLoaded = function(e){console.log("DOMContentLoaded");}
onreadystatechange Getter/Setter true Fires after ready state change.
wikiMod.onreadystatechange = function(e){console.log("onreadystatechange: ", document.readyState);}
afterscriptexecute Getter/Setter false Fires on the "afterscriptexecute" event.
wikiMod.afterscriptexecute = function(e){console.log("afterscriptexecute", e);}
beforescriptexecute Getter/Setter false Fires on the "beforescriptexecute" event.
wikiMod.beforescriptexecute = function(e){console.log("beforescriptexecute", e);}

Polyfills

Name Ref Description
Promise promise-polyfill A polyfill for an async promise structure.
return new wikiMod.Promise(function(resolve, reject){
	/* Code here */
	wikiMod.setAsap(function(){
		try {
			/* Async code here */
			return resolve(value); // Resolve a value
		} catch(e) {
			return reject(e);
		}
	});
}).then(function(val){
	// runs if value is resolved
}).catch(function(e){
	// runs if rejected by async code
});
setAsap setAsap Polyfill for "setImmediate" function.
wikiMod.setAsap(function(){/* code... */});

Methods

Name Definition Return Description
$ function(selector, target, nojQuery) element
or
undefined
A safe single-element query method that first attempts to use jQuery, but reverts to querySelector when it's not available or nojQuery is True. Optional argument target is the context of the query; Default target is the document.
var result = wikiMod.$('div.className a[href*="foo.com"]');
$$ function(selector, target, nojQuery) Array[element]
or
Array[]
A safe multi-element query method that first attempts to use jQuery, but reverts to querySelectorAll when it's not available or nojQuery is True. Optional argument target is the context of the query; Default target is the document.
var results = wikiMod.$$('div.className');
addCSS function(css) undefined Add CSS stored using wikiMod.CSS. If a string is provided as an argument, it is added to the end before being injected into the page.
see wikiMod.CSS
addScript function(js, src, id, type, async, defer) Element Adds a script element to the document.
wikiMod.addScript("var foo = 'bar';");

wikiMod.addScript(null, "http://example.com/example.js", "exampleId");
addStyle function(css) Element Adds CSS to document immediately. Returns the element created.
wikiMod.addStyle("#taco.bell {width: 75%;}");
addStylesheet function(url) Element Adds a remote style sheet to the document. Returns the element created.
wikiMod.addStylesheet("http://example.com/example.css");
contentEval function(source) N/A N/A
N/A

Other

Name Definition Return Description Example
addEventListener function(el, eventName, handler, useCapture) N/A N/A N/A
removeEventListener function(el, eventName, handler, useCapture) N/A N/A N/A
eventCancel function(e) N/A N/A N/A
importScriptPage function(page, server) N/A N/A N/A
importScriptURI function(uri) N/A N/A N/A
importScript function(page) N/A N/A N/A
isElement function(obj) N/A N/A N/A
RealTypeOf function(_obj) N/A N/A N/A
isPlainObject function(obj) N/A N/A N/A
isArray function(obj) N/A N/A N/A
isEvent function(a) N/A N/A N/A
logFormatBuilder function() N/A N/A N/A
logger function(loggerData) N/A N/A N/A
extend function() N/A N/A N/A
appendChild function(el, data) N/A N/A N/A
createNewElement function(data) N/A N/A N/A
requestAnimationFrame function(fn) N/A N/A N/A
cancelAnimationFrame function(id) N/A N/A N/A
viewportSize Object N/A N/A N/A
Events Object N/A N/A N/A
load function(name, allowDuplicateScripts) N/A N/A N/A
noConflict function() N/A N/A N/A

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.