new table component, lot of fixes

build/app.js

@@ -8,9 +8,15 @@ const store = window.store = new Store({
 		{text: 'Right', value: 'Right', filter: 'RemoteUser'},
 		{text: 'Left', value: 'Left', filter: 'RemoteUser'},
 	],
+
+	guestPositions: [
+		{text: '1', value: '1', left: '15%'},
+		{text: '2', value: '2', left: '85%'}
+	],
+
 	userRoles: [
-		{text: 'Remote User', value: 'RemoteUser'},
-		{text: 'Office User', value: 'OfficeUserLeft'},
+		{text: 'Remote Guest', value: 'RemoteUser', realValue: 'RemoteUser'},
+		{text: 'Office Guest', value: 'OfficeUserLeft', realValue: 'OfficeUser'},
 		/*{text: 'Office User Right', value: 'OfficeUserRight'},
 		{text: 'Office User Left', value: 'OfficeUserLeft'},*/
 	],
@@ -19,10 +25,28 @@ const store = window.store = new Store({
 
 const isConnected = new Store.Value.Boolean(false);
 store.sub('connection', function(val) {
-	isConnected.set(val)
+	isConnected.set(val);
 });
 
-Screen.show('Main');
+var params = location.hash.replace('#/','')
+	.split('&')
+	.map((key, i)=>{
+		var tokens = key.split('=')
+		if(i === 0)
+			tokens = ['id', tokens[0]];
+		return tokens;
+	})
+	.reduce((store, [key, val])=>{
+		store[decodeURIComponent(key)] = decodeURIComponent(val);
+		return store;
+	}, {});
+
+if(params.id){
+	store.set('conference_id', params.id);
+	Screen.show( 'Conference' );
+}else{
+	Screen.show( 'Main' );
+}
 
 
 

build/segmentrtc.html → build/index.html

@@ -300,6 +300,7 @@
 
 <script src="view/Input.js"></script>
 <script src="view/Select.js"></script>
+<script src="view/TableComponent.js"></script>
 <script src="view/CanvasResizer.js"></script>
 <script src="view/Screen.js"></script>
 <script src="view/MainScreen.js"></script>

build/view/CallScreen.js

@@ -17,7 +17,6 @@ Screen.Conference = function() {
 		awrtc.Media.SharedInstance.VideoInput.AddCanvasDevice(canvas, devname, canvas.width , canvas.height , 30);
 
 		setInterval(() => {
-			console.log(222);
 			awrtc.Media.SharedInstance.VideoInput.UpdateFrame(devname);
 		}, 50);
 		//apps.VideoInputApp.sVideoDevice = devname;
@@ -103,6 +102,9 @@ Screen.Conference = function() {
 		var userRoles = store.get('userRoles');
 		store.set('userRole'+userID, userRoles[userID % userRoles.length].value);
 
+		var guestPositions = store.get('guestPositions');
+		store.set('guestPosition'+userID, false);
+
 		var cameraCanvas, canvasResizerEl,
 			dom = D.div( { cls: 'block', style: { marginBottom: '80px' } },
 				D.div( { cls: 'header' }, 'Camera ' + ( currentUserID + 1 ) ),
@@ -117,7 +119,13 @@ Screen.Conference = function() {
 						}
 					} )
 				),
+				TableComponent({
+					roles: 'userRoles',
+					role: store.bind( 'userRole' + userID ),
 
+					guestPositions: 'guestPositions',
+					guestPosition: store.bind( 'guestPosition' + userID )
+				}),
 				Select( {
 					values: 'userRoles',
 					bind: store.bind( 'userRole' + userID ),

build/view/Select.js

@@ -15,6 +15,7 @@ var Select = function(cfg) {
 					return D.div({cls: 'dropdown-item', 'data-id': v.value, onclick: function() {
 							cfg.bind.set(v.value);
 							isOpen.set(false);
+							unSubscribeFadeClick();
 						}}, v.text)
 				}));
 
@@ -28,6 +29,26 @@ var Select = function(cfg) {
 			}
 		});
 	});
