neocris/index.htm

## 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>
	<!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>