531 lines
19 KiB
HTML
531 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Item Sliding - Basic</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Item Sliding - Basic</ion-title>
|
|
<ion-buttons slot="secondary">
|
|
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
|
|
</ion-buttons>
|
|
<ion-buttons slot="primary">
|
|
<ion-button onclick="reload()">Reload</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
|
|
<ion-refresher id="refresher">
|
|
<ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing...">
|
|
</ion-refresher-content>
|
|
</ion-refresher>
|
|
|
|
|
|
<div class="ion-padding">
|
|
<ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
|
|
<ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
|
|
<ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
|
|
<ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
|
|
<ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
|
|
<ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
|
|
</div>
|
|
|
|
<ion-list id="list">
|
|
<div class="nested-div">
|
|
<ion-item-sliding>
|
|
<ion-item>
|
|
<ion-label>
|
|
<h2>No Options</h2>
|
|
<p>Should not error or swipe without options</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item6">
|
|
<ion-item>
|
|
<ion-label>
|
|
One Line, dynamic option and text
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options class="show-options">
|
|
<ion-item-option color="primary">
|
|
<ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
|
<span class="more-text"></span>
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" onclick="archive('item6')">
|
|
<ion-icon slot="start" name="archive"></ion-icon>
|
|
<span class="archive-text"></span>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item6">
|
|
<ion-item>
|
|
<ion-label>
|
|
Two options, one dynamic option and text
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options side="start">
|
|
<ion-item-option color="primary">
|
|
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
<ion-item-options side="end" class="show-options">
|
|
<ion-item-option color="primary">
|
|
<ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
|
<span class="more-text"></span>
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" onclick="archive('item6')">
|
|
<ion-icon slot="start" name="archive"></ion-icon>
|
|
<span class="archive-text"></span>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item100">
|
|
<ion-item href="#">
|
|
<ion-label>
|
|
<h2>HubStruck Notifications</h2>
|
|
<p>A new message from a repo in your network</p>
|
|
<p>Oceanic Next has joined your network</p>
|
|
</ion-label>
|
|
<ion-note slot="end">
|
|
10:45 AM
|
|
</ion-note>
|
|
</ion-item>
|
|
|
|
<ion-item-options side="start">
|
|
<ion-item-option onclick="noclose('item100')">
|
|
No close
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
<ion-item-options side="end">
|
|
<ion-item-option color="danger" onclick="unread('item100')">
|
|
<ion-icon slot="icon-only" name="trash"></ion-icon>
|
|
</ion-item-option>
|
|
<ion-item-option onclick="unread('item100')">
|
|
<ion-icon slot="icon-only" name="star"></ion-icon>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item100">
|
|
<ion-item href="#">
|
|
<ion-label>
|
|
<h2>Disabled Buttons</h2>
|
|
<p>Buttons should not be clickable</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
<ion-item-options side="start">
|
|
<ion-item-option disabled>
|
|
Disabled
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
<ion-item-options side="end">
|
|
<ion-item-option color="danger" disabled>
|
|
<ion-icon slot="icon-only" name="trash"></ion-icon>
|
|
</ion-item-option>
|
|
<ion-item-option disabled>
|
|
<ion-icon slot="icon-only" name="star"></ion-icon>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item0">
|
|
<ion-item onclick="clickedItem('item0')">
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>RIGHT side - no icons</h2>
|
|
<p>Hey do you want to go to the game tonight?</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options class="sliding-enabled">
|
|
<ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
|
|
<ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item1">
|
|
<ion-item detail href="#" class="ion-activated">
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>LEFT side - no icons</h2>
|
|
<p>I think I figured out how to get more Mountain Dew</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options side="start" class="sliding-enabled">
|
|
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
|
|
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
|
|
<ion-item-sliding id="item2">
|
|
<ion-item detail>
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>RIGHT/LEFT side - icons</h2>
|
|
<p>I think I figured out how to get more Mountain Dew</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options side="start" class="sliding-enabled">
|
|
<ion-item-option color="secondary" expandable onclick="unread('item2')">
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Unread
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
|
|
<ion-item-options side="end" class="sliding-enabled">
|
|
<ion-item-option color="primary" onclick="archive('item2')">
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Archive
|
|
</ion-item-option>
|
|
<ion-item-option color="danger" onclick="del('item2')" expandable>
|
|
<ion-icon slot="start" name="trash"></ion-icon>
|
|
Delete
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item3">
|
|
<ion-item detail>
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>RIGHT/LEFT side - icons (slot="start")</h2>
|
|
<p>I think I figured out how to get more Mountain Dew</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options side="start" icon-start class="sliding-enabled">
|
|
<ion-item-option color="secondary" expandable onclick="unread('item3')">
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Unread
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
|
|
<ion-item-options icon-start>
|
|
<ion-item-option color="primary" onclick="archive('item3')">
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Archive
|
|
</ion-item-option>
|
|
<ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
|
|
<ion-icon slot="start" name="trash"></ion-icon>
|
|
Delete
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
|
|
<ion-item-sliding id="item4">
|
|
<ion-item>
|
|
<ion-icon name="mail" slot="start"></ion-icon>
|
|
<ion-label>
|
|
One Line w/ Icon, div only text
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options icon-start>
|
|
<ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
|
|
<ion-icon slot="start" name="archive"></ion-icon>
|
|
Archive
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
|
|
<ion-item-sliding id="item5" class="sliding-enabled">
|
|
<ion-item>
|
|
<ion-avatar slot="start">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<ion-label>
|
|
One Line w/ Avatar, div only text
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options>
|
|
<ion-item-option color="primary" expandable>
|
|
<ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
|
More
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" onclick="archive('item5')">
|
|
<ion-icon slot="start" name="archive"></ion-icon>
|
|
Archive
|
|
</ion-item-option>
|
|
<ion-item-option color="light" onclick="del('item5')">
|
|
<ion-icon slot="start" name="trash"></ion-icon>
|
|
Delete
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
|
|
<ion-item-sliding id="item7">
|
|
<ion-item>
|
|
<ion-label>
|
|
One Line, dynamic icon-start option
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options icon-start>
|
|
<ion-item-option color="primary">
|
|
<ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
|
<span class="more-text"></span>
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" onclick="archive('item7')">
|
|
<ion-icon slot="start" name="archive"></ion-icon>
|
|
<span class="archive-text"></span>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item8">
|
|
<ion-item>
|
|
<ion-thumbnail slot="start">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-thumbnail>
|
|
<ion-label>
|
|
<h2>DOWNLOAD</h2>
|
|
<p>Paragraph text.</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options>
|
|
<ion-item-option color="primary" onclick="archive('item8')">
|
|
<ion-icon name="archive"></ion-icon>Archive
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" expandable onclick="download('item8')">
|
|
<ion-icon slot="start" name="download" class="download-hide"></ion-icon>
|
|
<div class="download-hide">Download</div>
|
|
|
|
<ion-icon slot="start" class="download-spinner" name="refresh"></ion-icon>
|
|
<div class="download-spinner">Loading...</div>
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item9">
|
|
<ion-item>
|
|
<ion-thumbnail slot="start">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-thumbnail>
|
|
<ion-label>
|
|
<h2>ion-item-sliding without options (no sliding)</h2>
|
|
<p>Paragraph text.</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item-sliding id="item10">
|
|
<ion-item detail>
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>RIGHT/LEFT side - many buttons</h2>
|
|
<p>Use mobile emulator to check</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ion-item-options side="start" class="sliding-enabled">
|
|
<ion-item-option color="primary" expandable>
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Btn 1
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" expandable>
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Btn 2
|
|
</ion-item-option>
|
|
<ion-item-option color="danger" expandable>
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Btn 3
|
|
</ion-item-option>
|
|
<ion-item-option color="tertiary" expandable>
|
|
<ion-icon slot="start" name="checkmark"></ion-icon>
|
|
Btn 4
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
|
|
<ion-item-options side="end" class="sliding-enabled">
|
|
<ion-item-option color="primary" expandable>
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Btn 5
|
|
</ion-item-option>
|
|
<ion-item-option color="secondary" expandable>
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Btn 6
|
|
</ion-item-option>
|
|
<ion-item-option color="danger" expandable>
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Btn 7
|
|
</ion-item-option>
|
|
<ion-item-option color="tertiary" expandable>
|
|
<ion-icon slot="start" name="mail"></ion-icon>
|
|
Btn 8
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
|
|
<ion-item>
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>Normal ion-item (no sliding)</h2>
|
|
<p>Paragraph text.</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
<ion-item onclick="clickedItem('item9')">
|
|
<ion-label class="ion-text-wrap">
|
|
<h2>Normal button (no sliding)</h2>
|
|
<p>Hey do you want to go to the game tonight?</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</div>
|
|
|
|
</ion-list>
|
|
|
|
<script>
|
|
var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
|
|
|
|
// Toggle the dynamic options
|
|
var dynamicShowOptions = document.getElementsByClassName('show-options');
|
|
toggleDynamicOptions();
|
|
|
|
function toggleDynamicOptions() {
|
|
// TODO the element needs to be removed / added to the DOM
|
|
}
|
|
|
|
// Change the text for the more and archive buttons
|
|
var dynamicText = true;
|
|
var moreTextSpans = document.getElementsByClassName('more-text');
|
|
var archiveTextSpans = document.getElementsByClassName('archive-text');
|
|
changeDynamicText();
|
|
|
|
function changeDynamicText() {
|
|
dynamicText = !dynamicText;
|
|
|
|
for (var i = 0; i < moreTextSpans.length; i++) {
|
|
var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
|
|
moreTextSpans[i].innerHTML = moreText;
|
|
}
|
|
|
|
for (var i = 0; i < archiveTextSpans.length; i++) {
|
|
var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
|
|
archiveTextSpans[i].innerHTML = archiveText;
|
|
}
|
|
}
|
|
|
|
function toggleSliding() {
|
|
// this.slidingEnabled = !this.slidingEnabled;
|
|
}
|
|
|
|
function closeOpened() {
|
|
var list = document.getElementById('list');
|
|
list.closeSlidingItems();
|
|
}
|
|
|
|
function openItem(side) {
|
|
var item = document.getElementById('item2');
|
|
item.open(side);
|
|
}
|
|
|
|
function openItemOneSide() {
|
|
var item = document.getElementById('item1');
|
|
item.open();
|
|
}
|
|
|
|
function noclose(item) {
|
|
var itemEle = document.getElementById(item);
|
|
console.log('no close', itemEle);
|
|
}
|
|
|
|
function unread(item) {
|
|
closeSlidingItem('UNREAD', item);
|
|
}
|
|
|
|
function archive(item) {
|
|
closeSlidingItem('ARCHIVE', item);
|
|
}
|
|
|
|
function del(item) {
|
|
closeSlidingItem('DELETE', item);
|
|
}
|
|
|
|
function download(item) {
|
|
var itemEle = document.getElementById(item);
|
|
console.log(itemEle);
|
|
itemEle.classList.add('downloading');
|
|
setTimeout(() => {
|
|
alert('Item was downloaded!');
|
|
|
|
itemEle.classList.remove('downloading');
|
|
itemEle.close();
|
|
}, 1500);
|
|
}
|
|
|
|
function closeSlidingItem(option, item) {
|
|
var itemEle = document.getElementById(item);
|
|
|
|
// TODO open alert instead
|
|
if (itemEle) {
|
|
itemEle.close();
|
|
}
|
|
console.log(option, itemEle);
|
|
}
|
|
|
|
function clickedItem(item) {
|
|
var itemEle = document.getElementById(item);
|
|
console.log('Clicked, ion-item', itemEle);
|
|
}
|
|
|
|
function reload() {
|
|
window.location.reload();
|
|
}
|
|
document.addEventListener('ionSwipe', (ev) => console.log('SWIPE!!', ev.detail));
|
|
document.addEventListener('ionDrag', (ev) => {
|
|
// console.log('DRAG!!', ev.detail);
|
|
|
|
let slidingRatio = ev.target.getSlidingRatio();
|
|
console.log('sliding', slidingRatio);
|
|
|
|
if (slidingRatio > 0) {
|
|
// positive
|
|
console.log('right side');
|
|
} else {
|
|
// negative
|
|
console.log('left side');
|
|
}
|
|
if (Math.abs(slidingRatio) > 1) {
|
|
console.log('overscroll');
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.download-spinner {
|
|
display: none;
|
|
}
|
|
|
|
svg circle {
|
|
stroke: white;
|
|
}
|
|
|
|
.downloading .download-spinner {
|
|
display: block;
|
|
}
|
|
|
|
.downloading .download-hide {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
</ion-content>
|
|
|
|
</ion-app>
|
|
</body>
|
|
|
|
</html>
|