Skip to content

Instantly share code, notes, and snippets.

@stoffeastrom

stoffeastrom/app.html

Last active February 11, 2024 22:33
Show Gist options
  • Save stoffeastrom/52506d95d3d4a9194c30cfb1decfcbe0 to your computer and use it in GitHub Desktop.
Save stoffeastrom/52506d95d3d4a9194c30cfb1decfcbe0 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Oribella Sortable Gist
Raw
app.html
<template>
<ul oa-sortable="scroll.bind: 'document'; items.bind: items;">
<li
oa-sortable-item="item.bind: item;"
repeat.for="item of items"
draggable="false">
${item.text}
</li>
</ul>
</template>
Raw
app.js
export class App {
items = [
{ text: '1' },
{ text: '2' },
{ text: '3' },
{ text: '4' },
{ text: '5' },
{ text: '6' },
{ text: '7' },
{ text: '8' },
{ text: '9' },
{ text: '10' }
];
}
Raw
config.js
require.config({
baseUrl: ".",
paths: {
},
packages: [
{
name: 'oribella-framework',
location: 'https://unpkg.com/oribella-framework@0.5.3/dist/amd',
main: 'index'
},
{
name: 'oribella-aurelia-sortable',
location: 'https://unpkg.com/oribella-aurelia-sortable/dist/amd',
main: 'index'
},
{
name: 'oribella-tap',
location: 'https://unpkg.com/oribella-tap/dist/amd',
main: 'index'
},
{
name: 'oribella-doubletap',
location: 'https://unpkg.com/oribella-doubletap/dist/amd',
main: 'index'
},
{
name: 'oribella-longtap',
location: 'https://unpkg.com/oribella-longtap/dist/amd',
main: 'index'
},
{
name: 'oribella-swipe',
location: 'https://unpkg.com/oribella-swipe/dist/amd',
main: 'index'
},
{
name: 'oribella-longtap-swipe',
location: 'https://unpkg.com/oribella-longtap-swipe/dist/amd',
main: 'index'
},
{
name: 'oribella-pinch',
location: 'https://unpkg.com/oribella-pinch/dist/amd',
main: 'index'
},
{
name: 'oribella-rotate',
location: 'https://unpkg.com/oribella-rotate/dist/amd',
main: 'index'
},
{
name: 'oribella-default-gestures',
location: 'https://unpkg.com/oribella-default-gestures/dist/amd',
main: 'index'
}
],
config: {
es6: { stage: 0 }
}
});
require.standardLoad = require.load;
require.load = function(context, moduleName, url) {
var config = requirejs.s.contexts._.config;
if (moduleName in config.paths) {
return require.standardLoad(context, moduleName, url);
}
if(moduleName.indexOf('oribella') !== -1) {
return require.standardLoad(context, moduleName, url);
}
require(['es6'], function(es6) {
es6.load(
moduleName,
require,
{
fromText: function(text) {
require.exec(text);
context.completeLoad(moduleName);
}
},
{});
});
};
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
border: 1px solid #999;
margin: 4px;
line-height: 2rem;
text-align: center;
list-style: none;
}
</style>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script src="config.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('oribella-aurelia-sortable');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment