index.html
files/schema.json
files/seq.css
files/seq.js
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>WM</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script src="data.js"></script>
<script src="libs/vue.min.js"></script>
<script src="libs/fullscreen.js"></script>
<link href="libs/animate.css" rel="stylesheet"/>
<link rel="stylesheet" href="libs/bootstrap.min.css">
<link rel="stylesheet" href="libs/roboto.css">
<link rel="stylesheet" href="libs/font-awesome.min.css">
<script type="text/javascript" src="libs/jquery-3.2.1.min.js"></script>
<link href="files/seq.css" rel="stylesheet"/>
<style>
body {
background: url(files/bg.jpg) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.bb {
transition: transform 50ms ease-in-out;
color: black;
text-align: center;
}
.bb:active {
font-size: 1rem;
transform: scale(.8);
/*box-shadow: 0 3px 15px -2px;*/
}
.ba { padding: 5px; }
.ba:hover {
background: #E0E0E099;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<transition-group name="custom-classes-transition" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div v-bind:key="'w' + i" class="shadow popup" v-bind:class="{ztop: w.openonclick}" v-for="(w, i) in wins" v-if="w.visible"
v-bind:style="{ top: w.y, left: w.x, width: w.w, height:w.h }"
style=" overflow: hidden; position: absolute; background-color: #F0F0F0; border-top-left-radius:0.2vw; border-top-right-radius:0.2vw;">
<div class="popup-header" v-if="!w.notbar" style="user-select: none; background: #404040; color: white; top: 0; left: 0; padding-top: 10px; padding-bottom: 6px; width: 100%;">
<div style=" width: 100%; font-size: 1.1em;"> {{w.title}}</div>
<div style="position: absolute; top: 8px; left: 0; text-align: left; cursor: default; padding-left: 1%" >
<span @click.stop="w.visible = false" style="cursor: pointer"><i class="fa fa-circle" style="color: #000000"></i> <i class="fa fa-circle" style="color: #616161"></i> <i class="fa fa-circle" style="color: #78869b"></i></span>
</div>
</div>
<div style="overflow: auto; height: 100%; width: 100%; position: relative; border: 0px solid #888888; border-top: 0 solid black; user-select: none; text-align: left; ">
<div style="padding: 8px; background: #E0E0E0; text-align: left; font-size: 1.2em">
<img src="files/trash2.png" style="width: 40px"> <b>Corbeille : Cliquez sur les dossiers à restaurer</b>
</div>
<br>
<div style="padding-left: 40px">
<transition name="custom-classes-transition" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div @click="restored = true" v-if="!restored" style="text-align: center; color: black; display: inline-block; width: 20%; vertical-align: top" class="ba">
<img src="files/dir.png" class="bb" style="width: 4vw">
<h5>APPEL D'OFFRE PARKING</h5>
</div>
</transition>
<div style=" color: black; text-align: center; display: inline-block; width: 20%; vertical-align: top" class="ba">
<img src="files/dir.png" class="bb" style="width: 4vw">
<h5>Fichiers temporaires</h5>
</div>
<div style=" color: black; display: inline-block; text-align: center; width: 20%; vertical-align: top" class="ba">
<img src="files/dir.png" class="bb" style="width: 4vw">
<h5>Captures d'écran</h5>
</div>
<div style=" color: black; display: inline-block; text-align: center; width: 20%; vertical-align: top" class="ba">
<img src="files/dir.png" class="bb" style="width: 4vw">
<h5>SUIVIS DOSSIERS 2021</h5>
</div>
</div>
</div>
</div>
</transition-group>
<div style="text-align: center; margin:auto; position: absolute; left: 5%; top: 10%" @click="showwindows(true)">
<div v-for="i in iconsl" style="margin-bottom: 5vh; text-shadow: black 0.1em 0.1em 0.2em; color: white" class="ba">
<img v-bind:src="'files/' + i.img" class="bb" style="width: 4vw">
<h5>{{i.title}}</h5>
</div>
<transition name="custom-classes-transition" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div v-if="restored" key="hsdf" style="margin-bottom: 5vh; text-shadow: black 0.1em 0.1em 0.2em; color: white" class="ba">
<img v-bind:src="'files/dir.png'" class="bb" style="width: 4vw">
<h5>APPEL D'OFFRE PARKING</h5>
</div>
</transition>
</div>
<div style="text-align: center; margin:auto; position: absolute; right: 5%; top: 10%" @click="showwindows(true)">
<div v-for="i in iconsr" style="margin-bottom: 5vh; text-shadow: black 0.1em 0.1em 0.2em; color: white" class="ba">
<img v-bind:src="'files/' + i.img" class="bb" style="width: 4vw">
<h5>{{i.title}}</h5>
</div>
</div>
<img v-if="bmenu" v-bind:src="'files/' + bmenu" class="fullw" style="position:absolute; bottom: 0; left: 0" @click="showwindows(true)">
</div>
<script>
</script>
<script type="text/javascript" src="files/seq.js"></script>
</body>
</html>
{
"type": "object",
"title": "Multi fenetre V2",
"properties": {
"bg": { "type": "string",
"title": "bg",
"enum": ["#files"]
},
"bmenu": { "type": "string",
"title": "barre de menu bas",
"enum": ["#files"],
"links": [
{
"href": "#ROOT/files/{{self}}",
"mediaType": "image/png"
}]
},
"wins": { "type": "array",
"title": "fenetres",
"format": "table",
"items": {
"type": "object",
"title": "window",
"properties": {
"img": {
"type": "string",
"title": "img",
"enum": ["#files"]
},
"title": {
"type": "string",
"title": "titre"
},
"x": {
"type": "string",
"title": "position x"
},
"y": {
"type": "string",
"title": "position y"
},
"w": {
"type": "string",
"title": "largeur (ex 50% ou 200px)"
},
"h": {
"type": "string",
"title": "hauteur (ex 60vh ou 200px"
},
"openonclick": {
"type": "boolean",
"title": "ouvre sur clic",
"format": "checkbox"
},
"notbar": {
"type": "boolean",
"title": "pas de barre de titre",
"format": "checkbox"
}
}
}
},
"iconsl": { "type": "array",
"title": "icones bureau gauche",
"format": "table",
"items": {
"type": "object",
"title": "icone bureau",
"properties": {
"img": {
"type": "string",
"title": "img",
"enum": ["#files"]
},
"title": {
"type": "string",
"title": "title"
}
}
}
},
"iconsr": { "type": "array",
"title": "icones bureau droite",
"format": "table",
"items": {
"type": "object",
"title": "icone bureau",
"properties": {
"img": {
"type": "string",
"title": "img",
"enum": ["#files"]
},
"title": {
"type": "string",
"title": "title"
}
}
}
}
}
}
.fullw { width: 100%; }
.shadow {
/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
box-shadow: 1px 1px 16px 1px rgba(76,76,76,0.87);
}
.popup {
z-index: 9;
background-color: #f1f1f1;
text-align: center;
}
/*Drgable */
.popup {
position: absolute;
/*resize: both; !*enable this to css resize*! */
overflow: auto;
}
.popup-header {
cursor: move;
z-index: 10;
/* background-color: #2196f3;*/
color: #fff;
}
/*Resizeable*/
.popup .resizer-right {
width: 4px;
height: 100%;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: e-resize;
}
.popup .resizer-bottom {
width: 100%;
height: 4px;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: n-resize;
}
.popup .resizer-both {
width: 15px;
height: 15px;
background: transparent;
z-index: 10;
position: absolute;
right: 0;
bottom: 0;
cursor: nw-resize;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.animated {
animation-duration: .2s;
}
var cc_data = cc_data || {};
// $('.expose-button').click(_.throttle(function(){
// if(wm.mode === 'expose')
// wm.mode = 'default';
// else
// wm.mode = 'expose';
// return false;
// }, 1000));
// });
var currentZIndex = 100; //TODO reset z index when a threshold is passed
function initDragElement() {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
var popups = document.getElementsByClassName("popup");
var elmnt = null;
for (var i = 0; i < popups.length; i++) {
var popup = popups[i];
var header = getHeader(popup);
popup.onmousedown = function() {
this.style.zIndex = "" + ++currentZIndex;
};
if (header) {
header.parentPopup = popup;
header.onmousedown = dragMouseDown;
}
}
function dragMouseDown(e) {
elmnt = this.parentPopup;
elmnt.style.zIndex = "" + ++currentZIndex;
e = e || window.event;
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if (!elmnt) {
return;
}
e = e || window.event;
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
function getHeader(element) {
var headerItems = element.getElementsByClassName("popup-header");
if (headerItems.length === 1) {
return headerItems[0];
}
return null;
}
}
function initResizeElement() {
var popups = document.getElementsByClassName("popup");
var element = null;
var startX, startY, startWidth, startHeight;
for (var i = 0; i < popups.length; i++) {
var p = popups[i];
var right = document.createElement("div");
right.className = "resizer-right";
p.appendChild(right);
right.addEventListener("mousedown", initDrag, false);
right.parentPopup = p;
var bottom = document.createElement("div");
bottom.className = "resizer-bottom";
p.appendChild(bottom);
bottom.addEventListener("mousedown", initDrag, false);
bottom.parentPopup = p;
var both = document.createElement("div");
both.className = "resizer-both";
p.appendChild(both);
both.addEventListener("mousedown", initDrag, false);
both.parentPopup = p;
}
function initDrag(e) {
element = this.parentPopup;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(
document.defaultView.getComputedStyle(element).width,
10
);
startHeight = parseInt(
document.defaultView.getComputedStyle(element).height,
10
);
document.documentElement.addEventListener("mousemove", doDrag, false);
document.documentElement.addEventListener("mouseup", stopDrag, false);
}
function doDrag(e) {
element.style.width = startWidth + e.clientX - startX + "px";
element.style.height = startHeight + e.clientY - startY + "px";
}
function stopDrag() {
document.documentElement.removeEventListener("mousemove", doDrag, false);
document.documentElement.removeEventListener("mouseup", stopDrag, false);
}
}
new Vue({
el: '#app',
data: {
bg: cc_data.bg || 'bg.jpg',
bmenu: cc_data.bmenu,
wins: cc_data.wins || [],
iconsl: cc_data.iconsl,
iconsr: cc_data.iconsr,
restored: false
},
created: function () {
var that = this;
if (this.bg) {
document.body.style.backgroundImage = "url('files/" + this.bg + "')";
}
},
mounted: function () {
initDragElement();
initResizeElement();
this.showwindows(false);
},
methods: {
init: function () {
},
showwindows: function (onclick) {
var that = this;
this.wins.forEach(function (w, i) {
if (!!w.openonclick !== !!onclick) { return; }
w.visible = true;
Vue.set(that.wins, i, Object.assign({}, w));
});
Vue.nextTick(function () {
initDragElement();
initResizeElement();
});
console.log(that.wins);
},
}
})
Glisser-déposer des fichiers ou dossiers ici
ou utiliser les boutons ci-dessous
| Nom | Taille | Créé le | Statut | Actions |
|---|