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">
Related
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/
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 am trying to prefetch an image in my Angular app that sits within a Chrome plugin.
In the controller, I have:
$scope.nextlocation = 'http://i.imgur.com/Vzidbt4.gif';
In my view, I have:
<link rel="prefetch" href="{{nextlocation}}">
When I load the page, I get an error saying:
GET chrome-extension://jlkgcdcdoooiaeamkhagpdolhgjgfgem/%7B%7Bnextlocation%7D%7D net::ERR_FILE_NOT_FOUND
When I hardcord the image in the doc, like below, it works fine.
<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">
How do I get this to work so that it dynamically updates?
<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">
Change the above to:
<link rel="prefetch" ng-href="{{nextlocation}}">
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?
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/