veyron/examples/pipetobrowser: Supporting fullscreen mode for pipe tabs
and a small bug fix related to Grid's responsive behaviour.
Using webkit's fullscreen API to fullscreen main content of tabs.
The bug with grid was preventing columns to show up again after more space
became available.
Change-Id: Idd1a2df57926d929a26c9667aab4372e11405d55
diff --git a/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html b/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
index 3ff76c0..55498b0 100644
--- a/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
+++ b/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
@@ -306,16 +306,16 @@
var minWidth = 768;
var tableWidth = this.$.table.offsetWidth;
- if (tableWidth >= minWidth) {
- return;
- }
-
// reset to original flex values
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
col.columnData.flex = col.columnData.origFlex;
}
+ if (tableWidth >= minWidth) {
+ return;
+ }
+
// total of all flex values from all columns
var totalFlex = this.columns.reduce( function(prev, col) {
return prev + col.columnData.flex;
diff --git a/examples/pipetobrowser/browser/views/pipes/component.html b/examples/pipetobrowser/browser/views/pipes/component.html
index e820020..f72aef3 100644
--- a/examples/pipetobrowser/browser/views/pipes/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/component.html
@@ -76,6 +76,10 @@
tabToolbar.addEventListener('close-action', function() {
self.removeTab(key);
});
+ tabToolbar.addEventListener('fullscreen-action', function() {
+ var tabContent = self.pipeTabs[key].tabContent;
+ tabContent.fullscreen();
+ });
// Create the content of the tab
var tabContent = document.createElement('p2b-pipes-tab-content');
diff --git a/examples/pipetobrowser/browser/views/pipes/tab-content/component.html b/examples/pipetobrowser/browser/views/pipes/tab-content/component.html
index 3ce5c8e..64810ac 100644
--- a/examples/pipetobrowser/browser/views/pipes/tab-content/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/tab-content/component.html
@@ -22,6 +22,18 @@
//TODO(aghassemi) There must be a better way for these .innerHTML='', figure it out.
this.$.main.innerHTML = '';
this.$.main.appendChild(newEl);
+ },
+
+ /*
+ * Puts the tab content into fullscreen mode
+ */
+ fullscreen: function() {
+ var flag = Element.ALLOW_KEYBOARD_INPUT;
+ if (this.$.main.requestFullscreen) {
+ this.$.main.requestFullscreen(flag);
+ } else if( this.$.main.webkitRequestFullscreen ) {
+ this.$.main.webkitRequestFullscreen(flag);
+ }
}
});
</script>
diff --git a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
index ff4c177..98a930b 100644
--- a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
@@ -7,11 +7,13 @@
<span flex>
{{ title }}
</span>
- <paper-icon-button icon="close" on-tap="{{ onClose }}"/>
+ <paper-icon-button id="fullscreenIcon" icon="fullscreen" on-click="{{ fireFullscreenAction }}"></paper-icon-button>
+ <paper-icon-button icon="close" on-click="{{ fireCloseAction }}"></paper-icon-button>
</core-toolbar>
</template>
<script>
Polymer('p2b-pipes-tab-toolbar', {
+
/*
* Title of the toolbar
* @type {string}
@@ -22,8 +24,16 @@
* Event that's fired when close action of the toolbar is triggered
* @event
*/
- onClose: function() {
+ fireCloseAction: function() {
this.fire('close-action');
+ },
+
+ /*
+ * Event that's fired when fullscreen action of the toolbar is triggered
+ * @event
+ */
+ fireFullscreenAction: function() {
+ this.fire('fullscreen-action');
}
});
</script>
