paper-dialog and paper-transition-center does not show when toggle() called - javascript

I have the following code
element.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog_transition.html">
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog.html">
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maps</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial=scalle=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements.html" />
<link rel="stylesheet" href="styles/Home.css" />
<script src="scripts/app.js"></script>
<style type="text/css">
#dlgAddMap
{
height:100px;
width:100px;
background:#fff;
}
</style>
</head>
<body fullbleed layout vertical>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
<core-menu>
<core-item label="Maps"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<div>Maps</div>
</core-toolbar>
<div class="content">
<paper-fab icon="add" id="addMap" onclick="document.querySelector('#dlgAddMap').toggle();" class="addButton"></paper-fab>
</div>
</core-header-panel>
</core-drawer-panel>
<paper-dialog heading="Title for dialog" transition="paper-transition-center" id="dlgAddMap">
<paper-button label="Cancel" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>
</body>
</html>
and for completeness
App.js
document.addEventListener('polymer-ready', function () {
var navicon = document.getElementById('navicon');
var addMap = document.getElementById('addMap');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function () {
drawerPanel.togglePanel();
});
addMap.addEventListener('click', function () {
try {
if (document.querySelector('#dlgAddMap')) {
document.querySelector('#dlgAddMap').toggle();
}
else {
alert('Cannot find the Add Map Dialog');
}
}
catch ( e )
{
alert(e.message);
}
});
});
The trouble is even when I click the paper-fab button I have not been able to get the dialog to show. Although you see the click even accepted by the button, nothing happens.

The answer in the end was with the imports. The polymer download uses an underline with the bower_components but uses a dash ('-') in the name of the folders and filenames for components. It was corrected by just correcting the entries in the elements.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-button/paper-button.html" />
<link rel="import"
href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-dialog.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-dialog-transition.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-action-dialog.html" />

Related

The reason why JavaScript is not running on the main page of Blazer

The reason why JavaScript is not running on the main page of the Blazer, considering that we have access to the main file when running the web application and the link to the JavaScript file, it works correctly, and when you click on it, the code is displayed correctly and completely in the Ceres section. It will be given. But the JavaScript function is not called or is not executed at all. My codes are as follows:
function opeSublist() {
try {
if (checkFirstList == 0) {
checkFirstList = 1;
}
var checkList = document.getElementById('FirstList');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
} catch {}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
and the javascript function is inside of multiselect-dropdown.js javascript separate file. But it is not clear to me why this function is not executed and the result is not displayed. In fact, by clicking on a DIV, a list should be displayed, and by clicking outside the list, the list should be removed from the display mode. All steps are correct. And in a normal HTML page, this function is executed correctly. But when transferred to Blazor, it does not run. I do exactly the same things I did on the HTML page in Blazer. But it has no effect.
In order to avoid the complexity and disconnection of JavaScript functions, it is better that the functions that are to be called in Blazor are stored in a separate file, for example named blazJavaFile.js, and defined in the index.html file in the wwwroot folder. Your submitted file will change like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/blazJavaFile.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
Then, on the page where you want to call this function, create the following method and call it with the following command.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("opeSublist");
}
}
At the same time, don't forget to add this statement #inject IJSRuntime jsRuntime which is dependency injection, at the beginning of the page or at the top of your page. More information and more examples are available in the links Example 1 and Example 2

OnClick attribute not working when clicked

I'm having issues with the onclick function, I am trying to run the following code. I am trying to change the text when the button is clicked.
JS
function close() {
document.getElementById('closed').innerHTML = 'We are not ready yet!';
console.warn('I am working boss');
}
Html
<!DOCTYPE html>
<html>
<head>
<title>AFLRP is now AUG</title>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/favicons/site.webmanifest">
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#0063bf">
<link rel="stylesheet" type="text/css" href="cssKits/generalKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/navbarKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/loadingKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/fontKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/contentKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/gridKit.css">
<link rel="stylesheet" type="text/css" href="cssKits/loadingKit.css">
<meta charset="UTF-8">
<meta name="keywords" content="Flashing Lights,RP,Role Play,FL, Australia, Australian, Police, Fire, EMS, Paramedic">
<meta name="author" content="AFLRP Web Division">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Enjoy a great Role Play with Aussie Flashing Lights Role Play, be a police officer, fire fighter or EMT and have fun with friends!">
</head>
<body onload="timeOutCheck()" style="margin: 0;">
<div id="loader"></div>
<div id="page" style="display: none;">
<div id="nav">
<div id="navItem">Home</div>
<div id="navItem">Contact</div>
<div id="navItem">Join</div>
<div id="navItem">About</div>
<div id="navItem">Resources</div>
</div>
<div id="mainBodyContent" align="center">
<h1>AFLRP is now Aussie Games</h1>
<p>AFLRP is becoming Aussie Games, so right now we are not accepting new members and or messages, once we are ready (July 10), we will change this to invite you to AUG</p>
<button class="disabled" id='closed' onclick="close()" > Join Aussie Games today!"</button>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
However it isn't changing the text or outputting my test warning.
close() is a DOM method. Try changing it to something else
The close() is a native JS method -> window.close().
You might want to change your function name.
function closeInvite() {
document.getElementById('closed').innerHTML = 'We are not ready yet!';
console.warn('I am working boss');
}
<div id="mainBodyContent" align="center">
<h1>AFLRP is now Aussie Games</h1>
<p>AFLRP is becoming Aussie Games, so right now we are not accepting new members and or messages, once we are ready (July 10), we will change this to invite you to AUG</p>
<button class="disabled" id='closed' onclick="closeInvite()"> Join Aussie Games today!"</button>
</div>

