I have used Dart WebUI to create a component that contains another component like this.
The desired respons to clicking I had was that when I click on the inner component it fires inside of that inner component and does not affect the component that contains it. However a click event on the inner component fires both in the inner and in the outer component.
Is there a way to handle the click on the inside and prevent it from "bubbling" up to its parent element?
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="ColorItem.html">
</head>
<body>
<element name="color-item-with-inside-color-item" constructor="ColorItemWithInsideColorItem" extends="ColorItem">
<template>
<style scoped>
#inner-color-item div{
border:5px solid WhiteSmoke;
}
#inner-color-item {
margin-top:10px;
margin-bottom:0px;
}
</style>
<color-item color_text="{{color_text}}" bg_color="{{bg_color}}" text_color="{{text_color}}">
<color-item id="inner-color-item" style></color-item> <!-- THIS IS THE INNER ITEM -->
</color-item>
</template>
<script type="application/dart" src="ColorItemWithInsideColorItem.dart"></script>
</element>
</body>
</html>
On the mouse event evt you should be able to call evt.stopPropagation() to prevent the bubbling up.
Related
I'm just getting started with BootstrapVue but I have some trouble understanding the layout system despite their comprehensive documentation.
My first attempt is to create a simple form with three checkboxes. This is what I have so far:
<template>
<div>
<h3>Headline</h3>
<b-form class="p-3">
<b-form-group>
<b-form-checkbox>An option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>Another option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>A third option</b-form-checkbox>
</b-form-group>
</b-form>
</div>
</template>
This is getting rendered like in the following image. As you can see, all checkboxes are centered horizontally on the screen taking up the full width.
I'm struggling how I can align the elements (header and form components) to the left of the screen and not taking up the complete width.
If I understand the problem right, you should use the bootstrap grid system which you can read more at this link: https://bootstrap-vue.org/docs/components/layout
I create a simple snippet to show you how you can move your form to the left and have another section on the right and you can extend it to anything you want or event making it mobile-friendly.
Also, your form in your snippet shouldn't be at the center and I think you have some CSS code somewhere else and because of that, you are seeing your form at the center.
new Vue({
el: '#app'
})
.leftSection {
background: lightgray;
}
.rightSection {
background: cyan;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-container fluid>
<b-row>
<b-col cols="4" class="leftSection">
<h3>Headline</h3>
<b-form class="p-3">
<b-form-group>
<b-form-checkbox>An option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>Another option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>A third option</b-form-checkbox>
</b-form-group>
</b-form>
</b-col>
<b-col cols="8" class="rightSection">
<h3>Dashboard</h3>
</b-col>
</b-row>
</b-container>
</div>
I have problems referencing an element in app-drawer with JS.
As long as my function is referencing an element outside of app-drawer, there is no problem. But whenever I want to change an element inside app-drawer, I am getting an 'undefined' TypeError for it.
I have made a reduced bin here.
Steps to reproduce issue
Click on caron(icon). Here you can see that a list appears.
Click on the text click to toggle drawer to toggle the drawer
You'll notice another caron in the drawer.
When you click on caron in drawer a similar list should appear, but it does not. Instead there's an error in the console.
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-media-query/iron-media-query.html">
<link rel="import" href="app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="app-layout/app-drawer/app-drawer.html">
<link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
</head>
<body>
<dom-module id="x-foo">
<template>
<style>
app-drawer {
background-color: green;
color: blue;
}
span {
font-size: 2rem;
color: green
}
span:last-of-type {
position: relative;
font-size: 3.5rem;
top: 1.5rem;
left: .5rem;
color: red
}
#headerList,
#drawerList {
display: none;
}
h1 {
color: orange
}
h2 {
color: blue;
}
</style>
<iron-media-query query="max-width: 1024px" query-matches="{{smallScreen}}"></iron-media-query>
<app-drawer-layout drawer-width="300px" fullbleed force-narrow>
<app-drawer swipe-open opened="false">
<div class="drawer-contents">
<template is="dom-if" if=[[smallScreen]]>
<h2>(this is app-drawer)</h2>
<span>tap the glyph inside app-drawer:</span>
<span on-tap="tapGlyph1">ˇ</span>
<ul class="myList" id="drawerList">
<li>Austria</li>
<li>Switzerland</li>
<li>Slovenia</li>
</ul>
</template>
</div>
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar main-title>
<h1 drawer-toggle>click to toggle drawer</h1>
</app-toolbar>
<h2>(this is app-header)</h2>
<span>tap a glyph inside app-header:</span>
<span on-tap="tapGlyph2">ˇ</span>
<ul id="headerList">
<li>Australia</li>
<li>Switzerland</li>
<li>Slovenia</li>
</ul>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'x-foo',
tapGlyph1: function() {
this.$.drawerList.style.display = "block";
},
tapGlyph2: function() {
this.$.headerList.style.display = "block";
}
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Problem is not app-drawer but dom-if. Elements/Markups inside dom-if or dom-repeat are generated dynamically and thus cannot be accessed using hash by id. In order to access them one need to use $$ selector which is equivalent to querySelector. You can read about it here
Changing code with
this.$$('#drawerList') should solve your issue
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>
Help!
I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar.
The problem is when I load the page, sometimes the Jquery to make that sidebar collapse will not work while other jquery in that same file does. Sometimes nothing works at all.
I'm calling my javascript/jquery from one file called magic.js
<body>
<!-- build:js scripts/components.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data-shim/ember-data.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true">
</script>
<!-- build:js(.tmp) scripts/templates.js -->
<script src="scripts/compiled-templates.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/affix.js"></script>
<script src="bower_components/bootstrap-sass/js/alert.js"></script>
<script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/modal.js"></script>
<script src="bower_components/bootstrap-sass/js/transition.js"></script>
<script src="bower_components/bootstrap-sass/js/button.js"></script>
<script src="bower_components/bootstrap-sass/js/popover.js"></script>
<script src="bower_components/bootstrap-sass/js/carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/tab.js"></script>
<!-- endbuild -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="scripts/models/permit_model.js"></script>
<!-- // <script src="scripts/arcgislink_compiled.js" type="text/javascript"></script> -->
<script src="scripts/magic.js"></script> <!-- Controls UI based javascript. Buttons, pretty effects, animations, etc. -->
magic.js is the last thing called before the body closes.
This is the magic.js file
$( document ).ready(function() {
var close=true
$(".collapsibleHeader").click(function(){
$(this).siblings().slideToggle("fast");
});
// Sidebar START
$(".arrow").click(function() {
if($('.float-left-col').css('width')=='200px') {
$('.float-left-col').removeClass('open');
$('.float-left-col').addClass('closed');
$('.sidebar-button-text').addClass('vanish');
$('.arrow').removeClass('reverse-rotate');
$('.arrow').addClass('rotate');
$('.full-logo').addClass('vanish');
$('.logo-only-container').removeClass('vanish');
$('.content-container').css('margin-left','80px')
}
else {
$('.float-left-col').removeClass('closed');
$('.float-left-col').addClass('open');
$('.arrow').addClass('reverse-rotate');
$('.logo-only-container').addClass('vanish');
$('.full-logo').removeClass('vanish');
var delay = setTimeout(function(){
$('.sidebar-button-text').removeClass('vanish');},250)
$('.arrow').removeClass('rotate');
$('.content-container').css('margin-left','200px');
}
});
The sidebar that isn't working is in the application.hbs file so I'm not sure why it would stop loading.
<div class="super-col">
<div id="sidebar-wrapper" class="float-left-col open">
<ul class="nav nav-pills nav-stacked text-center">
//..stuff inside the sidebar..
Why is my javascript not loading properly? Should I be calling it in a different file/s?
You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.
In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook
App.ApplicationView = Em.View.extend({
doStuff: function(){
//do your jquery here, the element is in the page now
}.on('didInsertElement')
});
This pattern can be applied for other views as well throughout your app
App.FooView = Em.View.extend({
doStuff: function(){
// do some crazy stuff cause the foo template has been inserted!
}.on('didInsertElement')
});
I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one