I have a paper-drawer-panel that has a closed drawer. When I click a fab I open the drawer and hide the fab. However when the drawer closes again I would like to re-show the fab.
My question is this: How do I know when the drawer is closing?
I looked into the two events listed in the paper-drawer-panel docs and tried both paper-select and paper-responsive-change. I used them in the following way:
html:
<paper-drawer-panel right-drawer force-narrow narrow paper-select="changed">
<div main> content... </div>
<div drawer> drawer content </div>
</paper-drawer-panel>
js:
changed:function(){
console.log("inside event");
}
should this work? can anyone offer some suggestions?
As I mentioned in the comment, I solved this by using TrevorDixon's advice and changing paper-select to on-iron-select
http://jsbin.com/winedi/edit?html,output
menuToggle: function() {
if (this.$.paper_drawer_panel.narrow && $(this.$.paper_drawer_panel).width() < parseInt(this.$.paper_drawer_panel.responsiveWidth)) {
this.$.paper_drawer_panel.togglePanel();
} else {
this.$.paper_drawer_panel.forceNarrow = !this.$.paper_drawer_panel.forceNarrow;
}
}
took from Polymer 1.0 paper-drawer-panel toggle is not working
Related
I've installed a new Polymer Starter Kit, and have the code below.
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>
How can I make the app-drawer element be closed when the layout loads?
If i trigger .close() on the element when should I run this?
It won't work for ready or attatched life cycle callbacks
But that would mean the menu opens and closes which i would like to avoid, what i really want to happen is when the page loads the menu is closed,
when I get a callback from the server to say the user is authenticated then call
this.$.menu.open() // where i've given app-drawer the if of menu
If what you want is to not display the drawer no matter the viewport width unless the user interacts, all you need to do is to set the app-drawer-layout's forceNarrow property to true like this:
<app-drawer-layout fullbleed force-narrow>
<!-- Content -->
</app-drawer-layout>
I'm assuming this is a follow up to: Polymer 1.0 App-Drawer - Uncaught TypeError when not rendered via dom-if
Given:
<app-drawer-layout id="layout" fullbleed>
<app-drawer id="drawer">
...
</app-drawer>
</<app-drawer-layout>
You could set the <app-drawer>.hidden property and then <app-drawer-layout>.resetLayout() based on the new value of signedIn, using an observer:
Polymer({
...
properties : {
signedIn: {
type: Boolean,
value: false,
observer: '_signedInChanged'
}
},
_signedInChanged: function(signedIn) {
this.$.drawer.hidden = !signedIn;
this.$.layout.resetLayout();
}
);
codepen
I have a project with Polymer + Reveal.js
I have a view with polymer that gets all the Slides/Sections.
<template is="dom-repeat" items="[[my.slides]]" as="slide">
<section>
<h1>slide.title</h1>
<h2>slide.content</h2>
</section>
</template>
When I try to start Reveal.js, I have the issue related to:
(index):21136 Uncaught TypeError: Cannot read property
'querySelectorAll' of undefined
I think is because Reveal.js cannot select a Webcomponent generated by Polymer, because Reveal.js needs to have all slides content wrote on the html file by separate.
Then my question is: How to use Polymer Webcomponents with Reveal,js?
Alan: Yes, you are right.
Now I am creating DOM elements directly with JS avoiding Polymer shadowDOM elements.
Then I created a function called createSlides where - based in a JSON response - I appending slides (sections) within slides div.
Fist I create a Polymer template similar to:
<template>
<div class="reveal">
<div id="slides" class="slides">
<section>
This section will be removed
</section>
</div>
</div>
</template>
Next I removed the unused slide and appended some slides. Finally start the Reveal presentation
ready()
{
this.removeInitialSlide();
this.addSomeSlides();
this.startRevealPresentation();
}
clearInitialSlides()
{
var slidesComp = this.$.slides;
while (slidesComp.hasChildNodes()) {
slidesComp.removeChild(slidesComp.lastChild);
}
}
addSomeSlides()
{
var slide1 = document.createElement("section");
var image = document.createElement("img");
image.src = "some/path/to/image.jpg";
slide1.appendChild(image);
this.$.slides.appendChild(slide1);
var slide2 = document.createElement("section");
slide2.innerHTML = "<h1>Test content</h1>"
this.$.slides.appendChild(slide2);
}
Working fine for now.
I think you most likely can't use reveal.js in a web component created with Polymer right now and here's why.
If you look at reveal.js's code it looks for dom elements with the reveal and slides classes on the main document like this:
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
The problem with that is that Polymer elements have their own local dom which is a different dom tree which can't be accessed using methods like document.querySelector which means reveal.js can't access to them.
I am building an iOS-app using the Ionic-framework. When I use select-elements, I do not get the header with the label "Done" when selecting items in the menu on iOS-native. However it will show up when I use the app in iOS/Safari. Screenshots and code attached. Any input/solutions on this would be much appreciated.
Screenshots:
iOS Safari Screenshot
iOS Native/Ionic Screenshot
Markup
<label class="item item-input item-select">
<div class="input-label">
Bostadstyp
</div>
<select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>
The Ionic app contains a default code in app.js who hide the keyboard acessory bar, you need to comment this following line: cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
Getting something like this:
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
//cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
Regarding #emccracken's comment, according to the Ionic Team the reason for hideKeyboardAccessoryBar is "because native apps seldom have an accessary bar. It's a dead give away that an app is built with web tech and isn't native."
You can show and hide the accessory bar on demand which is explained a bit here. Taking the $timeouts out of the directive worked better for me. Here's what mine looks like.
.directive('select', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.bind('focus', function(e) {
if (window.cordova && window.cordova.plugins.Keyboard) {
// console.log("show bar (hide = false)");
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
}
});
element.bind('blur', function(e) {
if (window.cordova && window.cordova.plugins.Keyboard) {
// console.log("hide bar (hide = true)");
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
});
}
};
})
If you still have this issue, my case was a keyboard plugin conflict between
cordova-plugin-keyboard and cordova-plugin-ionic-keyboard.
So check on config.xml to see if you have more than one plugin and if so remove with:
cordova plugin remove [plugin-name]
then install proper plugin:
ionic cordova plugin add ionic-plugin-keyboard
https://ionicframework.com/docs/native/keyboard/
Then you will be able to use cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Hope it helps.
If using Ionic capacitor and facing these issues, none of the fixes here will work.
According to Capacitor discussions, this is a side effect of the Keyboard plugin. Can be fixed by doing:
import {Keyboard} from "#capacitor/keyboard";
...
Keyboard.setAccessoryBarVisible({isVisible: true});
My keypresses (right and left keys) only throw events when I've clicked in certain parts of my page. How do I make it so my iron-a11y-keys work on the entire page?
Here's what I have now:
<template>
<iron-a11y-keys keys="left right" on-keys-pressed="onRightKey"></iron-a11y-keys>
<paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="{{drawerWidth}}">
...
</paper-drawer-panel>
</template>
It seems to behave the same way when I set target={{}}. I'm not certain what the target parameter does so that may be my problem. A bit of education on that would also be appreciated.
<template>
<iron-a11y-keys id="a11y" keys="left right" on-keys-pressed="onRightKey"></iron-a11y-keys>
<paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="{{drawerWidth}}">
...
</paper-drawer-panel>
</template>
and in the script:
ready: function() {
this.$.a11y.target = document.querySelector('body');
}
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/