How to load the css to my react project

I'm new to reactjs and I have a problem.
I have a code like this
<body>
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<script src="lib/react.js" type="text/javascript"></script>
<script src="lib/react.min.js" type="text/javascript"></script>
<script src="lib/react-dom.js" type="text/javascript"></script>
<script src="lib/react-dom.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handleClick: function () {
this.setState({
count: this.state.count + 1,
});
},
render: function () {
return (
<div class="header">
<label class="web_name">Revegator</label>
<input class="search_bar" type="search" placeholder="Search here"/>
<div class="box">
<div class="container-4">
<input type="search" id="search" placeholder="Search here" />
</div>
</div>
<div class="menu_items_div">
<a class="menu_items">Home</a>
<a class="menu_items">Profile</a>
<img class="menu_items" src="img/bell.png" alt=""/>
<img class="menu_items" src="img/drop.png" alt=""/>
</div>
</div>
);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
</script>
</body>
But the css has not been applied here. How can I load my css file properly? I have been using AngularJS upto now. In angular I could just simply load the css like this
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
How can I do this in react?
Add the following line at the TOP of your html ( even before <html> tag ):
<!DOCTYPE html>
Then put, <link > tag inside <head> .
< head>
<!-- -->
<link href="css/rev_css.css" rel="stylesheet" type="text/css" />
</head>
If it does not work, it means you are using wrong path , so , check in the console if css/rev_css.css is not found .

Polymer input-header element does not have the expected behavior

I followed the steps in the following video
https://www.youtube.com/watch?v=ZDjiUmx51y8
and created my custom input-header Polymer element as below
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<div class="title">{{label}}</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="dropdown-content">
<paper-input label="Thread name:" value="{{label}}"></paper-input>
</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
Then I called it in my index.html as follows
<input-header label="{{label}}"></input-header>
But I am not getting the behavior shown in the video
https://www.youtube.com/watch?v=ZDjiUmx51y8
where the input field appears when he clicks on the menu button.
Infact, nothing happens when I click on the menu button.
I am using the 1.2.1 version of polymer so I think I am on the latest version.
Any help would be appreciated.
As #GunterZochbauer pointed out, this was fixed by importing the paper elements in elements.html used in the input-header as follows
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

Polymer core-transition doesn't work

I've been playing with Polymer for a few days and I want to do a menu, that will appear/disappear after clicking on the menu button. The problem is that I can't figure out why my code doesn't work.
Here it is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Title</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-meta/core-meta.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/core-media-query/core-media-query.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
</style>
</head>
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>
</body>
</html>
and the Javascript
<script>
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
});
var meta;
var transition;
function handleMenu() {
var menu = document.getElementById('menu');
meta = document.createElement('core-meta');
meta.type = 'transition';
console.log(meta.list);
console.log(transition);
transition.teardown(menu);
transition = getMeta().byId('core-transition-left');
transition.setup(menu);
transition.go(menu, true);
console.log('Tap');
}
</script>
When I click on the menu button an error will appear:
Uncaught TypeError: Cannot read property 'teardown' of undefined
I've done everything as it was on demo page, I've been searching for the correct solution or some answers but nothing... does any one have an idea? Thanks
Its not working because mainly your were missing the https://www.polymer-project.org/components/core-transition/core-transition-css.html from the demo page.
After that the getMeta() method was also missing and the menu element needed to have the transition setup applied to it.
See and try the example below:
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
setup();
});
var meta;
var transition;
var state = {
opened: false
};
function setup() {
var target = document.getElementById('menu');
if (transition) {
transition.teardown(target);
}
transition = getMeta().byId('core-transition-left');
transition.setup(target);
}
function getMeta() {
if (!meta) {
meta = document.createElement('core-meta');
meta.type = 'transition';
}
return meta;
}
function handleMenu() {
var target = document.getElementById('menu');
state.opened = !state.opened;
transition.go(target, state);
}
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-meta/core-meta.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/core-media-query/core-media-query.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition-css.html">
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>

Categories