Skip to content

Commit

Permalink
fix examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@thesadabc
thesadabc committed Sep 7, 2016
1 parent 36c44f0 commit 6ac644a
Show file tree
Hide file tree
Showing 12 changed files with 543 additions and 576 deletions.
51 changes: 28 additions & 23 deletions example/feature-collection/include-advanced.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include advanced </title>
<title>Regular.js • Include-Advanced</title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
</head>
<body>
Expand Down Expand Up @@ -36,7 +36,31 @@ <h4 class="modal-title">{#inc title || 'Modal'}</h4>
</div>
</script>

<script src="https://rawgit.com/sindresorhus/multiline/master/browser.js"></script>
<script type='text/tpl' id="app">
<button class="btn" on-click={show = !show}>show</button>
<input r-model="num" />
<modal show={show} autohide={true} title.cmpl='Custom Title <span class="badge" >{num}</span>' close-btn >
<modal.body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>
</modal.body>
<modal.foot>
<button class="btn btn-primary" on-click={show=false}>CLose it!</button>
</modal.foot>
</modal>
</script>

<script src="https://rawgit.com/regularjs/regular/group/dist/regular.js"></script>
<script>
var Modal = Regular.extend({
Expand All @@ -45,7 +69,7 @@ <h4 class="modal-title">{#inc title || 'Modal'}</h4>
config: function(data){
var target = data.target = data.target || document.body;
this.$watch('show', function(show){
this.$inject(show? target: false)
this.$inject(show && target)
})
},
confirm: function(accept){
Expand Down Expand Up @@ -75,26 +99,7 @@ <h4 class="modal-title">{#inc title || 'Modal'}</h4>
})

var app = new Regular({
template: multiline(function(){/*
<button class='btn' on-click={show = !show}>show</button>
<input r-model='num' />
<modal show={show} autohide={true} title.cmpl='Virtual Box' close-btn >
<modal.foot>Custom Title <span class="badge" >{num}</span> <button class='btn btn-primary' on-click={show=false}>CLose it!</button> </modal.foot>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>
</modal>
*/}),
template: '#app',
data: { "num": 100, show: true }
}).$inject(document.body)
</script>
Expand Down
28 changes: 12 additions & 16 deletions example/feature-collection/r-model.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-group" ng-repeat>
<!-- no wrap in {} is allowed -->
{textarea}
<textarea class="form-control" rows="3" r-model='textarea'>hahah</textarea>
<div class="form-group">
<!-- no wrap in {} is allowed -->
{textarea}
<textarea class="form-control" rows="3" r-model='textarea'>hahah</textarea>
</div>
<p>{select}</p>
<select class="form-control" id='select' r-model='select'>
Expand Down Expand Up @@ -77,28 +77,26 @@
name: 'r-option',
template: '<option ref=option value={value}>{#inc this.$body}</option>',
init: function(){
this.$watch('value', this._checkSelect.bind(this))
this.$watch('value', this._checkSelect.bind(this));
},
_checkSelect: function(){
var selectNode = this.findParent();
if(selectNode._tid) return;
selectNode._tid = setTimeout(function(){
selectNode._tid = 0;

},0)
},0);
},
findParent: function(){
var selectNode = this.$refs.option.parentNode;
if(selectNode && selectNode.tagName === 'SELECT') return selectNode;
},
destroy: function(){
this.supr( )
this.supr()
this._checkSelect();
}
});


})
var Modal = Regular.extend({ template: '#form'})
var Modal = Regular.extend({template: '#form'})
.filter("join", {
set: function(str){
return str.split(",");
Expand All @@ -110,7 +108,7 @@

var app = new Modal({
data: {
list: [{}],
list: [],
select: '11'
}
}).$inject("#app");
Expand All @@ -120,14 +118,12 @@
if(value.indexOf("@") === -1){
app.data.email = value + "@";
}
})
});
app.$watch("select", function(value){
if(value == 2){
app.data.select = 4
}
})


});

