web component loader as submodule
This commit is contained in:
Alexandre Bourlier
parent
53e26268b3
commit
943e54032f
3
.gitmodules
vendored
3
.gitmodules
vendored
@ -1,3 +1,6 @@
|
|||||||
[submodule "dist/lib/ldp-display"]
|
[submodule "dist/lib/ldp-display"]
|
||||||
path = dist/lib/ldp-display
|
path = dist/lib/ldp-display
|
||||||
url = git@git.happy-dev.fr:happy-dev/ldp-display.git
|
url = git@git.happy-dev.fr:happy-dev/ldp-display.git
|
||||||
|
[submodule "dist/lib/webcomponentsjs"]
|
||||||
|
path = dist/lib/webcomponentsjs
|
||||||
|
url = https://github.com/webcomponents/webcomponentsjs
|
||||||
|
|||||||
74
dist/lib/webcomponents-loader.js
vendored
74
dist/lib/webcomponents-loader.js
vendored
@ -1,74 +0,0 @@
|
|||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
||||||
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
||||||
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
||||||
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
||||||
* Code distributed by Google as part of the polymer project is also
|
|
||||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
// global for (1) existence means `WebComponentsReady` will file,
|
|
||||||
// (2) WebComponents.ready == true means event has fired.
|
|
||||||
window.WebComponents = window.WebComponents || {};
|
|
||||||
var name = 'webcomponents-loader.js';
|
|
||||||
// Feature detect which polyfill needs to be imported.
|
|
||||||
var polyfills = [];
|
|
||||||
if (!('import' in document.createElement('link'))) {
|
|
||||||
polyfills.push('hi');
|
|
||||||
}
|
|
||||||
if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
|
|
||||||
(window.ShadyDOM && window.ShadyDOM.force)) {
|
|
||||||
polyfills.push('sd');
|
|
||||||
}
|
|
||||||
if (!window.customElements || window.customElements.forcePolyfill) {
|
|
||||||
polyfills.push('ce');
|
|
||||||
}
|
|
||||||
// NOTE: any browser that does not have template or ES6 features
|
|
||||||
// must load the full suite (called `lite` for legacy reasons) of polyfills.
|
|
||||||
if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
|
|
||||||
// Edge has broken fragment cloning which means you cannot clone template.content
|
|
||||||
!(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
|
|
||||||
polyfills = ['lite'];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (polyfills.length) {
|
|
||||||
var script = document.querySelector('script[src*="' + name +'"]');
|
|
||||||
var newScript = document.createElement('script');
|
|
||||||
// Load it from the right place.
|
|
||||||
var replacement = 'webcomponents-' + polyfills.join('-') + '.js';
|
|
||||||
var url = script.src.replace(name, replacement);
|
|
||||||
newScript.src = url;
|
|
||||||
// NOTE: this is required to ensure the polyfills are loaded before
|
|
||||||
// *native* html imports load on older Chrome versions. This *is* CSP
|
|
||||||
// compliant since CSP rules must have allowed this script to run.
|
|
||||||
// In all other cases, this can be async.
|
|
||||||
if (document.readyState === 'loading' && ('import' in document.createElement('link'))) {
|
|
||||||
document.write(newScript.outerHTML);
|
|
||||||
} else {
|
|
||||||
document.head.appendChild(newScript);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Ensure `WebComponentsReady` is fired also when there are no polyfills loaded.
|
|
||||||
// however, we have to wait for the document to be in 'interactive' state,
|
|
||||||
// otherwise a rAF may fire before scripts in <body>
|
|
||||||
|
|
||||||
var fire = function() {
|
|
||||||
requestAnimationFrame(function() {
|
|
||||||
window.WebComponents.ready = true;
|
|
||||||
document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true}));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (document.readyState !== 'loading') {
|
|
||||||
fire();
|
|
||||||
} else {
|
|
||||||
document.addEventListener('readystatechange', function wait() {
|
|
||||||
fire();
|
|
||||||
document.removeEventListener('readystatechange', wait);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
1
dist/lib/webcomponentsjs
vendored
Submodule
1
dist/lib/webcomponentsjs
vendored
Submodule
@ -0,0 +1 @@
|
|||||||
|
Subproject commit bdd5203993f19ca08568638afd96f8f9c3959ea1
|
||||||
@ -18,7 +18,7 @@
|
|||||||
<!-- Javascript -->
|
<!-- Javascript -->
|
||||||
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
|
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<script type="text/javascript" src="dist/lib/webcomponents-loader.js"></script>
|
<script type="text/javascript" src="dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
|
||||||
|
|
||||||
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
|
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
|
||||||
<link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
|
<link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
|
||||||
|
|||||||
@ -1,100 +1,18 @@
|
|||||||
.menu ldp-route {
|
#navbarSupportedContent {
|
||||||
display: block;
|
ldp-route {
|
||||||
font-size: 1.2em;
|
color: white;
|
||||||
text-decoration: none;
|
cursor: pointer;
|
||||||
line-height: 2.5em;
|
}
|
||||||
color: #666;
|
ldp-route:hover {
|
||||||
padding: 0.5em;
|
text-decoration: underline;
|
||||||
margin: auto;
|
}
|
||||||
padding-left: 20px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fait office de border-bottom */
|
|
||||||
|
|
||||||
.menu ldp-route::after {
|
@media (min-width: 768px) {
|
||||||
content: "";
|
#navbarSupportedContent {
|
||||||
background: #f1f1f1;
|
ldp-route {
|
||||||
position: absolute;
|
margin: 0px 10px;
|
||||||
bottom: -1px;
|
|
||||||
left: 10px;
|
|
||||||
width: 80%;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu ldp-route:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #000;
|
|
||||||
background-color: darkgrey;
|
|
||||||
}
|
|
||||||
.menu ldp-route[active] {
|
|
||||||
cursor: pointer;
|
|
||||||
/* color: #000; */
|
|
||||||
background-color: aliceblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu ldp-route:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #000;
|
|
||||||
background-color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
border-right: 0.5px solid #ccc;
|
|
||||||
max-width: 275px;
|
|
||||||
min-width: 125px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu ldp-router {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-title {
|
|
||||||
font-size: 2em;
|
|
||||||
/* margin-left: 10px; */
|
|
||||||
/* pas top centrer sur peite largeur, comment faire sans margin-left ? */
|
|
||||||
margin-right: 2px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: 'Righteous', cursive;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-placeholder {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 25px 10px 0 10px;
|
|
||||||
background-color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 767px) {
|
|
||||||
#menu-placeholder {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.menu {
|
|
||||||
border-right: none;
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
.menu ldp-router {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.menu ldp-route {
|
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
|
||||||
ldp-route:hover,
|
|
||||||
.used {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-height: 800px) and (min-width: 767px) {
|
|
||||||
.menu ldp-route {
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user