Last active
August 29, 2015 14:01
-
-
Save lukasharing/b9207af01f5edd0f2982 to your computer and use it in GitHub Desktop.
CSS Include in Javascript!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function include(urlLibrary, callback) | |
{ | |
var customLibraries = { | |
"angularjs": {url: "//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"}, | |
"dojo": {url: "//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"}, | |
"ext core": {url: "//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"}, | |
"jquery": {url: "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"}, | |
"jquery mobile": {url: "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js", | |
css: "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css"}, | |
"jquery ui": {url: "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js", | |
css: "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"}, | |
"mootools": {url: "//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"}, | |
"protoype": {url: "//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"}, | |
"script.aculo.us": {url: "//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"}, | |
"swfobject": {url: "//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"}, | |
"web font loader": {url: "//ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"}, | |
"paperjs": {url: "http://paperjs.org/assets/js/paper.js"}, | |
"codemirror": {url: "http://paperjs.org/assets/js/codemirror.js"}, | |
"cutjs": {url: "http://paperjs.org/assets/js/codemirror.js"}, | |
"p2js": {url: "http://schteppe.github.io/p2.js/build/p2.js"} | |
}; | |
var finishUrl = null, finishUrlCss = null; | |
if(customLibraries.propertyIsEnumerable(urlLibrary)) | |
{ | |
finishUrl = customLibraries[urlLibrary].url; | |
if(customLibraries[urlLibrary].css !== null) finishUrlCss = customLibraries[urlLibrary].css; | |
} | |
else | |
{ | |
var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; | |
var regex = new RegExp(expression); | |
if(regex.exec(urlLibrary)) | |
{ | |
finishUrl = urlLibrary; | |
} | |
else | |
console.error("This is an invalid Url or doesn't exist in the default libraries"); | |
} | |
if(finishUrl !== null) | |
{ | |
var js = document.createElement("script"); | |
js.type = "text/javascript"; | |
js.src = finishUrl; | |
document.head.appendChild(js); | |
if(finishUrlCss !== null) | |
{ | |
var link = document.createElement("link"); | |
link.rel = "stylesheet"; | |
link.type = "text/css"; | |
link.href = finishUrlCss; | |
document.head.appendChild(link); | |
} | |
js.onload = callback; | |
} | |
} |
use async script tag for better performance
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This include has some default libraries, how to use it?, simple,
in your js code write the code after
include('//Library url or use custom Libraries', function(){
//Do some stuff
})// Onload callback function
Example
include('jquery', function(){
include('jquery ui', function(){
$("div").draggable();
});
})