Using angular dart, I have a material dialog with a basic list on it. When the dialog shows I want the end user to be able to navigate the list with the arrow keys (up/down).
<modal *ngIf="visible" [visible]="visible">
<material-dialog headered class="headered-dialog">
<div header>
<h1>List Demo</h1>
</div>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="list-body form-control">
<ul>
<li *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</li>
</ul>
</div>
</form>
</material-dialog>
</modal>
package:angular_components provide a MaterialListComponent and FocusListDirective that support up/down navigation
https://dart-lang.github.io/angular_components/#/material_list
You can use them together as follow
<material-list focusList>
<material-list-item *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</material-list-item>
</material-list>
Never tried but you should also be able to use the FocusListDirective on any element.
<ul focusList>
<li *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</li>
</ul>
Related
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
I want to add the ng2-bootstrap's date picker popup on top of a dropdown div that I created. When that did not work I tried to just create a simple multilevel dropdown to begin with. Eventually I want date picker popup to show up when clicked on the dropdown I have. Can you help please. Here is my code.
I am new to the community. Please let me know if I missed any information that should have been included.
import {Component} from 'angular2/core';
import {DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
#Component({
selector: 'multilevel-dropdown',
template: `
<div>
<div dropdown [autoClose]="'disabled'">
<div dropdownToggle id="TopLine" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<H1>Today's date is: {{dt | date:'short'}} (click date for pop-up)<b class="caret"></b></H1>
</div>
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="FirstPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="TopLine" aria-expanded="false">
<H3>First Popup (implemented as dropdown) (click this text for next popup)<b class="caret"></b></H3>
<!--Following should be replaced with the div commented later for datepicker popup-->
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="SecondPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="FirstPopup" aria-expanded="false">
<H5>Second Popup (implemented as dropdown)</H5>
</div>
</div>
</div>
<!--<div id="SecondPopup" class="dropdown-menu dropdown-menu-right" aria-labelledby="FirstPopup">-->
<!--<datepicker [(ngModel)]="dt" [showWeeks]="false"></datepicker>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
`,
directives: [DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES]
})
export class MultilevelDropdownComponent {
public dt:Date= new Date();
}
Found the fix. The issue was that each time a dropdown (at any level) is clicked, the event is propagated up the DOM and the dropdown-toggle toggles the open dropdown. In order for multilevel-dropdown to work, I needed to capture the event and stop propagation based on if I am opening the next level of dropdown or closing an existing one.
When I use Summernote and jQuery UI Sortable, I can sort items but cannot input text into the textareas. How can I accomplish it?
HTML
<ul class="sortable-list">
<li>
<h2>Textarea 1</h2>
<textarea name="textarea_1" id="textarea_1" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 2</h2>
<textarea name="textarea_2" id="textarea_2" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 3</h2>
<textarea name="textarea_3" id="textarea_3" class="summernote">
</textarea>
</li>
</ul>
JavaScript
$('.summernote').summernote();
$('.sortable-list').sortable({
axis: 'y'
}).disableSelection();
Please see also jsfiddle:
http://jsfiddle.net/L4pq1fad/
I got the answer in GitHub issue.
https://github.com/summernote/summernote/issues/1174#issuecomment-115235983
The JS should be:
$('.summernote').summernote();
$('.sortable-list').sortable({
handle: "h2",
axis: 'y'
});
sanchezzzhak created jsfiddle: http://jsfiddle.net/sanchezzzhak/L4pq1fad/3/
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>
My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});