Commit 3545523a authored by Fabian-Andree Heidemann's avatar Fabian-Andree Heidemann
Browse files

[Dialog] outsource gallery to gallery extension

[UI] remove .gallery shortcut
[file] use gallery extension
[codeeditor] user gallery extension
parent aec459fd
......@@ -254,7 +254,8 @@ define(["jquery", "emitter", "text!../html/preview.html"], function($, Emitter,
return;
previewArray.push({ title: data.title, src: data.srcFull });
});
self.view.gallery(previewArray);
// self.view.gallery(previewArray);
self.view.spawnInstance("gallery", "Gallery", {items: previewArray});
});
} else {
......
......@@ -101,15 +101,9 @@ define([
$.each(self.FileBase.workflow.galleryFiles, function (i, item) {
if (item.title == data) index = i;
});
self.FileBase.instance.gallery(self.FileBase.workflow.galleryFiles, {
index: index,
onRender: function () {
self.FileBase.workflow.galleryDialog = this;
},
beforeClose: function (cb) {
self.FileBase.workflow.galleryDialog = null;
cb();
}
self.FileBase.instance.spawnInstance("gallery", "Gallery", {
items: self.FileBase.workflow.galleryFiles,
index: index
});
} else {
var a = $(openTmpl)
......
......@@ -78,7 +78,6 @@ define(function() {
value: "left",
callback: function(event) {
event.preventDefault();
if (this.fb.workflow.galleryDialog) return;
this.fb.selections.selectPrevNode();
}
},
......@@ -87,7 +86,6 @@ define(function() {
value: "right",
callback: function(event) {
event.preventDefault();
if (this.fb.workflow.galleryDialog) return;
this.fb.selections.selectNextNode();
}
},
......@@ -96,7 +94,6 @@ define(function() {
value: "down",
callback: function(event) {
event.preventDefault();
if (this.fb.workflow.galleryDialog) return;
if (this.fb.workflow.currentView.type == "Table") {
this.fb.selections.selectNextNode();
} else {
......@@ -115,7 +112,6 @@ define(function() {
value: "up",
callback: function(event) {
event.preventDefault();
if (this.fb.workflow.galleryDialog) return;
if (this.fb.workflow.currentView.type == "Table") {
this.fb.selections.selectPrevNode();
} else {
......@@ -191,7 +187,6 @@ define(function() {
value: "esc",
callback: function(event) {
event.preventDefault();
if (this.fb.workflow.galleryDialog) return;
this.fb.selections.unselectAll();
this.fb.view.filterField.css({
"visibility": "hidden"
......
# -*- coding: utf-8 -*-
import cherrypy
from vispa.server import AbstractExtension
from vispa.controller import AbstractController
class GalleryController(AbstractController):
pass
class GalleryExtension(AbstractExtension):
def name(self):
return 'gallery'
def dependencies(self):
return []
def setup(self):
self.add_controller(GalleryController())
.vispa-modal>.gallery>.modal-content{max-width:none;width:75%;max-height:none;height:calc(100% - 20px);display:block}
.vispa-modal>.gallery>.modal-content>.modal-header #new-window{font-size:inherit;border:none}
.vispa-modal>.gallery>.modal-content>.modal-body{height:calc(100% - 89px);-webkit-box-flex:initial;-webkit-flex:initial;-ms-flex:initial;flex:initial;position:relative}
.vispa-modal>.gallery>.modal-content>.modal-body #next,.vispa-modal>.gallery>.modal-content>.modal-body>#previous{position:absolute;top:0;height:100%;width:30%;z-index:1;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}
.vispa-modal>.gallery>.modal-content>.modal-body #next:hover,.vispa-modal>.gallery>.modal-content>.modal-body>#previous:hover{opacity:1}
.vispa-modal>.gallery>.modal-content>.modal-body #next>button,.vispa-modal>.gallery>.modal-content>.modal-body>#previous>button{position:absolute;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);border-radius:50%;padding:6px 9px}
.vispa-modal>.gallery>.modal-content>.modal-body>#previous{left:0}
.vispa-modal>.gallery>.modal-content>.modal-body>#previous>button{left:5px}
.vispa-modal>.gallery>.modal-content>.modal-body>#next{right:0}
.vispa-modal>.gallery>.modal-content>.modal-body>#next>button{right:5px}
.vispa-modal>.gallery>.modal-content>.modal-body iframe,.vispa-modal>.gallery>.modal-content>.modal-body>img{padding:15px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.vispa-modal>.gallery>.modal-content>.modal-body>img{max-width:100%;max-height:100%}
.vispa-modal>.gallery>.modal-content>.modal-body>iframe{width:100%;height:100%;border:initial}
\ No newline at end of file
.vispa-modal > .gallery > .modal-content {
max-width: none;
width: 75%;
max-height: none;
height: calc(~"100% - 20px");
display: block;
> .modal-header {
& #new-window {
font-size: inherit;
border: none;
}
}
> .modal-body {
height: calc(~"100% - 89px");
flex: initial;
position: relative;
> #previous, #next {
position: absolute;
top: 0px;
height: 100%;
width: 30%;
z-index: 1;
opacity: 0.0;
transition: opacity 0.5s;
&:hover {
opacity: 1.0;
}
> button {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
border-radius: 50%;
padding: 6px 9px;
}
}
> #previous {
left: 0px;
> button {
left: 5px;
}
}
> #next {
right: 0px;
> button {
right: 5px;
}
}
> img, iframe {
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
> img {
max-width: 100%;
max-height: 100%;
}
> iframe {
width: 100%;
height: 100%;
border: initial;
}
}
}
\ No newline at end of file
<div id="previous">
<button class="btn btn-default disabled"><i class="glyphicon glyphicon-step-backward"></i></button>
</div>
<div id="next">
<button class="btn btn-default disabled"><i class="glyphicon glyphicon-step-forward"></i></button>
</div>
\ No newline at end of file
div(id="previous")
button.btn.btn-default.disabled
i.glyphicon.glyphicon-step-backward
div(id="next")
button.btn.btn-default.disabled
i.glyphicon.glyphicon-step-forward
\ No newline at end of file
<i class="glyphicon glyphicon-picture"></i><span id="counter"></span><span id="title"></span>
<button type="button" id="new-window" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-new-window"></i></button>
\ No newline at end of file
i.glyphicon.glyphicon-picture
span(id="counter")
span(id="title")
button.btn.btn-default.btn-xs(type="button", id="new-window")
i.glyphicon.glyphicon-new-window
\ No newline at end of file
define([
"jquery",
"vispa/extensions",
"vispa/views/dialog",
"vispa/common/dialog",
"text!../html/galleryHeader.html",
"text!../html/galleryBody.html",
"css!../css/gallery"
], function ($, extensions, DialogView, Dialog, galleryHeaderTmpl, galleryBodyTmpl) {
var GalleryExtension = extensions.Extension._extend({
init: function init() {
init._super.call(this, "gallery");
this.addView("Gallery", GalleryView);
this.setDefaultShortcuts(GalleryView, {
arrowLeft: {
description: "Navigation in gallery",
value: "left",
callback: function() {
this.previous();
}
},
arrowUp: {
description: "Navigation in gallery",
value: "up",
callback: function() {
this.previous();
}
},
arrowRight: {
description: "Navigation in gallery",
value: "right",
callback: function() {
this.next();
}
},
arrowDown: {
description: "Navigation in gallery",
value: "down",
callback: function() {
this.next();
}
},
escape: {
description: "Close gallery",
value: "esc",
callback: function(event) {
this.close()
}
},
}, {
title: "Gallery"
});
}
});
var GalleryView = DialogView._extend({
init: function init(args) {
init._super.apply(this, arguments);
// parse args
// items
this.items = null;
if (args.items) {
this.items = args.items;
} else if (args.path) {
// a call only with path -> create item
this.items = [{
title: args.path.split("/").pop(),
src: vispa.url.dynamic("fs/getfile/?path=" + args.path +
"&_workspaceId=" + String(this.getWorkspaceId())),
type: args.path.split(".").pop().toLowerCase() == "pdf" ? "iframe" : "img"
}];
} else {
// no information provided
vispa.messenger.alert("No valid file")
}
// index
this.index = args.index || 0;
if (this.index < 0) {
this.index = 0;
} else if (this.index >= this.items.length) {
this.index = this.items.length - 1;
}
// type
this.type = args.type || "img";
// set opts for dialog and delete unnecessary entries
this.opts = args;
delete this.opts.items;
delete this.opts.path;
delete this.opts.index;
delete this.opts.type;
},
// overwrite DialogView loadUI function for manually building dialog
loadUI: function () {
this._dialog = new Dialog();
// default options
this.opts = $.extend(true, {
context: this._base.messageContext,
target: this._base.messageContainer(),
header: $(galleryHeaderTmpl),
body: $(galleryBodyTmpl)
}, this.opts);
// set options and show dialog
this._dialog.setOptions(this.opts);
this.focus();
this.setupCSS();
this.setupEvents();
this.select(this.index);
return this;
},
select: function (index) {
$("img, iframe", this._dialog.$dialog).css("display", "none");
var type = this.items[index].type || this.type;
var $node = $(type + "[index=" + index + "]", this._dialog.$dialog)
if ($node.length == 0) {
var $node = $("<" + type + ">")
$node.attr({
src: this.items[index].src,
index: index
});
$(".modal-body", this._dialog.$dialog).append($node);
} else {
$node.css("display", "inline");
}
$("#title", this._dialog.$dialog).html(this.items[index].title);
$("#counter", this._dialog.$dialog).html(String(index + 1) + "/" + String(this.items.length));
this.index = index;
},
previous: function () {
if (this.index == 0) {
this.select(this.items.length - 1);
} else {
this.select(this.index - 1);
}
},
next: function () {
if (this.index == this.items.length - 1) {
this.select(0);
} else {
this.select(this.index + 1);
}
},
new_window: function () {
window.open(this.items[this.index].src, "_blank");
},
setupEvents: function () {
var self = this;
// header
self.opts.header.filter("#new-window").click(function () {
self.new_window();
});
// body
self.opts.body.filter("#previous").click(function () {
self.previous();
});
self.opts.body.filter("#next").click(function () {
self.next();
});
// close on background click
self._dialog.$dialog.click(function (event) {
if ($(event.target).hasClass("modal-dialog")) self.close();
});
},
setupCSS: function () {
this._dialog.$dialog.toggleClass("vispa-modal", true);
$(".modal-dialog", this._dialog.$dialog).toggleClass("gallery", true);
if (this.items.length <= 1) {
this.opts.body.filter("#previous").css("display", "none");
this.opts.body.filter("#next").css("display", "none");
}
}
});
return GalleryExtension;
});
\ No newline at end of file
......@@ -119,19 +119,6 @@ body>.blocker{visibility:hidden!important;opacity:0!important}
.vispa-centerview-tab-badge span{vertical-align:middle}
.modal{position:absolute;overflow:hidden;margin:0;display:block}
.modal>.modal-dialog{position:relative;height:100%;width:100%;margin:0;overflow:hidden}
.modal>.modal-dialog.vispa-gallery>.modal-content{max-width:none;width:75%;max-height:none;height:calc(100% - 20px);display:block}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-header #new-window{font-size:inherit;border:none}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body{height:calc(100% - 89px);-webkit-box-flex:initial;-webkit-flex:initial;-ms-flex:initial;flex:initial;position:relative}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body #next,.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#previous{position:absolute;top:0;height:100%;width:30%;z-index:1;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body #next:hover,.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#previous:hover{opacity:1}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body #next>button,.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#previous>button{position:absolute;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);border-radius:50%;padding:6px 9px}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#previous{left:0}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#previous>button{left:5px}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#next{right:0}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>#next>button{right:5px}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body iframe,.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>img{padding:15px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>img{max-width:100%;max-height:100%}
.modal>.modal-dialog.vispa-gallery>.modal-content>.modal-body>iframe{width:100%;height:100%;border:initial}
.modal>.modal-dialog>.modal-content{margin:10px auto;min-width:300px;max-width:75%;width:600px;max-height:calc(100% - 20px);overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.modal>.modal-dialog>.modal-content>.modal-footer,.modal>.modal-dialog>.modal-content>.modal-header{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}
.modal>.modal-dialog>.modal-content>.modal-body{overflow-x:hidden;overflow-y:auto;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}
......
......@@ -603,73 +603,6 @@
width: 100%;
margin: 0px;
overflow: hidden;
&.vispa-gallery {
> .modal-content {
max-width: none;
width: 75%;
max-height: none;
height: calc(~"100% - 20px");
display: block;
> .modal-header {
& #new-window {
font-size: inherit;
border: none;
}
}
> .modal-body {
height: calc(~"100% - 89px");
flex: initial;
position: relative;
> #previous, #next {
position: absolute;
top: 0px;
height: 100%;
width: 30%;
z-index: 1;
opacity: 0.0;
transition: opacity 0.5s;
&:hover {
opacity: 1.0;
}
> button {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
border-radius: 50%;
padding: 6px 9px;
}
}
> #previous {
left: 0px;
> button {
left: 5px;
}
}
> #next {
right: 0px;
> button {
right: 5px;
}
}
> img, iframe {
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
> img {
max-width: 100%;
max-height: 100%;
}
> iframe {
width: 100%;
height: 100%;
border: initial;
}
}
}
}
> .modal-content {
margin: 10px auto;
min-width: 300px;
......
......@@ -48,24 +48,6 @@ define(["jquery", "emitter"], function($, Emitter) {
body: "<div class='modal-body'></div>",
footer: "<div class='modal-footer'></div>",
button: "<button type='button' class='btn'></button>",
galleryHeader: "\
<i class='glyphicon glyphicon-picture'></i>\
<span id='counter'></span>\
<span id='title'></span>\
<button type='button' id='new-window' class='btn btn-default btn-xs'>\
<i class='glyphicon glyphicon-new-window'></i>\
</button>",
galleryBody: "\
<div id='previous'>\
<button type='button' class='btn btn-default disabled'>\
<i class='glyphicon glyphicon-step-backward'></i>\
</button>\
</div>\
<div id='next'>\
<button type='button' class='btn btn-default disabled'>\
<i class='glyphicon glyphicon-step-forward'></i>\
</button>\
</div>"
};
......@@ -391,104 +373,6 @@ define(["jquery", "emitter"], function($, Emitter) {
return dialog;
};
Dialog.gallery = function(items, opts) {
var dialog = new Dialog();
// default options
opts = opts || {};
opts = $.extend(true, {
index: 0,
type: "img"
}, opts);
if (opts.index < 0) {
opts.index = 0;
} else if (opts.index >= items.length) {
opts.index = items.length - 1;
}
// actions
dialog.select = function (index) {
$("img, iframe", dialog.$dialog).css("display", "none");
var type = items[index].type || opts.type;
var $node = $(type + "[index=" + index + "]", dialog.$dialog)
if ($node.length == 0) {
var $node = $("<" + type + ">")
$node.attr({
src: items[index].src,
index: index
});
$(".modal-body", dialog.$dialog).append($node);
} else {
$node.css("display", "inline");
}
$("#title", dialog.$dialog).html(items[index].title);
$("#counter", dialog.$dialog).html(String(index + 1) + "/" + String(items.length));
dialog.currentIndex = index;
}
dialog.previous = function () {
if (dialog.currentIndex == 0) {
dialog.select(items.length - 1);
} else {
dialog.select(dialog.currentIndex - 1);
}
}
dialog.next = function () {
if (dialog.currentIndex == items.length - 1) {
dialog.select(0);
} else {
dialog.select(dialog.currentIndex + 1);
}
}
dialog.new_window = function () {
window.open(items[dialog.currentIndex].src, "_blank");
}
// header
opts.header = opts.header || $(tmpl.galleryHeader);
opts.header.filter("#new-window").click(function () {
dialog.new_window();
});
// body
opts.body = opts.body || $(tmpl.galleryBody);
opts.body.filter("#previous").click(function () {
dialog.previous();
});
opts.body.filter("#next").click(function () {
dialog.next();
});
// on show