entrouvert
/
momo
Archived
17
0
Fork 0
Code Issues Pull Requests Releases Activity

Doc + style

This commit is contained in:
Ghislain Loaec 2015-08-11 03:11:50 +02:00
parent 95aa8a45ea
commit be6ab6d001
13 changed files with 218 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
www/.index.html.swm Normal file
View File

Binary file not shown.

BIN
www/assets/ZenBG-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
www/assets/ZenBG-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB

BIN
www/assets/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 662 KiB

BIN
www/assets/cadoles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
www/assets/entrouvert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

45
www/assets/index.css
View File

@ -4,3 +4,48 @@
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
margin: 15px 0;
}
.btn-cadoles {
background: #2A80AF;
color: #FFF;
}
.btn-cadoles:hover {
background: #1A709F;
}
.btn-divia {
background: #CA0083;
color: #FFF;
}
.btn-divia:hover {
background: #D00187;
}
.navbar-default {
background-color: rgba(49, 50, 45, .95);
border-color: #3e3f3a;
}
#home {
background: #93c54b;
background: -webkit-linear-gradient(0deg, #348F50 10%, #56B4D3 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(0deg, #348F50 10%, #56B4D3 90%); /* FF3.6+ */
background: -ms-linear-gradient(0deg, #348F50 10%, #56B4D3 90%); /* IE10 */
background: -o-linear-gradient(0deg, #348F50 10%, #56B4D3 90%); /* Opera 11.10+ */
background: linear-gradient(0deg, #348F50 10%, #56B4D3 90%); /* W3C */
background-image: url("bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#dijon {
color: #FFF;
background: rgba(49, 50, 45, .95);
}
#dijon .navbar-inverse,
#dijon .navbar-inverse .btn,
#home .navbar-inverse,
#home .navbar-inverse .btn {
background: none;
}

4
www/assets/index.js
View File

@ -1 +1,3 @@
alert('I am update');
setTimeout(function(){
app.flash('<i class="fa fa-arrow-up pull-right" style="margin-right: 10px;"></i> There is a search tool available here', 'info');
}, 10000);

32
www/css/index.css
View File

@ -81,6 +81,35 @@ body {
z-index: 1;
overflow: hidden;
}
.momo-image-viewer {
z-index: 99999;
background-color: black;
background-image: url(...);
background-size: contain;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
color: #FFF;
}
.momo-image-viewer .momo-page-content-parent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,1) 99%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.9)), color-stop(99%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.momo-page iframe {
}
.momo-frame-wrapper {
@ -188,6 +217,9 @@ body {
zoom: 1; */
}
img {
vertical-align: bottom;
}
.momo-page-current,
.no-js .pt-page {

10
www/css/wptr.css
View File

@ -7,10 +7,11 @@
z-index: 10;
text-align: center;
height: 50px;
background: #3e3f3a;
/* background: #3e3f3a;*/
}
#ptr .genericon {
display: none;
opacity: .6;
font-size: 34px;
width: auto;
@ -20,6 +21,9 @@
transform: rotate(90deg);
margin-top: 5px;
}
.ptr-pulling #ptr .genericon {
display: block;
}
.ptr-refresh #ptr .genericon {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
@ -113,7 +117,7 @@
.ptr-loading .momo-page {
/*-webkit-transform: translate3d( 0, 50px, 0 );
transform: translate3d( 0, 50px, 0 );*/
top: 110px;
top: 115px;
transition: all .25s ease;
}
.ptr-reset #ptr {
@ -126,6 +130,6 @@
.ptr-loading #ptr {
/*-webkit-transform: translate3d( 0, 50px, 0 );
transform: translate3d( 0, 50px, 0 );*/
top: 60px;
top: 65px;
transition: all .25s ease;
}

118
www/index.html
View File

