anycode-components
Version:
anycode-components (RiotJS Tag Library) - A set of common RiotJS tags used by Anycode
213 lines (196 loc) • 9.79 kB
HTML
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Anycode Components - Iconic Minimal</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="iconic.css">
<link rel="stylesheet" href="iconic-font.css">
<style>
.interactive-menu .dd-content {
width: 170px;
}
</style>
</head>
<body>
<iconic class="not-ready">
<iconic-header name="header">
<div class="brand" onclick="{ parent.opts.sel }">
<i class="icon-anycode-logo"></i><span>any<b>code</b></span>
</div>
<ul>
<li class="menu pinned">
<iconic-select name="selection1" icon="icon-menu" selected="Most Recent" items="{ parent.opts.sortList }"></iconic-select>
<iconic-tagger icon="icon-menu" placeholder="Every Status..." selected="{ parent.opts.selList }" items="{ parent.opts.tagList }"></iconic-tagger>
<iconic-tagger name="tagger1" icon="icon-menu" placeholder="Every Attribute..." selected="Due"></iconic-tagger>
</li>
<li class="interactive-menu">
<iconic-dropdown content-clickable="yep">
<yield to="trigger"><span>The Cat's Hat</span><i class="icon-menu opener"></i></yield>
<yield to="links">
<a href="#iconic-button" >Completly Awesome</a>
<item class="u-cp interactive"><input type="checkbox" name="foo" id="foo"></input><label for="foo">Iconic Power Mode</label></item>
<item class="u-cp interactive"><input type="radio" name="bar" id="bar_val_1" value="1"></input><label for="bar_val_1">One</label></item>
<item class="u-cp interactive"><input type="radio" name="bar" id="bar_val_2" value="2"></input><label for="bar_val_2">Two</label></item>
<item class="u-cp interactive"><input type="radio" name="bar" id="bar_val_3" value="3"></input><label for="bar_val_3">Three</label></item>
<a href="#iconic-button" >Thing 2</a>
<a href="#iconic-button" class="primary">Done</a>
</yield>
</iconic-dropdown>
</li>
<li class="separator"></li>
<li class="pinned"><a href="#" data-menu="menu-links" class="u-nd button button-extra-small button-primary">Sign-In</a></li>
<li class="restricted menu">
<iconic-dropdown>
<yield to="trigger"><i class="icon-burger opener"></i></yield>
<yield to="links">
<a href="#iconic-tip">Banana is funny</a>
<div class="overflow">
<a href="#home/iconic-announcement" class="u-nd">iconic-announcement</a>
<a href="#iconic-tip" class="u-nd">iconic-tip</a>
<a href="#iconic-button" class="u-nd">iconic-button</a>
</div>
<a href="#" class="u-nd primary">Sign In</a>
</yield>
</iconic-dropdown>
</li>
</ul>
</iconic-header>
<div class="mega u-cf">
<article class="u-pn u-pt">
<div class="container">
<div class="row">
<div class="twelve columns">
<div class="u-well u-center-text">
<i class="icon-iconic"></i>
</div>
<h1>landing page</h1>
<blockquote>Iconic theme and components for RiotJS</blockquote>
<p>The <em>iconic</em> theme is built atop <a href="http://starve.me" title="Starveling - Responsive CSS boilerplate">Starveling</a> building out a minimal set of additional classes to support <em>iconic</em>'s button styles and the document's visual elements.</p>
</div>
</div>
</div>
</article>
</div>
<a id="article-1"></a>
<article>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1 class="tag">Article <em>One</em></h1>
<p>
<input type="checkbox" name="checkbox-1"><label for="checkbox-1"></label>
Select Me
</p>
<blockquote>Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</blockquote>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
<p>Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</div>
</div>
</article>
<hr>
<article>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1 class="tag">Article <em>Two</em></h1>
<blockquote>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor.</blockquote>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p> </p>
</div>
</div>
</div>
</article>
<iconic-footer product="Iconic">
<ul>
<li><a href="#privacy-statement" class="u-nd">Privacy Statement</a></li>
<li><a href="#terms-of-use" class="u-nd">Terms of Use</a></li>
<li><a href="http://starve.me" target="_blank" class="u-nd">Starveling CSS</a></li>
<li><a href="#privacy-statement" class="u-nd">Privacy Statement</a></li>
<li><a href="#terms-of-use" class="u-nd">Terms of Use</a></li>
<li><a href="http://starve.me" target="_blank" class="u-nd">Starveling CSS</a></li>
<li><a href="#privacy-statement" class="u-nd">Privacy Statement</a></li>
<li><a href="#terms-of-use" class="u-nd">Terms of Use</a></li>
<li><a href="http://starve.me" target="_blank" class="u-nd">Starveling CSS</a></li>
</ul>
</iconic-footer>
</iconic>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.15/riot+compiler.min.js"></script>
<script src="../node_modules/classlist-polyfill/src/index.js"></script>
<script src="./computedStyleHelper.js"></script>
<script src="../anycode-components.js"></script>
<script>
riot.mixin('computedStyleHelper', {
Style: Style
});
var iconic = riot.mount('iconic', {
sortList: [
"Most Recent",
"Most Activity",
"Status, Due",
"Due, Status",
"Alpha-numeric"
],
selList: [
'Planning',
'Toilet Breaks'
],
tagList: [
'Planning',
'In Progress',
'In Review',
'Completed',
'Archived'
],
attrSelList: [
'Magical Gorilla'
],
attrList: [
'Due',
'Overdue',
'Magical Gorilla'
],
burgerIcon: "icon-burger",
navigationAutomatic: function() {
this.nav.classList.add("auto")
this.nav.classList.add("fixed-left")
},
navigationManual: function() {
this.nav.classList.remove("auto")
},
showWarning: function() {
this.tags.warning.show(6000)
},
showManual: function() {
this.tags.manual.show()
},
showAnnouncement: function() {
this.tags.announcement.show(2000)
},
alert: function(e) {
console.log("YOU CLICKED", e.target.innerText);
},
more: function(e) {
this.parent.opts.tagList.push("Good Choice");
this.parent.update();
console.log(this.parent, "FU");
},
sel: function(e) {
this.tags.tagger1.setItems(['A', 'B', 'C', 'Due']);
this.tags.tagger1.on('change', function(selected) {
console.log("CHANGED TAGGER", this.root.value, selected);
})
this.tags.selection1.on('change', function(selected) {
console.log("CHANGED SELECTION", this.root.value, selected);
})
}
})
</script>
<style>
</style>
</body>
</html>