[OPENMEETINGS-551] add/remove readOnly is added to WB
Project: http://git-wip-us.apache.org/repos/asf/openmeetings/repo Commit: http://git-wip-us.apache.org/repos/asf/openmeetings/commit/7859e815 Tree: http://git-wip-us.apache.org/repos/asf/openmeetings/tree/7859e815 Diff: http://git-wip-us.apache.org/repos/asf/openmeetings/diff/7859e815 Branch: refs/heads/master Commit: 7859e8152d3479f4642e557de2bfe66d3811e446 Parents: 89b00fd Author: Maxim Solodovnik <[email protected]> Authored: Sun Apr 2 12:24:13 2017 +0000 Committer: Maxim Solodovnik <[email protected]> Committed: Sun Apr 2 12:24:13 2017 +0000 ---------------------------------------------------------------------- .../openmeetings/web/room/wb/WbPanel.html | 108 +++--- .../openmeetings/web/room/wb/WbPanel.java | 2 +- .../org/apache/openmeetings/web/room/wb/wb.js | 353 ++++++++++++------- openmeetings-web/src/main/webapp/css/room.css | 8 + 4 files changed, 292 insertions(+), 179 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7859e815/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html index c0a8ddc..7857c41 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html @@ -22,23 +22,26 @@ <wicket:panel> <div class="tabs"> <div class="wb-tabbar ui-corner-all ui-widget-header"> - <div class="add clickable om-icon big"></div> - <div class="prev clickable om-icon big"></div> <div class="scroll-container"><ul class="scrollable"></ul></div> - <div class="next clickable om-icon big"></div> </div> </div> <div style="display:none;"> + <div id="wb-tabbar-ctrls-left"> + <div class="add clickable om-icon big"></div> + <div class="prev clickable om-icon big"></div> + </div> + <div id="wb-tabbar-ctrls-right"> + <div class="next clickable om-icon big"></div> + </div> <ul><li id="wb-area-tab"> <a>[title]</a> - <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" wicket:message="title:85"> - <span class="ui-button-icon ui-icon ui-icon-closethick"></span> - <span class="ui-button-icon-space"> </span> - <wicket:message key="85"/> - </button> </li></ul> - + <button id="wb-tab-close" type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" wicket:message="title:85"> + <span class="ui-button-icon ui-icon ui-icon-closethick"></span> + <span class="ui-button-icon-space"> </span> + <wicket:message key="85"/> + </button> <div id="wb-area-cliparts" class="btn-group" style="float: left;"> <a class="dropdown-toggle" data-toggle="dropdown" wicket:message="title:1323"></a> <ul class="dropdown-menu om-left"> @@ -48,54 +51,57 @@ </li> </ul> </div> - <div id="wb-area"> <div class="scroll-container"> <div class="canvases"></div> </div> - <div class="tools ui-state-active vertical clear" style="position: absolute; top: 20px; right: 0px;"> - <div class="bumper"></div> - <div wicket:message="title:72" class="ui-widget-header clickable om-icon big pointer"></div> - <div wicket:message="title:557" class="ui-widget-header clickable om-icon big apointer"></div> - <div wicket:message="title:73" class="ui-widget-header clickable om-icon big text"></div> - <div wicket:message="title:74" class="ui-widget-header clickable om-icon big paint"></div> - <div wicket:message="title:75" class="ui-widget-header clickable om-icon big line"></div> - <div wicket:message="title:76" class="ui-widget-header clickable om-icon big uline"></div> - <div wicket:message="title:77" class="ui-widget-header clickable om-icon big rect"></div> - <div wicket:message="title:78" class="ui-widget-header clickable om-icon big ellipse"></div> - <div wicket:message="title:79" class="ui-widget-header clickable om-icon big arrow"></div> - <div wicket:message="title:4" class="ui-widget-header clickable om-icon big settings"></div> + </div> + <div id="wb-tools" class="tools ui-state-active vertical clear" style="position: absolute; top: 20px; right: 0px;"> + <div class="bumper"></div> + <div wicket:message="title:72" class="ui-widget-header clickable om-icon big pointer"></div> + <div wicket:message="title:557" class="ui-widget-header clickable om-icon big apointer"></div> + <div wicket:message="title:73" class="ui-widget-header clickable om-icon big text"></div> + <div wicket:message="title:74" class="ui-widget-header clickable om-icon big paint"></div> + <div wicket:message="title:75" class="ui-widget-header clickable om-icon big line"></div> + <div wicket:message="title:76" class="ui-widget-header clickable om-icon big uline"></div> + <div wicket:message="title:77" class="ui-widget-header clickable om-icon big rect"></div> + <div wicket:message="title:78" class="ui-widget-header clickable om-icon big ellipse"></div> + <div wicket:message="title:79" class="ui-widget-header clickable om-icon big arrow"></div> + <div wicket:message="title:4" class="ui-widget-header clickable om-icon big settings"></div> + </div> + <div id="wb-tools-readonly" class="tools readonly ui-state-active vertical clear" style="position: absolute; top: 20px; right: 0px;"> + <div class="bumper"></div> + <div wicket:message="title:557" class="ui-widget-header clickable om-icon big apointer"></div> + </div> + <div id="wb-settings" class="wb-settings ui-corner-all ui-widget-content" style="display: none; bottom: 100px; right: 100px;"> + <div wicket:message="title:843" class="header ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"> + <span class="ui-dialog-title"><wicket:message key="843"/></span> + <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" wicket:message="title:85"> + <span class="ui-button-icon ui-icon ui-icon-closethick"></span> + <span class="ui-button-icon-space"> </span> + <wicket:message key="85"/> + </button> </div> - <div class="wb-settings ui-corner-all ui-widget-content" style="display: none; bottom: 100px; right: 100px;"> - <div wicket:message="title:843" class="header ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"> - <span class="ui-dialog-title"><wicket:message key="843"/></span> - <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" wicket:message="title:85"> - <span class="ui-button-icon ui-icon ui-icon-closethick"></span> - <span class="ui-button-icon-space"> </span> - <wicket:message key="85"/> - </button> + <div class="tab props"> + <div class="prop-row"> + <div class="block lbl" wicket:message="title:546"><wicket:message key="545"/></div> + <div class="block input"><input class="wb-dim-x" type="text" maxlength="4" readonly="readonly"/></div> + <div class="block lbl" wicket:message="title:550"><wicket:message key="549"/></div> + <div class="block input"><input class="wb-dim-w" type="text" maxlength="4" readonly="readonly"/></div> + <div class="block input" style="width: 2em;"><input class="wb-prop-color" type="color" value="#ff6600" wicket:message="title:424"/></div> + <div class="block but"><button class="wb-prop-lock-color" wicket:message="title:426"> </button></div> + <div class="block input"><input class="wb-prop-width" type="number" min="1" max="100" value="2" wicket:message="title:429"/></div> + <div class="block but"><button class="wb-prop-i" wicket:message="title:86">I</button></div> </div> - <div class="tab props"> - <div class="prop-row"> - <div class="block lbl" wicket:message="title:546"><wicket:message key="545"/></div> - <div class="block input"><input class="wb-dim-x" type="text" maxlength="4" readonly="readonly"/></div> - <div class="block lbl" wicket:message="title:550"><wicket:message key="549"/></div> - <div class="block input"><input class="wb-dim-w" type="text" maxlength="4" readonly="readonly"/></div> - <div class="block input" style="width: 2em;"><input class="wb-prop-color" type="color" value="#ff6600" wicket:message="title:424"/></div> - <div class="block but"><button class="wb-prop-lock-color" wicket:message="title:426"> </button></div> - <div class="block input"><input class="wb-prop-width" type="number" min="1" max="100" value="2" wicket:message="title:429"/></div> - <div class="block but"><button class="wb-prop-i" wicket:message="title:86">I</button></div> - </div> - <div class="prop-row"> - <div class="block lbl" wicket:message="title:548"><wicket:message key="547"/></div> - <div class="block input"><input class="wb-dim-y" type="text" maxlength="4" readonly="readonly"/></div> - <div class="block lbl" wicket:message="title:552"><wicket:message key="551"/></div> - <div class="block input"><input class="wb-dim-h" type="text" maxlength="4" readonly="readonly"/></div> - <div class="block input" style="width: 2em;"><input class="wb-prop-fill" type="color" value="#ffff33" wicket:message="title:427"/></div> - <div class="block but"><button class="wb-prop-lock-fill" wicket:message="title:428"> </button></div> - <div class="block input"><input class="wb-prop-opacity" type="number" min="1" max="100" value="100" wicket:message="title:553"/></div> - <div class="block but"><button class="wb-prop-b" wicket:message="title:87">B</button></div> - </div> + <div class="prop-row"> + <div class="block lbl" wicket:message="title:548"><wicket:message key="547"/></div> + <div class="block input"><input class="wb-dim-y" type="text" maxlength="4" readonly="readonly"/></div> + <div class="block lbl" wicket:message="title:552"><wicket:message key="551"/></div> + <div class="block input"><input class="wb-dim-h" type="text" maxlength="4" readonly="readonly"/></div> + <div class="block input" style="width: 2em;"><input class="wb-prop-fill" type="color" value="#ffff33" wicket:message="title:427"/></div> + <div class="block but"><button class="wb-prop-lock-fill" wicket:message="title:428"> </button></div> + <div class="block input"><input class="wb-prop-opacity" type="number" min="1" max="100" value="100" wicket:message="title:553"/></div> + <div class="block but"><button class="wb-prop-b" wicket:message="title:87">B</button></div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7859e815/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java index 2375130..c446ead 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java @@ -272,7 +272,7 @@ public class WbPanel extends Panel { public WbPanel update(IPartialPageRequestHandler handler) { readOnly = !rp.getClient().hasRight(Right.whiteBoard); if (handler != null) { - handler.appendJavaScript("setRoomSizes();"); + handler.appendJavaScript(String.format("setRoomSizes();WbArea.setReadOnly(%s);", readOnly)); } return this; } http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7859e815/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js index 57f6943..64ee00d 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js @@ -484,10 +484,10 @@ var Wb = function() { const ACTIVE = 'active'; const BUMPER = 100; var wb = {id: -1}, a, t, s, canvases = [], mode, slide = 0, width = 0, height = 0 - , minWidth = 0, minHeight = 0; + , minWidth = 0, minHeight = 0, readOnly = null; function getBtn(m) { - return t.find(".om-icon." + (m || mode)); + return !!t ? t.find(".om-icon." + (m || mode)) : null; } function initToolBtn(m, def, obj) { var btn = getBtn(m); @@ -530,7 +530,7 @@ var Wb = function() { initToolBtn(cur.data('mode'), false, Clipart(wb, cur)); }); } - function internalInit(t) { + function internalInit() { t.draggable({ snap: "parent" , containment: "parent" @@ -544,88 +544,92 @@ var Wb = function() { } } }); - initToolBtn('pointer', true, Pointer(wb, s)); - initToolBtn('apointer', false, APointer(wb)); - initToolBtn('text', false, Text(wb, s)); - initToolBtn('paint', false, Paint(wb, s)); - initToolBtn('line', false, Line(wb, s)); - initToolBtn('uline', false, ULine(wb, s)); - initToolBtn('rect', false, Rect(wb, s)); - initToolBtn('ellipse', false, Ellipse(wb, s)); - initToolBtn('arrow', false, Arrow(wb, s)); - initCliparts(); - t.find(".om-icon.settings").click(function() { - s.show(); - }); - s.find('.wb-prop-b, .wb-prop-i') - .button() - .click(function() { - $(this).toggleClass('ui-state-active selected'); + if (readOnly) { + initToolBtn('apointer', true, APointer(wb)); + } else { + initToolBtn('pointer', true, Pointer(wb, s)); + initToolBtn('apointer', false, APointer(wb)); + initToolBtn('text', false, Text(wb, s)); + initToolBtn('paint', false, Paint(wb, s)); + initToolBtn('line', false, Line(wb, s)); + initToolBtn('uline', false, ULine(wb, s)); + initToolBtn('rect', false, Rect(wb, s)); + initToolBtn('ellipse', false, Ellipse(wb, s)); + initToolBtn('arrow', false, Arrow(wb, s)); + initCliparts(); + t.find(".om-icon.settings").click(function() { + s.show(); }); - s.find('.wb-prop-lock-color, .wb-prop-lock-fill') - .button({icon: 'ui-icon-locked', showLabel: false}) - .click(function() { + s.find('.wb-prop-b, .wb-prop-i') + .button() + .click(function() { + $(this).toggleClass('ui-state-active selected'); + }); + s.find('.wb-prop-lock-color, .wb-prop-lock-fill') + .button({icon: 'ui-icon-locked', showLabel: false}) + .click(function() { + var btn = getBtn(); + var isColor = $(this).hasClass('wb-prop-lock-color'); + var c = s.find(isColor ? '.wb-prop-color' : '.wb-prop-fill'); + var enabled = $(this).button('option', 'icon') == 'ui-icon-locked'; + $(this).button('option', 'icon', enabled ? 'ui-icon-unlocked' : 'ui-icon-locked'); + c.prop('disabled', !enabled); + btn.data('obj')[isColor ? 'stroke' : 'fill'].enabled = enabled; + }); + s.find('.wb-prop-color').change(function() { var btn = getBtn(); - var isColor = $(this).hasClass('wb-prop-lock-color'); - var c = s.find(isColor ? '.wb-prop-color' : '.wb-prop-fill'); - var enabled = $(this).button('option', 'icon') == 'ui-icon-locked'; - $(this).button('option', 'icon', enabled ? 'ui-icon-unlocked' : 'ui-icon-locked'); - c.prop('disabled', !enabled); - btn.data('obj')[isColor ? 'stroke' : 'fill'].enabled = enabled; - }); - s.find('.wb-prop-color').change(function() { - var btn = getBtn(); - if (btn.length == 1) { - var v = $(this).val(); - btn.data('obj').stroke.color = v; - if ('paint' == mode) { - wb.eachCanvas(function(canvas) { - canvas.freeDrawingBrush.color = v; - }); + if (btn.length == 1) { + var v = $(this).val(); + btn.data('obj').stroke.color = v; + if ('paint' == mode) { + wb.eachCanvas(function(canvas) { + canvas.freeDrawingBrush.color = v; + }); + } } - } - }); - s.find('.wb-prop-width').change(function() { - var btn = getBtn(); - if (btn.length == 1) { - var v = 1 * $(this).val(); - btn.data('obj').stroke.width = v; - if ('paint' == mode) { - wb.eachCanvas(function(canvas) { - canvas.freeDrawingBrush.width = v; - }); + }); + s.find('.wb-prop-width').change(function() { + var btn = getBtn(); + if (btn.length == 1) { + var v = 1 * $(this).val(); + btn.data('obj').stroke.width = v; + if ('paint' == mode) { + wb.eachCanvas(function(canvas) { + canvas.freeDrawingBrush.width = v; + }); + } } - } - }); - s.find('.wb-prop-opacity').change(function() { - var btn = getBtn(); - if (btn.length == 1) { - var v = (1 * $(this).val()) / 100; - btn.data('obj').opacity = v; - if ('paint' == mode) { - wb.eachCanvas(function(canvas) { - canvas.freeDrawingBrush.opacity = v; - }); + }); + s.find('.wb-prop-opacity').change(function() { + var btn = getBtn(); + if (btn.length == 1) { + var v = (1 * $(this).val()) / 100; + btn.data('obj').opacity = v; + if ('paint' == mode) { + wb.eachCanvas(function(canvas) { + canvas.freeDrawingBrush.opacity = v; + }); + } } - } - }); - s.find('.ui-dialog-titlebar-close').click(function() { - s.hide(); - }); - s.draggable({ - scroll: false - , containment: "body" - , start: function(event, ui) { - if (!!s.css("bottom")) { - s.css("bottom", "").css("right", ""); + }); + s.find('.ui-dialog-titlebar-close').click(function() { + s.hide(); + }); + s.draggable({ + scroll: false + , containment: "body" + , start: function(event, ui) { + if (!!s.css("bottom")) { + s.css("bottom", "").css("right", ""); + } } - } - , drag: function(event, ui) { - if (s.position().x + s.width() >= s.parent().width()) { - return false; + , drag: function(event, ui) { + if (s.position().x + s.width() >= s.parent().width()) { + return false; + } } - } - }); + }); + } } function _findObject(o) { var _o = {}; @@ -756,6 +760,34 @@ var Wb = function() { o.path.slide = this.slide; wbObjCreatedHandler(o.path); }; + function scrollHandler(e) { + $(this).find('.canvas-container').each(function(idx) { + var h = $(this).height(), pos = $(this).position(); + if (slide != idx &&pos.top > BUMPER - h && pos.top < BUMPER) { + //TODO FIXME might be done without iterating + //console.log("Found:", idx); + slide = idx; + wbAction('setSlide', JSON.stringify({ + wbId: wb.id + , slide: idx + })); + return false; + } + }); + } + function showCurentSlide() { + a.find('.scroll-container .canvas-container').each(function(idx) { + if (readOnly) { + if (idx == slide) { + $(this).show(); + } else { + $(this).hide(); + } + } else { + $(this).show(); + } + }); + } /*TODO interactive text chage var textEditedHandler = function (e) { var obj = e.target; @@ -766,45 +798,75 @@ var Wb = function() { console.log('Text Changed', obj); };*/ function addCanvas() { - var slide = canvases.length; - var c = $('<canvas></canvas>').attr('id', 'can-' + a.attr('id') + '-slide-' + slide); + var sl = canvases.length; + var cid = 'can-' + a.attr('id') + '-slide-' + sl; + var c = $('<canvas></canvas>').attr('id', cid); a.find('.canvases').append(c); var canvas = new fabric.Canvas(c.attr('id')); canvas.wbId = wb.id; - canvas.slide = slide; - //TODO create via WS canvas:cleared - canvas.on({ - 'object:added': objAddedHandler - , 'object:modified': objModifiedHandler - , 'object:selected': objSelectedHandler - , 'path:created': pathCreatedHandler - //, 'text:editing:exited': textEditedHandler - //, 'text:changed': textChangedHandler - , 'wb:object:created': wbObjCreatedHandler - }); + canvas.slide = sl; canvases.push(canvas); + //TODO create via WS canvas:cleared + if (readOnly) { + canvas.off({ + 'object:added': objAddedHandler + , 'object:modified': objModifiedHandler + , 'object:selected': objSelectedHandler + , 'path:created': pathCreatedHandler + //, 'text:editing:exited': textEditedHandler + //, 'text:changed': textChangedHandler + , 'wb:object:created': wbObjCreatedHandler + }); + } else { + canvas.on({ + 'object:added': objAddedHandler + , 'object:modified': objModifiedHandler + , 'object:selected': objSelectedHandler + , 'path:created': pathCreatedHandler + //, 'text:editing:exited': textEditedHandler + //, 'text:changed': textChangedHandler + , 'wb:object:created': wbObjCreatedHandler + }); + } + var cc = $('#' + cid).closest('.canvas-container'); + if (readOnly) { + if (sl == slide) { + cc.show(); + } else { + cc.hide(); + } + } } - wb.init = function(_wbId, tid) { + wb.setReadOnly = function(ro) { + if (readOnly != ro) { + var btn = getBtn(); + if (!!btn && btn.length == 1) { + btn.data().deactivate(); + } + a.find('.tools').remove(); + a.find('.wb-settings').remove(); + readOnly = ro; + var sc = a.find('.scroll-container'); + if (readOnly) { + t = $('#wb-tools-readonly').clone().attr('id', ''); + a.append(t); + sc.off('scroll', scrollHandler); + } else { + t = $('#wb-tools').clone().attr('id', ''); + s = $("#wb-settings").clone().attr('id', ''); + a.append(t).append(s); + sc.on('scroll', scrollHandler); + } + showCurentSlide(); + t = a.find('.tools'), s = a.find(".wb-settings"); + internalInit(); + } + }; + wb.init = function(_wbId, tid, ro) { wb.id = _wbId; a = $('#' + tid); - t = a.find('.tools'), s = a.find(".wb-settings"); + wb.setReadOnly(ro); addCanvas(); - internalInit(t); - a.find('.scroll-container').on('scroll', function(e) { - $(this).find('.canvas-container').each(function(idx) { - var h = $(this).height(), pos = $(this).position(); - if (slide != idx &&pos.top > BUMPER - h && pos.top < BUMPER) { - //TODO FIXME might be done without iterating - //console.log("Found:", idx); - slide = idx; - wbAction('setSlide', JSON.stringify({ - wbId: wb.id - , slide: idx - })); - return false; - } - }); - }); }; wb.resize = function(w, h) { if (t.position().left + t.width() > a.width()) { @@ -826,7 +888,11 @@ var Wb = function() { }; wb.setSlide = function(_sl) { slide = _sl; - a.find('.scroll-container .canvas-container')[slide].scrollIntoView(); + if (readOnly) { + showCurentSlide(); + } else { + a.find('.scroll-container .canvas-container')[slide].scrollIntoView(); + } }; wb.createObj = function(o) { switch(o.type) { @@ -882,7 +948,7 @@ var Wb = function() { return wb; }; var WbArea = (function() { - var container, area, tabs, scroll, self = {}; + var container, area, tabs, scroll, readOnly = true, self = {}; function refreshTabs() { tabs.tabs("refresh").find('ul').removeClass('ui-corner-all').removeClass('ui-widget-header'); @@ -961,31 +1027,61 @@ var WbArea = (function() { self.getCanvas = function(id) { return self.getWb(id).getCanvas(); }; + self.setReadOnly = function(ro) { + readOnly = ro; + tabs.find(".ui-tabs-nav").sortable(readOnly ? "disable" : "enable"); + var prev = tabs.find('.prev.om-icon'), next = tabs.find('.next.om-icon'); + if (readOnly) { + if (prev.length > 0) { + prev.parent().remove(); + next.parent().remove(); + } + $(window).off('keyup', deleteHandler); + } else { + if (prev.length == 0) { + var cc = tabs.find('.wb-tabbar .scroll-container') + , left = $('#wb-tabbar-ctrls-left').clone().attr('id', '') + , right = $('#wb-tabbar-ctrls-right').clone().attr('id', ''); + cc.before(left).after(right); + tabs.find('.add.om-icon').click(function() { + wbAction('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); + }); + $(window).keyup(deleteHandler); + } + } + tabs.find(".ui-tabs-panel").each(function(idx) { + $(this).data().setReadOnly(readOnly); + }); + } self.init = function() { container = $(".room.wb.area"); tabs = container.find('.tabs').tabs({ - activate: function(event, ui) { + beforeActivate: function(e, ui) { + var res = true; + if (e.originalEvent && e.originalEvent.type === 'click') { + res = !readOnly; + } + return res; + } + , activate: function(e, ui) { wbAction('activeWb', JSON.stringify({id: ui.newTab.data('wb-id')})); } }); scroll = tabs.find('.scroll-container'); + area = container.find(".wb-area"); tabs.find(".ui-tabs-nav").sortable({ axis: "x" , stop: function() { refreshTabs(); } }); - tabs.find('.add.om-icon').click(function() { - wbAction('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); - }); - area = container.find(".wb-area"); - $(window).keyup(deleteHandler); + self.setReadOnly(readOnly); }; self.destroy = function() { $(window).off('keyup', deleteHandler); @@ -995,9 +1091,12 @@ var WbArea = (function() { , li = $('#wb-area-tab').clone().attr('id', '').data('wb-id', obj.id) , wb = $('#wb-area').clone().attr('id', tid); li.find('a').text(obj.name).attr('title', obj.name).attr('href', "#" + tid); - li.find('button').click(function() { - wbAction('removeWb', JSON.stringify({id: obj.id})); - }); + if (!readOnly) { + li.append($('#wb-tab-close').clone().attr('id', '')); + li.find('button').click(function() { + wbAction('removeWb', JSON.stringify({id: obj.id})); + }); + } tabs.find(".ui-tabs-nav").append(li); tabs.append(wb); @@ -1005,7 +1104,7 @@ var WbArea = (function() { var wbo = Wb(); wb.data(wbo); - wbo.init(obj.id, tid); + wbo.init(obj.id, tid, readOnly); _resizeWbs(); } self.add = function(obj) { http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7859e815/openmeetings-web/src/main/webapp/css/room.css ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/webapp/css/room.css b/openmeetings-web/src/main/webapp/css/room.css index 3b6a9ea..96d9412 100644 --- a/openmeetings-web/src/main/webapp/css/room.css +++ b/openmeetings-web/src/main/webapp/css/room.css @@ -139,10 +139,18 @@ width: 38px; height: 420px; } +.room.wb.area .tools.readonly.vertical { + width: 38px; + height: 60px; +} .room.wb.area .tools.horisontal { width: 420px; height: 38px; } +.room.wb.area .tools.readonly.horisontal { + width: 60px; + height: 38px; +} .room.wb.area .tools .om-icon.big { float: left; vertical-align: top;
