Skip to content

S
slapos.core
Commit 6ade1e25 authored by Thomas Lechauve's avatar Thomas Lechauve
Browse files
Options

Switching from bootstrap to jQuery Mobile

parent 33f3ad66
Hide whitespace changes
Inline Side-by-side
Showing with 515 additions and 962 deletions
jquery.slapos/src/jquery.slapos.js
View file @ 6ade1e25
......@@ -153,6 +153,15 @@
instanceCertificate: function (url, args) {
$.extend(args, {'instance_url': decodeURIComponent(url)});
return $(this).slapos('prepareRequest', 'instance_certificate', args);
},
softwareList: function (args) {
return $(this).slapos('prepareRequest', 'software_list', args);
},
softwareInfo: function (url, args) {
$.extend(args, {'software_url': decodeURIComponent(url)});
return $(this).slapos('prepareRequest', 'software_info', args);
}
};
......
jquery.urlJS/src/jquery.urljs.js
View file @ 6ade1e25
......@@ -70,7 +70,7 @@ $.extend({
}
this.current = this.list[i][j];
this.clean(this.list[i][j].level + 1);
console.log(this.list[i][j].route)
console.log(this.list[i][j].route);
this.list[i][j].callback(hash);
}
j += 1;
......@@ -129,6 +129,10 @@ $.extend({
return $.param(obj);
},
genHash: function (components) {
return '#/' + components.join('/');
},
parseHash: function (hashTag) {
var re = new RegExp(/(?:^#?([a-zA-Z0-9\/_-]+))(?:\?([A-Za-z0-9\/&=_-]+))?/g),
groups = re.exec(hashTag),
......
vifib/index.html
View file @ 6ade1e25
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="static/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css" media="screen">
[class*="span"] h3 { text-align: center; }
.dashboard{ text-align: center; }
.catalog-item{
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.content-primary img{
display: inline-block;
padding: 20px 30px 20px 30px;
max-width: 100%;
}
.catalog-item img{
max-width: 150px;
@media all and (min-width: 650px){
.content-secondary {
float: left;
width: 30%;
}
.content-primary {
float: right;
width: 65%;
}
[data-role=footer] {
width: 30%;
}
}
.buy-btn{
display: inline-block;
padding: 2px 0px 2px 0px;
text-align: center;
width: 100%;
opacity: 0.6;
background-color: rgba(0, 175, 219, 1);
color: white;
-webkit-transition:opacity .2s ease-in-out;
-moz-transition:opacity .2s ease-in-out;
-ms-transition:opacity .2s ease-in-out;
-o-transition:opacity .2s ease-in-out;
transition:opacity .2s ease-in-out;
box-shadow:0px 0px 7px 1px rgba(0,0,0,0.2);
border-radius:2px;
}
.buy-btn:hover{
text-decoration: none;
color: white;
opacity: 1;
.ui-content .ui-listview {
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<script id="dashboard" type="text/html">
<div class="row-fluid">
<div class="span12">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" style="min-height: 200px; background-color: red">
image 1
<div class="carousel-caption">
<h4>Order online applications that are hosted in Vifib's distributed cloud.</h4>
</div>
</div>
<div class="item" style="min-height: 200px; background-color: green">
image 2
<div class="carousel-caption">
<h4>Bring your own servers to the clouds and extend Vifib's distributed cloud with your own machines.</h4>
</div>
</div>
</div>
</div>
<!--
-COMPONENTS
-->
<script id="headbar" type="text/html">
<div data-role="header">
<h1>{{ title }}</h1>
{{# leftbutton }}
<a href="{{ link }}" data-direction="reverse" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a>
{{/ leftbutton }}
{{# rightbutton }}
<a href="{{ link }}" data-inline="true" data-mini="true" data-role="button" title="{{ title }}"></a>
{{/ rightbutton }}
{{# headmenu }}
<div data-role="navbar">
<ul>
{{# headlinks }}
<li><a href="{{ link }}">{{ name }}</a></li>
{{/ headlinks}}
</ul>
</div>
{{/ headmenu }}
</div>
<div class="row-fluid">
<div class="span6 dashboard">
<h3>Get a Virtual Machine from Vifib for 1€/month</h3>
<a class="btn btn-info" href="#/">Order a KVM now</a>
</div>
<div class="span6 dashboard">
<h3>Explore the world of Vifib provided software</h3>
<a class="btn btn-info" href="#/">Browse the Catalog</a>
</div>
</div>
</script>
<script id="catalog.preview" type="text/html">
<h2>Brand new softwares</h2>
<ul id="catalog-new"></ul>
<h2>Most downloads</h2>
<ul id="catalog-most"></ul>
<h2>Categories</h2>
<ul id="catalog-categories"></ul>
</script>
<script id="catalog.all" type="text/html">
<h2>All available softwares</h2>
<ul id="catalog-all"></ul>
</script>
<script id="catalog.item" type="text/html">
<li class="catalog-item">
<div>
<img src="http://www.afpy.org/Members/nexedi/Dev%20ERP5/logo_medium">
<h4>Name</h4>
<h6>Categories</h6>
<a href="#/buy" class="buy-btn">1€ Buy</a>
</div>
</li>
</script>
<script id="catalog.categorie" type="text/html">
<li class="catalog-item">
<a href="#"><h4>Categorie</h4></a>
</li>
</script>
<script id="server.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Computers list</h2></caption>
<tr><th>Name</th><th>Reference</th><th>State</th></tr>
<tr><td>Couscous</td><td>Comp-1</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Merguez</td><td>Comp-3</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Plop</td><td>Comp-5</td><td><span class="label label-important">Stopped</span></td></tr>
</table>
</article>
<script id="menu" type="text/html">
<ul data-role="listview" data-divider-theme="a">
{{^ menu-extension }}
<li data-role="list-divider" role="header">Menu</li>
{{/ menu-extension }}
{{# menu-extension }}
<li data-role="list-divider">{{ menu-extension }}</li>
{{# menuextlinks }}
<li><a href="{{ link }}">{{ name }}</a></li>
{{/ menuextlinks }}
<li data-role="list-divider" role="header">General</li>
{{/ menu-extension }}
{{# menulinks }}
<li><a href="{{ link }}">{{ name }}</a></li>
{{/ menulinks }}
</ul>
</script>
<script id="instance.list" type="text/html">
<table class="table table-condensed" id="instance-table">
<caption><h2>Instances list</h2></caption>
</table>
<script id="content" type="text/html">
<div data-role="content">
{{#menu}}
<div class="content-primary">
{{/ menu}}
{{{ mainPanel }}}
{{#menu}}
</div>
<div class="content-secondary">
{{> menu}}
</div>
{{/ menu}}
</div>
</script>
<script id="instance.list.elem" type="text/html">
<td><a href="{{ url }}">{{ title }}</a></td><td>{{ status }}</td>
<script id="footbar" type="text/html">
<div data-role="footer">
<div data-role="navbar">
<ul>
{{# footlinks }}
<li><a href="{{ link }}">{{ name }}</a></li>
{{/ footlinks}}
</ul>
</div>
</div>
</script>
<script id="invoice.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Invoices</h2></caption>
<tr><th>Number</th><th>Total price</th><th>Currency</th><th>Payment</th></tr>
<tr><td>43</td><td>1.0</td><td>Euro</td><td><span class="label label-warning">Waiting</span></td></th>
<tr><td>44</td><td>0.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>45</td><td>1.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>01</td><td></td><td>Euro</td><td><span class="label label-important">Ongoing</span></td></th>
</table>
</article>
</script>
<script id="form.bang.instance" type="text/html">
<form class="form-horizontal" id="form-bang">
<label>Why do you want to bang this instance ?</label>
<input class="input-large" name="log" type="text">
<button class="btn btn-primary" type="submit" name="submit">Bang</button>
<button class="btn">Cancel</button>
<script id="service-inlist" type="text/html">
<li><a href="{{ link }}"><h4>{{ name }}</h4></a></li>
</script>
<!--
-HOMEPAGE
-->
<script id="homepage" type="text/html">
{{> headbar}}
{{> content}}
</script>
<script id="homepagePanel" type="text/html">
<h2>Carousel</h2>
<a href="#/login" data-role="button">Try it now !</a>
</script>
<!--
-LIBRARY
-->
<script id="library" type="text/html">
{{> headbar}}
{{> content}}
<!--{{> footbar}}-->
</script>
<script id="libraryPanel" type="text/html">
<form id="search-form">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="search"></label>
<input type="search" name="search" placeholder="Search"/>
</div>
</form>
</script>
<script id="form.new.instance" type="text/html">
<article>
<form class="form-horizontal">
<fieldset>
<legend>Request a new instance</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-large" required name="title"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Software release</label>
<div class="controls">
<input type="text" class="input-xlarge" required name="software_release"/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" name="submit">Request</button>
</div>
</fieldset>
<ul data-role="listview">
<li data-role="list-divider" role="heading">
Most downloaded
</li>
{{# most }}
{{> service-inlist }}
{{/ most }}
<li data-role="list-divider" role="heading">Brand new<span class="ui-li-count">{{ newCount }}</span></li>
{{# new }}
{{> service-inlist }}
{{/ new }}
</ul>
</script>
<script id="library.all" type="text/html">
{{> headbar }}
{{> content }}
</script>
<script id="library.allPanel" type="text/html">
{{> software.list }}
</script>
<!--
-SOFTWARE>
-->
<script id="software" type="text/html">
{{> headbar }}
{{> content }}
</script>
<script id="softwarePanel" type="text/html">
<img src="{{ image_url }}">
<p><b>{{ description }}</b></p>
<a data-role="button" href="#/login">Buy it for {{ price }}&euro;</a>
</script>
<script id="software.list" type="text/html">
<ul data-role="listview" id="software-list"></ul>
</script>
<script id="software.listitem" type="text/html">
<a href="{{ software_url }}">
{{# thumb_url }}
<img src="{{ thumb_url }}" />
{{/ thumb_url }}
<h3>{{ name }}</h3>
</a>
</script>
<!--
-LOGIN
-->
<script id="login" type="text/html">
{{> headbar }}
{{> content }}
</script>
<script id="loginPanel" type="text/html">
<form>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username"></label>
<input type="text" name="username" placeholder="Username"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password"></label>
<input type="password" name="password" placeholder="Password"/>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="a">Connexion</button>
</fieldset>
</div>
</form>
</article>
</script>
<script id="auth" type="text/html">
<article>
<p>Authentification needed. Are you agree to be redirect to login ?</p>
<a href="{{ host }}?response_type=token&client_id={{ client_id }}&redirect_uri={{ redirect }}">Redirect</a>
</article>
<!--
-DASHBOARD
-->
<script id="dashboard" type="text/html">
{{> headbar }}
{{> content }}
</script>
<script id="instance" type="text/html">
{{! Service page template }}
<div class="subnav">
<ul class="nav nav-pills">
{{# actions }}
<li><a href="{{ url }}">{{ name }}</a></li>
{{/ actions}}
</ul>
</div>
<form class="form-horizontal" id="instance-form">
<fieldset>
<legend>
{{ title }}
</legend>
<div class="control-group">
<label class="control-label">Reference</label>
<div class="controls">
<input name="title" type="text" value="{{ title }}" readOnly></input>
</div>
<script id="dashboardPanel" type="text/html">
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/library">Library</a>
</div>
<div class="control-group">
<label class="control-label">Software release</label>
<div class="controls">
<input type="text" name="software_release" value="{{ software_release }}" readOnly></input>
</div>
<div class="ui-block-b">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/network">Networks</a>
</div>
<div class="control-group">
<label class="control-label">Software type</label>
<div class="controls">
<input type="text" name="software_type" value="{{ software_type }}"></input>
</div>
<div class="ui-block-a">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/service">Services</a>
</div>
<div class="control-group">
<label class="control-label">Status</label>
<div class="controls" id="instanceStatus">
{{{ status }}}
</div>
<div class="ui-block-b">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/computer">Computers</a>
</div>
</fieldset>
<table class="table">
<caption>Connection parameters</caption>
{{# parameter}}
<tr><td>{{parameter.0}}</td><td></td></tr>
{{/ parameter}}
</table>
<fieldset>
<legend>
Parameter XML
<div class="pull-right">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</legend>
<textarea name="xml" style="width: 98%; height: 110px;">
<?xml version="1.0" encoding="utf-8"?>
<instance>
<parameter id="nbd_ip">2a01:e35:2e27:460:e2cb:4eff:fed9:48dc</parameter>
<parameter id="nbd_port">1024</parameter>
</instance>
</textarea>
</fieldset>
</form>
</script>
<script id="instance.stop_requested" type="text/html">
<div class="btn-group">
<button class="btn btn-danger disabled" disabled="disabled" id="stopInstance">Stopped</button>
<button class="btn" id="startInstance">Start</button>
</div>
</script>
<script id="instance.draft" type="text/html">
<div class="btn-group">
<button class="btn disabled" disabled="disabled">Stop</button>
<button class="btn disabled" disabled="disabled">Start</button>
</div>
</script>
<script id="instance.start_requested" type="text/html">
<div class="btn-group">
<button class="btn" id="stopInstance">Stop</button>
<button class="btn btn-success disabled" disabled="disabled" id="startInstance">Started</button>
</div>
</script>
<script id="simple-form" type="text/html">
<form class="form-inline">
<fieldset>
<div class="input-append">
<input required class="span2" size="16" type="text"/>
<button class="btn" type="submit">Go !</button>
</div>
</fieldset>
</form>
</script>
<script id="error" type="text/html">
<div class="alert alert-{{ state }}">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">{{ state }} - {{ date }}</h4>
{{ message }}
</div>
</script>
<script id="topbar" type="text/html">
</script>
<script id="root" type="text/html">
<div id="loading" style="position: absolute; right: 20px; top: 20px;"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--<a href="#" class="brand">Vifib</a>-->
<img src="static/img/vifib_logo.gray.png" style="max-height: 40px" />
</div>
<div class="span10">
<ul class="nav">
<li><a href="#/dashboard">Dashboard</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="ui-block-a">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/billing">Billing</a>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well" style="padding:0">
<ul class="nav nav-list">
<li class="nav-header">Softwares</li>
<li><a href="#/catalog"><i class="icon-"></i>Browse catalog</a></li>
<li><a href="#/catalog/all"><i class="icon-"></i>Softwares availables</a></li>
<li class="nav-header">Servers</li>
<li><a href="#/computers"><i class="icon-list"></i>List all servers</a></li>
<li><a href="#/computer"><i class="icon-plus-sign"></i>Add new server</a></li>
<li class="nav-header">Services</li>
<li><a href="#/instances"><i class="icon-list"></i>List all instances</a></li>
<li><a href="#/instance"><i class="icon-plus-sign"></i>Add new instance</a></li>
<li class="nav-header">Account</li>
<li><a href="#/invoices"><i class="icon-inbox"></i>Invoices</a></li>
<li><a href="#/settings"><i class="icon-cog"></i>Settings</a></li>
</ul>
</div>
</div>
<section class="span9" id="main" style="min-height: 200px">
<!--Body content-->
</section>
<div class="ui-block-b">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/support">Support</a>
</div>
</div>
</script>
</head>
<body>
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="static/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="static/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="static/js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="static/js/spin.js"></script>
<script type="text/javascript" src="static/js/jquery-spin.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/js/ICanHaz.min.js"></script>
<script type="text/javascript" src="static/js/modernizr-2.5.3.js"></script>
<script type="text/javascript" src="static/js/sinon-1.3.2.js"></script>
<script type="text/javascript" src="static/js/jquery.slapos.js"></script>
<script type="text/javascript" src="static/js/jquery.urljs.js"></script>
<!--<script type="text/javascript" src="static/js/fake.js"></script>-->
<script type="text/javascript" src="static/js/fake.js"></script>
<script type="text/javascript" src="static/js/core.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c"></div>
</body>
</html>
vifib/static/js/bootstrap-alert.js deleted 100644 → 0
View file @ 33f3ad66
/* ==========================================================
* bootstrap-alert.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* ALERT CLASS DEFINITION
* ====================== */
var dismiss = '[data-dismiss="alert"]'
, Alert = function (el) {
$(el).on('click', dismiss, this.close)
}
Alert.prototype.close = function (e) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
e && e.preventDefault()
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.trigger(e = $.Event('close'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
$parent
.trigger('closed')
.remove()
}
$.support.transition && $parent.hasClass('fade') ?
$parent.on($.support.transition.end, removeElement) :
removeElement()
}
/* ALERT PLUGIN DEFINITION
* ======================= */
$.fn.alert = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('alert')
if (!data) $this.data('alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.alert.Constructor = Alert
/* ALERT DATA-API
* ============== */
$(function () {
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
}(window.jQuery);
\ No newline at end of file
vifib/static/js/bootstrap-carousel.js deleted 100644 → 0
View file @ 33f3ad66
/* ==========================================================
* bootstrap-carousel.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* CAROUSEL CLASS DEFINITION
* ========================= */
var Carousel = function (element, options) {
this.$element = $(element)
this.options = options
this.options.slide && this.slide(this.options.slide)
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
}
Carousel.prototype = {
cycle: function (e) {
if (!e) this.paused = false
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
, to: function (pos) {
var $active = this.$element.find('.active')
, children = $active.parent().children()
, activePos = children.index($active)
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
that.to(pos)
})
}
if (activePos == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
}
, pause: function (e) {
if (!e) this.paused = true
clearInterval(this.interval)
this.interval = null
return this
}
, next: function () {
if (this.sliding) return
return this.slide('next')
}
, prev: function () {
if (this.sliding) return
return this.slide('prev')
}
, slide: function (type, next) {
var $active = this.$element.find('.active')
, $next = next || $active[type]()
, isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last'
, that = this
, e = $.Event('slide')
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () { that.$element.trigger('slid') }, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
isCycling && this.cycle()
return this
}
}
/* CAROUSEL PLUGIN DEFINITION
* ========================== */
$.fn.carousel = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('carousel')
, options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (typeof option == 'string' || (option = options.slide)) data[option]()
else if (options.interval) data.cycle()
})
}
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
$.fn.carousel.Constructor = Carousel
/* CAROUSEL DATA-API
* ================= */
$(function () {
$('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
$target.carousel(options)
e.preventDefault()
})
})
}(window.jQuery);
\ No newline at end of file
vifib/static/js/bootstrap-modal.js deleted 100644 → 0
View file @ 33f3ad66
/* =========================================================
* bootstrap-modal.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function ($) {
"use strict"; // jshint ;_;
/* MODAL CLASS DEFINITION
* ====================== */
var Modal = function (content, options) {
this.options = options
this.$element = $(content)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
}
Modal.prototype = {
constructor: Modal
, toggle: function () {
return this[!this.isShown ? 'show' : 'hide']()
}
, show: function () {
var that = this
, e = $.Event('show')
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
$('body').addClass('modal-open')
this.isShown = true
escape.call(this)
backdrop.call(this, function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element
.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
})
}
, hide: function (e) {
e && e.preventDefault()
var that = this
e = $.Event('hide')
this.$element.trigger(e)
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
$('body').removeClass('modal-open')
escape.call(this)
this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
}
}
/* MODAL PRIVATE METHODS
* ===================== */
function hideWithTransition() {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
backdrop.call(this)
}
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
} else if (callback) {
callback()
}
}
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
function escape() {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
/* MODAL PLUGIN DEFINITION
* ======================= */
$.fn.modal = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
})
}
$.fn.modal.defaults = {
backdrop: true
, keyboard: true
, show: true
}
$.fn.modal.Constructor = Modal
/* MODAL DATA-API
* ============== */
$(function () {
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
e.preventDefault()
$target.modal(option)
})
})
}(window.jQuery);
\ No newline at end of file
vifib/static/js/bootstrap-transition.js deleted 100644 → 0
View file @ 33f3ad66
/* ===================================================
* bootstrap-transition.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
$(function () {
"use strict"; // jshint ;_;
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
* ======================================================= */
$.support.transition = (function () {
var transitionEnd = (function () {
var el = document.createElement('bootstrap')
, transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd'
, 'MozTransition' : 'transitionend'
, 'OTransition' : 'oTransitionEnd'
, 'msTransition' : 'MSTransitionEnd'
, 'transition' : 'transitionend'
}
, name
for (name in transEndEventNames){
if (el.style[name] !== undefined) {
return transEndEventNames[name]
}
}
}())
return transitionEnd && {
end: transitionEnd
}
})()
})
}(window.jQuery);
\ No newline at end of file
vifib/static/js/core.js
View file @ 6ade1e25
......@@ -60,19 +60,10 @@
methods = {
init: function () {
var routes = [[['/', methods['showRoot']]]];
//routes[0] = [
//['/catalog', methods['showCatalog']],
//['/catalog/all', methods['showCatalogAll']],
//['/instance', methods['requestInstance']],
//['/instance/:url', methods['showInstance']],
//['/instance/:url/bang', methods['showBangInstance']],
//['/computers', methods['listComputers']],
//['/instances', methods['listInstances']],
//['/invoices', methods['listInvoices']],
//['/dashboard', methods['showDashboard']]
//];
return this.each(function () {
// JQM configuration
// Initialize slapos in this context
//$(this).slapos({'host': 'http://10.8.2.34:12006/erp5/portal_vifib_rest_api_v1'});
$(this).slapos({'host': 'http://10.8.2.34:12006/erp5/portal_vifib_rest_api_v1'});
// Bind Loading content
$('#loading').ajaxStart(function () {
......@@ -89,21 +80,12 @@
});
},
showRoot: function (params) {
var route = $.router.routes.current,
nextLevel = route.level + 1;
$(this).vifib('render', 'root');
$.router.routes.add('/catalog', nextLevel, methods.showCatalog, $("#main"));
$.router.routes.add('/dashboard', nextLevel, methods.showDashboard, $("#main"));
// default page
if (params.route === '/') {
$.router.redirect('/dashboard');
}
$.router.start(params.route, nextLevel);
},
genInstanceUrl: function (uri) {
return $.genHash(['instance', encodeURIComponent(uri)]);
return $.router.genHash(['instance', encodeURIComponent(uri)]);
},
genSoftwareUrl: function (uri) {
return $.router.genHash(['library', 'software', encodeURIComponent(uri)]);
},
extractInstanceURIFromHref: function () {
......@@ -117,7 +99,7 @@
},
genBangUrl: function (uri) {
return $.genHash(["instance", encodeURIComponent(uri), "bang"]);
return $.router.genHash(["instance", encodeURIComponent(uri), "bang"]);
},
authenticate: function (data) {
......@@ -129,6 +111,11 @@
}
},
isAuthenticated: function () {
// TODO
return true;
},
refresh: function (method, interval, eventName) {
eventName = eventName || 'ajaxStop';
var $this = $(this);
......@@ -141,47 +128,180 @@
});
});
},
// ROOT
showRoot: function (params) {
var route = $.router.routes.current,
nextLevel = route.level + 1;
$.router.routes.add('/homepage', nextLevel, methods.showHomepage, $(":jqmData(role=page)"));
$.router.routes.add('/library', nextLevel, methods.showLibrary, $(":jqmData(role=page)"));
$.router.routes.add('/documentation', nextLevel, methods.showDocumentation, $(":jqmData(role=page)"));
$.router.routes.add('/dashboard', nextLevel, methods.showDashboard, $(":jqmData(role=page)"));
$.router.routes.add('/login', nextLevel, methods.showLogin, $(":jqmData(role=page)"));
// default page
if (params.route === '/') {
$.router.redirect('/homepage');
}
$.router.start(params.route, nextLevel);
},
showDashboard: function () {
//HOMEPAGE
showHomepage: function (params) {
return this.each(function () {
$(this).vifib('render', 'dashboard');
$(this).find("#carousel").carousel();
var mainPanel = $(this).vifib('getRender', 'homepagePanel'),
options = {
'title': 'Vifib',
'mainPanel': mainPanel,
'headmenu': true,
'headlinks': [
{'name': 'Software library', 'link': '#/library'},
{'name': 'Documentation', 'link': '#/documentation'}
]
},
nextLevel = $.router.routes.current.level + 1;
$(this).vifib('render', 'homepage', options);
});
},
showCatalogAll: function () {
//LOGIN
showLogin: function (params) {
return this.each(function () {
var i, item;
$(this).vifib('render', 'catalog.all');
for (i=0; i<14; i++) {
item = $(this).vifib('getRender', 'catalog.item');
$("#catalog-all").append(item);
}
var mainPanel = $(this).vifib('getRender', 'loginPanel'),
options = {
'title': 'Vifib',
'mainPanel': mainPanel,
'leftbutton': {
'link': '#/homepage',
'icon': 'home',
'title': 'Homepage'
}
},
nextLevel = $.router.routes.current.level + 1;
$(this).vifib('render', 'login', options);
});
},
showCatalog: function (params) {
// DASHBOARD
showDashboard: function (params) {
return this.each(function () {
var i, item, nextLevel;
$(this).vifib('render', 'catalog.preview');
for (i=0; i<2; i++) {
item = $(this).vifib('getRender', 'catalog.item');
$("#catalog-new").append(item);
}
for (i=0; i<4; i++) {
item = $(this).vifib('getRender', 'catalog.item');
$("#catalog-most").append(item);
}
for (i=0; i<6; i++) {
item = $(this).vifib('getRender', 'catalog.categorie');
$("#catalog-categories").append(item);
}
var mainPanel = $(this).vifib('getRender', 'dashboardPanel'),
options = {
'title': 'Dashboard',
'mainPanel': mainPanel
};
$(this).vifib('render', 'dashboard', options);
});
},
// LIBRARY
showLibrary: function (params) {
return this.each(function () {
var i, item, nextLevel,
/* FAKE ************/
data = {
'most': [
{'link': '#/library/software/kvm', 'name': 'Kvm'},
{'link': '#/library/software/kvm', 'name': 'Kvm'},
],
'new': [
{'link': '#/library', 'name': 'Another Kvm'}
],
'newCount': '1'
},
/*******************/
options = {
'title': 'Library',
'mainPanel': $(this).vifib('getRender', 'libraryPanel', data),
'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
},
'menu': true,
'menulinks': [
{'link': '#/library/all', 'name': 'All softwares'}
],
'footlinks': [
{'link': '#/library', 'name': 'Library'},
{'link': '#/documentation', 'name': 'Documentation'}
],
};
$(this).vifib('render', 'library', options);
nextLevel = $.router.routes.current.level + 1;
$.router.routes.add('/catalog/all', nextLevel, methods.showCatalogAll, $(this));
$.router.routes.add('/library/all', nextLevel, methods.showLibraryAll, $(this));
$.router.routes.add('/library/categories', nextLevel, methods.showCatalogAll, $(this));
/* FAKE *********/
$.router.routes.add('/library/software/:software_url', nextLevel, methods.showSoftware, $(this));
/****************/
$.router.start(params.route, nextLevel);
});
},
fillRowSoftware: function (uri) {
return this.each(function () {
$(this).slapos('softwareInfo', uri, {
success: function (response) {
if (typeof (response) !== "object") {
response = $.parseJSON(response);
}
$.extend(response, {'software_url': methods.genSoftwareUrl(uri)});
$(this).vifib('render', 'software.listitem', response);
}
})
});
},
showLibraryAll: function () {
return this.each(function () {
var options = {
'title': 'All softwares',
'mainPanel': $(this).vifib('getRender', 'library.allPanel'),
'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
}
},
listview = $(this).vifib('render', 'library.all', options).find('#software-list');
$(this).slapos('softwareList', {
success: function (response) {
if (typeof (response) !== "object") {
response = $.parseJSON(response);
}
$.each(response.list, function () {
var url = this.toString(),
row = $('<li></li>').vifib('fillRowSoftware', url);
listview.append(row).listview('refresh');
})
}
})
});
},
showSoftware: function (params) {
return this.each(function () {
$(this).slapos('softwareInfo', params.software_url, {
success: function (response) {
var options = {
'title': response.name,
'mainPanel': $(this).vifib('getRender', 'softwarePanel', response),
'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
},
'menu': true,
'menulinks': [
{'link': '#/library/all', 'name': 'All softwares'}
],
'menu-extension': 'From the same category',
'menuextlinks': [
{'link': '#/library/software/html5', 'name': 'Html5 AS'}
]
}
$.extend(options, response)
$(this).vifib('render', 'software', options);
}
})
});
},
showInstance: function (uri) {
var statusCode = {
401: redirect,
......@@ -427,22 +547,34 @@
});
},
render: function (template, data) {
render: function (template, data, raw) {
raw = raw || true;
return this.each(function () {
$(this).html(ich[template](data, true));
$(this).html(ich[template](data, raw));
$(this).trigger('pagecreate');
});
},
getRender: function (template, data) {
return ich[template](data, true);
getRender: function (template, data, raw) {
raw = raw || true;
return ich[template](data, raw);
},
renderAppend: function (template, data) {
$(this).append(ich[template](data, true));
renderAppend: function (template, data, raw) {
raw = raw || true;
return this.each(function () {
$(this).append(ich[template](data, raw));
$(this).trigger('pagecreate');
});
},
renderPrepend: function (template, data) {
$(this).prepend(ich[template](data, true));
renderPrepend: function (template, data, raw) {
raw = raw || true;
return this.each(function () {
$(this).prepend(ich[template](data, raw));
$(this).trigger('pagecreate');
});
}
};
......@@ -472,4 +604,17 @@
};
}(jQuery));
$('body').vifib();
$(document).bind("mobileinit", function(){
// let's handle ourself the hashchange event
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.defaultPageTransition = 'none';
});
$(document).bind('pagecreate', function () {
$(':jqmData(role=page)').vifib();
});
$(document).bind('pagebeforecreate', function (e, data) {
//e.preventDefault();
});
vifib/static/js/fake.js
View file @ 6ade1e25
var comp0 = {computer_id: "COMP-0",
var comp = {
computer_id: "COMP-0",
software: [{software_release: "http://example.com/example.cfg",status: "install"}],
partition: [
{title: "slapart1",
......@@ -12,43 +13,8 @@ var comp0 = {computer_id: "COMP-0",
]
};
var comp1 = {computer_id: "COMP-1",
software: [{software_release: "http://example.com/example.cfg",status: "install"}],
partition: [
{title: "slapart1",
instance_id: "foo",
status: "start",
software_release: "http://example.com/example.cfg"},
{title: "slapart2",
instance_id: "bar",
status: "stop",
software_release: "http://example.com/example.cfg"}
]
};
var inst0 =
{instance_id: "INST-0",
status: "start_requested",
software_release: "http://example.com/example.cfg",
software_type: "type_provided_by_the_software",
slave: "False",
connection: [{
custom_connection_parameter_1: "foo",
custom_connection_parameter_2: "bar"}],
parameter: {
Custom1: "one string",
Custom2: "one float",
Custom3: ["abc", "def"]},
sla: {computer_id: "COMP-0"},
children_id_list: ["subinstance1", "subinstance2"],
partition: {
public_ip: ["::1", "91.121.63.94"],
private_ip: ["127.0.0.1"],
tap_interface: "tap2"}
};
var inst1 =
{instance_id: "INST-1",
var inst ={
instance_id: "INST-1",
status: "stop_requested",
software_release: "http://example.com/example.cfg",
software_type: "type_provided_by_the_software",
......@@ -66,19 +32,88 @@ var inst1 =
public_ip: ["::1", "91.121.63.94"],
private_ip: ["127.0.0.1"],
tap_interface: "tap2"}
};
};
var soft = {
name: 'Kvm',
image_url: 'http://www.linux-kvm.org/wiki/skins/kvm/kvmbanner-logo2.png',
thumb_url: 'http://www.system-linux.eu/public/images/kvm-logo.png',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus a est convallis pretium. Pellentesque habitant morbi tristique senectus.',
price: '1',
};
var html5 = {
name: 'Html5 AS',
image_url: 'http://smashingweb.ge6.org/wp-content/uploads/2011/01/html5_logo.png',
thumb_url: 'http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus a est convallis pretium. Pellentesque habitant morbi tristique senectus.',
price: '1337',
};
var software_list = {
list: [
'kvm',
'html5',
'kvm'
]
};
var instance_list = {
list: [
'kvm'
]
};
var discovery = {
instance_list: {
url: '/fake/instance_list',
method: 'GET'
},
instance_info: {
url: '/fake/instance_info/{instance_url}',
method: 'GET'
},
software_list: {
url: '/fake/software_list',
method: 'GET'
},
software_info: {
url: '/fake/software_info/{software_url}',
method: 'GET'
}
};
var fakeserver = sinon.fakeServer.create();
// Get instance
fakeserver.respondWith("GET", "/instance/stop",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst0)]);
fakeserver.respondWith("GET", "/instance/start",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst1)]);
// Get instance FAIL
fakeserver.respondWith("GET", "/instance/start",[200, {"Content-Type":"application/json; charset=utf-8"}, "NOT FOUND"]);
fakeserver.respondWith("GET", "/instance/stop",[200, {"Content-Type":"application/json; charset=utf-8"}, "NEED AUTH"]);
// Discovery
fakeserver.respondWith('GET', 'http://10.8.2.34:12006/erp5/portal_vifib_rest_api_v1', [
200, {'Content-Type': 'application/json'}, JSON.stringify(discovery)
])
// Get instances list
fakeserver.respondWith('GET', '/fake/instance_list', [
200, {'Content-Type': 'application/json'}, JSON.stringify(instance_list)
]);
// Get instance info
fakeserver.respondWith("GET", '/fake/instance_info/kvm', [
200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst)
]);
// Get softwares list
fakeserver.respondWith('GET', '/fake/software_list', [
200, {'Content-Type': 'application/json'}, JSON.stringify(software_list)
]);
// Get software info
fakeserver.respondWith('GET', '/fake/software_info/kvm', [
200, {'Content-Type': 'application/json'}, JSON.stringify(soft)
]);
fakeserver.respondWith('GET', '/fake/software_info/html5', [
200, {'Content-Type': 'application/json'}, JSON.stringify(html5)
]);
var tmp = $.ajax;
$.ajax = function(url, options){
// it will not work with cache set to false
if (url.hasOwnProperty('cache')) { url.cache = true; }
console.log(url)
var result = tmp(url, options);
fakeserver.respond();
return result;
......
vifib/static/js/jquery.slapos.js
View file @ 6ade1e25
......@@ -153,6 +153,15 @@
instanceCertificate: function (url, args) {
$.extend(args, {'instance_url': decodeURIComponent(url)});
return $(this).slapos('prepareRequest', 'instance_certificate', args);
},
softwareList: function (args) {
return $(this).slapos('prepareRequest', 'software_list', args);
},
softwareInfo: function (url, args) {
$.extend(args, {'software_url': decodeURIComponent(url)});
return $(this).slapos('prepareRequest', 'software_info', args);
}
};
......
vifib/static/js/jquery.urljs.js
View file @ 6ade1e25
......@@ -70,7 +70,7 @@ $.extend({
}
this.current = this.list[i][j];
this.clean(this.list[i][j].level + 1);
console.log(this.list[i][j].route)
console.log(this.list[i][j].route);
this.list[i][j].callback(hash);
}
j += 1;
......@@ -129,6 +129,10 @@ $.extend({
return $.param(obj);
},
genHash: function (components) {
return '#/' + components.join('/');
},
parseHash: function (hashTag) {
var re = new RegExp(/(?:^#?([a-zA-Z0-9\/_-]+))(?:\?([A-Za-z0-9\/&=_-]+))?/g),
groups = re.exec(hashTag),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7