</script>
</body>
Expand Down
125 changes: 61 additions & 64 deletions example/feature-collection/slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<title>Regular.js • slider</title>
<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
<script src="../../dist/regular.js"></script>
<style>
.orbit-container li{
transition: opacity .6s;
Expand All @@ -12,14 +13,11 @@
}
.orbit-container .orbit-slides-container > li{
margin-left: 0%;

}
.orbit-container li.active{
margin-left: 0%;
opacity: 1;

}

.orbit-container-0 ul{
height: 158px;
}
Expand All @@ -33,70 +31,69 @@
</head>
<body>

<div class="" id="app">
<h4>Rendered HTML</h4>
</div>
<script name="slider" type="template/regular" id="slider">
<div class='tool'>
<a class="small button warn" on-click={this.changeTheme()}>Change Item Theme</a>
</div>
{#list items as item}
<a class="small button" on-click={this.nav(item_index)}>Goto Slide {@(item_index+1)}</a>
{/list}
<div class="orbit-container orbit-container-{themeIndex}"><ul class="example-orbit-content orbit-slides-container">
{#list items as item}
<li class={active==item_index? "active": ""}>
{#include themes[themeIndex]}
</li>
{/list}
</ul>
<a href="#" class="orbit-prev" on-click={this.nav(active-1)}><span></span></a>
<a href="#" class="orbit-next" on-click={this.nav(active+1)}><span></span></a>
<div class="orbit-slide-number">
<span>{active+1}</span> of <span>{items.length}</span>
</div>
</div>
</script>
<div class="" id="app">
<h4>Rendered HTML</h4>
</div>
<script name="slider" type="template/regular" id="slider">
<div class='tool'>
<a class="small button warn" on-click={this.changeTheme()}>Change Item Theme</a>
</div>
{#list items as item}
<a class="small button" on-click={this.nav(item_index)}>Goto Slide {@(item_index+1)}</a>
{/list}
<div class="orbit-container orbit-container-{themeIndex}">
<ul class="example-orbit-content orbit-slides-container">
{#list items as item}
<li class={active==item_index? "active": ""}>
{#include themes[themeIndex]}
</li>
{/list}
</ul>
<a href="#" class="orbit-prev" on-click={this.nav(active-1)}><span></span></a>
<a href="#" class="orbit-next" on-click={this.nav(active+1)}><span></span></a>
<div class="orbit-slide-number">
<span>{active+1}</span> of <span>{items.length}</span>
</div>
</div>
</script>

<script src="../../dist/regular.js"></script>

<script>
var Slider = Regular.extend({
template: "#slider",
config: function(data){
if(!data.active) data.active = 0;
},
nav: function(active){
var data = this.data;
var len = data.items.length;
data.active = (active + len) % len;
},
changeTheme: function(){
debugger
var data = this.data;
var len = data.themes.length;
data.themeIndex = (data.themeIndex + 1 + len) % len;
}
})
<script>
var Slider = Regular.extend({
template: "#slider",
config: function(data){
if(!data.active) data.active = 0;
},
nav: function(active){
var data = this.data;
var len = data.items.length;
data.active = (active + len) % len;
},
changeTheme: function(){
var data = this.data;
var len = data.themes.length;
data.themeIndex = (data.themeIndex + 1 + len) % len;
}
});


var slider = new Slider({
data: {
themes: [
'<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>',
'<img src="{item.url}" alt="slide {item_index}"> <div class="orbit-caption">{item.subtitle}</div>'
],
themeIndex: 0,
content: "<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>",
items: [
{title: "Header1", subtitle: "subtitle1", url: "http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg"},
{title: "Header2", subtitle: "subtitle2", url: "http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg"},
{title: "Header3", subtitle: "subtitle3", url: "http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg"}
]
}
}).inject("#app")
var slider = new Slider({
data: {
themes: [
'<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>',
'<img src="{item.url}" alt="slide {item_index}"> <div class="orbit-caption">{item.subtitle}</div>'
],
themeIndex: 0,
content: "<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>",
items: [
{title: "Header1", subtitle: "subtitle1", url: "http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg"},
{title: "Header2", subtitle: "subtitle2", url: "http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg"},
{title: "Header3", subtitle: "subtitle3", url: "http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg"}
]
}
}).$inject("#app")

</script>
</script>

</body>
</body>
</html>
Loading

0 comments on commit 6ac644a

Please sign in to comment.