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.
Related
I have a problem getting the storage reference even though I configured the firebase-app according to documentation. The firebase-app element is located in the index.html
<firebase-app name="name-of-the-app"
api-key="api_key"
auth-domain="name-of-the-app.firebaseapp.com"
database-url="https://name-of-the-app.firebaseio.com"
storage-bucket="name-of-the-app.appspot.com">
</firebase-app>
I am accessing the app reference in the subviews the following way:
<firebase-document id="office_document"
app-name="doctor-appointment-system"
path="/offices">
</firebase-document>
<script>
this.$.office_document.app.storage()
</script>
The code above is throwing the an error.
this.$.office_document.storage is not a function
The database counterpart works ok.
this.$.office_document.app.database()
The problem was that I didn't have firebase storage script imported in my index.html, where the app was initialized with firebase-app element.
Here is what my imports look like now:
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/firebase-storage-script.html">
<link rel="import" href="/bower_components/polymerfire/firebase-document.html">
I have defined a component <my-panel> based on the polymer seed-element. I defined a second component <my-display> that contains a <my-panel> element.
I want to define a stubbed out version of my-panel.html alongside it in the my-panel component source: my-panel-stub.html.
When I'm writing the tests for <my-display>, I want to be able to swap out the contained <my-panel> element for a <my-panel-stub>. I can do this with:
replace("my-panel").with("my-panel-stub");
My only problem is that when I try to import my-panel-stub into the test file, after I've imported my-display, ie.
<link rel="import" href="../my-display.html">
<link rel="import" href="../bower_components/my-panel/my-panel-stub.html">
I get the following error when the tests execute:
Error: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.
It seems that the test file can only import one component?
I can resolve the issue by doing the html import of the stub inside the my-display component, ie:
<link rel="import" href="../my-panel/my-panel.html" />
<link rel="import" href="../my-panel/my-panel-stub.html" />
Then everything works. But the application code shouldn't be referencing this test-specific element.
Is there a better way to import the stub component directly into the test file?
I need to share styles across multiple Polymer elements. Is it acceptable to create a "styles.html" file and then import that into my different elements or would this start to have performance implications as the app grows? I know for 0.5 there was a core-styles but it kind of seems unnecessary if imports will work just as well.
styles.html
<style>
button {
background: red;
}
</style>
my-button.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">
<dom-module id="my-button">
<template>
<button>{{text}}</button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-button',
behaviors: [ButtonBehavior]
})
</script>
As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:
say your common styles are in a file called
common-style.css
In your component have a style tag that is like this
#import url( '/common-style.css' );
This inverts the control : instead of broadcasting your styles for
anyone to use, style consumers must know which styles they want and
actively request them, which helps avoid conflicts. With browser
caching, there's essentially no penalty to so many imports, in fact it
is likely faster than cascading the styles through multiple shadow
trees using piercers.
You can create a style.css and import it in your components by putting a css #import in your template.
There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.
We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.
You can use Polymer's shared styles. Create a document with your styles:
<dom-module id="shared-styles">
<template>
<style>
/* Your styles */
</style>
</template>
</dom-module>
And then import this to your elements and in their definitions add include="shared-styles" to the <style> tag.
Share styles by creating a dom-module for them, just like other custom elements. To include the shared styles in a custom element, use <style include="style-module-name">. Full example below.
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
<template>
<style>
/* CSS goes here */
</style>
</template>
</dom-module>
some-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
<template>
<style include="shared-styles">
/* Element specific styles go here */
</style>
<!-- HTML goes here -->
</template>
<script>
Polymer({
is: 'some-element',
properties: {
}
});
</script>
</dom-module>
As of Polymer 1.1, the polymer project authors recommend creating and importing a style module to address this issue.
To share style declarations between elements, you can package a set of style declarations inside a element. In this section, a holding styles is called a style module for convenience.
A style module declares a named set of style rules that can be imported into an element definition, or into a custom-style element.
See more: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules
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')}"/>.
How can I import core elements and paper elements in JSFiddle.
I'm importing polymer through those statements:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>
How can import for example core-input or paper-input?
Yes from the polymer project site or I guess your cloudflare cdn if you know the location
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
This is just for dev and not production.
If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.
Also you can get a link for all core or paper elements from here
A good alternative - still a work in progress - is https://ele.io/
Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.
To test a simple component written in Polymer 1.0 I use this snippet:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
//...
}
});
</script>
<proto-element></proto-element>
http://jsfiddle.net/MartyIX/84b5sabw/