javascript - use Polymerfire auth globally -
what best way if have firebase auth element using polymerfire, use user attribute globally?
for instance if have element login buttons:
<dom-module id="tab-b"> <template> <style> </style> <firebase-app auth-domain="example.firebaseapp.com" database-url="example.firebaseio.com/" api-key=""> </firebase-app> <firebase-auth id="auth" location="{{location}}" user="{{user}}"provider="google" on-error="handleerror"> </firebase-auth> <paper-button id="googsignin" class$="signinbutton {{_getminiclass()}}"on-tap="login" raised> google </paper-button> </template> <script> (function() { 'use strict'; polymer({ is: 'tab-b', properties:{ user: { type: object }, statusknown: { type: object } }, login: function(){ return this.$.auth.signinwithpopup(); }, logout: function(){ return this.$.auth.signout(); } }); })(); </script> </dom-module> and want show or hide many components this:
<element show$={{!user}}><element>
from app entry point (my-app.html), assign user values object that. object app become in charge of app state, can add property it
<!-- firebase authentication --> <firebase-auth id="auth" user="{{app.user}}" status-known="{{app.availability.available}}" online="{{app.availability.isonline}}" signed-in="{{app.availability.userissignedin}}" provider="google"> </firebase-auth> add more information app object such display state.
<iron-media-query id="mq-phone" full query="(max-width:480px)" query-matches="{{app.display.isphonesize}}"></iron-media-query> <iron-media-query id="mq-tablet" full query="(min-width:481px) , (max-width:840px)" query-matches="{{app.display.istabletsize}}"></iron-media-query> <iron-media-query id="mq-desktop" query="(min-width:841px)" query-matches="{{app.display.isdesktopsize}}"></iron-media-query> bind object other elements
<!-- drawer content --> <app-drawer id="drawer" slot="drawer"> <app-toolbar>menu</app-toolbar> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> <a name="view1" app="{{app}}" href="/view1">view one</a> <a name="view2" app="{{app}}" href="/view2">view two</a> <a name="view3" app="{{app}}" href="/view3">view three</a> </iron-selector> </app-drawer>
Comments
Post a Comment