I have an Electron App and Within my index.html file, I import a number of html files in the <head> like so:
<link rel="import" href="settings.html">
<link rel="import" href="dashboard.html">
<link rel="import" href="locker.html">
For now, each file is the same, but with a different header, and follows the same template:
<template class="section-template">
<section id="locker" class="wrapper">
<div class="inner">
<h3>Locker</h3>
</div>
</section>
</template>
In my JavaScript I have the following function that triggers on page load:
console.log(`Importing all to DOM`);
const links = document.querySelectorAll('link[rel="import"]')
Array.prototype.forEach.call(links, function(link){
var content = link.import;
var el = content.querySelector('.section-template');
console.log(el);
})
This is selecting all the imported files, calling them and then it should be selecting the whole file based on the section-template class.
For some reason, el is null and I cannot figure out why. Logging out the content shows this. Not sure why the content is appearing in the <head>, though I think this is part of the issue
http://imgur.com/a/612c8
I've copied the HTML of the locker.html file into JSFiddle, and ran the JavaScript on document which works fine.
A little confused as to why this isn't working.
Update: Example to how this should work here under imports
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
Related
On php, the implementation looks very simple, suppose we have files: header.html, body.html. Then our code index.php will look something like this:
<html>
<body>
<? = require(' header.html ')?>
<div class = "main">
<? = require(' body.html ')?>
</div>
</body>
</html>
Is it possible to do something like this?
<html>
<body>
<link rel = "import" href = "header.html">
<div class = "main">
<link rel = "import" href = "body.html">
</div>
<script>
/ * A magic js function that replaces <link rel = "import"> with the content of the html document * /
</script>
</body>
</html>
PS I understand that this will work on a very limited number of browsers.
A number of JavaScript template engines are available.
Handlebars.js and Mustache.js use curly brackets for variables.
Jade/Pug dispenses with brackets altogether.
You could build your own template library and use any format you want. The spectrum of browsers that it works on would depend on how far back in history you're willing to support.
Whereas PHP enables you to import static headers and footers, with JavaScript you're more likely to have a static template with the header and footer built in, and import the body content dynamically. We see this a lot with lazy loading content on sites like Google image search and Pinterest.
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
I'm creating a polymer datepicker using pikaday. Sadly it seems like I got something wrong.
I'd like to import pikaday.js and pikaday.css the right way.
At first I had a simple script-tag below my closing dom-module-tag, like
</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
Polymer({
//....
This way, the datepicker was created as expected. But after reading this SO-Thread I was under the impression I was supposed to import the js-file like this:
<link rel="import" href="../../paper-input/paper-input-behavior.html">
<link rel="import" href="../../paper-input/paper-input-error.html">
<link rel="import" href="../../pikaday/pikaday.js">
//more imports....
But after "fixing" my import, the file pikaday.js seems not to be visible from inside my component:
Uncaught ReferenceError: Pikaday is not defined
Furthermore I'm confused about using external css. After reading this guide it seems like I was supposed to copy & paste the contents of the provided css-file into a my-datepicker-style.html and to import it into my template like this:
<dom-module id="my-datepicker">
<template>
<style include="my-datepicker-style"></style>
<style>
:host {
//more css
I'm confused about the need to copy & paste existing code.
Until ES6 imports are more common, you need some kind of workaround for referencing dependencies.
The problem with <script> tag is that when it appears multiple times, it will be processed multiple times. This is not true for <link rel="import">. Same href will be processed only once.
You cannot, however, import javascript directly. The trick is to create pikaday-import.html file with the script reference
<script src="../../pikaday/pikaday.js"></script>
You then import that in your element's html
<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>
This is the technique for example the <marked-element> uses.
This way instances of <my-datepicker> load pickaday only once. Unfortunately, if there are other components which reference it, you could end up loading the dependency multiple times.
I'd like to pull in a static HTML file that I'll use as an Underscore template in my front-end JavaScript. I've tried the following with no luck:
<link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>
<g:external dir="tpl" file="foo.html" type="html" />
The file sits at web-app/tpl/foo.html.
The ultimate goal is to use the new HTML import syntax to access the file's contents via JavaScript.
Why is that file at web-app/tpl?
Here's what you can do to import that template:
Move it to grails-app/views/tpl/.
Change the file name to _foo.gsp.
Use <g:render template="/tpl/foo" /> in your view to pull in that HTML.
Read more about the render tag here.
Also you can use an meta tag.
<meta name="layout" content="main"/>
And in the main.gsp tha must be at the view/layout/main.gsp you can use grails tags:
<g:layoutHead/>
and
<g:layoutBody/>
By the name you can understand that layoutHead insert head of your page to this layout. layout body insert body of page to this layout.
The following worked for me, though I'm not sure if it's the best solution: In UrMappings.groovy: static excludes = ['tpl/foo.html']. This made the link tag work in page.gsp <link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>.
i have two elements, in different html files, how can i show the resume of these elements in the core-component-core?, when i join both files in one html file, looks well, but in different files does not. Only show the "master" element (element-one).
Component 1:
<!--
##### Example:
<element-one name="ruben"></element-one>
#element element-one
#blurb Firts element.
#status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="element-two.html">
<polymer-element name="element-one" attributes="name">
<template> ... </template>
<script>
Polymer( 'element-one', { ... });
</script>
</polymer-element>
Component 2:
<!--
##### Example:
<element-two subname="cid"></element-two>
#element element-two
#blurb Second element.
#status alpha
-->
<polymer-element name="element-two" attributes="subname">
<template> ... </template>
<script>
Polymer( 'element-two', { ... });
</script>
</polymer-element>
The component-page link on https://github.com/Polymer/core-component-page doesn't point anywhere meaningful, so it's ironically difficult to view the docs for the thing that generates the docs. (I've filed a bug about that.)
But if you look at the source, you'll see two attributes on <core-component-page>. sources takes an array of .html files corresponding to each element you want documented.
An example of this is the index.html source for <google-map>, which renders as this component page.