From 8ac1afc81aa89750e931a6aa9422d82206516ba9 Mon Sep 17 00:00:00 2001 From: Lauri-Henrik Jalonen Date: Mon, 28 Jan 2013 11:18:50 -0800 Subject: [PATCH] Show all photos in a Pholio mock and allow switching between them Summary: Mock page now shows all images. Switching between images is done by clicking thumbnails. Test Plan: Verified that all images are shown. Verified that by clicking thumbnail the image clicked will show. Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2427 Differential Revision: https://secure.phabricator.com/D4698 --- src/__celerity_resource_map__.php | 13 ++++- .../controller/PholioMockViewController.php | 5 +- .../pholio/view/PholioMockImagesView.php | 55 ++++++++++++++++--- .../rsrc/css/application/pholio/pholio.css | 16 +++++- .../pholio/behavior-pholio-mock-view.js | 17 ++++++ 5 files changed, 90 insertions(+), 16 deletions(-) create mode 100644 webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 3a778c1f1a..a613d82359 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -1834,6 +1834,17 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/js/application/phame/phame-post-preview.js', ), + 'javelin-behavior-pholio-mock-view' => + array( + 'uri' => '/res/10fbdca1/rsrc/js/application/pholio/behavior-pholio-mock-view.js', + 'type' => 'js', + 'requires' => + array( + 0 => 'javelin-behavior', + 1 => 'javelin-stratcom', + ), + 'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js', + ), 'javelin-behavior-phriction-document-preview' => array( 'uri' => '/res/f1665ecd/rsrc/js/application/phriction/phriction-document-preview.js', @@ -3165,7 +3176,7 @@ celerity_register_resource_map(array( ), 'pholio-css' => array( - 'uri' => '/res/e454c33f/rsrc/css/application/pholio/pholio.css', + 'uri' => '/res/8d8d99c1/rsrc/css/application/pholio/pholio.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/pholio/controller/PholioMockViewController.php b/src/applications/pholio/controller/PholioMockViewController.php index 0bf0022fe1..0742bd0a8b 100644 --- a/src/applications/pholio/controller/PholioMockViewController.php +++ b/src/applications/pholio/controller/PholioMockViewController.php @@ -67,8 +67,6 @@ final class PholioMockViewController extends PholioController { $output = new PholioMockImagesView(); $output->setMock($mock); - $carousel = $output->render(); - $xaction_view = id(new PhabricatorApplicationTransactionView()) ->setUser($this->getRequest()->getUser()) ->setTransactions($xactions) @@ -80,11 +78,12 @@ final class PholioMockViewController extends PholioController { $header, $actions, $properties, - $carousel, + $output->render(), $xaction_view, $add_comment, ); + return $this->buildApplicationPage( $content, array( diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index 103b751a6b..d073347616 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -13,22 +13,59 @@ final class PholioMockImagesView extends AphrontView { throw new Exception("Call setMock() before render()!"); } + $mockview = ""; + $file = head($this->mock->getImages())->getFile(); - $image_tag = phutil_render_tag( - 'img', - array( - 'src' => $file->getBestURI(), - 'class' => 'pholio-mock-image', - ), - ''); + $main_image_id = celerity_generate_unique_node_id(); - return phutil_render_tag( + $main_image_tag = phutil_render_tag( + 'img', + array( + 'src' => $file->getBestURI(), + 'class' => 'pholio-mock-image', + 'id' => $main_image_id, + )); + + $mockview .= phutil_render_tag( 'div', array( 'class' => 'pholio-mock-image-container', ), - $image_tag); + $main_image_tag); + + if (count($this->mock->getImages()) > 1) { + require_celerity_resource('javelin-behavior-pholio-mock-view'); + $config = array('mainID' => $main_image_id); + Javelin::initBehavior('pholio-mock-view', $config); + + $thumbnails = array(); + foreach ($this->mock->getImages() as $image) { + $thumbfile = $image->getFile(); + + $tag = javelin_render_tag( + 'img', + array( + 'src' => $thumbfile->getThumb160x120URI(), + 'sigil' => 'mock-thumbnail', + 'class' => 'pholio-mock-carousel-thumbnail', + 'meta' => array( + 'fullSizeURI' => $thumbfile->getBestURI(), + 'imageID' => $image->getID(), + ), + )); + $thumbnails[] = $tag; + } + + $mockview .= phutil_render_tag( + 'div', + array( + 'class' => 'pholio-mock-carousel', + ), + implode($thumbnails)); + } + + return $mockview; } } diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 38e81f19ed..686603a082 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -6,7 +6,17 @@ text-align: center; } -.pholio-mock-image { - margin: 10px 0px; - display: inline-block; +.pholio-mock-carousel { + background-color: #282828; + text-align: center; +} + +.pholio-mock-carousel-thumbnail { + margin-right: 5px; + display: inline-block; +} + +.pholio-mock-image { + margin: 10px 0px; + display: inline-block; } diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js new file mode 100644 index 0000000000..c9953e33d6 --- /dev/null +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -0,0 +1,17 @@ +/** + * @provides javelin-behavior-pholio-mock-view + * @requires javelin-behavior + * javelin-stratcom + */ +JX.behavior('pholio-mock-view', function(config) { + JX.Stratcom.listen( + 'click', // Listen for clicks... + 'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail". + function(e) { + var data = e.getNodeData('mock-thumbnail'); + + var main = JX.$(config.mainID); + main.src = data.fullSizeURI; + }); +}); +