EVOLUTION-MANAGER

Edit File: raw-wb-area.js

/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */ var PRESENTER = 'PRESENTER'; var WHITEBOARD = 'WHITEBOARD'; var DrawWbArea = function() { const self = BaseWbArea() , arrowImg = new Image(), delImg = new Image(); arrowImg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAICAYAAADqSp8ZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAygAAAMoBawMUsgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFsSURBVCiRrdI/SEJRFMfx37lPGxqKoGwxKJoaImhpCf8NEUFL9WgLUrPnIyEIa6reVEPQn0GeWDS4NDQETQ2JT4waojUoHBqCoJKWINB3720yIhGl+q7ncj5nuIQ6jWiaq1xmU4IwBACQ5GCAU5D8IECRAkUQzt8V++wmlSrX20e1BoFIrFdwHidIIQhH5O68sgzD/vnOF4m0QyijJGgMQIHZtJdJJ4oNg6qqNr20dKwBaOWKvZFPpZ7qXV3JH4wNSMbjJHGZ7XIlYRiiFkiBsL4CphwLwbck5E7uwMw3ClXD2iRImYYUq9lD886nLXZbyd2HL9AbXpglySOQeFVstpRJJ+5/i1UajkbbHCXahMS1ZAiS2+W1DMNmqqoqBLFMYIME1uxkvPRXDAAuTPMNhCwIGiT62eOzAQDkD+nbAjQDxudy+8mT/8C+FwjNjwuwdQnqY7b0kCesT7DC7allWVU/8D/zh3SdC/R8Aq9QhRc3h8LfAAAAAElFTkSuQmCC'; delImg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAAGgrv1cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFAAAA4j094j094j094j094j094j094j094j094j094j094j094j094j094j094j094j09hIdAxgAAABB0Uk5TABAgMEBQYHCAj5+vv8/f7yMagooAAADXSURBVBgZBcEBYoQgDACw1DJETmz//9olwGn6AAAbBxoiSACTpCTtJd02smg+MPoef7UgnpPQeVM42Vg02kl+qAPeE2B19wYAgO83xi6ggRMoBfuvsUSxp+vPjag98VqwC8oI9ozC5rMnUVbw5ITID94Fo4D4umsAwN/+urvfOwDg6d8FiFUnALPnkwCs6zvg+UKcSmD3ZBWyL4hTye4J3s16AXG6J+D+uD/A7vtUAutFT9g9EacSURNX33ZPQJzKqAW8lQCIXyWAVfUM5Hz7vQAAMcZIAP9DvgiOL2K6DwAAAABJRU5ErkJggg=='; let container, area, tabs, scroll, role = NONE, _inited = false; // Fabric overrides (should be kept up-to-date on fabric.js updates) if ('function' !== typeof(window.originalDrawControl)) { window.originalDrawControl = fabric.Object.prototype._drawControl; window.originalGetRotatedCornerCursor = fabric.Canvas.prototype._getRotatedCornerCursor; window.originalGetActionFromCorner = fabric.Canvas.prototype._getActionFromCorner; window.originalGetCornerCursor = fabric.Canvas.prototype.getCornerCursor; fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top, styleOverride) { switch (control) { case 'mtr': { const x = left + (this.cornerSize - arrowImg.width) / 2 , y = top + (this.cornerSize - arrowImg.height) / 2; ctx.drawImage(arrowImg, x, y); } break; case 'tr': { if (role === PRESENTER) { const x = left + (this.cornerSize - delImg.width) / 2 , y = top + (this.cornerSize - delImg.height) / 2; ctx.drawImage(delImg, x, y); } else { window.originalDrawControl.call(this, control, ctx, methodName, left, top, styleOverride); } } break; default: window.originalDrawControl.call(this, control, ctx, methodName, left, top, styleOverride); break; } }; fabric.Canvas.prototype._getRotatedCornerCursor = function(corner, target, e) { if (role === PRESENTER && 'tr' === corner) { return 'pointer'; } return window.originalGetRotatedCornerCursor.call(this, corner, target, e); }; fabric.Canvas.prototype._getActionFromCorner = function(alreadySelected, corner, e) { if (role === PRESENTER && 'tr' === corner) { _performDelete(); return 'none'; } return window.originalGetActionFromCorner.call(this, alreadySelected, corner, e); }; fabric.Canvas.prototype.getCornerCursor = function(corner, target, e) { if (role === PRESENTER && 'tr' === corner) { return 'pointer'; } return window.originalGetCornerCursor.call(this, corner, target, e); } } function getActive() { const tab = tabs.find('.wb-tab-content .wb-tab.active'); if (tab.length === 1) { return tab; } return null; } function _performDelete() { const wb = getActive().data() , canvas = wb.getCanvas(); if (role !== PRESENTER || !canvas) { return true; } const arr = [], objs = canvas.getActiveObjects(); for (let i = 0; i < objs.length; ++i) { arr.push({ uid: objs[i].uid , slide: objs[i].slide }); } OmUtil.wbAction({action: 'deleteObj', data: { wbId: wb.id , obj: arr }}); return false; } function _deleteHandler(e) { if ('BODY' === e.target.tagName) { switch (e.which) { case 8: // backspace case 46: // delete e.preventDefault(); e.stopImmediatePropagation(); return _performDelete(); default: //no-op } } } function _activateTab(wbId) { const link = _getWbTab(wbId); if (link.length > 0) { link.tab('show'); if (role !== PRESENTER) { $('.wb-tabbar ul.nav-tabs a.nav-link').removeClass('active'); link.addClass('active'); $('.wb-tab-content .wb-tab').removeClass('active'); $('#' + link.attr('aria-controls')).addClass('active'); } link[0].scrollIntoView(); } } function _setTabName(link, name) { return link.attr('title', name) .find('span').text(name) } function _getWbTab(wbId) { return $('#' + __getWbTabId(wbId)); } function _getWbContent(wbId) { return $('#' + __getWbContentId(wbId)); }; function _renameTab(obj) { _setTabName(_getWbTab(obj.wbId), obj.name); } function _addCloseBtn(li) { if (role !== PRESENTER || li.find('button').length > 0) { return; } const link = li.find('a') , wbId = link.data('wb-id'); // Apply right click menu only to the text item li.find(".nav-link").find("span").first().contextmenu( function(e) { e.preventDefault(); $('#wb-rename-menu').show().data('wb-id', wbId) .position({my: 'left top', collision: 'none', of: _getWbTab(wbId)}); }); link.append(OmUtil.tmpl('#wb-tab-close')); li.find('button') .confirmation({ confirmationEvent: 'bla' , onConfirm: function() { OmUtil.wbAction({action: 'removeWb', data: {wbId: wbId}}); } }); } function _getImage(cnv) { return cnv.toDataURL({ format: 'image/png' , width: cnv.width , height: cnv.height , multiplier: 1. / cnv.getZoom() , left: 0 , top: 0 }); } function _videoStatus(json) { self.getWb(json.wbId).videoStatus(json); } function _initVideos(arr) { for (let i = 0; i < arr.length; ++i) { _videoStatus(arr[i]); } } function __getWbTabId(id) { return 'wb-tab-' + id; }; function __getWbContentId(id) { return 'wb-content-' + id; }; function __initTab(elems) { const links = elems.find('a'); if (role === PRESENTER) { elems.each(function() { _addCloseBtn($(this)); }); links.prop('disabled', false).removeClass('disabled'); } else { links.prop('disabled', true).addClass('disabled'); elems.find('button').remove(); } links.off() .click(function(e) { e.preventDefault(); if (role === PRESENTER) { _actionActivateWb($(this).data('wb-id')); } }); }; self.getWb = function(id) { return _getWbContent(id).data(); }; self.getCanvas = function(id) { return self.getWb(id).getCanvas(); }; self.setRole = function(_role) { if (!_inited) { return; } role = _role; const tabsNav = tabs.find('ul.nav-tabs'); tabsNav.sortable(role === PRESENTER ? 'enable' : 'disable'); const prev = tabs.find('.prev.om-icon'), next = tabs.find('.next.om-icon'); if (role === PRESENTER) { if (prev.length === 0) { const cc = tabs.find('.wb-tabbar .scroll-container') , left = OmUtil.tmpl('#wb-tabbar-ctrls-left') , right = OmUtil.tmpl('#wb-tabbar-ctrls-right'); cc.before(left).after(right); tabs.find('.add.om-icon').click(function() { OmUtil.wbAction({action: 'createWb'}); }); tabs.find('.prev.om-icon').click(function() { scroll.scrollLeft(scroll.scrollLeft() - 30); }); tabs.find('.next.om-icon').click(function() { scroll.scrollLeft(scroll.scrollLeft() + 30); }); self.addDeleteHandler(); } } else { if (prev.length > 0) { prev.parent().remove(); next.parent().remove(); } self.removeDeleteHandler(); } __initTab(tabsNav.find('li')); tabs.find('.wb-tab-content .wb-tab').each(function() { $(this).data().setRole(role); }); } function _actionActivateWb(_wbId) { OmUtil.wbAction({action: 'activateWb', data: {wbId: _wbId}}); } function _doInit(callback) { container = $('.room-block .wb-block'); tabs = container.find('.tabs'); if (tabs.length === 0) { setTimeout(_doInit, 100, callback); return; } scroll = tabs.find('.scroll-container'); area = container.find('.wb-area'); tabs.find('ul.nav-tabs').sortable({ axis: 'x' }); _inited = true; self.setRole(role); if (typeof(callback) === 'function') { callback(); } $('#wb-rename-menu').menu().find('.wb-rename').click(function() { const textSpan = _getWbTab($(this).parent().data('wb-id')).find('.wb-nav-tab-text').first(); textSpan.trigger('dblclick'); }); } self.init = function(callback) { Wicket.Event.subscribe('/websocket/message', self.wbWsHandler); _doInit(callback); }; self.destroy = function() { self.removeDeleteHandler(); Wicket.Event.unsubscribe('/websocket/message', self.wbWsHandler); }; self.create = function(obj) { if (!_inited) { return; } const tid = __getWbTabId(obj.wbId) , tcid = __getWbContentId(obj.wbId) , wb = OmUtil.tmpl('#wb-area', tcid).attr('aria-labelledby', tid) , li = OmUtil.tmpl('#wb-area-tab') , link = li.find('a'); link.attr('id', tid).attr('data-wb-id', obj.wbId).attr('href', '#' + tcid).attr('aria-controls', tcid); _setTabName(link, obj.name) .dblclick(function() { if (role !== PRESENTER) { return; } const editor = $('<input class="newName" name="newName" type="text"/>') , name = $(this).hide().after(editor.val(obj.name)) , renameWbTab = function() { const newName = editor.val(); if (newName !== '') { OmUtil.wbAction({action: 'renameWb', data: {wbId: obj.wbId, name: newName}}); } editor.remove(); name.show(); }; editor.focus() .blur(renameWbTab) .keyup(function(evt) { if (evt.which === 13) { renameWbTab(); } }); }); tabs.find('ul.nav-tabs').append(li); tabs.find('.wb-tab-content').append(wb); __initTab(li); const wbo = Wb(); wbo.init(obj, tcid, role); wb.on('remove', wbo.destroy); wb.data(wbo); } self.createWb = function(obj) { if (!_inited) { return; } self.create(obj); _activateTab(obj.wbId); _actionActivateWb(obj.wbId); }; self.activateWb = function(obj) { if (!_inited) { return; } _activateTab(obj.wbId); } self.renameWb = function(obj) { if (!_inited) { return; } _renameTab(obj); } self.removeWb = function(obj) { if (!_inited) { return; } _getWbTab(obj.wbId).parent().remove(); _getWbContent(obj.wbId).remove(); _actionActivateWb(getActive().data().id); }; self.load = function(json) { if (!_inited) { return; } self.getWb(json.wbId).load(json.obj); }; self.setSlide = function(json) { if (!_inited) { return; } self.getWb(json.wbId).setSlide(json.slide); }; self.createObj = function(json) { if (!_inited) { return; } self.getWb(json.wbId).createObj(json.obj); }; self.modifyObj = function(json) { if (!_inited) { return; } self.getWb(json.wbId).modifyObj(json.obj); }; self.deleteObj = function(json) { if (!_inited) { return; } self.getWb(json.wbId).removeObj(json.obj); }; self.clearAll = function(json) { if (!_inited) { return; } self.getWb(json.wbId).clearAll(); }; self.clearSlide = function(json) { if (!_inited) { return; } self.getWb(json.wbId).clearSlide(json.slide); }; self.setSize = function(json) { if (!_inited) { return; } self.getWb(json.wbId).setSize(json); } self.download = function(fmt) { if (!_inited) { return; } const wb = getActive().data(); if ('pdf' === fmt) { const arr = []; wb.eachCanvas(function(cnv) { arr.push(_getImage(cnv)); }); OmUtil.wbAction({action: 'downloadPdf', data: { slides: arr }}); } else { const cnv = wb.getCanvas() , dataUri = _getImage(cnv); try { const dlg = $('#download-png'); dlg.find('img').attr('src', dataUri); dlg.dialog({ width: 350 , appendTo: '.room-block .wb-block' }); } catch (e) { console.error(e); } } } self.videoStatus = _videoStatus; self.loadVideos = function() { if (!_inited) { return; } OmUtil.wbAction({action: 'loadVideos'}); }; self.initVideos = _initVideos; self.addDeleteHandler = function() { if (role === PRESENTER) { $(window).keyup(_deleteHandler); } }; self.removeDeleteHandler = function() { $(window).off('keyup', _deleteHandler); }; self.updateAreaClass = function() {}; self.doCleanAll = function() { if (!_inited) { return; } tabs.find('li').each(function() { const wbId = $(this).data('wb-id') , tabId = self.getWbTabId(wbId); $(this).remove(); $('#' + tabId).remove(); }); }; return self; };