diff --git a/README.mdown b/README.mdown index 5126d57..80f0167 100644 --- a/README.mdown +++ b/README.mdown @@ -19,6 +19,7 @@ bower install --save requirejs-plugins ## Plugins - **async** : Useful for JSONP and asynchronous dependencies (e.g. Google Maps). + - **css**: Load css files. - **font** : Load web fonts using the [WebFont Loader API](https://code.google.com/apis/webfonts/docs/webfont_loader.html) (requires `propertyParser`) - **goog** : Load [Google APIs](http://code.google.com/apis/loader/) @@ -54,6 +55,7 @@ require.config({ paths : { //create alias to plugins (not needed if plugins are on the baseUrl) async: 'lib/require/async', + css: 'lib/require/css', font: 'lib/require/font', goog: 'lib/require/goog', image: 'lib/require/image', @@ -74,7 +76,8 @@ define([ 'async!http://maps.google.com/maps/api/js?sensor=false', 'goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1', - 'font!google,families:[Tangerine,Cantarell]' + 'font!google,families:[Tangerine,Cantarell]', + 'css!file.css', ], function(awsum, foo, bar, loremIpsum){ //all dependencies are loaded (including gmaps and other google apis) } diff --git a/bower.json b/bower.json index 33c8ba3..17c5819 100644 --- a/bower.json +++ b/bower.json @@ -3,6 +3,7 @@ "version": "1.0.3", "main": [ "src/async.js", + "src/css.js", "src/depend.js", "src/font.js", "src/goog.js", diff --git a/examples/css.html b/examples/css.html new file mode 100644 index 0000000..754d1c2 --- /dev/null +++ b/examples/css.html @@ -0,0 +1,29 @@ + + + + + RequireJS css plugin + + + +
+

RequireJS css plugin

+

Notes:

+ +
+
+
+ + + + diff --git a/examples/css/example.css b/examples/css/example.css new file mode 100644 index 0000000..aedf084 --- /dev/null +++ b/examples/css/example.css @@ -0,0 +1,30 @@ +* { + box-sizing: border-box; +} +.example { + width: 256px; + height: 256px; +} +.example div { + position: relative; + border-radius: 100%; + width: 100%; + height: 100%; + padding: 8px; +} +.example > div { background: rgb(0 , 0, 0); } +.example > div > div { background: rgb(16 , 16, 16); } +.example > div > div > div { background: rgb(32 , 32, 32); } +.example > div > div > div > div { background: rgb(48 , 48, 48); } +.example > div > div > div > div > div { background: rgb(64 , 64, 64); } +.example > div > div > div > div > div > div { background: rgb(80 , 80, 80); } +.example > div > div > div > div > div > div > div { background: rgb(96 , 96, 96); } +.example > div > div > div > div > div > div > div > div { background: rgb(112 , 112, 112); } +.example > div > div > div > div > div > div > div > div > div { background: rgb(128 , 128, 128); } +.example > div > div > div > div > div > div > div > div > div > div { background: rgb(144 , 144, 144); } +.example > div > div > div > div > div > div > div > div > div > div > div { background: rgb(160 , 160, 160); } +.example > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(176 , 176, 176); } +.example > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(192 , 192, 192); } +.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(208 , 208, 208); } +.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(224 , 224, 224); } +.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(240 , 240, 240); } \ No newline at end of file diff --git a/src/css.js b/src/css.js new file mode 100644 index 0000000..df9f2ed --- /dev/null +++ b/src/css.js @@ -0,0 +1,81 @@ +/** @license + * RequireJS plugin for loading css files` + * Author: Itay Merchav + * (2017/08/23) + * Released under the MIT license + */ +define("css", function () { + "use strict"; + + var XMLHttpFactories = [ + function () {return new XMLHttpRequest()}, + function () {return new ActiveXObject("Msxml2.XMLHTTP")}, + function () {return new ActiveXObject("Msxml3.XMLHTTP")}, + function () {return new ActiveXObject("Microsoft.XMLHTTP")} + ]; + + function createXMLHTTPObject () { + + var xmlHttp = false; + + for (var index = 0; index < XMLHttpFactories.length; index++) { + try { xmlHttp = XMLHttpFactories[index](); } + catch (e) { continue; } + break; + } + return xmlHttp; + } + + function createLink (srcArg) { + + var head = document.getElementsByTagName('head')[0]; + var link = document.createElement('link'); + link.type = 'text/css'; + link.rel = 'stylesheet'; + link.href = srcArg; + + head.appendChild(link); + return link; + } + + function sendRequest (urlArg, callbackSuccessArg, callbackErrorArg) { + + var xmlHttpObject = createXMLHTTPObject(); + if (!xmlHttpObject) return; + + xmlHttpObject.open("GET", urlArg, true); + + xmlHttpObject.onreadystatechange = function () { + + if (xmlHttpObject.readyState != 4) return; + + if (xmlHttpObject.status != 200 && xmlHttpObject.status != 304) { + callbackErrorArg(xmlHttpObject); + } + else { + callbackSuccessArg(xmlHttpObject.responseText); + } + }; + + if (xmlHttpObject.readyState == 4) return; + xmlHttpObject.send(); + } + + //noinspection JSUnusedLocalSymbols + return { + + load: function (nameArg, parentRequireArg, onLoadArg, configArg) { + + function callbackSuccess (cssStreamArg) { + //The file is here, it will be loaded as css from the cache. + createLink(nameArg); + onLoadArg(cssStreamArg); + } + function callbackError (status) { + //Report the error + onLoadArg.error(status); + } + sendRequest(nameArg, callbackSuccess, callbackError); + } + } +}); \ No newline at end of file