+
+	var subscribed = false;
+	var documentClick = function(e) {
+		if(D.findParent(e.target, p=>p === dom) === void 0){
+			isOpen.set(false);
+			unSubscribeFadeClick();
+		}
+	};
+	var subscribeFadeClick = function() {
+		if(!subscribed){
+			subscribed = true;
+			document.addEventListener( 'click', documentClick );
+		}
+	}
+	var unSubscribeFadeClick = function() {
+		if(subscribed){
+			document.removeEventListener( 'click', documentClick );
+			subscribed = false;
+		}
+	}
 	var dom = D.div({cls: 'form-field'},
 		D.div({cls: 'form-field__label'},
 			D.span({cls: 'form-field__label-text'}, cfg.label),
@@ -37,7 +58,12 @@ var Select = function(cfg) {
 					}]},
 				D.h('button', {
 						cls: 'dropdown-field__toggler',
-						onclick: () => isOpen.toggle()
+						onclick: () => {
+							isOpen.toggle();
+							if(isOpen.get() === true){
+								subscribeFadeClick();
+							}
+						}
 					},
 					D.span({cls: D.cls(
 							"dropdown-field__placeholder", {

build/view/TableComponent.js

+AddCss('/view/tableComponent.css');
+
+var UserIcon = function(percent, inverse) {
+	return D.div({cls: ['table-component--guest-row--guest__user-icon', {inverse}],
+			style: {
+				transform: 'rotate('+ ((32*percent-16)*(inverse?-1:1)+(inverse?180:0)).toFixed(2) +'deg)'
+			}},
+		D.div({
+			cls: 'table-component--guest-row--guest__user-icon--obod'
+		},
+
+			D.div({cls: 'in-obod1'}),
+			D.div({cls: 'in-obod2'}),
+		),
+		D.div({cls: 'table-component--guest-row--guest__user-icon--circle'})
+	);
+};
+
+var TableComponent = function(cfg) {
+
+	var RoleGuest = function(role, position, percent, inverse) {
+
+		var selected = new Store.Value.Boolean(false);
+		var disabled = new Store.Value.Boolean(false);
+
+		store.sub([cfg.role, cfg.guestPosition], function(r, p) {
+			selected.set((role.realValue === r || role.value === r) && position.value === p);
+		});
+
+		var guest = [
+				D.div({cls: 'table-component--guest-row--guest__label'}, role.text+' '+position.text),
+				UserIcon(percent, inverse)
+			];
+
+		return D.div({
+				cls: [
+					'table-component--guest-row--guest',
+					{
+						'table-component--guest-row--guest__selected': selected,
+						'table-component--guest-row--guest__disabled': disabled,
+					}
+				],
+				style: {left: position.left},
+				onclick: function() {
+					if(disabled.get())
+						return;
+					cfg.role.set(role.value);
+					cfg.guestPosition.set(position.value);
+				}
+			},
+			guest[inverse?'reverse':'slice']()
+		);
+	};
+
+	var RoleRow = function(role, positions, inverse) {
+
+
+		return D.div({cls: 'table-component--guest-row'},
+			positions.map(function(position, i) {
+				var count = positions.length;
+				var percent = count < 2 ? 0.5 : i/(count-1);
+				return RoleGuest(role, position, percent, inverse)
+			})
+		);
+	};
+
+	var roles = store.get(cfg.roles);
+	var guestPositions = store.get(cfg.guestPositions);
+
+	var dom = D.div({cls: 'table-component'},
+			RoleRow(roles[1], guestPositions, false),
+			D.div({cls: 'table-component--table'}),
+			RoleRow(roles[0], guestPositions, true)
+		)
+	return dom;
+}

build/view/tableComponent.css

+.table-component--table {
+    position: relative;
+    border-radius: 24px;
+    width: 264px;
+    height: 80px;
+    border: 1px solid #5C5C5C;
+}
+
+.table-component--guest-row {
+    width: 264px;
+    height: 64px;
+    position: relative;
+}
+
+.table-component--guest-row--guest__user-icon--circle {
+    width: 24px;
+    height: 24px;
+    border: 1px solid #594cd7;
+    background: rgba(89, 76, 215, 0.12);
+    border-radius: 96px;
+    z-index: 2;
+    position: absolute;
+}
+
+.table-component--guest-row--guest {
+    position: absolute;
+    text-align: center;
+    transform: translateX(-50%);
+    cursor: pointer;
+}
+
+.table-component--guest-row--guest__label {
+    white-space: nowrap;
+    font-size: 14px;
+}
+
+.table-component--guest-row--guest__user-icon {
+    display: inline-block;
+    margin: 8px;
+    position: relative;
+    width: 32px;
+    height: 38px;
+}
+
+.table-component--guest-row--guest__user-icon--obod {
+    border: 1px solid #594cd7;
+    border-radius: 50%;
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    top: -3px;
+    left: -5px;
+}
+
+.in-obod2 {
+    position: absolute;
+    left: 17px;
+    width: 20px;
+    background: #fff;
+    height: 34px;
+    top: 3px;
+    transform: rotate(
+            45deg);
+}
+
+.in-obod1 {
+    position: absolute;
+    left: -2px;
+    width: 20px;
+    background: #fff;
+    height: 34px;
+    top: 3px;
+    transform: rotate(
+            -45deg);
+}
+
+.table-component--guest-row--guest__user-icon.inverse {
+    height: 31px;
+}
+
+.table-component--guest-row--guest__disabled .table-component--guest-row--guest__user-icon--obod {
+    border: 1px solid #D0D0D0;
+}
+.table-component--guest-row--guest__disabled .table-component--guest-row--guest__user-icon--circle {
+    background: rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+.table-component--guest-row--guest__selected .table-component--guest-row--guest__user-icon--circle {
+    background: rgba(89, 76, 215, 0.88);
+}
+.table-component--guest-row--guest__selected, .table-component--guest-row--guest__disabled {
+    cursor: auto;
+}
\ No newline at end of file