Skip to content

Instantly share code, notes, and snippets.

@neocris

neocris/index.htm

Forked from anonymous/index.htm
Created June 8, 2017 20:19
Show Gist options
  • Save neocris/427b9fb13e11ba96cf568e0bca78a549 to your computer and use it in GitHub Desktop.
Save neocris/427b9fb13e11ba96cf568e0bca78a549 to your computer and use it in GitHub Desktop.
Download ZIP
module_loader
Raw
index.htm
<!doctype html>
<html class="no-js" lang="">
<head>
<script>
/**
* poc for various polyfills to use js modules
* [head.js](#head)
* [require.js](#require)
* X [webpack](#webpack)
* [system.js](#system)
* [curl.js (of cujo.js)](#curl)
* [promises api](#promises)
* [html imports with webcomponents.js](#imports)
*/
</script>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!--<script src="bower_components/webcomponentsjs/webcomponents.js"></script>-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bundle.js"></script>
<script src="head.load.js"></script>
<a name="head">head.js loader</a>
<script>
//head.js loader
head.load("header.js");
head.ready('header.js',function(){
include('http://www.cm-tvedras.pt','/url');
});
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div class="ColumnSection__grid u-clearfix">
<div>1</div>
<div>
<div class='host'>2</div>
<div>3</div>
</div>
<div>4</div>
</div>
<div id="stub" style="display:none"></div>
<template></template>
<iframe></iframe>
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
/*require.js*/
</script>
<!--<script data-main="kitch" src="require.js"></script>-->
<!--<script src="system.js"></script>
<script>
//system.js loader
SystemJS.config({
map: {
'plugin-babel': 'plugin-babel.js',
'systemjs-babel-build': 'systemjs-babel-browser.js'
},
transpiler: 'plugin-babel'
});
</script>
<script>
SystemJS.import('inframe.js').then(function(m){
m.include('http://www.cm-tvedras.pt','/url');
});
</script>-->
<script>
curl = {
paths: {
cssx: 'cssx/src/cssx/',
stuff: ''
}
};
</script>
<!--<script src="curl/src/curl.js" data-curl-run="curly.js"></script>-->
<!--<script>
//curl.js from cujo.js ecosystem
curl(
[
'stuff/app',
'cssx/css!stuff/base',
'i18n!stuff/nls/strings',
'text!stuff/template.html',
'domReady!'
]
)
.then(
function (app, link, strings, template) {
var body = document.body;
if (body) {
body.appendChild(document.createTextNode('three == ' + three.toString() + ' '));
body.appendChild(document.createElement('br'));
body.appendChild(document.createTextNode(strings.hello));
body.appendChild(document.createElement('div')).innerHTML = template;
}
},
function (ex) {
var msg = 'OH SNAP: ' + ex.message;
alert(msg);
}
);
</script>-->
<!--<script type="module">
//fail native es6 modules with webpack, wtf?
import {include} from 'inframes';
include('http://www.cm-tvedras.pt','/url');
</script>-->
<script>
/*html imports*/
</script>
<!--<link rel="import" href="inframe.html" onload="frame()">-->
<!--<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="kitch.js"></script>-->
<script>
//loader with promises api
var load = (function() {
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
var element = document.createElement(tag);
var parent = 'body';
var attr = 'src';
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch(tag) {
case 'script':
element.async = true;
break;
case 'link':
element.type = 'text/css';
element.rel = 'stylesheet';
attr = 'href';
parent = 'head';
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load('link'),
js: _load('script'),
img: _load('img')
}
})();
Promise.all([
//load.js('inframe.js')
]).then(function() {
console.log('Everything has loaded!');
include('http://www.cm-tvedras.pt','/url');
}).catch(function() {
console.log('Oh no, epic failure!');
});
</script>
<script type=text/html>
var $host = $('#host'), url, lurl, surl, respath, style, script;
$.get('/uri', function(d){return;
<!--$('#stub').html(d);
$('iframe').contents().find('body').html(d);-->
$('iframe').contents().find('body script[src]').each(function(i,s){console.log('scripts');
url = new URL('http://www.cm-tvedras.pt');
surl = new URL(s.src);
respath = surl.hostname === "localhost" ? url.origin + surl.pathname : s.src;
<!--console.log('path:'+respath);
script = $('<script src='+respath+'><\/script>');
$host.append(script);-->
$.getScript(respath);
script = document.createElement("script");
script.type = "text/javascript";
script.src = respath;
<!--script.onload = function(){console.log('loaded');}
$host.append(script);
$host[0].appendChild(script);
$('#stub')[0].appendChild(script);-->
$('iframe').contents().find('body').append(script);
});
$('<base>').attr('href','http://www.cm-tvedras.pt').prependTo('head');
$host.html(d);
<!--$host.prepend(d);
$('iframe').contents().find('body').click(function(){console.log('hello');});
$('template').html(d);-->
$('#host link[rel="stylesheet"]').each(function(i,link){
url = new URL('http://www.cm-tvedras.pt');
lurl = new URL(link.href);
respath = lurl.hostname === "localhost" ? url.origin + lurl.pathname : link.href;
style = $('<style scoped>@import url('+respath+')</style>');
<!--$host.prepend(style);
$('template').prepend(style);-->
});
<!--var host = document.querySelector('#host');
var root = host.attachShadow({mode: 'open'});
var root = host.createShadowRoot();
var template = document.querySelector('template');console.log(template.content);
var clone = document.importNode(template.content, true);
root.appendChild(clone);
var style = $('<style scoped>@import url("http://www.cm-tvedras.pt/assets/v2016/css/style.css")</style>');
$host.prepend(style);
console.log($('#host link[rel="stylesheet"]'));
$host.ready(function(){console.log(getComputedStyle($host[0]));$host.prepend('<style scoped></style>').css(getComputedStyle($host[0]))});-->
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment