diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -118,12 +118,11 @@ 'logInLink' => (string) $login_uri, 'navsequence' => $navsequence, 'fullIcon' => id(new PHUIIconView())->setIconFont('fa-arrows-alt'), + 'rawIcon' => id(new PHUIIconView())->setIconFont('fa-file-image-o'), 'downloadIcon' => id(new PHUIIconView())->setIconFont('fa-download'), ); Javelin::initBehavior('pholio-mock-view', $config); - $mockview = ''; - $mock_wrapper = javelin_tag( 'div', array( @@ -162,15 +161,15 @@ ), ''); - $mockview[] = phutil_tag( + $mockview = phutil_tag( 'div', - array( - 'class' => 'pholio-mock-image-container', - 'id' => 'pholio-mock-image-container' - ), - array($mock_wrapper, $inline_comments_holder)); + array( + 'class' => 'pholio-mock-image-container', + 'id' => 'pholio-mock-image-container' + ), + $mock_wrapper); - return $mockview; + return array($mockview, $inline_comments_holder); } private function getImagePageURI(PholioImage $image, PholioMock $mock) { diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -205,3 +205,8 @@ padding: 12px; border-top: 1px solid {$lightblueborder}; } + +.jx-fullscreen { + width: 100%; + height: 100%; +} diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -12,6 +12,7 @@ * javelin-mask * javelin-behavior-device * phabricator-keyboard-shortcut + * phabricator-fullscreen */ JX.behavior('pholio-mock-view', function(config) { var is_dragging = false; @@ -586,6 +587,11 @@ /* -( Render )------------------------------------------------------------- */ + JX.Stratcom.listen('click', 'pholio-fullscreen', function(e) { + e.kill(); + JX.Fullscreen.startFullscreen(JX.$('pholio-mock-image-container')); + }); + function render_image_info(image) { var info = []; @@ -604,7 +610,7 @@ target: '_blank', className: 'pholio-image-button-link' }, - JX.$H(config.fullIcon)))); + JX.$H(config.rawIcon)))); // TODO: This should be a form which performs the download; for now, it // just takes the user to the info page. @@ -622,6 +628,21 @@ }, JX.$H(config.downloadIcon)))); + buttons.push( + JX.$N( + 'div', + { + className: 'pholio-image-button' + }, + JX.$N( + 'a', + { + href: '#', + className: 'pholio-image-button-link', + sigil: 'pholio-fullscreen' + }, + JX.$H(config.fullIcon)))); + var title = JX.$N( 'div', {className: 'pholio-image-title'}, diff --git a/webroot/rsrc/js/core/Fullscreen.js b/webroot/rsrc/js/core/Fullscreen.js new file mode 100644 --- /dev/null +++ b/webroot/rsrc/js/core/Fullscreen.js @@ -0,0 +1,99 @@ +/** + * @requires javelin-install + * javelin-dom + * javelin-stratcom + * javelin-util + * @provides phabricator-fullscreen + * @javelin + */ + +JX.install('Fullscreen', { + + statics: { + _element: null, + _installed: false, + + isAvailable: function() { + var self = JX.Fullscreen; + return !!self._getStartFunction(document.documentElement); + }, + + isFullscreen: function() { + var self = JX.Fullscreen; + return !!self._element; + }, + + startFullscreen: function(node) { + var self = JX.Fullscreen; + if (!self.isAvailable()) { + return; + } + + if (self._element) { + return; + } + + if (!self._installed) { + self._install(); + self._installed = true; + } + + self._element = node; + JX.DOM.alterClass(self._element, 'jx-fullscreen', true); + + self._getStartFunction(node)(); + }, + + stopFullscreen: function() { + var self = JX.Fullscreen; + + if (!self._element) { + return; + } + + JX.DOM.alterClass(self._element, 'jx-fullscreen', false); + self._element = null; + + var fn = document.exitFullscreen || + document.msExitFullscreen || + document.mozCancelFullScreen || + document.webkitRequestFullscreen; + + fn.call(document); + }, + + _install: function() { + var self = JX.Fullscreen; + JX.Stratcom.listen('keydown', null, self._onkey); + }, + + _getStartFunction: function(node) { + var fn = node.requestFullscreen || + node.msRequestFullscreen || + node.mozRequestFullScreen || + node.webkitRequestFullscreen; + + if (!fn) { + return null; + } + + return JX.bind(node, fn); + }, + + _onkey: function(e) { + var self = JX.Fullscreen; + + if (!self.isFullscreen()) { + return; + } + + if (e.getSpecialKey() != 'esc') { + return; + } + + self.stopFullscreen(); + e.kill(); + } + + } +});