<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 light 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> <!--div class="btn-group light" 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>Use the toolbar to add content.<br> You can also drop images or sound and video files.</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.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.width*bounds_zoom+1000) + 'px', height: (active_space.height*bounds_zoom+1000) + 'px', 'background-color': active_space.background_color}"></div> <div class="wrapper" v-bind:style="{ transform: 'scale('+viewport_zoom+')', 'transform-origin': '0 0', 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, '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> <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> <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> <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.h>=64 && a.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.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.w>=170"> / {{a.player_view.total_time_string}}</span> </span> <span v-show="logged_in && a.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.width/minimap_scale)+'px', height: ''+(active_space.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.x/minimap_scale)+ 'px', top: ''+(a.y/minimap_scale) + 'px', width: ''+(a.w/minimap_scale)+ 'px', height: ''+(a.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 light zoom-bar"> <button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()"> <span class="icon icon-plus"></span> </button> <button class="btn btn-md btn-white no-p" v-on:click="zoom_to_original()"> {{viewport_zoom_percent}}% </button> <button class="btn btn-icon btn-md btn-white" v-on:click="zoom_out()"> <span class="icon icon-minus"></span> </button> </div> </div>