plumes
Version:
Flying-fast Metro future vision components
219 lines (178 loc) • 5.87 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plumes - Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/public/plumes/plumes.css" type="text/css" />
<style type="text/css">
.example-mask {
z-index: 99998;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
</style>
</head>
<body>
<rv-require
name="pl-layout-platform"
src="../public/layouts/pl-layout-platform"
data-bind-onloaded="onloaded"
data-bind-beforerequire="beforerequire"
data-bind-apps="apps"
data-bind-buttonsleft="buttonsleft"
data-bind-buttonsright="buttonsright"
>
<rv-partial target="mask-title">
Plumes <span class="theme">example</span>
</rv-partial>
<rv-partial target="message-title">
Plumes <span class="theme">example</span>
</rv-partial>
<rv-partial target="context-left-panels">
<div class="pl-group" data-group="group-1" data-title="articles">
<div class="pl-section" style="padding: 3rem;">
<ul>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
<li>Article 6</li>
<li>Article 7</li>
<li>Article 8</li>
</ul>
</div>
</div>
<div class="pl-group" data-group="group-2" data-title="content">
<div class="pl-section" style="padding: 3rem;">
<p>My big content</p>
</div>
</div>
</rv-partial>
<rv-partial target="context-right-panels">
<div class="pl-group" data-group="group-3" data-title="notifications">
<rv-require
data-name="notifications"
name="pl-notifications-panel"
src="../public/notifications-panel/pl-notifications-panel"
data-dark="true"
></rv-require>
</div>
</rv-partial>
<rv-partial target="content">
<rv-require name="index-content" src="index-content"></rv-require>
</rv-partial>
</rv-require>
<div class="example-mask"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js"></script>
<script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
<script type="text/javascript" src="/public/plumes/plumes.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.Ractive.Plumes.bootstrap(function(page) {
page.set('apps', [{
name: 'Plumes',
selected: true,
select: function() {
window.location.href = 'index.html';
}
}, {
name: 'Example Login',
select: function() {
window.location.href = 'login.html';
}
}, {
name: 'Example Lists',
select: function() {
window.location.href = 'lists.html';
}
}]);
page.set('buttonsleft', [{
icon: 'fa fa-list-ul',
group: 'group-1'
}]);
setTimeout(function() {
var buttonsleft = page.get('buttonsleft');
buttonsleft.unshift({
icon: 'fa fa-file-text',
group: 'group-2'
});
page.set('buttonsleft', buttonsleft);
}, 2000);
var profileButton = null;
page.set('buttonsright', [{
icon: 'fa fa-bell',
action: function(event, button) {
button.set('icon', button.get('icon') == 'fa fa-bell' ? 'fa fa-bell-slash' : 'fa fa-bell');
}
}, {
icon: 'fa fa-play',
action: function(event, button) {
profileButton.pushNotification(
'We have released a new <strong>Plumes</strong> version!',
'/examples/plumes-logo.png',
{
id: 10
}
);
var notificationsPanel = page.findChild('data-name', 'notifications');
notificationsPanel.pushNotification(
'The user already connected and <strong>13 other bugs</strong> are now fixed on <strong>Plumes</strong>!',
'13 hours ago',
'/examples/plumes-logo.png',
{
id: 10
}
);
}
}, {
type: 'indicator',
image: 'https://www.gravatar.com/avatar/9e38451efa23937301594f273033c5f1.png',
group: 'group-3',
action: function(event, button) {
button.clearNotificationsCount();
},
ready: function(button) {
profileButton = button;
}
}]);
page.set('beforerequire', function(layout, callback) {
if (Cookies.get('intro') == 'done') {
return callback();
}
layout.require('pl-screen-message').then(function() {
var screenMessage = layout.findChild('name', 'pl-screen-message');
screenMessage.fire('play', {
message: [
'Hello',
'It\'s your first time on the <strong class="accent">Plumes</strong> examples.',
'We thank you for using <strong class="accent">Plumes</strong>.',
'Have a good day.'
],
done: function() {
Cookies.set('intro', 'done', {
expires: 10
});
screenMessage.teardown();
callback();
}
});
});
});
page.set('onloaded', function() {
$('.example-mask').remove();
});
page.require();
});
})();
</script>
</body>
</html>