Commit 44af6dfb authored by gijs's avatar gijs

PDF Display

parent 50fc2be2
......@@ -23,8 +23,8 @@
--color-11: rgb(200,41,107);/*#b026bc;*/
--color-12: rgb(171,29,255);/*#871dff;*/
--row-indent: 70px;
--axis-line-offset: 30px;
--row-indent: 50px;
--axis-line-offset: 25px;
--axis-line-width: 2px;
--axis-bottom-padding: 1em;
--axis-tag-size: 1.8em;
......@@ -384,8 +384,8 @@ section.hidden { display: none; }
.panel--score-meta .content {
font-size: 85%;
padding: 90px 30px 30px 40px;
width: 330px;
padding: 90px 15px 30px 40px;
width: 280px;
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 90px);
......@@ -393,7 +393,7 @@ section.hidden { display: none; }
.panel--score-meta {
position: relative;
flex: 0 0 400px;
flex: 0 0 335px;
transition: flex-basis .2s;
overflow-x: hidden;
background: var(--background-color);
......@@ -660,7 +660,6 @@ section.hidden { display: none; }
#axis-wrapper {
/* overflow: auto; */
padding: 0 0 0 var(--axis-line-offset);
flex: 1;
font-size: var(--font-size);
}
......@@ -717,7 +716,7 @@ li li { padding-left: var(--row-indent); }
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end))
}
},
[data-collapsed="false"]>.axis-row [name="toggle"]:before { content: "▼"; }
......@@ -817,7 +816,7 @@ ol ol::after {
display: inline-block;
vertical-align: middle;
background-color: var(--row-color);
padding: .25em .5em;
padding: .35em .5em .15em .5em;
text-transform: lowercase;
}
......@@ -1057,10 +1056,12 @@ li + li .alt-symbol { display: none; }
}
.axis-title {
position: relative;
}
.axis-title, .attachment--view {
font-size: 140%;
text-transform: lowercase;
/* vertical-align: bottom; */
position: relative;
}
.axis-title-edit { text-transform: uppercase; }
......@@ -1073,26 +1074,11 @@ li + li .alt-symbol { display: none; }
/* axe modulé : le nom de l’axe est souligné */
[data-module="true"] > .axis-row > .axis-row--background-wrapper > .axis-row--body > .axis-title {
/* text-decoration: underline; */
font-style: italic;
/* color: var(--background-color); */
}
/*
[data-contingent="true"]>.axis-row>.axis-row--body>.axis-title{
text-decoration: line-through;
} */
[data-alternative] > ol > .axis > .axis-row > .axis-row--background-wrapper > .axis-row--body,
[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .axis-row--body {
/* position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
border-bottom: 2px solid white;
content: ""; */
/* background: repeating-linear-gradient(-80deg, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 5px), var(--row-color); */
background: repeating-linear-gradient(-45deg, var(--background-color) 0px, var(--background-color) 2px, transparent 2px, transparent 5px), var(--row-color);
}
......@@ -1173,12 +1159,15 @@ li + li .alt-symbol { display: none; }
position: absolute;
z-index: 2;
display: none;
width: calc(30vw - var(--indent));
max-width: 500px;
min-width: 200px;
padding: .75em;
color: white;
background: var(--row-color);
top: 0;
padding-left: 1em;
white-space: normal;
}
/* .condition:hover .full, */
......@@ -1270,57 +1259,54 @@ li + li .alt-symbol { display: none; }
}
.attachment--view--pdf .attachment--pdf--full,
.attachment--view--image .attachment--image--full {
position: fixed;
top: 0;
right: 0;
bottom: 0;
position: absolute;
top: 2em;
left: 0;
display: none;
flex-direction: column;
z-index: 4;
background-color: var(--background-color);
}
.attachment--image--full--title {
flex: 0 0 auto;
padding: .5em;
}
.attachment--image--full--image {
flex: 1 0 auto;
text-align: center;
overflow: hidden;
.attachment--view--pdf[data-opened="true"] .attachment--pdf--full,
.attachment--view--image[data-opened="true"] .attachment--image--full {
display: block;
}
.attachment--view--image[data-opened="true"] .attachment--image--full {
display: flex;
.attachment--image--full img {
max-width: calc(75vw - var(--indent));
max-height: 80vh;
}
.attachment--image--full--image img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
.attachment--pdf--full iframe {
width: calc(75vw - var(--indent));
height: 80vh;
}
.attachment--pdf--full .btn--close,
.attachment--image--full .btn--close {
position: absolute;
top: 0;
right: 0;
left: 100%;
margin-top: 0;
}
/* Exemptions for the first axis
========================================================================== */
/* #axis-wrapper { --row-color: var(--background-color-button); } */
#axis-wrapper > ol > li.axis,
#axis-wrapper > ol > li > .axis-row > .axis-row--background-wrapper,
#axis-wrapper > ol
/* #axis-wrapper > ol > li > .axis-row > .axis-row--background-wrapper > .axis-row--body */ {
background: none;
}
#axis-wrapper > ol > li.axis > .axis-row > .axis-row--background-wrapper > .axis-row--header {
display: none;
}
/* Axis edit form
========================================================================== */
......
......@@ -6,6 +6,10 @@ window.W = window.W || {};
(function(undefined) {
'use strict';
function is_external_link(el) {
return ('external' in el.dataset);
}
W.ScoreApp = new Marionette.Application({
region: 'body',
......@@ -30,7 +34,7 @@ window.W = window.W || {};
$(document).on("click", "a", function(e) {
// Do not interfere with Backbone Paginator.
if (! e.isDefaultPrevented()) {
if (! e.isDefaultPrevented() && !is_external_link(e.target)) {
e.preventDefault(); // This is important
var href = $(e.currentTarget).attr('href');
......
......@@ -518,30 +518,55 @@ window.W = window.W || {};
className: 'attachment--view attachment--view--download',
})
/** Image files, display in lightbox */
W.AttachmentImage = Marionette.View.extend({
tagName: 'section',
template: '#attachment-image-template',
className: 'attachment--view attachment--view--image',
W.AttachmentToggleable = Marionette.View.extend({
ui: {
'close': '.btn--close'
},
events: {
'click @ui.close': 'close',
'click': 'open'
'click': 'toggle'
},
initialize: function () {
this.opened = false;
},
toggle: function(e) {
if (e) {
e.preventDefault();
}
if (this.opened) {
this.close();
} else {
this.open();
}
},
open: function (e) {
if (e) {
e.preventDefault();
}
this.opened = true;
this.el.dataset.opened = true;
},
close: function (e) {
if (e) {
e.stopImmediatePropagation();
}
this.opened = false;
this.el.dataset.opened = false;
}
});
/** Image files */
W.AttachmentImage = W.AttachmentToggleable.extend({
tagName: 'section',
template: '#attachment-image-template',
className: 'attachment--view attachment--view--image',
})
/** PDF */
W.AttachmentPDF = W.AttachmentToggleable.extend({
tagName: 'section',
template: '#attachment-pdf-template',
className: 'attachment--view attachment--view--pdf'
})
/** Audio file, show discrete player in view */
......@@ -638,6 +663,8 @@ window.W = window.W || {};
if (/^data:image\//.test(data)) {
return new W.AttachmentImage({ model: attachment })
} else if ('/data:application\/pdf') {
return new W.AttachmentPDF({ model: attachment })
} else if (/^data:audio\//.test(data)) {
return new W.AttachmentAudio({ model: attachment })
}
......@@ -653,6 +680,14 @@ window.W = window.W || {};
console.log(m, ext)
switch(ext) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
return new W.AttachmentImage({ model: attachment })
case 'pdf':
return new W.AttachmentPDF({ model: attachment })
case 'mp3':
case 'flac':
case 'ogg':
......@@ -662,11 +697,6 @@ window.W = window.W || {};
case 'aac':
return new W.AttachmentAudio({ model: attachment })
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
return new W.AttachmentImage({ model: attachment })
default:
return new W.AttachmentDownload({ model: attachment })
......@@ -978,6 +1008,7 @@ window.W = window.W || {};
'click @ui.titleSpan': 'titleClick',
'click [name="toggle"]': 'toggle',
'click [name="add"]': 'addLine',
'click [name="edit"]': 'toggleForm',
'click [name="delete"]': 'delete',
'click [name="unlink"]': 'unlink',
'change #tag': 'editSiblings',
......
......@@ -34,6 +34,10 @@
{% include "playground/underscore/node-attachment-image.mtpl" %}
</script>
<script id="attachment-pdf-template" type="text/template">
{% include "playground/underscore/node-attachment-pdf.mtpl" %}
</script>
<script id="base-template" type="text/template">
{% include "playground/underscore/base.mtpl" %}
</script>
......
<a href="<%= attachment %>">[<%= title %>]</a>
\ No newline at end of file
<a href="<%= attachment %>" data-external download>[<%= title %>]</a>
\ No newline at end of file
<a href="<%= attachment %>">[<%= title %>]</a>
<div class="attachment--image--full">
<div class="attachment--image--full--title">
<h6><%= title %></h6>
<button class="btn--close">x</button>
</div>
<div class="attachment--image--full--image">
<img src="<%= attachment %>" />
</div>
<button class="btn--close">x</button>
<img src="<%= attachment %>" />
</div>
\ No newline at end of file
<a href="<%= attachment %>">[<%= title %>]</a>
<div class="attachment--pdf--full">
<button class="btn--close">x</button>
<iframe src="<%= attachment %>"></iframe>
</div>
\ No newline at end of file
......@@ -82,6 +82,7 @@
<% if (isLink) { %>
<button name="unlink"><%- t('rompre le lien') %></button>
<% } else { %>
<button name="edit" title="Modifier cet axe">⋯</button>
<button name="add" title="Ajoute un sous-axe">+</button>
<% } %>
<button name="delete" title="Supprimer cet axe (et tous ses sous-axes)">x</button>
......
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