@ -25,6 +25,9 @@
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
@ -49,17 +52,12 @@
</script>
<script type="text/x-tmpl" id="momo-icon-tmpl">
{% if(o.icon.startsWith('http://') ||
o.icon.startsWith('https://') ||
o.icon.startsWith('file://') ||
o.icon.endsWith('.png') ||
o.icon.endsWith('.svg') ||
o.icon.endsWith('.ico') ||
o.icon.endsWith('.jpeg') ||
o.icon.endsWith('.jpg')){ %}
<img src="{%= o.icon %}" height="{%= o.size %}" width="{%= o.size %}" />
{% } else { %}
<i class="fa fa-fw {%= o.icon %} {% if(o.size > 20){ %} fa-3x {% } %}"></i>
{% if(o.icon){ %}
{% if(o.icon.isFramable()){ %}
<img src="{%= o.icon %}" height="{%= o.size %}" width="{%= o.size %}" />
{% } else { %}
<i class="fa fa-fw {%= o.icon %} {% if(o.size > 20){ %} fa-3x {% } %}"></i>
{% } %}
{% } %}
</script>
@ -75,12 +73,25 @@
<div class="parent-navbar-brand">
<span class="navbar-brand" href="#home">
<span class="momo-icon">
{% var icon = o.icon || o.meta.icon; %}
{% var icon = (o.meta.titlePersistant || o.id == 'home') ? o.meta.icon : o.icon || o.meta.icon; %}
{% if(icon){ %}
{%# tmpl('momo-icon-tmpl', { icon: icon, size: 20, header: true }) %}
{% } %}
</span>
<span class="momo-title">{%= o.title || o.meta.title %}</span>
<span class="momo-title">
{% if(o.meta.titlePersistant || o.id == 'home'){ %}
{%= o.meta.title %}
{%# o.meta.titleSeparator %}
<small>
{% if(o.meta.icon && o.icon){ %}
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20, header: true }) %}
{% } %}
{%= o.title %}
</small>
{% } else { %}
{%= o.title || o.meta.title %}
{% } %}
</span>
</span>
</div>
</script>
@ -172,33 +183,52 @@
<!-- Flash message template -->
<script type="text/x-tmpl" id="momo-flash-message-tmpl">
<div class="alert alert-{%= o.type %} pt-page-rotateRoomBottomIn">
<a href="#momo-blank" onclick="app.utils.removeElement(this.parentElement);" class="pull-right">&times;</a>
{% if(o.type == "success"){ %}<i class="fa fa-fw fa-check"></i>
{% } else if(o.type == "info"){ %}<i class="fa fa-fw fa-info-circle"></i>
{% } else if(o.type == "warning"){ %}<i class="fa fa-fw fa-exclamation-triangle"></i>
{% } else if(o.type == "danger"){ %}<i class="fa fa-fw fa-exclamation-circle"></i>{% } %}
{%# o.message %}
<div class="clearfix"></div>
</div>
</script>
<!-- Update availbable template -->
<script type="text/x-tmpl" id="momo-update-available-tmpl">
<div class="clearfix">
<a href="#momo-update" class="btn btn-success pull-right">
<i class="fa fa-download"></i>
Mettre à jour
</a>
<strong>Une nouvelle version est disponible !</strong>
</div>
<a href="#momo-update" class="btn btn-success pull-right">
<i class="fa fa-download"></i>
Mettre à jour
</a>
<strong>Mise à jour disponible !</strong>
<p>
{%= o.mtime %}
</p>
<div class="clearfix"></div>
</script>
<!-- Page template -->
<script type="text/x-tmpl" id="momo-page-tmpl">
{% var displayFooter = true; %}
<div class="{% if(o.url){ %}momo-frame-wrapper{% } else { %}momo-page-wrapper{% } %} clearfix">
<div class="momo-flash-messages"></div>
<div class="{% if(o.url){ %}{% } else { %}momo-page-wrapper{% } %} clearfix">
{% if(!(o.url && o.url.isImage())){ %}
<div class="momo-flash-messages"></div>
<div class="container-fluid">
<section class="momo-page-content">{%# o.content %}</section>
</div>
{% } else { %}
<div class="momo-image-viewer" style="background-image: url('{%# o.url %}');">
<div class="momo-flash-messages"></div>
<div class="container-fluid momo-page-content-parent">
<section class="momo-page-content">{%# o.content %}</section>
</div>
</div>
{% displayFooter = false; %}
{% } %}
<div class="container-fluid">
<section class="momo-page-content">{%# o.content %}</section>
</div>
{% if(o.url){ %}
<iframe src="{%= o.url %}"></iframe>
{% if(o.url && !o.url.isImage()){ %}
<iframe src="{%= o.url %}" class="momo-iframe"></iframe>
<!--div class="momo-frame-overlay"></div-->
{% } %}
@ -236,23 +266,25 @@
</div>
<!-- Footer -->
<footer class="navbar navbar-inverse momo-footer">
<div class="container-fluid clearfix">
<div class="row">
<div class="col-xs-6 navbar-btn text-left">
<a href="https://dev.entrouvert.org/projects/momo/"
class="btn btn-success pull-left momo-repo"
target="_system"
onclick="javascript:app.utils.onExternalLinkClick()">Momo repository</a>
</div>
<div class="col-xs-6 navbar-btn text-right">
<a href="mailto:{%= o.meta.contact %}"
class="btn btn-success pull-right momo-contact">{%= o.meta.contact %}</a>
{% if(displayFooter){ %}
<!-- Footer -->
<footer class="navbar navbar-inverse momo-footer">
<div class="container-fluid clearfix">
<div class="row">
<div class="col-xs-6 navbar-btn text-left">
<a href="https://dev.entrouvert.org/projects/momo/"
class="btn btn-success pull-left momo-repo"
target="_system"
onclick="javascript:app.utils.onExternalLinkClick()">Momo repository</a>
</div>
<div class="col-xs-6 navbar-btn text-right">
<a href="mailto:{%= o.meta.contact %}"
class="btn btn-success pull-right momo-contact">{%= o.meta.contact %}</a>
</div>
</div>
</div>
</div>
</footer>
</footer>
{% } %}
</script>

BIN
www/js/.index.js.swm Normal file
View File

Binary file not shown.

64
www/js/index.js
View File

@ -40,11 +40,14 @@ var app = {
manifest: {
meta: {
'title': 'Momo Application',
'icon': 'icon.png',
'contact': 'contact@cadoles.com',
'manifestUrl': 'index.json',
'assetsUrl': 'assets.zip',
'updateFreq': 0,
'content': tmpl('momo-first-launch-tmpl')
'content': tmpl('momo-first-launch-tmpl'),
'titlePersistant': true,
'titleSeparator': "<br>"
}
},
@ -168,7 +171,7 @@ var app = {
reject();
} else {
if(updateAvailable){
app.flash(tmpl('momo-update-available-tmpl', {}), 'success');
app.flash(tmpl('momo-update-available-tmpl', { mtime: app.utils.formatDate(mtime) }), 'success');
app.utils.setLoadingMsg("Mise à jour disponible !");
} else {
app.utils.setLoadingMsg("Aucunes nouvelles mises à jour");
@ -743,6 +746,11 @@ var app = {
}, 1000);
};
return app.update(cb, cb);
return window.history.back();
} else
if(page == 'momo-blank'){
return window.location.replace(app.hashHistory[app.hashHistory.length-1]);
return window.history.back();
}
if(!app.pages.hasOwnProperty(page)){
@ -928,9 +936,15 @@ var app = {
}
},
// Various Javascript Helpers
utils: {
removeElement: function($el){
$el.parentElement.removeChild($el);
return false;
},
setLoadingMsg: function(text){
var elements = document.getElementsByClassName("momo-loading-text");
for (var i = 0; i < elements.length; i++)
@ -1090,17 +1104,51 @@ var app = {
}
}
xhr.send();
},
formatDate: function(date){
var d = date,
minutes = d.getMinutes(),//.toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours(),//.toString().length == 1 ? '0'+d.getHours() : d.getHours(),
//ampm = d.getHours() >= 12 ? 'pm' : 'am',
//months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
//days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
months = ['Janvier','Février','Mars','Avril','Mai','Juin','Jullet','Août','Septempbre','Octobre','Novembre','Décembre'],
days = ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
//return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes;//+ampm;
return days[d.getDay()]+' '+d.getDate()+' '+months[d.getMonth()]+' '+d.getFullYear()+' '+hours+':'+minutes;//+ampm;
}
}
};
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str){
return this.slice(0, str.length) == str;
};
String.prototype.startsWith = function (str){
return this.slice(0, str.length) == str;
};
}
if (typeof String.prototype.endsWith != 'function') {
String.prototype.endsWith = function (str){
return this.slice(-str.length) == str;
};
String.prototype.endsWith = function (str){
return this.slice(-str.length) == str;
};
}
if (typeof String.prototype.isImage != 'function') {
String.prototype.isImage = function (){
return this.endsWith('.png') ||
this.endsWith('.svg') ||
this.endsWith('.ico') ||
this.endsWith('.jpeg') ||
this.endsWith('.jpg');
};
}
if (typeof String.prototype.isUrl != 'function') {
String.prototype.isUrl = function (){
return this.startsWith('http://') ||
this.startsWith('https://') ||
this.startsWith('file://');
};
}
if (typeof String.prototype.isFramable != 'function') {
String.prototype.isFramable = function (){
return this.isImage() || this.isUrl();
};
}