You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2017/03/22 02:40:35 UTC
svn commit: r1788049 - in
/openmeetings/application/trunk/openmeetings-web/src/main:
java/org/apache/openmeetings/web/room/
java/org/apache/openmeetings/web/room/wb/ webapp/css/
Author: solomax
Date: Wed Mar 22 02:40:35 2017
New Revision: 1788049
URL: http://svn.apache.org/viewvc?rev=1788049&view=rev
Log:
[OPENMEETINGS-551] code refactored, addWb method seems to work, scrolling on the way
Removed:
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java
Modified:
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html Wed Mar 22 02:40:35 2017
@@ -26,7 +26,7 @@
<div class="room sidebar left" wicket:id="sidebar"></div>
<div wicket:id="wb-area" class="room wb area">
<div class="wb-drop-area"></div>
- <div class="wb" wicket:id="whiteboard"></div>
+ <div class="wb-area" wicket:id="whiteboard"></div>
</div>
<div wicket:id="activities"></div>
</div>
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js Wed Mar 22 02:40:35 2017
@@ -58,26 +58,14 @@ function initVideo(_options) {
function setRoomSizes() {
var w = $(window).width() - $(".room.sidebar.left").width() - 5;
- var area = $(".room.wb.area");
- area.width(w);
- var wb = area.find(".wb");
- wb.width(w);
-
var h = $(window).height() - $('#menu').height();
$(".room.sidebar.left").height(h);
var p = $(".room.sidebar.left .tabs");
var hh = h - 5;
p.height(hh);
$(".user.list", p).height(hh - $("ul", p).height() - $(".user.header", p).height() - 5);
- area.height(h);
- wb.height(hh);
- var wbTabs = wb.find(".tabs.ui-tabs");
- wbTabs.height(hh);
- var tabPanels = wbTabs.find(".ui-tabs-panel");
- var wbah = hh - 5 - wbTabs.find("ul.ui-tabs-nav").height();
- tabPanels.height(wbah);
- if (tabPanels.data('fabric')) {
- tabPanels.data('resize')(w, wbah);
+ if (!!WbArea) {
+ WbArea.resize(w, h);
}
}
function roomReload(event, ui) {
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html Wed Mar 22 02:40:35 2017
@@ -20,10 +20,80 @@
-->
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
- <div class="tabs" wicket:id="tabs"></div>
+ <div class="tabs">
+ <div class="wb-tabbar ui-corner-all ui-widget-header">
+ <div class="add om-icon big"></div>
+ <div class="scroll-container"><ul class="scrollable"></ul></div>
+ </div>
+ </div>
- <wicket:fragment wicket:id="tab-fragment">
- <a wicket:id="link">[title]</a>
- </wicket:fragment>
+ <div style="display:none;">
+ <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>
+
+ <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">
+ <li>
+ <div wicket:id="clipart" class="ui-widget-header clickable om-icon big clipart"
+ data-image="./public/cliparts/"></div>
+ </li>
+ </ul>
+ </div>
+
+ <div id="wb-area">
+ <canvas></canvas>
+ <div class="tools ui-state-active vertical clear" style="display: none; 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: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 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="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>
+ </div>
+ </div>
+ </div>
</wicket:panel>
</html>
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java Wed Mar 22 02:40:35 2017
@@ -19,16 +19,29 @@
package org.apache.openmeetings.web.room.wb;
import static org.apache.openmeetings.web.app.Application.getBean;
+import static org.apache.wicket.AttributeModifier.append;
+
+import java.util.Arrays;
import org.apache.openmeetings.core.data.whiteboard.WhiteboardCache;
import org.apache.openmeetings.db.entity.room.Room.Right;
+import org.apache.openmeetings.util.OmFileHelper;
import org.apache.openmeetings.web.room.RoomPanel;
+import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.core.request.handler.IPartialPageRequestHandler;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
+import org.apache.wicket.markup.html.list.ListItem;
+import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.Panel;
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+import org.apache.wicket.request.resource.ResourceReference;
public class WbPanel extends Panel {
private static final long serialVersionUID = 1L;
- private final WbTabbedPanel tabs;
+ private final static ResourceReference WB_JS_REFERENCE = new JavaScriptResourceReference(WbPanel.class, "wb.js");
+ private final static ResourceReference FABRIC_JS_REFERENCE = new JavaScriptResourceReference(WbPanel.class, "fabric.js");
private boolean readOnly = true;
private final RoomPanel rp;
@@ -38,9 +51,24 @@ public class WbPanel extends Panel {
setOutputMarkupId(true);
getBean(WhiteboardCache.class).get(rp.getRoom().getId()).getWhiteboards();//TODO
- add(tabs = new WbTabbedPanel("tabs", this));
- tabs.setOutputMarkupId(true);// FIXME TODO add Sortable for tabs add(new Sortable<T>)
- tabs.addWb("Whiteboard 1");
+ add(new ListView<String>("clipart", Arrays.asList(OmFileHelper.getPublicClipartsDir().list())) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem<String> item) {
+ String cls = String.format("clipart-%s", item.getIndex());
+ item.add(append("class", cls), append("data-mode", cls)
+ , new AttributeAppender("data-image", item.getModelObject()).setSeparator(""));
+ }
+ });
+ }
+
+ @Override
+ public void renderHead(IHeaderResponse response) {
+ super.renderHead(response);
+ response.render(JavaScriptHeaderItem.forReference(FABRIC_JS_REFERENCE));
+ response.render(JavaScriptHeaderItem.forReference(WB_JS_REFERENCE));
+ response.render(OnDomReadyHeaderItem.forScript("WbArea.init(); WbArea.add(1, 'Whiteboard 1');"));
}
public boolean isReadOnly() {
@@ -55,7 +83,6 @@ public class WbPanel extends Panel {
public WbPanel update(IPartialPageRequestHandler handler) {
readOnly = !rp.getClient().hasRight(Right.whiteBoard);
if (handler != null) {
- tabs.reload(handler);
handler.appendJavaScript("setRoomSizes();");
}
return this;
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js Wed Mar 22 02:40:35 2017
@@ -388,7 +388,7 @@ var Wb = function() {
}
}
function initCliparts() {
- var c = $('#wb-area-clip').clone().attr('id', '');
+ var c = $('#wb-area-cliparts').clone().attr('id', '');
getBtn('arrow').after(c);
c.find('a').prepend(c.find('div.om-icon.big:first'));
c.find('.om-icon.clipart').each(function(idx) {
@@ -401,7 +401,6 @@ var Wb = function() {
});
initToolBtn(cur.data('mode'), false, Clipart(canvas, cur));
});
- c.show();
}
function internalInit(t) {
t.show().draggable({
@@ -509,13 +508,13 @@ var Wb = function() {
}
return {
- fabric: true
- , init: function(id) {
+ init: function(id) {
a = $('#' + id);
t = a.find('.tools'), c = a.find('canvas'), s = a.find(".wb-settings");
c.attr('id', 'can-' + id);
canvas = new fabric.Canvas(c.attr('id'));
internalInit(t);
+ setRoomSizes();
}
, resize: function(w, h) {
if (t.position().left + t.width() > a.width()) {
@@ -531,8 +530,57 @@ var Wb = function() {
}
};
};
-function initArea(id) {
- var a = $('#' + id);
- a.data(Wb());
- a.data('init')(id);
-}
+var WbArea = (function() {
+ var container, area, tabs, self = {};
+
+ function refreshTabs() {
+ tabs.tabs("refresh").find('ul').removeClass('ui-corner-all').removeClass('ui-widget-header');
+ }
+ self.init = function() {
+ tabs = $('.room.wb.area .tabs').tabs();
+ tabs.find( ".ui-tabs-nav" ).sortable({
+ axis: "x"
+ , stop: function() {
+ refreshTabs();
+ }
+ });
+ container = $(".room.wb.area");
+ area = container.find(".wb-area");
+ }
+ self.add = function(id, name) {
+ var tid = "wb-tab-" + id
+ , li = $('#wb-area-tab').clone().attr('id', '').data('wb-id', id)
+ , wb = $('#wb-area').clone().attr('id', tid);
+ li.find('a').text(name).attr('href', "#" + tid);
+
+ tabs.find(".ui-tabs-nav").append(li);
+ tabs.append(wb);
+ refreshTabs();
+
+ $('.room.wb.area .wb-tabbar li').each(function(idx) {
+ if (id == 1 * $(this).data('wb-id')) {
+ tabs.tabs("option", "active", idx);
+ return false;
+ }
+ });
+ wb.data(Wb()).data('init')(tid);
+ }
+ self.resize = function(w, h) {
+ if (!container) return;
+ var hh = h - 5;
+ container.width(w);
+ area.width(w);
+
+ container.height(h);
+ area.height(hh);
+ var wbTabs = area.find(".tabs.ui-tabs");
+ wbTabs.height(hh);
+ var tabPanels = wbTabs.find(".ui-tabs-panel");
+ var wbah = hh - 5 - wbTabs.find("ul.ui-tabs-nav").height();
+ tabPanels.height(wbah);
+ tabPanels.each(function(idx) {
+ $(this).data('resize')(w, wbah);
+ });
+ }
+ return self;
+})();
Modified: openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css?rev=1788049&r1=1788048&r2=1788049&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css Wed Mar 22 02:40:35 2017
@@ -96,7 +96,7 @@
.room.wb.area.ui-state-hover {
border: 0;
}
-.room.wb.area.ui-state-hover .wb {
+.room.wb.area.ui-state-hover .wb-area {
visibility: hidden;
height: 1px !important;
}
@@ -429,8 +429,19 @@
left: auto !important;
}
.wb-tabbar {
- padding-left: 45px;
+ padding-left: 45px !important;
+}
+.wb-tabbar .scroll-container {
+ overflow: hidden;
+}
+.wb-tabbar .scroll-container .scrollable, .wb-tabbar .scroll-container .scrollable li {
+ display: flex;
}
.wb-tabbar .add {
position: absolute; left: 2px;
}
+.wb-tabbar li button {
+ width: 20px;
+ height: 20px;
+ padding: 0;
+}