spacedeck-open/views/partials/space.html
2017-04-07 01:29:05 +02:00

494 lines
22 KiB
HTML

<!-- 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}}"
v-bind:style="{'background-color': active_space.advanced.background_color}"
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>
<div class="space-bounds" v-bind:style="{width: active_space.advanced.width*bounds_zoom + 'px', height: active_space.advanced.height*bounds_zoom + 'px', 'background-color': active_space.advanced.background_color}"></div>
<div class="wrapper"
v-bind:style="{
transform: 'scale('+viewport_zoom+')',
'transform-origin': '0 0',
width: active_space.advanced.width + 'px',
height: active_space.advanced.height + 'px',
'background-image': (active_space.advanced.background_uri)?'url(' + active_space.advanced.background_uri + ')':'',
'background-color': ''+active_space.advanced.background_color,
'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>
<div class="timeline" v-show="a.board.h>=64 && a.board.w>=170" v-bind:style="{'background-image': 'url(' + a.payload_thumbnail_web_uri +')'}">
<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>
<span class="tl-title" v-show="a.board.w>=400">{{a.view.filename}}</span>
<span class="tl-times" class="btn-group">
<span class="btn btn-md btn-transparent no-p">{{a.player_view.current_time_string}}</span>
<span class="btn btn-md btn-transparent no-p" v-show="a.board.w>=170"> / {{a.player_view.total_time_string}}</span>
</span>
<span v-show="logged_in && a.board.w>=310">
<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"
v-bind:style="{width: ''+(active_space.advanced.width/minimap_scale)+'px', height: ''+(active_space.advanced.height/minimap_scale)+'px', bottom: '66px', right: '20px'}"
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)">
<div v-for="a in active_space_artifacts" v-bind:style="{left: ''+(a.board.x/minimap_scale)+ 'px', top: ''+(a.board.y/minimap_scale) + 'px', width: ''+(a.board.w/minimap_scale)+ 'px', height: ''+(a.board.h/minimap_scale) + 'px'}"></div>
<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>