catapult/tracing/tracing/ui/base/grouping_table_groupby_picker.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2016 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->

 <link rel="import" href="/tracing/base/iteration_helpers.html">
 <link rel="import" href="/tracing/base/settings.html">
 <link rel="import" href="/tracing/ui/base/dropdown.html">

 <dom-module id='tr-ui-b-grouping-table-groupby-picker'>
   <template>
     <style>
     :host {
       display: flex;
       align-items: center;
     }

     :host(:not([vertical])), :host(:not([vertical])) groups {
       flex-direction: row;
     }

     :host([vertical]), :host([vertical]) groups {
       flex-direction: column;
     }

     groups {
       -webkit-user-select: none;
       display: flex;
     }

     possible-group {
       display: span;
       padding-right: 10px;
       padding-left: 10px;
     }
     </style>

     <groups id="groups"></groups>
     <tr-ui-b-dropdown id="add_group"></tr-ui-b-dropdown>
   </template>
 </dom-module>

 <dom-module id="tr-ui-b-grouping-table-groupby-picker-group">
   <template>
     <style>
     :host {
       white-space: nowrap;
       border: 3px solid white;
       background-color: #dddddd;
       cursor: move;
     }

     :host(:not([vertical])) {
       display: inline;
     }

     :host([vertical]) {
       display: block;
     }

     :host(:not([vertical]).drop-before) {
       border-left: 3px solid black;
     }

     :host([vertical].drop-before) {
       border-top: 3px solid black;
     }

     :host(:not([vertical]).drop-after) {
       border-right: 3px solid black;
     }

     :host([vertical].drop-after) {
       border-bottom: 3px solid black;
     }

     :host([dragging]) {
       opacity: 0.5;
     }

     #remove {
       visibility: hidden;
       padding-left: 3px;
       width: 20px;
       height: 20px;
       cursor: auto;
     }

     #key {
       padding-right: 3px;
     }
     </style>

     <!-- TODO(eakuefner): Use an iron-icon here once
          https://github.com/catapult-project/catapult/issues/2772 is fixed. -->
     <span id="remove" on-click="remove_">&times;</span>
     <span id="key"></span>
   </template>
 </dom-module>

 <script>
 'use strict';

 tr.exportTo('tr.ui.b', function() {
   var THIS_DOC = document.currentScript.ownerDocument;

   Polymer({
     is: 'tr-ui-b-grouping-table-groupby-picker-group',

     created: function() {
       this.picker_ = undefined;
       this.group_ = undefined;
     },

     ready: function() {
       this.setAttribute('draggable', true);
       this.addEventListener('mouseover', this.onMouseOver_.bind(this));
       this.addEventListener('mouseleave', this.onMouseLeave_.bind(this));
       this.addEventListener('dragstart', this.onDragStart_.bind(this));
       this.addEventListener('dragover', this.onDragOver_.bind(this));
     },

     set group(g) {
       this.group_ = g;
       this.$.key.textContent = g.label;
     },

     get key() {
       return this.group_.key;
     },

     get picker() {
       return this.picker_;
     },

     set picker(picker) {
       this.picker_ = picker;
       this.vertical = picker.vertical;
     },

     // TODO(benjhayden): Use data-binding?
     get vertical() {
       return this.getAttribute('vertical');
     },

     set vertical(vertical) {
       if (vertical)
         this.setAttribute('vertical', true);
       else
         this.removeAttribute('vertical');
     },

     onMouseOver_: function(event) {
       this.$.remove.style.visibility = 'visible';
     },

     onMouseLeave_: function(event) {
       this.$.remove.style.visibility = 'hidden';
     },

     onDragStart_: function(event) {
       event.dataTransfer.effectAllowed = 'move';
       this.setAttribute('dragging', true);
     },

     onDragOver_: function(event) {
       event.preventDefault();  // Allows us to drop.
       event.dataTransfer.dropEffect = 'move';

       this.picker.clearDragIndicators_();
       if (this.picker.shouldDropBefore_(this, event)) {
         this.classList.add('drop-before');
         if (this.previousElementSibling)
           this.previousElementSibling.classList.add('drop-after');
       } else {
         this.classList.add('drop-after');
         if (this.nextElementSibling)
           this.nextElementSibling.classList.add('drop-before');
       }
       return false;
     },

     remove_: function(event) {
       var newKeys = this.picker.currentGroupKeys.slice();
       newKeys.splice(newKeys.indexOf(this.key), 1);
       this.picker.currentGroupKeys = newKeys;
     }
   });

   Polymer({
     is: 'tr-ui-b-grouping-table-groupby-picker',

     created: function() {
       this.currentGroupKeys_ = undefined;
       this.defaultGroupKeys_ = undefined;
       this.possibleGroups_ = [];
       this.settingsKey_ = [];
     },

     ready: function() {
       Polymer.dom(this.$.add_group.iconElement).textContent = 'Add another...';
       this.addEventListener('dragend', this.onDragEnd_.bind(this));
       this.addEventListener('drop', this.onDrop_.bind(this));
     },

     get defaultGroupKeys() {
       return this.defaultGroupKeys_;
     },

     set vertical(vertical) {
       if (vertical)
         this.setAttribute('vertical', true);
       else
         this.removeAttribute('vertical');

       for (var groupEl of this.$.groups.childNodes)
         groupEl.vertical = vertical;
     },

     get vertical() {
       return this.getAttribute('vertical');
     },

     set defaultGroupKeys(defaultGroupKeys) {
       this.defaultGroupKeys_ = defaultGroupKeys;
       this.maybeInit_();
     },

     get possibleGroups() {
       return this.possibleGroups_;
     },

     set possibleGroups(possibleGroups) {
       this.possibleGroups_ = possibleGroups;
       this.maybeInit_();
     },

     get settingsKey() {
       return this.settingsKey_;
     },

     set settingsKey(settingsKey) {
       this.settingsKey_ = settingsKey;
       this.maybeInit_();
     },

     maybeInit_: function() {
       if (!this.settingsKey_ ||
           !this.defaultGroupKeys_ ||
           !this.possibleGroups_) {
         return;
       }

       this.currentGroupKeys = tr.b.Settings.get(
         this.settingsKey_, this.defaultGroupKeys_);
     },

     get currentGroupKeys() {
       return this.currentGroupKeys_;
     },

     get currentGroups() {
       var groupsByKey = {};
       for (var group of this.possibleGroups_)
         groupsByKey[group.key] = group;
       return this.currentGroupKeys.map(groupKey => groupsByKey[groupKey]);
     },

     set currentGroupKeys(currentGroupKeys) {
       if (this.currentGroupKeys_ === currentGroupKeys)
         return;

       if (!(currentGroupKeys instanceof Array))
         throw new Error('Must be array');

       var availableGroupKeys = new Set();
       for (var group of this.possibleGroups_)
         availableGroupKeys.add(group.key);
       this.currentGroupKeys_ = currentGroupKeys.filter(
           k => availableGroupKeys.has(k));
       this.updateGroups_();

       tr.b.Settings.set(
         this.settingsKey_, this.currentGroupKeys_);

       this.dispatchEvent(new tr.b.Event('current-groups-changed'));
     },

     /**
      * @return {undefined|Element}
      */
     get draggingGroupElement() {
       for (var group of this.$.groups.children)
         if (group.getAttribute('dragging'))
           return group;
       return undefined;
     },

     shouldDropBefore_: function(groupEl, event) {
       var dragBoxRect = this.draggingGroupElement.getBoundingClientRect();
       var dropBoxRect = groupEl.getBoundingClientRect();
       // compare horizontally if drag and drop overlap vertically
       var dragVertRange = tr.b.Range.fromExplicitRange(
           dragBoxRect.top, dragBoxRect.bottom);
       var dropVertRange = tr.b.Range.fromExplicitRange(
           dropBoxRect.top, dropBoxRect.bottom);
       if (dragVertRange.intersectsRangeInclusive(dropVertRange))
         return event.clientX < ((dropBoxRect.left + dropBoxRect.right) / 2);
       return event.clientY < ((dropBoxRect.top + dropBoxRect.bottom) / 2);
     },

     clearDragIndicators_: function() {
       for (var groupEl of this.$.groups.children) {
         groupEl.classList.remove('drop-before');
         groupEl.classList.remove('drop-after');
       }
     },

     onDragEnd_: function(event) {
       this.clearDragIndicators_();
       for (var groupEl of this.$.groups.children)
         groupEl.removeAttribute('dragging');
     },

     onDrop_: function(event) {
       event.stopPropagation(); // stops the browser from redirecting.

       var draggingGroupEl = this.draggingGroupElement;
       var dropBeforeEl = undefined;
       var dropAfterEl = undefined;
       for (var groupEl of this.$.groups.children) {
         if (groupEl.classList.contains('drop-before')) {
           dropBeforeEl = groupEl;
           break;
         }
         if (groupEl.classList.contains('drop-after')) {
           dropAfterEl = groupEl;
           break;
         }
       }

       if (!dropBeforeEl && !dropAfterEl)
         return;

       this.$.groups.removeChild(draggingGroupEl);
       var lastGroupEl = this.$.groups.children[
           this.$.groups.children.length - 1];

       if (dropBeforeEl)
         this.$.groups.insertBefore(draggingGroupEl, dropBeforeEl);
       else if (dropAfterEl === lastGroupEl)
         this.$.groups.appendChild(draggingGroupEl);
       else
         this.$.groups.insertBefore(draggingGroupEl, dropAfterEl.nextSibling);

       var currentGroupKeys = [];
       for (var group of this.$.groups.children)
         currentGroupKeys.push(group.key);
       this.currentGroupKeys = currentGroupKeys;
       return false;
     },

     updateGroups_: function() {
       Polymer.dom(this.$.groups).textContent = '';
       Polymer.dom(this.$.add_group).textContent = '';

       var unusedGroups = {};
       var groupsByKey = {};
       for (var group of this.possibleGroups_) {
         unusedGroups[group.key] = group;
         groupsByKey[group.key] = group;
       }

       for (var key of this.currentGroupKeys_)
         delete unusedGroups[key];

       // Create groups.
       for (var key of this.currentGroupKeys_) {
         var group = groupsByKey[key];
         var groupEl = document.createElement(
             'tr-ui-b-grouping-table-groupby-picker-group');
         groupEl.picker = this;
         groupEl.group = group;
         Polymer.dom(this.$.groups).appendChild(groupEl);
       }

       // Adjust dropdown.
       tr.b.iterItems(unusedGroups, function(key, group) {
         var groupEl = document.createElement('possible-group');
         Polymer.dom(groupEl).textContent = group.label;
         groupEl.addEventListener('click', function() {
           var newKeys = this.currentGroupKeys.slice();
           newKeys.push(key);
           this.currentGroupKeys = newKeys;
           this.$.add_group.close();
         }.bind(this));
         Polymer.dom(this.$.add_group).appendChild(groupEl);
       }, this);

       // Hide dropdown if needed.
       if (tr.b.dictionaryLength(unusedGroups) == 0) {
         this.$.add_group.style.display = 'none';
       } else {
         this.$.add_group.style.display = '';
       }
     }
   });

   return {
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2016 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<link rel="import" href="/tracing/base/iteration_helpers.html">
	<link rel="import" href="/tracing/base/settings.html">
	<link rel="import" href="/tracing/ui/base/dropdown.html">

	<dom-module id='tr-ui-b-grouping-table-groupby-picker'>
	<template>
	<style>
	:host {
	display: flex;
	align-items: center;
	}

	:host(:not([vertical])), :host(:not([vertical])) groups {
	flex-direction: row;
	}

	:host([vertical]), :host([vertical]) groups {
	flex-direction: column;
	}

	groups {
	-webkit-user-select: none;
	display: flex;
	}

	possible-group {
	display: span;
	padding-right: 10px;
	padding-left: 10px;
	}
	</style>

	<groups id="groups"></groups>
	<tr-ui-b-dropdown id="add_group"></tr-ui-b-dropdown>
	</template>
	</dom-module>

	<dom-module id="tr-ui-b-grouping-table-groupby-picker-group">
	<template>
	<style>
	:host {
	white-space: nowrap;
	border: 3px solid white;
	background-color: #dddddd;
	cursor: move;
	}

	:host(:not([vertical])) {
	display: inline;
	}

	:host([vertical]) {
	display: block;
	}

	:host(:not([vertical]).drop-before) {
	border-left: 3px solid black;
	}

	:host([vertical].drop-before) {
	border-top: 3px solid black;
	}

	:host(:not([vertical]).drop-after) {
	border-right: 3px solid black;
	}

	:host([vertical].drop-after) {
	border-bottom: 3px solid black;
	}

	:host([dragging]) {
	opacity: 0.5;
	}

	#remove {
	visibility: hidden;
	padding-left: 3px;
	width: 20px;
	height: 20px;
	cursor: auto;
	}

	#key {
	padding-right: 3px;
	}
	</style>

	<!-- TODO(eakuefner): Use an iron-icon here once
	https://github.com/catapult-project/catapult/issues/2772 is fixed. -->
	<span id="remove" on-click="remove_">×</span>
	<span id="key"></span>
	</template>
	</dom-module>

	<script>
	'use strict';

	tr.exportTo('tr.ui.b', function() {
	var THIS_DOC = document.currentScript.ownerDocument;

	Polymer({
	is: 'tr-ui-b-grouping-table-groupby-picker-group',

	created: function() {
	this.picker_ = undefined;
	this.group_ = undefined;
	},

	ready: function() {
	this.setAttribute('draggable', true);
	this.addEventListener('mouseover', this.onMouseOver_.bind(this));
	this.addEventListener('mouseleave', this.onMouseLeave_.bind(this));
	this.addEventListener('dragstart', this.onDragStart_.bind(this));
	this.addEventListener('dragover', this.onDragOver_.bind(this));
	},

	set group(g) {
	this.group_ = g;
	this.$.key.textContent = g.label;
	},

	get key() {
	return this.group_.key;
	},

	get picker() {
	return this.picker_;
	},

	set picker(picker) {
	this.picker_ = picker;
	this.vertical = picker.vertical;
	},

	// TODO(benjhayden): Use data-binding?
	get vertical() {
	return this.getAttribute('vertical');
	},

	set vertical(vertical) {
	if (vertical)
	this.setAttribute('vertical', true);
	else
	this.removeAttribute('vertical');
	},

	onMouseOver_: function(event) {
	this.$.remove.style.visibility = 'visible';
	},

	onMouseLeave_: function(event) {
	this.$.remove.style.visibility = 'hidden';
	},

	onDragStart_: function(event) {
	event.dataTransfer.effectAllowed = 'move';
	this.setAttribute('dragging', true);
	},

	onDragOver_: function(event) {
	event.preventDefault(); // Allows us to drop.
	event.dataTransfer.dropEffect = 'move';

	this.picker.clearDragIndicators_();
	if (this.picker.shouldDropBefore_(this, event)) {
	this.classList.add('drop-before');
	if (this.previousElementSibling)
	this.previousElementSibling.classList.add('drop-after');
	} else {
	this.classList.add('drop-after');
	if (this.nextElementSibling)
	this.nextElementSibling.classList.add('drop-before');
	}
	return false;
	},

	remove_: function(event) {
	var newKeys = this.picker.currentGroupKeys.slice();
	newKeys.splice(newKeys.indexOf(this.key), 1);
	this.picker.currentGroupKeys = newKeys;
	}
	});

	Polymer({
	is: 'tr-ui-b-grouping-table-groupby-picker',

	created: function() {
	this.currentGroupKeys_ = undefined;
	this.defaultGroupKeys_ = undefined;
	this.possibleGroups_ = [];
	this.settingsKey_ = [];
	},

	ready: function() {
	Polymer.dom(this.$.add_group.iconElement).textContent = 'Add another...';
	this.addEventListener('dragend', this.onDragEnd_.bind(this));
	this.addEventListener('drop', this.onDrop_.bind(this));
	},

	get defaultGroupKeys() {
	return this.defaultGroupKeys_;
	},

	set vertical(vertical) {
	if (vertical)
	this.setAttribute('vertical', true);
	else
	this.removeAttribute('vertical');

	for (var groupEl of this.$.groups.childNodes)
	groupEl.vertical = vertical;
	},

	get vertical() {
	return this.getAttribute('vertical');
	},

	set defaultGroupKeys(defaultGroupKeys) {
	this.defaultGroupKeys_ = defaultGroupKeys;
	this.maybeInit_();
	},

	get possibleGroups() {
	return this.possibleGroups_;
	},

	set possibleGroups(possibleGroups) {
	this.possibleGroups_ = possibleGroups;
	this.maybeInit_();
	},

	get settingsKey() {
	return this.settingsKey_;
	},

	set settingsKey(settingsKey) {
	this.settingsKey_ = settingsKey;
	this.maybeInit_();
	},

	maybeInit_: function() {
	if (!this.settingsKey_ \|\|
	!this.defaultGroupKeys_ \|\|
	!this.possibleGroups_) {
	return;
	}

	this.currentGroupKeys = tr.b.Settings.get(
	this.settingsKey_, this.defaultGroupKeys_);
	},

	get currentGroupKeys() {
	return this.currentGroupKeys_;
	},

	get currentGroups() {
	var groupsByKey = {};
	for (var group of this.possibleGroups_)
	groupsByKey[group.key] = group;
	return this.currentGroupKeys.map(groupKey => groupsByKey[groupKey]);
	},

	set currentGroupKeys(currentGroupKeys) {
	if (this.currentGroupKeys_ === currentGroupKeys)
	return;

	if (!(currentGroupKeys instanceof Array))
	throw new Error('Must be array');

	var availableGroupKeys = new Set();
	for (var group of this.possibleGroups_)
	availableGroupKeys.add(group.key);
	this.currentGroupKeys_ = currentGroupKeys.filter(
	k => availableGroupKeys.has(k));
	this.updateGroups_();

	tr.b.Settings.set(
	this.settingsKey_, this.currentGroupKeys_);

	this.dispatchEvent(new tr.b.Event('current-groups-changed'));
	},

	/**
	* @return {undefined\|Element}
	*/
	get draggingGroupElement() {
	for (var group of this.$.groups.children)
	if (group.getAttribute('dragging'))
	return group;
	return undefined;
	},

	shouldDropBefore_: function(groupEl, event) {
	var dragBoxRect = this.draggingGroupElement.getBoundingClientRect();
	var dropBoxRect = groupEl.getBoundingClientRect();
	// compare horizontally if drag and drop overlap vertically
	var dragVertRange = tr.b.Range.fromExplicitRange(
	dragBoxRect.top, dragBoxRect.bottom);
	var dropVertRange = tr.b.Range.fromExplicitRange(
	dropBoxRect.top, dropBoxRect.bottom);
	if (dragVertRange.intersectsRangeInclusive(dropVertRange))
	return event.clientX < ((dropBoxRect.left + dropBoxRect.right) / 2);
	return event.clientY < ((dropBoxRect.top + dropBoxRect.bottom) / 2);
	},

	clearDragIndicators_: function() {
	for (var groupEl of this.$.groups.children) {
	groupEl.classList.remove('drop-before');
	groupEl.classList.remove('drop-after');
	}
	},

	onDragEnd_: function(event) {
	this.clearDragIndicators_();
	for (var groupEl of this.$.groups.children)
	groupEl.removeAttribute('dragging');
	},

	onDrop_: function(event) {
	event.stopPropagation(); // stops the browser from redirecting.

	var draggingGroupEl = this.draggingGroupElement;
	var dropBeforeEl = undefined;
	var dropAfterEl = undefined;
	for (var groupEl of this.$.groups.children) {
	if (groupEl.classList.contains('drop-before')) {
	dropBeforeEl = groupEl;
	break;
	}
	if (groupEl.classList.contains('drop-after')) {
	dropAfterEl = groupEl;
	break;
	}
	}

	if (!dropBeforeEl && !dropAfterEl)
	return;

	this.$.groups.removeChild(draggingGroupEl);
	var lastGroupEl = this.$.groups.children[
	this.$.groups.children.length - 1];

	if (dropBeforeEl)
	this.$.groups.insertBefore(draggingGroupEl, dropBeforeEl);
	else if (dropAfterEl === lastGroupEl)
	this.$.groups.appendChild(draggingGroupEl);
	else
	this.$.groups.insertBefore(draggingGroupEl, dropAfterEl.nextSibling);

	var currentGroupKeys = [];
	for (var group of this.$.groups.children)
	currentGroupKeys.push(group.key);
	this.currentGroupKeys = currentGroupKeys;
	return false;
	},

	updateGroups_: function() {
	Polymer.dom(this.$.groups).textContent = '';
	Polymer.dom(this.$.add_group).textContent = '';

	var unusedGroups = {};
	var groupsByKey = {};
	for (var group of this.possibleGroups_) {
	unusedGroups[group.key] = group;
	groupsByKey[group.key] = group;
	}

	for (var key of this.currentGroupKeys_)
	delete unusedGroups[key];

	// Create groups.
	for (var key of this.currentGroupKeys_) {
	var group = groupsByKey[key];
	var groupEl = document.createElement(
	'tr-ui-b-grouping-table-groupby-picker-group');
	groupEl.picker = this;
	groupEl.group = group;
	Polymer.dom(this.$.groups).appendChild(groupEl);
	}

	// Adjust dropdown.
	tr.b.iterItems(unusedGroups, function(key, group) {
	var groupEl = document.createElement('possible-group');
	Polymer.dom(groupEl).textContent = group.label;
	groupEl.addEventListener('click', function() {
	var newKeys = this.currentGroupKeys.slice();
	newKeys.push(key);
	this.currentGroupKeys = newKeys;
	this.$.add_group.close();
	}.bind(this));
	Polymer.dom(this.$.add_group).appendChild(groupEl);
	}, this);

	// Hide dropdown if needed.
	if (tr.b.dictionaryLength(unusedGroups) == 0) {
	this.$.add_group.style.display = 'none';
	} else {
	this.$.add_group.style.display = '';
	}
	}
	});

	return {
	};
	});
	</script>