Polymer 1.x: Polymer template for Firebase? - templates

I'm looking for a "live code" repository (e.g., jsBin, jsFiddle, CodePen, plunkr, etc.) template useful for sandboxing (i.e., "posting") Polymer questions about the firebase-collection or firebase-document.
In other words, I'm building a Polymer app using a Firebase backend and I need a template to use for posting questions to this site.
For example, here is the template I use to post Polymer questions. Is there one that anyone knows of that can also support questions about the firebase-collection or firebase-document elements? (I'm guessing this would require a firebase with public read/write access.)
http://jsbin.com/sitomotoji/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
alert('User clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>


http://jsbin.com/xojoxubigi/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="firebase-element/firebase-collection.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-collection
location="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<div>
[[dinosaur.height]]
</div>
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>

Related

Failed to instantiate module in application ionic 2

I make a simple application Ionic 2 but I find a problem that exists year screenshot
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- script home.js -->
<script src="js/home.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-pane>
<!-- <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content> --><div ng-view></div>
</ion-pane>
</body>
</html>
code home.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS & Firebase Web App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<link href="../css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
Sign Up
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
code home.js
var app = angular.module('home', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', { templateUrl : 'templates/home.html',controller: 'HomeCtrl' });
}])
app.controller('HomeCtrl', [function() {
}]);
code app.js
angular.module('myApp', ['ionic','home'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ redirectTo: '/home' });
}]);
I added ngRoute in js files but same problem

<google-chart> does not work inside <template is="dom-bind">

<google-chart> element is not working for me (does not display anything) when inside <template> (<template is="dom-bind"> on the main document or in other element's <template>). On the other hand it works when I put it outside <template is="dom-bind"> on the main document.
https://jsbin.com/fivamu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
</html>

Try to add spaces between the square brackets:
data='[ ["Country", "Popularity"],["Germany", 200],["France", 600],["RU", 700] ]'

This will work (tested in your jsbin):
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template id="t" is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart id='map'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
<script>
var t = document.querySelector('#t');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
console.log('ready');
var map = document.querySelector('#map');
map.setAttribute('type', 'geo');
map.setAttribute('data', '[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]');
});
</script>
</html>
The google-chart element relies on async calls to Google APIs. If these calls do not resolve before the template has stamped its DOM, the google-chart is incomplete. Adding the data field after the auto-binding template is ready will simulate the behaviour outside of a template.

How to use the plugin jquery.cookie?

I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.

I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.

cannot work dropdown component in foundation 5

all. I'm new to foundation.
I tried to make a dropdown example, but it didn't work at all.
--all.scss--
.test{
#drop2{
#include dropdown-container;
}
}
--test.html--
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>test</title>
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='css/all.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="test">
<a data-dropdown='drop2' href='#'>Has Content Dropdown</a>
<div class='f-dropdown content' data-dropdown-content id='drop2'>
<p>
Some text that people will think is awesome!
Some text that people will think is awesome!
Some text that people will think is awesome!
</p>
</div>
</div>
<script src='js/modernizr.js' type='text/javascript'></script>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/fastclick.js' type='text/javascript'></script>
<script src='js/foundation.js' type='text/javascript'></script>
<script src='js/foundation.dropdown.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).foundation();
</script>
</body>
</html>
The browser shows the text "Has Content Dropdown", but nothing happens when I click the link.
I wonder that I must misunderstand how to use the dropdown component, but can't find what is wrong.
What's wrong with the program? Please help.
foundation 5.4.6
using Middleman and sass

Jquery tag-it autocomplete placement off

I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});

It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});