Page MenuHomePhabricator
Files F15444756

D9570.id22933.diff
No OneTemporary
Actions

D9570.id22933.diff
View Options

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();
+ }
+
+ }
+});

File Metadata

Mime Type
text/plain
Expires
Fri, Mar 28, 11:06 AM (1 w, 3 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
7518604
Default Alt Text
D9570.id22933.diff (5 KB)

Event Timeline

Phabricator · Built by Phacility