2017-04-07 01:29:05 +02:00
<!-- FIXME modal -->
< div class = "modal" v-if = "(duplicate_folders.length > 0)" v-cloak >
< div class = "modal-wrapper" >
< div class = "modal-dialog" >
< button type = "button" class = "btn btn-icon btn-light btn-round close" v-on:click = "duplicate_folders = []" >
< span class = "icon icon-cross-1" > < / span >
< / button >
< div class = "modal-content" >
< div class = "modal-body labels-inline" >
< div class = "modal-section" >
< div class = "form-group" >
< label >
[[__("duplicate_destination")]]
< / label >
< / div >
< div class = "form-group" >
< select v-on:change = "duplicate_folder_id=$event.target.value" >
< option v-for = "f in duplicate_folders" value = "{{f._id}}" > {{f.name}}< / option >
< / select >
< / div >
< div class = "form-group" >
< button class = "btn btn-md btn-round btn-primary" v-on:click = "duplicate_folder_confirm(); " >
< span class = "icon-label" > [[__("ok")]]< / span >
< / button >
< button class = "btn btn-md btn-round btn-darken pull-right" v-on:click = "duplicate_folders = [];" >
< span class = "icon-label" > [[__("cancel")]]< / span >
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div v-cloak class = "header-left" v-show = "active_space_loaded" >
< div class = "btn-group dark" >
< div class = "pull-left" >
< a
class="btn btn-stroke-darken btn-md btn-round btn-icon"
title="[[__("home")]]" href="/spaces"
v-if="(logged_in & & !embedded & & !active_space.parent_space_id & & !guest_nickname)">
< span class = "icon icon-home" > < / span >
< / a >
< a
class="btn btn-stroke-darken btn-md btn-round btn-icon"
title="[[__("parent_folder")]]"
href="/folders/{{active_space.parent_space_id}}"
v-if="(active_space.parent_space_id & & !guest_nickname)">
< span class = "icon icon-arrow-left-light" > < / span >
< / a >
< input class = "input input-md input-transparent w-auto"
id="space-title"
v-model="active_space.name" name="title" v-on:keydown="save_space_keydown($event)"
v-if="space_editing_title & & logged_in" style="padding-right:0" v-focus>
< span class = "input input-md input-transparent w-auto"
v-if="!space_editing_title & & logged_in"
v-on:click="edit_space_title()">{{active_space.name}}< / span >
< span v-if = "!logged_in" class = "btn btn-dark btn-round btn-md" > {{active_space.name}}< / span >
< button class = "btn btn-md btn-transparent btn-icon" v-if = "space_editing_title" v-on:click = "save_space_keydown()" >
< span class = "icon icon-check" > < / span >
< / button >
< div class = "dropdown top left light" v-bind:class = "{open: active_dropdown=='space'}" >
< button class = "btn btn-md btn-icon btn-dark" v-on:click = "activate_dropdown('space')" >
< span class = "icon icon-triangle-down" > < / span > < / button >
< div class = "dropdown-menu" role = "menu" >
< ul class = "select-list" >
< li v-on:click = "activate_access()" v-if = "logged_in" >
< span >
< span class = "icon icon-sm icon-share" > < / span >
< span > [[ __('share') ]]< / span >
< / span >
< / li >
< li v-on:click = "edit_space_title()" v-if = "logged_in" >
< span >
< span class = "icon icon-sm icon-tag" > < / span >
< span > [[ __('rename') ]]< / span >
< / span >
< / li >
< li v-on:click = "duplicate_space_into_folder()" v-if = "logged_in" >
< span >
< span class = "icon icon-sm icon-duplicate" > < / span >
< span > [[ __('duplicate') ]]< / span >
< / span >
< / li >
< li v-on:click = "download_space()" >
< span >
< span class = "icon icon-sm icon-download" > < / span >
< span > [[ __('download_space') ]]< / span >
< / span >
< / li >
< li v-on:click = "activate_modal('support')" v-if = "logged_in" >
< span >
< span class = "icon icon-sm icon-info" > < / span >
< span > [[ __('support') ]]< / span >
< / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< span class = "btn btn-red btn-md" id = "offline-indicator" v-bind:class = "{offline: was_offline}" v-on:click = "show_offline_help()" > [[__("offline")]]< / span >
< / div >
< div v-cloak class = "header-right" v-if = "active_space_loaded" >
< span v-for = "active_user in active_space_users" >
< button
class="member btn btn-md btn-round"
v-cloak
v-bind:class="{'btn-dark': !active_user.avatar_thumb_uri}"
v-bind:style="{'background-image': 'url('+active_user.avatar_thumb_uri+')'}"
v-bind:title="active_user.nickname + ' is online'">
{{active_user.nickname}}
< / button >
< / span >
< div class = "btn-group dark" v-if = "active_space_role!='viewer'" >
< button class = "btn btn-md btn-transparent btn-icon" title = "Start Presentation (others follow what you see)" v-on:click = "toggle_present_mode()" v-bind:class = "{open:present_mode}" >
< span class = "icon icon-presentation" > < / span >
< / button >
< / div >
< div class = "btn-group dark round" v-if = "zones.length" >
< button class = "btn btn-md btn-transparent btn-icon" v-on:click = "go_to_previous_zone()" title = "[[__(" Previous Zone " ) ] ] " >
< span class = "icon icon-triangle-4-left" > < / span >
< / button >
< button class = "btn btn-md btn-divider" > < / button >
< button class = "btn btn-md btn-transparent btn-icon" v-on:click = "go_to_next_zone()" title = "[[__(" Next Zone " ) ] ] " >
< span class = "icon icon-triangle-4-right" > < / span >
< / button >
< / div >
<!-- button class="btn btn - md btn - dark btn - round btn - icon" v - on:click="download_space()" title="[[__("download_space")]]">
< span class = "icon icon-download" > < / span >
< / button-- >
< div class = "btn-group dark" id = "meta-toggle" style = "margin-right:10px" >
< button class = "btn btn-md btn-transparent btn-icon" v-on:click = "toggle_meta()" title = "[[__(" chat " ) ] ] " >
< span class = "jewel" style = "color: white; background-color: red" v-if = "meta_unseen>0" > {{meta_unseen}}< / span >
< span class = "icon icon-messages" > < / span >
< / button >
< / div >
< / div >
{% include "./tool/toolbar-elements.html" %}
{% include "./tool/toolbar-object.html" %}
< div v-if = "active_space && active_space_loaded" >
< div id = "lasso" > < / div >
< div class = "snap-ruler-h" v-bind:style = "{top:snap_ruler_y+'px'}" > < / div >
< div class = "snap-ruler-v" v-bind:style = "{left:snap_ruler_x+'px'}" > < / div >
< div class = "space-empty" v-cloak v-if = "active_view == 'space' && !present_mode && active_space_artifacts.length == 0" >
< div class = "table-fake" >
< div class = "cell" >
< p > Click anywhere to add content.< br >
You can also drop images, sounds and video< br >
or use copy and paste.< / p >
< / div >
< / div >
< / div >
< / div >
< div id = "space-loading" v-cloak v-bind:class = "{active:loading_space_id, active:global_spinner}" >
< div >
< div class = "spinner" > < / div >
< / div >
< / div >
< div id = "space" v-cloak
v-if="active_view == 'space' & & active_space_loaded"
class="section board active mouse-{{mouse_state}} tool-{{active_tool}}"
2018-04-11 19:59:18 +02:00
v-bind:style="{'background-color': active_space.background_color}"
2017-04-07 01:29:05 +02:00
v-sd-droppable="handle_data_drop;active_space"
v-sd-whiteboard
v-on:scroll="handle_scroll"
v-on:dblclick="handle_space_doubleclick">
< div id = "space-clipboard" style = "position:fixed;top:0;left:0;z-index:0;opacity:0;background-color:white" > < textarea v-model = "selected_artifacts_json" cols = "2" rows = "2" id = "clipboard-ta" class = "mousetrap" > < / textarea > < / div >
2018-04-11 19:59:18 +02:00
< div class = "space-bounds" v-bind:style = "{width: active_space.width*bounds_zoom + 'px', height: active_space.height*bounds_zoom + 'px', 'background-color': active_space.background_color}" > < / div >
2017-04-07 01:29:05 +02:00
< div class = "wrapper"
v-bind:style="{
transform: 'scale('+viewport_zoom+')',
'transform-origin': '0 0',
2018-04-11 19:59:18 +02:00
width: active_space.width + 'px',
height: active_space.height + 'px',
'background-image': (active_space.background_uri)?'url(' + active_space.background_uri + ')':'',
'background-color': ''+active_space.background_color,
2017-04-07 01:29:05 +02:00
'margin-left': bounds_margin_horiz + 'px',
'margin-top': bounds_margin_vert + 'px'}" >
< div v-for = "a in active_space_artifacts"
v-bind:style="a.view.style" v-bind:class="a.view.classes"
v-bind:class="{text-editing:(editing_artifact_id==a._id & & (a.view.major_type=='text' || a.view.major_type=='shape'))}"
id="artifact-{{a._id}}">
< div v-if = "a.view && a.view.major_type" style = "height:100%; width:100%" v-bind:title = "(a.editor_name || (a.user && a.user.nickname) || '')" >
< span v-if = "a.locked && is_selected(a)" class = "link-wrapper" >
< span class = "btn btn-sm btn-icon btn-round btn-primary" >
< span class = "icon icon-lock-closed" > < / span >
< / span >
< / span >
<!-- text -->
< div v-if = "a.view.major_type == 'text'" class = "text" v-bind:style = "a.view.inner_style" >
< div class = "text-table" >
< div class = "text-cell" v-bind:style = "a.view.text_cell_style" >
< div class = "text-column" class = "text-editing" v-sd-richtext:obj = "a" v-show = "editing_artifact_id==a._id" > {{{a.description}}}< / div >
< div class = "text-column" v-show = "editing_artifact_id!=a._id" > {{{a.description|urls_to_links}}}< / div >
< / div >
< / div >
< span v-if = "a.view.link.length>0" class = "link-wrapper" >
< a class = "link btn btn-round btn-primary btn-sm" v-if = "a.view.link" v-bind:href = "a.view.link" target = "_blank" > {{a.view.link_caption}}< / a >
< / span >
< div class = "btn btn-xs btn-icon btn-round btn-primary edit" v-show = "editing_artifact_id!=a._id && is_selected(a)" v-on:touchstart = "delayed_edit_artifact($event)" > < span class = "icon icon-pencil" v-on:click = "toggle_selected_artifact_editing(true)" v-on: " touchstart:delayed_edit_artifact ( $ event ) " > < / span > < / div >
< input v-show = "is_selected(a)" type = "text" id = "ios-focuser-{{a._id}}" class = "ios-focuser" >
< / div >
<!-- drawing (annotation) -->
< div v-if = "a.view.major_type == 'vector'" class = "clip" v-bind:style = "a.view.inner_style" >
< div > {{{a.view.vector_svg}}}< / div >
< / div >
<!-- svg shape -->
< div v-if = "a.view.major_type == 'shape'" class = "clip" v-bind:style = "a.view.inner_style" >
< div class = "shape" > {{{a.view.vector_svg}}}< / div >
< div class = "text-table" >
< div class = "text-cell" v-bind:style = "a.view.text_cell_style" >
< div class = "text-column" class = "text-editing" v-sd-richtext:obj = "a" v-show = "editing_artifact_id==a._id" > < / div >
< div class = "text-column" v-show = "editing_artifact_id!=a._id" > {{{a.description|urls_to_links}}}< / div >
< / div >
< / div >
< span v-if = "a.view.link.length>0" class = "link-wrapper" >
< a class = "link btn btn-round btn-primary btn-sm" v-if = "a.view.link" v-bind:href = "a.view.link" target = "_blank" > {{a.view.link_caption}}< / a >
< / span >
< div class = "btn btn-xs btn-icon btn-round btn-primary edit" v-show = "editing_artifact_id!=a._id && is_selected(a)" v-on:touchstart = "delayed_edit_artifact($event)" > < span class = "icon icon-pencil" v-on:click = "toggle_selected_artifact_editing(true)" v-on: " touchstart:delayed_edit_artifact ( $ event ) " > < / span > < / div >
< input v-show = "is_selected(a)" type = "text" id = "ios-focuser-{{a._id}}" class = "ios-focuser" >
< / div >
<!-- svg image -->
< div v-if = "a.view.major_type == 'svg'" class = "svg" v-bind:style = "a.view.inner_style" >
< img v-bind:src = "a.view.payload_uri" > < / img >
< / div >
<!-- image -->
< div v-if = "a.view.major_type == 'image'" class = "image" v-bind:style = "a.view.inner_style + '; background-image: url('+a.view.thumbnail_uri+');'" >
< span class = "title" > {{a.title}}< / span >
< div class = "spinner" > < / div >
< div class = "progress" v-bind:style = "{width: a.view.progress+'%'}" > < / div >
< div class = "progress-text" > {{a.description}}< / div >
< video v-if = "a.mime == 'image/gif' && a.payload_alternatives && a.payload_alternatives.length > 0" preload autoplay loop >
< source v-for = "rep in a.payload_alternatives" v-bind:src = "rep.payload_uri" v-bind:type = "rep.mime" / >
< / video >
< a class = "btn btn-md btn-icon btn-round btn-primary edit"
v-show="a.mime == 'application/pdf'"
v-bind:href="a.payload_uri" target="_blank"
>< span class = "icon icon-link" > < / span > < / a >
< span v-if = "a.view.link.length>0" class = "link-wrapper" >
< a class = "link btn btn-round btn-primary btn-sm" v-if = "a.view.link" v-bind:href = "a.view.link" target = "_blank" > {{a.view.link_caption}}< / a >
< / span >
< / div >
<!-- video -->
< div v-if = "a.view.major_type == 'video'" v-videoplayer = "a" class = "video" v-bind:style = "a.view.inner_style + ';background-image: url('+a.view.thumbnail_uri+');'" >
< video preload = "metadata" v-bind:poster = "a.view.thumbnail_uri" >
< source v-for = "rep in a.payload_alternatives" v-bind:src = "rep.payload_uri" v-bind:type = "rep.mime" / >
< source v-if = "a.payload_uri && a.mime" v-bind:src = "a.payload_uri" v-bind:type = "a.mime" / >
< / video >
< div class = "tl-controls" >
< div class = "btn btn-md btn-toggle btn-round" v-bind:class = "{alt:a.player_view.state=='playing'}" >
< span class = "btn-option play" >
< span class = "icon icon-controls-play" > < / span >
< / span >
< span class = "btn-option pause" >
< span class = "icon icon-controls-pause" > < / span >
< / span >
< / div >
< span class = "btn btn-md btn-round btn-icon stop" v-show = "a.player_view.state=='playing' || a.player_view.state=='paused'" >
< span class = "icon icon-controls-stop" > < / span >
< / span >
< / div >
< div class = "spinner" > < / div >
< div class = "progress" v-bind:style = "{width: a.view.progress+'%'}" > {{a.description}}< / div >
< / div >
<!-- audio -->
< div v-if = "a.view.major_type == 'audio'" v-audioplayer = "a" class = "audio" v-bind:style = "a.view.inner_style" >
< audio >
< source v-for = "alt in a.payload_alternatives | orderBy 'mime' -1" v-bind:src = "alt.payload_uri" v-bind:type = "alt.mime" / >
< source v-bind:src = "a.payload_uri" v-bind:type = "a.mime" v-if = "a.payload_uri" / >
< / audio >
2018-04-11 19:59:18 +02:00
< div class = "timeline" v-show = "a.h>=64 && a.w>=170" v-bind:style = "{'background-image': 'url(' + a.payload_thumbnail_web_uri +')'}" >
2017-04-07 01:29:05 +02:00
< div class = "tl-current-time" v-bind:style = "{width: a.player_view.current_time_float*100 + '%'}" > < / div >
< div class = "tl-inpoint" v-bind:style = "{left: a.player_view.inpoint_float*100 + '%'}" v-if = "a.player_view.inpoint_float>0.0" > < / div >
< div class = "tl-outpoint" v-bind:style = "{left: a.player_view.outpoint_float*100 + '%'}" > < / div >
< / div >
< div class = "tl-controls" >
< div class = "btn btn-md btn-toggle btn-round" v-bind:class = "{alt:a.player_view.state=='playing'}" >
< span class = "btn-option play" >
< span class = "icon icon-controls-play" > < / span >
< / span >
< span class = "btn-option pause" >
< span class = "icon icon-controls-pause" > < / span >
< / span >
< / div >
< span class = "btn btn-md btn-round btn-icon stop" v-show = "a.player_view.state=='playing' || a.player_view.state=='paused'" >
< span class = "icon icon-controls-stop" > < / span >
< / span >
2018-04-11 19:59:18 +02:00
< span class = "tl-title" v-show = "a.w>=400" > {{a.view.filename}}< / span >
2017-04-07 01:29:05 +02:00
< span class = "tl-times" class = "btn-group" >
< span class = "btn btn-md btn-transparent no-p" > {{a.player_view.current_time_string}}< / span >
2018-04-11 19:59:18 +02:00
< span class = "btn btn-md btn-transparent no-p" v-show = "a.w>=170" > / {{a.player_view.total_time_string}}< / span >
2017-04-07 01:29:05 +02:00
< / span >
2018-04-11 19:59:18 +02:00
< span v-show = "logged_in && a.w>=310" >
2017-04-07 01:29:05 +02:00
< a class = "btn btn-xs btn-round btn-icon set-inpoint" title = "Set Inpoint at Playhead" >
< span class = "icon icon-edge-left" > < / span >
< / a >
< a class = "btn btn-xs btn-round btn-icon set-outpoint" title = "Set Outpoint at Playhead" >
< span class = "icon icon-edge-right" > < / span >
< / a >
< a class = "btn btn-xs btn-round btn-icon reset-points" title = "Reset In-/Outpoints" >
< span class = "icon icon-size-horizontal" > < / span >
< / a >
< / span >
< / div >
< div class = "spinner" > < / div >
< div class = "progress" v-bind:style = "{width: a.view.progress + '%'}" > {{a.description}}< / div >
< / div >
<!-- zone -->
< div v-if = "a.view.major_type == 'zone'" class = "zone" v-bind:style = "a.view.inner_style" >
< div class = "text-cell" >
< div class = "text-column" class = "text-editing" v-sd-richtext:obj = "a" v-show = "editing_artifact_id==a._id" > < / div >
< div class = "text-column" v-show = "editing_artifact_id!=a._id" > {{{a.description|urls_to_links}}}< / div >
< / div >
< / div >
<!-- embed -->
< div v-if = "a.view.major_type == 'oembed'" class = "oembed"
v-bind:style="{'background-image': 'url('+a.view.thumbnail_uri+')'}"
v-bind:class="{interactive:(a.view.interactive || present_mode)}">
{{{a.view.oembed_html}}}
< button class = "btn btn-icon btn-primary btn-round interact" v-on:click = "a.view.interactive=1" v-if = "!a.view.interactive && !present_mode" > < span class = "icon icon-tool-pointer" > < / span > < / button >
< / div >
<!-- file -->
< div v-if = "a.view.major_type == 'file'" class = "text" v-bind:style = "a.view.inner_style" >
< span class = "icon icon-page-vertical-double" > < / span >
{{a.view.filename}}
< div class = "spinner" > < / div >
< / div >
< / div >
< / div >
<!-- board artifacts end -->
< div
class="handles handles-object"
v-bind:class="{'handles-vector':selection_metrics.vector_selection}"
v-bind:style="selection_metrics.style">
< div class = "handle resize-nw" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-n" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-ne" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-e" > < div > < div > < div >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-se" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-s" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-sw" > < div > < div > < div >
< span class = "value-h" > {{selection_metrics.h}}< / span >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "handle resize-w" > < div > < div > < div >
< span class = "value-w" > {{selection_metrics.w}}< / span >
< / div > < / div > < / div > < / div >
< div class = "edge-handle resize-n" > < span class = "value-h" > {{selection_metrics.h}}< / span > < / div >
< div class = "edge-handle resize-s" > < span class = "value-h" > {{selection_metrics.h}}< / span > < / div >
< div class = "edge-handle resize-e" > < span class = "value-w" > {{selection_metrics.w}}< / span > < / div >
< div class = "edge-handle resize-w" > < span class = "value-w" > {{selection_metrics.w}}< / span > < / div >
< div
v-bind:style="selection_metrics.vector_style" v-show="selection_metrics.vector_points">
< span v-for = "p in selection_metrics.vector_points" v-bind:style = "{left: p.dx+'px', top: p.dy+'px'}" class = "vector-handle" data-idx = "{{$index}}" > < / span >
< / div >
< / div >
<!-- handles end -->
< div class = "cursor" v-for = "c in user_cursors" v-bind:style = "{left: c.x + 'px', top: c.y+'px'}" > < span class = "btn btn-round btn-sm btn-dark" > < span class = "icon icon-tool-pointer" > < / span > {{c.name}}< / div >
< / div >
<!-- wrapper end -->
< / div >
< div v-if = "active_space_loaded" v-cloak >
< div id = "minimap"
2018-04-11 19:59:18 +02:00
v-bind:style="{width: ''+(active_space.width/minimap_scale)+'px', height: ''+(active_space.height/minimap_scale)+'px', bottom: '66px', right: '20px'}"
2017-04-07 01:29:05 +02:00
v-if="active_space"
v-on:mousedown="handle_minimap_mousedown($event)"
v-on:touchstart="handle_minimap_mousedown($event)"
v-on:mousemove="handle_minimap_mousemove($event)"
v-on:touchmove="handle_minimap_mousemove($event)"
v-on:mouseleave="handle_minimap_mouseup($event)"
v-on:touchend="handle_minimap_mouseup($event)"
v-on:mouseup="handle_minimap_mouseup($event)">
2018-04-11 19:59:18 +02:00
< div v-for = "a in active_space_artifacts" v-bind:style = "{left: ''+(a.x/minimap_scale)+ 'px', top: ''+(a.y/minimap_scale) + 'px', width: ''+(a.w/minimap_scale)+ 'px', height: ''+(a.h/minimap_scale) + 'px'}" > < / div >
2017-04-07 01:29:05 +02:00
< div class = "window" v-bind:style = "{left: ''+(scroll_left/minimap_scale) + 'px', top: ''+(scroll_top/minimap_scale)+ 'px', width: ''+(window_width/minimap_scale)+ 'px', height: ''+(window_height/minimap_scale) + 'px'}" > < / div >
< / div >
< div class = "btn-group dark" style = "position:absolute;bottom:20px;right:20px;" >
< button class = "btn btn-icon btn-md btn-transparent" v-on:click = "zoom_in()" >
< span class = "icon icon-plus" > < / span >
< / button >
< button class = "btn btn-md btn-transparent no-p" v-on:click = "zoom_to_original()" >
{{viewport_zoom_percent}}%
< / button >
< button class = "btn btn-icon btn-md btn-transparent" v-on:click = "zoom_out()" >
< span class = "icon icon-minus" > < / span >
< / button >
< / div >
< / div >
