After hitting some of the limitations in a standard browser based application, I decided to convert it to a chrome App that doesn't use the browser.
Below are all the relevant parts. The problem I'm trying to solve is to add a load listener for a button that was working in the browser and doesn't work under the app architecture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POS Data Entry Sheet</title>
<link href="./POS.css" rel="stylesheet" type="text/css" />
<script src="./POS.js"></script>
<script src="./POS.underDevelopment.js"></script>
<script src="./POS.generateTable.js"></script>
<script src="./POS.menu.js"></script>
<script src="./POS.portion.js"></script>
<script src="./POS.formula.js"></script>
<script src="./POS.dialog.js"></script>
</head>
<body>
<script>
addLoadListener(addHandlerForLoginButton);
</script>
<section id="login">
<h1>Please login:</h1>
<p>
<label>User ID:</label><input type="text" id="userID">
<label>Password:</label><input type="password" id="password">
<button type="submit" id="loginButton">Login</button>
</p>
</section>
<div id="main"></div> <!--Everything gets attached to this div.-->
</body>
</html>
Everything above works via the browser.
I created the manifest:
{
"name": "Point of Sale System",
"description": "Dual currency Point of Sale System",
"version": "0.1",
"app": {
"background": {
"scripts": ["POS.dialog.js",
"POS.formula.js",
"POS.generateTable.js",
"POS.js",
"POS.menu.js",
"POS.portion.js",
"POS.underDevelopment.js",
"background.js"]
}
}
}
This is my first attempt at the background.js
It brings up the rudimentary page, but the in line script wasn't working.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
});
});
So, I commented out the inline script and attempted to add a callback function
This also doesn't work. No event listeners are recorded as per the debug tool.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
}, function(win) {win.addEventListener('load', addHandlerForLoginButton, false);});
});
I'm at a loss after several hours of attempting everything I could think of. Why doesn't the original in line script work, and why doesn't the callback work in the Chrome App architecture?
I think you are running into CSP problems, which does not allow inline script or script blocks. See http://developer.chrome.com/apps/contentSecurityPolicy.html for details.
You should be able to convert your first attempt by simply creating a page.js file, including it via a script src='page.js' tag, and put the contents of your script block in it:
addLoadListener(addHandlerForLoginButton);
Your second versoin didn't work because the win parameter to your callback isn't a DOM window but is an AppWindow. It has a DOM window attached via the contentWindow attribute, see http://developer.chrome.com/apps/app_window.html#type-AppWindow for details.
Lastly, you don't need to list all of those scripts in the app.background.scripts field of the manifest, only the background script background.js. The others will be loaded as needed when you open your page.
Related
I am trying to learn Laravel and Vue properly, after an initial attempt back in the spring. I'm still pretty new to both though.
I am using Laravel 8.x in Windows 10 along with Vue 2.6.12. I am working my way through a video on combining Vue with Laravel. The video is for an older version of Laravel, probably 5.5, and probably a slightly older Vue as well so that may well be the nature of my problem. Here's the link to the video. I'm at about the 8:00 minute mark.
The problem I'm having is that when I try to execute my code, Laravel doesn't see my Articles component.
My app.js file is at /resources/assets/js/app.js. Here is the code:
require('./bootstrap');
window.Vue = required('vue');
Vue.component ('Articles', require('./components/Articles.vue'));
const app = new Vue({
el: '#app'
});
The file that contains the script tag is at /resources/views/welcome.blade.php. Here is the code:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Larticles App</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<div class="container">
<Articles></Articles>
</div>
</div>
<script src="{{ asset('js/app.js') }}">console.log("Made it to here!");</script>
</body>
</html>
The Article component is at /resources/assets/js/components/Articles.vue. Here is the code:
<template>
<div>
<h2>Articles</h2>
</div>
</template>
<script>
export default {
name: "Articles",
beforeCreate() {
console.log("Articles - beforeCreate()");
},
created() {
console.log("Articles - created()");
},
beforeMount() {
console.log("Articles - beforeMount()");
},
mounted() {
console.log("Articles - mounted");
}
}
</script>
<style lang="scss" scoped>
#app {
background-color: gold;
color: blue;
}
</style>
What do I need to change to make this work? I think the issue is the require portion of the Vue.component statement in app.js but I've tried every variation I can think of without success. I can't think of anything else to try! I can't find anything in the Vue manual on special syntax for this statement in Vue or Laravel.
I should mention some things. I've deviated slightly from what he does in the video as part of my troubleshooting. I've capitalized Articles in the first parameter of the Vue.component statement and I've also capitalized it in the container div of the welcome.blade.php file. (Initially, I wrote it all lower case in each of those places but it didn't work that way either.) I've also added several console.log statements in the components lifecycle hooks and in the script tag. Absolutely none of them appear in the console though.
Also, for some reason, my IDE, VS Code, insists on displaying in red in the welcome.blade.php. Red always makes me think of errors but there is no error message of any kind. If I write those tags as (and change the app.js accordingly), they stay red so I don't think this is a casing issue.
I should also mention that the Inspector shows the as . Shouldn't it be showing exactly what I have in my welcome.blade.php file?
Use lower case letters when importing the component
<articles></articles>
Try to set each component you're reuire as default. Then use lower case as mentioned above. See below.
Vue.component ('Articles', require('./components/Articles.vue').default);
<articles></articles>
We discovered that the Chromecast plugin cannot register two cast buttons when there are more than one player embedded with Chromecast plugin available.
The visible console error is:
Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'google-cast-button'. A type with that name is already registered.
It also appears that the cast framework is changing the css property of the second button to display:none once there is another player using it.
Test page representing the error: https://jsbin.com/repivowuge/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Chromecast 'google-cast-button' error, toggle browser console to see</h2>
<h3>Player 1</h3>
<script src="https://cdnapisec.kaltura.com/p/1673641/sp/167364100/embedIframeJs/uiconf_id/41860021/partner_id/1673641"></script>
<div id="kaltura_player_1519307906" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1519307906",
"wid": "_1673641",
"uiconf_id": 41860021,
"flashvars": {
"streamerType": "auto",
"chromecast.plugin": true
},
"cache_st": 1519307906,
"entry_id": "1_4bc211jv"
});
</script>
<h3>Player 2</h3>
<div id="kaltura_player_1519307903" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1519307903",
"wid": "_1673641",
"uiconf_id": 41860021,
"flashvars": {
"streamerType": "auto",
"chromecast.plugin": true
},
"cache_st": 1519307906,
"entry_id": "1_4bc211jv"
});
</script>
</body>
</html>
Taken from here, Google official answer on the matter
Thanks for reporting the issue. It looks like you are loading the
sender twice in the page. Usually, you can have multiple buttons in
the page however the "google-cast-button" registration would be one.
From the error message, it indicates that the type is being registered
twice.
We don't support registering "google-cast-button" twice.
So if you use <button is="google-cast-button"></button> as recommended here for CAF sender, then you can only have one of those. The second one would need to be a custom button.
I'm currently facing a problem when playing around with Polymer - actually I just figured out when I tried in Firefox or IE (11) as in Chrome everything just works as I expected it.
So here is a small demo to reproduce my problem:
The "Webcomponents are ready to use!" box is shown right after the page is loaded (but in fact it doesn't matter because at this time no custom element is on the page yet).
When clicking the "Insert Polymer" button the paper-input element is added to the page using innerHTML - as soon as the label should be printed (see call to alertLabel()) it will print "undefined" (I guess the element has not yet been upgraded). When I click the "Alert label" button afterwards it works as expected.
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<script>
window.addEventListener('WebComponentsReady', function(){alert('Webcomponents are ready to use!');});
</script>
</head>
<body unresolved>
<button id="insertelement" onclick="insertPolymerElement();">Insert Polymer</button>
<button id="button" onclick="alertLabel();">Alert label</button>
<div id="placeholder"></div>
<script>
function insertPolymerElement(){
document.getElementById('placeholder').innerHTML = '<paper-input id="testinput" label="I\'m the label!"></paper-input>';
alertLabel();
}
function alertLabel(){
alert(document.getElementById('testinput').label);
}
</script>
</body>
</html>
So the question is: how can I determine when I can interact with the added element? - The WebComponentsReady event is never fired again.
Thanks for your help!
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I can't see where I'm going wrong. I've tried everything I could think of, reCAPTCHA is just not working with the Ajax API. Here's what my code looks like:
<!-- this is in <head> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("my key here", "recaptcha_widget", {
"theme": "custom",
"lang": "en",
"callback": function() { console.log("callback"); } // this doesn't get called
});
});
</script>
<!-- ... this is in <body> -->
<div id="recaptcha_widget" style="display: none">
<div id="recaptcha_image"></div>
<div id="recaptcha_links">
get another •
<a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">switch to audio</a>
<a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">switch to image</a> •
help
</div>
<dt>Type the words</dt>
<dd><input type="text" id="recaptcha_response_field" name="recaptcha_response_field"></dd>
</div>
Works for me? What is happening? What are you trying to do?
When I substitute and alert for the console.log it alters everytime the page loads or a new reCaptcha gets generated. Exactly like it is supposed to.
The callback is not where you submit it for validation, if that is what you are trying to do then look here: http://recaptcha.net/apidocs/captcha/
Sorry for answering my question again. Found the problem, apparently you can't use reCAPTCHA in locally stored files (accessed via file:///), they have to be on a http:// site. As soon as I put this on localhost it worked.
+1 durilai for letting me know it works with him/her, this way I was able to look at the problem from a different perspective.