I have some issues with polymer and firebase, I managed to insert data into firebase but it throws an error
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null
Below its my code so far.
<!doctype html>
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit" />
<title>Soulmatters</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">
<link rel="import" href="../bower_components/firebase-element/firebase.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles">
body {
font-family: Roboto, sans-serif;
color: #333;
max-width: 700px;
width: 100%;
margin: 0 auto;
}
form {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
paper-button {
flex-shrink: 1;
}
paper-input {
flex-grow: 1;
}
paper-checkbox {
display: inline-block;
margin: 5px 0;
transition: opacity 0.3s;
}
paper-checkbox[checked] {
opacity: 0.5;
}
</style>
</head>
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<firebase-auth
auto-login
redirect
location="[[firebaseURL]]"
provider="[[firebaseProvider]]"
on-error="onFirebaseError"
on-login="onFirebaseLogin"></firebase-auth>
<paper-toast id="errorToast"></paper-toast>
<form on-submit="addItem">
<paper-input value="{{articolNou}}"
placeholder="Enter your item here..."></paper-input>
<paper-button on-click="addItem">Add</paper-button>
</form>
<template is="dom-repeat" items="{{articol}}">
<div>
<div>{{articolNou}}</div>
</div>
</template>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
And this is the app.js
(function(document) {
'use strict';
var app = document.querySelector('#app');
app.articole = [];
app.updateArticole = function(snapshot) {
this.articole = ['articole'];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.uid = childSnapshot.key();
this.push('articole', item);
}.bind(this));
};
app.addItem = function(event) {
event.preventDefault(); // Don't send the form!
this.ref.push({
text: app.articolNou
});
app.articolNou = '';
};
/*app.toggleItem = function(event) {
this.ref.
child(event.model.item.uid).
update({done: event.model.item.done});
};
app.deleteItem = function(event) {
this.ref.child(event.model.item.uid).remove();
};
*/
app.firebaseURL = 'https://soulmatters.firebaseio.com';
app.firebaseProvider = 'google';
app.onFirebaseError = function(event) {
this.$.errorToast.text = event.detail.message;
this.$.errorToast.show();
};
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
this.ref.on('value', function(snapshot) {
this.updateArticole(snapshot);
});
};
})(document);
Try to modify your code like this:
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
var self = this;
this.ref.on('value', function(snapshot) {
self.updateArticole(snapshot);
});
};
Related
I use Twitter Typeahead and Bootstrap Tags Input on our admin-website. Both work perfect when used seperatly. When I try to combine the 2, only the Bootstrap Tags Input code works, Twitter Typeahead does nothing - not even with simple data-objects. I don't see where it goes wrong. This is my test-code.
The objects are delivered from a php-mysql page which delivers data like this:
[{"tags_id":"1","tags_expression":"CLB"},{"tags_id":"2","tags_expression":"SO"},{"tags_id":"3","tags_expression":"Basisonderwijs"}]
Someone an idea?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<!-- Custom CSS -->
<link href="/style/css/style.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="/plugin/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Tags input -->
<link href="/plugin/bootstrap-tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" />
<!-- Typehead CSS -->
<link href="/plugin/typeahead.js-master/dist/typehead-min.css" rel="stylesheet">
</head>
<body>
<form method="post" class="form-horizontal form-material" name="FAQ_Modal_edit_record_insert_form" id="FAQ_Modal_edit_record_insert_form">
<div class="col-md-12">
<h4 class="text-info adjustpadding">Tags</h4>
<div>
<input type="text" class="form-control" value="" id="FAQ_public_tags" name="FAQ_public_tags" autocomplete=off />
</div>
</div>
</form>
</body>
<!-- ============================================================== -->
<!-- Jquery / Bootstrap -->
<!-- ============================================================== -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- ============================================================== -->
<!-- Bootstrap Tagsinput -->
<!-- ============================================================== -->
<script src="/plugin/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<!-- ============================================================== -->
<!-- Typehead Plugin JavaScript -->
<!-- ============================================================== -->
<script src="/plugin/typeahead.js-master/dist/typeahead.bundle.js"></script>
<script>
var data = (function()
{
var json = null;
$.ajax(
{
'async': false,
'global': false,
'url': '/include/FAQ/LIBRARY_Tags.php',
'dataType': "text",
'success': function(data)
{
json = data;
}
});
return json;
})();
$('#FAQ_public_tags').tagsinput({
typeaheadjs:{
name: 'tags',
limit: 5,
displayKey: 'tags_expression',
valueKey: 'tags_id',
source: function(query, process)
{
tags = [];
map = {};
$.each($.parseJSON(data), function(i, tag)
{
map[tag.tags_expression] = tag;
tags.push(tag.tags_expression);
});
process(tags);
},
updater: function(item)
{
var tag = map[item]['tags_expression'];
var tag_id = map[item]['tags_id'];
$("#FAQ_public_tags_id").val(tag_id);
return tag;
}
},
freeInput: true
});
</script>
</html>
I am developing an AR app using Reactjs and 'AR.js'.I created this react app using the 'create-react-app' npm package. And I am hosting it on firebase. But the problem is that when I try to run the app it is showing the following error.
> [error] Error loading KPM data: error reading data. [error] Error
> reading KPM data from /markerNFT_0.fset3 [error] ARToolKitJS(): Unable
> to set up NFT marker.
The camera loads but the marker show the following error on console. The NFT markers are fine I check with another app it worked fine.
Below Is My Source Code
NB:- Both the marker and the GLTF file actually getting downloaded. I checked it with the chrome dev tools network tab. They are fine. This to Script on index.html is for the Home.js
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
DOWNLOAD GLTF
DOWNLOAD NFT MARKER
Home.js
import React, { Component } from 'react';
import fire from "./config/fire";
class Home extends Component{
constructor(props)
{
super(props)
this.state={
}
}
logout(){
fire.auth().signOut();
}
render()
{
return(
<div>
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-nft
type="nft"
url="https://reactlogin3.web.app/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://reactlogin3.web.app/scene.gltf"
scale="5 5 5"
position="0 0 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</div>
)
}
}
export default Home;
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I have a paper-dialog in my Polymer element. I want to make the backdrop opaque, right now it is semi-transparent. I would also like to change the color.
Does anyone know how to do it. I have already tried this css in my custom element:
<style is="custom-style">
--iron-overlay-backdrop-opacity:1;
</style>
<paper-dialog modal></paper-dialog>
But it had no effect.
I also tried
<style is="custom-style">
:host {
--iron-overlay-backdrop-opacity:1;
}
</style>
<paper-dialog modal></paper-dialog>
The iron-overlay-backdrop is appended directly to the document body, outside of your custom element, and due to Polymer's CSS encapsulation, you can't style the backdrop with a <style> from within the element.
However, your element could imperatively style the backdrop with Polymer.updateStyles(...), which updates the styles for all custom elements, including the iron-overlay-backdrop outside your element:
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': 'red',
'--iron-overlay-backdrop-opacity': '1'
});
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<div>Click button for dialog</div>
<x-demo></x-demo>
<dom-module id="x-demo">
<template>
<x-dialog id="blue" backdrop-color="blue" backdrop-opacity="1"></x-dialog>
<x-dialog id="red" backdrop-color="red" backdrop-opacity="0.2"></x-dialog>
<x-dialog id="green" backdrop-color="green" backdrop-opacity="0.5"></x-dialog>
<paper-button on-tap="_openDialog" data-dialog="blue">Blue (opacity 100%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="red">Red (opacity 20%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="green">Green (opacity 50%)</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-demo',
_openDialog: function(e) {
var dialog = e.target.dataset.dialog;
this.$[dialog].opened = true;
}
})
});
</script>
</dom-module>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened="{{opened}}">
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-dialog',
properties: {
backdropColor: {
type: String,
value: 'green'
},
backdropOpacity: {
type: String,
value: '0.6'
},
opened: {
type: Boolean,
value: false
}
},
observers: ['_updateBackdrop(opened, backdropColor, backdropOpacity)'],
_updateBackdrop: function(opened, color, opacity) {
if (opened && color && opacity) {
Polymer.RenderStatus.afterNextRender(this, function() {
this._setBackdropStyles(color, opacity);
});
}
},
_setBackdropStyles: function(color, opacity) {
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': color,
'--iron-overlay-backdrop-opacity': opacity
});
}
});
});
</script>
</dom-module>
</body>
codepen
Or to set a fixed static style for all backdrops, use <style is="custom-style"> from the body:
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<x-dialog></x-dialog>
</body>
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<div>Hello world</div>
<x-dialog></x-dialog>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened>
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-dialog' });
});
</script>
</dom-module>
</body>
codepen
i have signed up at inmobi,have made a banner ad and tried my best to get it working to no avail,seems like the ad div appears,but not the ad itself
here is my code.as yoU CAN see my property id provided by inmobi for ad has been entered.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="components/loader.css">
<script src="js/cssua.min.js"></script>
<script src="js/inmobi.js"></script>
<script>
var inmobi_conf = {
siteid : "48a58302dd214f5ea5483a3f9d95a28e", // your Property ID
slot: 15,
test: true,
manual: true,
autoRefresh: 20,
targetWindow : "_top", // default "_top"
onError : function(code){
if(code == "nfr"){
console.log("Error getting the ads!");
}
if(code!=="nfr"){
console.log("getting the ads!");
}
}
};
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log('device is ready');
showAds();
}
function showAds(){
var adsElement = document.getElementById('ads');
_inmobi.getNewAd(adsElement);
}
</script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Inmobi Client</h1>
</header>
<div data-role="content">
<img src="images/logo.png" width="300px">
</div>
<div data-role="header" data-position="fixed">
<div id="ads"></div>
</div>
</div>
</body>
</html>
I've been trying to create a build system using gulp in a Laravel project and the only problem left right now is renaming the right file names inside my master.blade.php file. As it is now, it's only following the filenames provided in the gulp-useref parameters, but the files revisioned by gulp-rev are not replaced by gulp-rev-replace.
Here is my gulp task:
gulp.task('build', ['clean', 'scss', 'js', 'master'], function() {
var assets,
jsFilter = $.filter('**/*.js'),
cssFilter = $.filter('**/*.css');
return gulp.src('app/views/layouts/master.blade.php')
.pipe(assets = $.useref.assets({searchPath: '/'}))
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.rename(function(path) {
if(path.extname === '.php') {
path.dirname = 'app/views/layouts';
} else {
path.dirname = 'public/assets';
}
}))
.pipe(gulp.dest('./'))
.pipe($.size({title: 'build files', showFiles: true}))
.on('end', function() {
setTimeout(function() {
// force watchify to close all watchers
process.exit();
});
});
});
The default master.blade.php would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<!-- build:css assets/index.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="/.tmp/index.css">
<!-- endbuild -->
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<!-- build:js assets/index.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<!-- endbower -->
<script src="/.tmp/index.js"></script>
<!-- endbuild -->
</body>
</html>
and the result will always look like this despite the gulp-rev-replace pipe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<script src="assets/index.js"></script>
</body>
</html>
I figured out the problem, The gulp-rev-replace documentation mentions that they only replace files with extensions ['.js', '.css', '.html', '.hbs'] by default. By passing ['.php'] in the replaceInExtensions option.