Created
August 13, 2015 09:30
-
-
Save cod3beat/d1ada01bde6091039c2d to your computer and use it in GitHub Desktop.
Eksperimen mengembangkan website menggunakan Progressive Enhancement
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Eksperimen Progressive Enhancement</title> | |
| </head> | |
| <body> | |
| <!-- Summernote akan diload bila JS ada --> | |
| <textarea data-hook="rich-editor">Hallo</textarea> | |
| <script src="jquery.js"></script> | |
| <script src="loadJS.js"></script> | |
| <script src="loadCSS.js"></script> | |
| <script src="onloadCSS.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /*! | |
| loadCSS: load a CSS file asynchronously. | |
| [c]2014 @scottjehl, Filament Group, Inc. | |
| Licensed MIT | |
| */ | |
| /* exported loadCSS */ | |
| function loadCSS( href, before, media, callback ){ | |
| "use strict"; | |
| // Arguments explained: | |
| // `href` is the URL for your CSS file. | |
| // `before` optionally defines the element we'll use as a reference for injecting our <link> | |
| // By default, `before` uses the first <script> element in the page. | |
| // However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document. | |
| // If so, pass a different reference element to the `before` argument and it'll insert before that instead | |
| // note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/ | |
| var ss = window.document.createElement( "link" ); | |
| var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; | |
| var sheets = window.document.styleSheets; | |
| ss.rel = "stylesheet"; | |
| ss.href = href; | |
| // temporarily, set media to something non-matching to ensure it'll fetch without blocking render | |
| ss.media = "only x"; | |
| // DEPRECATED | |
| if( callback ) { | |
| ss.onload = callback; | |
| } | |
| // inject link | |
| ref.parentNode.insertBefore( ss, ref ); | |
| // This function sets the link's media back to `all` so that the stylesheet applies once it loads | |
| // It is designed to poll until document.styleSheets includes the new sheet. | |
| ss.onloadcssdefined = function( cb ){ | |
| var defined; | |
| for( var i = 0; i < sheets.length; i++ ){ | |
| if( sheets[ i ].href && sheets[ i ].href === ss.href ){ | |
| defined = true; | |
| } | |
| } | |
| if( defined ){ | |
| cb(); | |
| } else { | |
| setTimeout(function() { | |
| ss.onloadcssdefined( cb ); | |
| }); | |
| } | |
| }; | |
| ss.onloadcssdefined(function() { | |
| ss.media = media || "all"; | |
| }); | |
| return ss; | |
| } |
This file contains hidden or 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
| /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */ | |
| function loadJS( src, cb ){ | |
| "use strict"; | |
| var ref = window.document.getElementsByTagName( "script" )[ 0 ]; | |
| var script = window.document.createElement( "script" ); | |
| script.src = src; | |
| script.async = true; | |
| ref.parentNode.insertBefore( script, ref ); | |
| if (cb && typeof(cb) === "function") { | |
| script.onload = cb; | |
| } | |
| return script; | |
| } |
This file contains hidden or 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
| /*! | |
| onloadCSS: adds onload support for asynchronous stylesheets loaded with loadCSS. | |
| [c]2014 @zachleat, Filament Group, Inc. | |
| Licensed MIT | |
| */ | |
| /* global navigator */ | |
| /* exported onloadCSS */ | |
| function onloadCSS( ss, callback ) { | |
| ss.onload = function() { | |
| ss.onload = null; | |
| if( callback ) { | |
| callback.call( ss ); | |
| } | |
| }; | |
| // This code is for browsers that don’t support onload, any browser that | |
| // supports onload should use that instead. | |
| // No support for onload: | |
| // * Android 4.3 (Samsung Galaxy S4, Browserstack) | |
| // * Android 4.2 Browser (Samsung Galaxy SIII Mini GT-I8200L) | |
| // * Android 2.3 (Pantech Burst P9070) | |
| // Weak inference targets Android < 4.4 | |
| if( "isApplicationInstalled" in navigator && "onloadcssdefined" in ss ) { | |
| ss.onloadcssdefined( callback ); | |
| } | |
| } |
This file contains hidden or 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() { | |
| $.extend({ | |
| hook: function(hookName) { | |
| var selector; | |
| if(!hookName || hookName === '*') { | |
| // select all data-hooks | |
| selector = '[data-hook]'; | |
| } else { | |
| // select specific data-hook | |
| selector = '[data-hook~="' + hookName + '"]'; | |
| } | |
| return $(selector); | |
| } | |
| }); | |
| var $editor = $.hook('rich-editor'); | |
| if ($editor.length) { | |
| // Oh callback.... | |
| // Tetapi untuk eksperimen sederhana, ini udah cukup :D | |
| // load CSS dari lokal, atau CDN biar enak | |
| var editorCSS = window.loadCSS('/css/summernote.css'); | |
| // jalankan callback ketika CSS berhasil di load | |
| window.onloadCSS(editorCSS, function() { | |
| // load JS dari lokal, atau CDN biar enak | |
| window.loadJS('/js/summernote.min.js', function() { | |
| // jalankan callback ketika js berhasil di load | |
| $editor.summernote({ | |
| height: 400, | |
| minHeight: 300 | |
| }) | |
| }); | |
| }) | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment