No OneTemporary
Actions

Size

39 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/applications/pholio/remarkup/PholioRemarkupRule.php b/src/applications/pholio/remarkup/PholioRemarkupRule.php
	index 13cdd0333b..c92d39d889 100644
	--- a/src/applications/pholio/remarkup/PholioRemarkupRule.php
	+++ b/src/applications/pholio/remarkup/PholioRemarkupRule.php
	@@ -1,27 +1,39 @@
	<?php

	final class PholioRemarkupRule
	extends PhabricatorRemarkupRuleObject {

	protected function getObjectNamePrefix() {
	return 'M';
	}

	protected function loadObjects(array $ids) {
	$viewer = $this->getEngine()->getConfig('viewer');
	return id(new PholioMockQuery())
	->setViewer($viewer)
	->needImages(true)
	->needTokenCounts(true)
	->withIDs($ids)
	->execute();
	}

	protected function renderObjectEmbed($object, $handle, $options) {
	$embed_mock = id(new PholioMockEmbedView())
	->setMock($object);

	+ if (strlen($options)) {
	+ $parser = new PhutilSimpleOptions();
	+ $opts = $parser->parse(substr($options, 1));
	+
	+ if (isset($opts['image'])) {
	+ $images = array_unique(
	+ explode('&', preg_replace('/\s+/', '', $opts['image'])));
	+
	+ $embed_mock->setImages($images);
	+ }
	+ }
	+
	return $embed_mock->render();
	}

	}
	diff --git a/src/applications/pholio/view/PholioMockEmbedView.php b/src/applications/pholio/view/PholioMockEmbedView.php
	index 8cdc1d7ffe..5329299021 100644
	--- a/src/applications/pholio/view/PholioMockEmbedView.php
	+++ b/src/applications/pholio/view/PholioMockEmbedView.php
	@@ -1,104 +1,120 @@
	<?php

	final class PholioMockEmbedView extends AphrontView {

	private $mock;
	+ private $images = array();

	public function setMock(PholioMock $mock) {
	$this->mock = $mock;
	return $this;
	}

	+ public function setImages(array $images) {
	+ $this->images = $images;
	+ return $this;
	+ }
	+
	public function render() {
	if (!$this->mock) {
	throw new Exception("Call setMock() before render()!");
	}

	require_celerity_resource('pholio-css');


	$mock_link = phutil_tag(
	'a',
	array(
	'href' => '/M'.$this->mock->getID(),
	),
	'M'.$this->mock->getID().' '.$this->mock->getName());

	$mock_header = phutil_tag(
	'div',
	array(
	'class' => 'pholio-mock-embed-head',
	),
	$mock_link);

	+ $images_to_show = array();
	+ if (!empty($this->images)) {
	+ $images_to_show = array_intersect_key(
	+ $this->mock->getImages(), array_flip($this->images));
	+ }
	+
	+ if (empty($images_to_show)) {
	+ $images_to_show = array_slice($this->mock->getImages(), 0, 4);
	+ }
	+
	$thumbnails = array();
	- foreach (array_slice($this->mock->getImages(), 0, 4) as $image) {
	+ foreach ($images_to_show as $image) {
	$thumbfile = $image->getFile();

	$dimensions = PhabricatorImageTransformer::getPreviewDimensions(
	$thumbfile,
	140);

	$tag = phutil_tag(
	'img',
	array(
	'width' => $dimensions['sdx'],
	'height' => $dimensions['sdy'],
	'class' => 'pholio-mock-carousel-thumbnail',
	'src' => $thumbfile->getPreview140URI(),
	'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px',
	));

	$thumbnails[] = javelin_tag(
	'a',
	array(
	'class' => 'pholio-mock-carousel-thumb-item',
	'href' => '/M'.$this->mock->getID().'/'.$image->getID().'/',
	),
	$tag);
	}

	$mock_body = phutil_tag(
	'div',
	array(),
	$thumbnails);

	$icons_data = array(
	'image' => count($this->mock->getImages()),
	'like' => $this->mock->getTokenCount());

	$icon_list = array();
	foreach ($icons_data as $icon_name => $icon_value) {
	$icon = phutil_tag(
	'span',
	array(
	'class' =>
	'pholio-mock-embed-icon sprite-icon action-'.$icon_name.'-grey',
	),
	' ');
	$count = phutil_tag('span', array(), $icon_value);

	$icon_list[] = phutil_tag(
	'span',
	array(
	'class' => 'pholio-mock-embed-icons'
	),
	array($icon, $count));
	}

	$mock_footer = phutil_tag(
	'div',
	array(
	'class' => 'pholio-mock-embed-footer',
	),
	$icon_list);


	return phutil_tag(
	'div',
	array(
	'class' => 'pholio-mock-embed'
	),
	array($mock_header, $mock_body, $mock_footer));
	}
	}
	diff --git a/src/docs/userguide/remarkup.diviner b/src/docs/userguide/remarkup.diviner
	index 24833d2b65..e6b95e5d44 100644
	--- a/src/docs/userguide/remarkup.diviner
	+++ b/src/docs/userguide/remarkup.diviner
	@@ -1,427 +1,442 @@
	@title Remarkup Reference
	@group userguide

	Explains how to make bold text; this makes your words louder so you can win
	arguments.

	= Overview =

	Phabricator uses a lightweight markup language called "Remarkup", similar to
	other lightweight markup languages like Markdown and Wiki markup.

	This document describes how to format text using Remarkup.

	= Quick Reference =

	All the syntax is explained in more detail below, but this is a quick guide to
	formatting text in Remarkup.

	These are inline styles, and can be applied to most text:

	bold //italic// ##monospaced## `monospaced` ~~deleted~~
	D123 T123 rX123 # Link to Objects
	{D123} {T123} # Link to Objects (Full Name)
	{F123} # Embed Images
	@username # Mention a user
	[[wiki page]] # Link to Phriction
	[[wiki page \| name]] # Named link to Phriction
	http://xyz/ # Link to web
	[[http://xyz/ \| name]] # Named link to web


	These are block styles, and must be separated from surrounding text by
	empty lines:

	= Large Header =
	== Smaller Header ==
	> Quoted Text
	Use "- " or "* " for bulleted lists, and "# " for numbered lists.
	Use ``` or indent two spaces for code.
	Use %%% for a literal block.
	Use \| ... \| ... for tables.

	= Basic Styling =

	Format basic text styles like this:

	bold text
	//italic text//
	##monospaced text##
	`monospaced text`
	~~deleted text~~

	Those produce bold text, //italic text//, ##monospaced text##,
	`monospaced text` and ~~deleted text~~, respectively.

	= Layout =

	Make headers like this:

	= Large Header =

	== Smaller Header ==

	===== Very Small Header =====

	You can optionally omit the trailing "=" signs -- that is, these are the same:

	== Smaller Header ==

	== Smaller Header

	This produces headers like the ones in this document. Make sure you have an
	empty line before and after the header.

	Make lists by beginning each item with a "-" or a "*":

	lang=text
	- milk
	- eggs
	- bread

	* duck
	* duck
	* goose

	This produces a list like this:

	- milk
	- eggs
	- bread

	(Note that you need to put a space after the "-" or "*".)

	You can make numbered lists with a "#" instead of "-" or "*":

	# Articuno
	# Zapdos
	# Moltres

	You can also nest lists:

	```- Body
	- Head
	- Arm
	- Elbow
	- Hand
	# Thumb
	# Index
	# Middle
	# Ring
	# Pinkie
	- Leg
	- Knee
	- Foot```

	...which produces:

	- Body
	- Head
	- Arm
	- Elbow
	- Hand
	# Thumb
	# Index
	# Middle
	# Ring
	# Pinkie
	- Leg
	- Knee
	- Foot

	If you prefer, you can indent lists using multiple characters to show indent
	depth, like this:

	```- Tree
	-- Branch
	--- Twig```

	As expected, this produces:

	- Tree
	-- Branch
	--- Twig

	Make code blocks by indenting two spaces:

	f(x, y);

	You can also use three backticks to enclose the code block:

	```f(x, y);
	g(f);```

	You can specify a language for syntax highlighting with "lang=xxx":

	lang=text
	lang=html
	<a href="#">...</a>

	This will highlight the block using a highlighter for that language, if one is
	available (in most cases, this means you need to configure Pygments):

	lang=html
	<a href="#">...</a>

	You can also use a "COUNTEREXAMPLE" header to show that a block of code is
	bad and shouldn't be copied:

	lang=text
	COUNTEREXAMPLE
	function f() {
	global $$variable_variable;
	}

	This produces a block like this:

	COUNTEREXAMPLE
	function f() {
	global $$variable_variable;
	}

	You can use ##lines=N## to limit the vertical size of a chunk of code, and
	##name=some_name.ext## to give it a name. For example, this:

	lang=text
	lang=html, name=example.html, lines=12, counterexample
	...

	...produces this:

	lang=html, name=example.html, lines=12, counterexample
	<p>Apple</p>
	<p>Apricot</p>
	<p>Avocado</p>
	<p>Banana</p>
	<p>Bilberry</p>
	<p>Blackberry</p>
	<p>Blackcurrant</p>
	<p>Blueberry</p>
	<p>Currant</p>
	<p>Cherry</p>
	<p>Cherimoya</p>
	<p>Clementine</p>
	<p>Date</p>
	<p>Damson</p>
	<p>Durian</p>
	<p>Eggplant</p>
	<p>Elderberry</p>
	<p>Feijoa</p>
	<p>Gooseberry</p>
	<p>Grape</p>
	<p>Grapefruit</p>
	<p>Guava</p>
	<p>Huckleberry</p>
	<p>Jackfruit</p>
	<p>Jambul</p>
	<p>Kiwi fruit</p>
	<p>Kumquat</p>
	<p>Legume</p>
	<p>Lemon</p>
	<p>Lime</p>
	<p>Lychee</p>
	<p>Mandarine</p>
	<p>Mango</p>
	<p>Mangostine</p>
	<p>Melon</p>

	You can also use "NOTE:" to call out an important idea.

	NOTE: Don't cross the streams!

	= Linking URIs =

	URIs are automatically linked: http://phabricator.org/

	If you have a URI with problematic characters in it, like
	"##http://comma.org/,##", you can surround it with angle brackets:

	<http://comma.org/,>

	This will force the parser to consume the whole URI: <http://comma.org/,>

	You can also use create named links, where you choose the displayed text. These
	work within Phabricator or on the internet at large:

	[[/herald/transcript/ \| Herald Transcripts]]
	[[http://www.boring-legal-documents.com/ \| exciting legal documents]]

	= Linking to Objects =

	You can link to Differential revisions, Diffusion commits and Maniphest tasks
	by mentioning the name of an object:

	D123 # Link to Differential revision D123
	rX123 # Link to SVN commit 123 from the "X" repository
	rXaf3192cd5 # Link to Git commit "af3192cd5..." from the "X" repository.
	# You must specify at least 7 characters of the hash.
	T123 # Link to Maniphest task T123

	You can also link directly to a comment in Maniphest and Differential:

	T123#4 # Link to comment #4 of T123

	You can also generate full-name references to some objects by using braces:

	{D123} # Link to Differential revision D123 with the full name
	{T123} # Link to Maniphest task T123 with the full name

	These references will also show when an object changes state (for instance, a
	task or revision is closed).

	= Quoting Text =

	To quote text, preface it with an ">":

	> This is quoted text.

	This appears like this:

	> This is quoted text.

	= Embedding Images =

	You can embed an image by using braces to refer to it:

	{F123} # Embed the image file F123

	In most interfaces, you can drag-and-drop an image from your computer into the
	text area to upload and reference it.

	Some browsers (e.g. Chrome) support uploading an image data just by pasting them
	from clipboard into the text area.

	You can set file display options like this:

	{F123, layout=left, float, size=full}

	Valid options are:

	- layout left (default), center, right, inline, link (render a link
	instead of a thumbnail for images)
	- float If layout is set to left or right, the image will be floated so
	text wraps around it.
	- size thumb (default), full
	- name with `layout=link` or for non-images, use this name for the link
	text

	= Embedding Media =

	If you set a configuration flag, you can embed media directly in text:

	- remarkup.enable-embedded-youtube: allows you to paste in YouTube videos
	and have them render inline.

	This option is disabled by default because it has security and/or
	silliness implications. Read the description in ##default.conf.php## before
	enabling it.

	= Image Macros =

	You can upload image macros (More Stuff -> Macro) which will replace text
	strings with the image you specify. For instance, you could upload an image of a
	dancing banana to create a macro named "peanutbutterjellytime", and then any
	time you type that string on a separate line it will be replaced with the image
	of a dancing banana.

	= Mentioning Users =

	In Differential and Maniphest, you can mention another user by writing:

	@username

	When you submit your comment, this will add them as a CC on the revision or task
	if they aren't already CC'd.

	= Phriction Documents =

	You can link to Phriction documents with a name or path:

	Make sure you sign and date your [[legal/Letter of Marque and Reprisal]]!

	With a pipe (##\|##), you can retitle the link. Use this to mislead your
	opponents:

	Check out these [[legal/boring_documents/ \| exciting legal documents]]!

	= Literal Blocks =

	To place text in a literal block use "%%%":

	%%%Text that won't be processed by remarkup
	[[http://www.example.com \| example]]
	%%%

	Remarkup will not process the text inside of literal blocks (other than to
	escape HTML and preserve line breaks).

	= Tables =

	Remarkup supports simple table syntax. For example, this:

	\| Fruit \| Color \| Price \| Peel?
	\| ----- \| ----- \| ----- \| -----
	\| Apple \| red \| `$0.93` \| no
	\| Banana \| yellow \| `$0.19` \| YES

	...produces this:

	\| Fruit \| Color \| Price \| Peel?
	\| ----- \| ----- \| ----- \| -----
	\| Apple \| red \| `$0.93` \| no
	\| Banana \| yellow \| `$0.19` \| YES

	Remarkup also supports a simplified HTML table syntax. For example, this:

	<table>
	<tr>
	<th>Fruit</th>
	<th>Color</th>
	<th>Price</th>
	<th>Peel?</th>
	</tr>
	<tr>
	<td>Apple</td>
	<td>red</td>
	<td>`$0.93`</td>
	<td>no</td>
	</tr>
	<tr>
	<td>Banana</td>
	<td>yellow</td>
	<td>`$0.19`</td>
	<td>YES</td>
	</tr>
	</table>

	...produces this:

	<table>
	<tr>
	<th>Fruit</th>
	<th>Color</th>
	<th>Price</th>
	<th>Peel?</th>
	</tr>
	<tr>
	<td>Apple</td>
	<td>red</td>
	<td>`$0.93`</td>
	<td>no</td>
	</tr>
	<tr>
	<td>Banana</td>
	<td>yellow</td>
	<td>`$0.19`</td>
	<td>YES</td>
	</tr>
	</table>

	Some general notes about this syntax:

	- your tags must all be properly balanced;
	- your tags must NOT include attributes (`<td>` is OK, `<td style="...">` is
	not);
	- you can use other Remarkup rules (like bold, //italics//, etc.) inside
	table cells.

	+= Embedding Pholio mocks =
	+
	+You can embed a Pholio mock by using braces to refer to it:
	+
	+ {M123} # Embed the mock M123
	+
	+By default the first four images from the mock set are displayed. This behavior
	+can be overridden with the image option. With the image option you can
	+provide one or more imageIDs to display.
	+
	+You can set the image (or images) to display like this:
	+
	+ {M123, image=12345}
	+
	+ {M123, image=12345 & 6789}
	diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
	index 1643016ccf..e0a05c9e4c 100644
	--- a/webroot/rsrc/css/application/pholio/pholio.css
	+++ b/webroot/rsrc/css/application/pholio/pholio.css
	@@ -1,183 +1,184 @@
	/**
	* @provides pholio-css
	*/
	.pholio-mock-image-container {
	background-color: #282828;
	text-align: center;
	vertical-align: middle;
	position: relative;
	background: url('/rsrc/image/texture/pholio-background.gif');
	}

	.pholio-mock-carousel {
	background-color: #282828;
	text-align: center;
	border-top: 1px solid #101010;
	}

	.device-desktop .pholio-mock-carousel {
	margin-right: 320px;
	}

	.pholio-mock-carousel-thumb-item {
	display: inline-block;
	cursor: pointer;
	width: 140px;
	height: 140px;
	padding: 5px;
	margin: 3px;
	background: #181818;
	vertical-align: middle;
	border: 1px solid #383838;
	position: relative;
	}

	.device-desktop .pholio-mock-carousel-thumb-item:hover,
	.pholio-mock-carousel-thumb-current {
	background: #383838;
	border-color: #686868;
	}

	.device .pholio-mock-carousel-thumb-item {
	width: 5px;
	height: 5px;
	padding: 0px;
	border-radius: 5px;
	margin: 5px 2px;
	background: #383838;
	border-color: #686868;
	}

	.device .pholio-mock-carousel-thumb-current {
	background: #dfdfdf;
	border-color: #ffffff;
	}

	.device .pholio-mock-carousel-thumb-item img {
	display: none;
	}

	.pholio-mock-carousel-thumbnail {
	margin: auto;
	position: relative;
	}

	.pholio-mock-image {
	margin: auto;
	cursor: crosshair;
	}

	.pholio-mock-select-fill {
	position: absolute;
	background: #ffffff;
	opacity: 0.25;
	box-sizing: border-box;
	border: 1px solid #000000;
	}

	.pholio-mock-select-border {
	position: absolute;
	border: 1px dashed #ffffff;
	box-sizing: border-box;
	}

	.pholio-mock-image-panel {
	padding: 20px;
	border-top: 1px solid #333;
	}

	.device-desktop .pholio-mock-image-panel {
	border-right: 1px solid #333;
	margin-right: 319px;
	}

	.pholio-mock-image-viewport {
	position: relative;
	margin: auto;
	display: inline-block;
	}

	.pholio-inline-comment-header {
	color: #fff;
	border-bottom: 1px solid #555;
	font-weight: bold;
	padding-bottom: 6px;
	margin-bottom: 4px;
	}

	.pholio-image-loading img {
	opacity: 0.50;
	}

	.pholio-image-info {
	border-bottom: 1px solid #101010;
	margin-bottom: 5px;
	}

	.pholio-image-info-item {
	padding: 0 10px;
	margin: 8px 0;
	}

	.pholio-visible-size {
	color: #ffffff;
	}

	.pholio-image-description {
	color: #777777;
	}

	.pholio-image-title {
	color: #ffffff;
	}

	.pholio-device-lightbox {
	position: absolute;
	overflow: auto;
	z-index: 99;
	}

	.pholio-device-lightbox img {
	display: block;
	margin: auto;
	}

	.pholio-device-lightbox-loading {
	background: url(/rsrc/image/darkload.gif) no-repeat center;
	}

	.pholio-mock-embed {
	display: inline-block;
	background-color: #282828;
	padding: 5px;
	color: #fff;
	+ margin: 2px;
	}

	.pholio-mock-embed-head {
	border-bottom: 1px solid #3d3d3d;
	padding: 2px;
	margin:2px;
	}

	.pholio-mock-embed-footer {
	margin: 2px;
	color: #aaa;
	}

	.pholio-mock-embed-icons {
	float: left;
	margin-left: 10px;
	}

	.pholio-mock-embed-icon {
	height: 14px;
	width: 14px;
	float: left;
	padding-left: 2px;
	margin-right: 2px;
	}

	.pholio-mock-embed-head a {
	color: #fff;
	font-weight: bold;
	}
	diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
	index 22511c976d..bb8bf26f21 100644
	--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
	+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
	@@ -1,824 +1,831 @@
	/**
	* @provides javelin-behavior-pholio-mock-view
	* @requires javelin-behavior
	* javelin-util
	* javelin-stratcom
	* javelin-dom
	* javelin-vector
	* javelin-magical-init
	* javelin-request
	* javelin-history
	* javelin-workflow
	* javelin-mask
	* javelin-behavior-device
	* phabricator-keyboard-shortcut
	*/
	JX.behavior('pholio-mock-view', function(config) {
	var is_dragging = false;

	var drag_begin;
	var drag_end;
	var panel = JX.$(config.panelID);
	var viewport = JX.$(config.viewportID);

	var selection_border;
	var selection_fill;
	var active_image;

	var inline_comments = {};


	/* -( Stage )-------------------------------------------------------------- */


	var stage = (function() {
	var loading = false;
	var stageElement = JX.$(config.panelID);
	var viewElement = JX.$(config.viewportID);
	var gutterElement = JX.$('mock-inline-comments');
	var reticles = [];
	var cards = [];
	var inline_phid_map = {};

	function begin_load() {
	if (loading) {
	return;
	}
	loading = true;
	clear_stage();
	draw_loading();
	}

	function end_load() {
	if (!loading) {
	return;
	}
	loading = false;
	draw_loading();
	}

	function draw_loading() {
	JX.DOM.alterClass(stageElement, 'pholio-image-loading', loading);
	}

	function add_inline_node(node, phid) {
	inline_phid_map[phid] = (inline_phid_map[phid] \|\| []);
	inline_phid_map[phid].push(node);
	}

	function add_reticle(reticle, phid) {
	mark_ref(reticle, phid);

	reticles.push(reticle);
	add_inline_node(reticle, phid);

	viewElement.appendChild(reticle);
	}

	function clear_stage() {
	for (var ii = 0; ii < reticles.length; ii++) {
	JX.DOM.remove(reticles[ii]);
	}
	for (var ii = 0; ii < cards.length; ii++) {
	JX.DOM.remove(cards[ii]);
	}
	reticles = [];
	cards = [];
	inline_phid_map = {};
	}

	function highlight_inline(phid, show) {
	var nodes = inline_phid_map[phid] \|\| [];
	var cls = 'pholio-mock-inline-comment-highlight';
	for (var ii = 0; ii < nodes.length; ii++) {
	JX.DOM.alterClass(nodes[ii], cls, show);
	}
	}

	function remove_inline(phid) {
	var nodes = inline_phid_map[phid] \|\| [];
	for (var ii = 0; ii < nodes.length; ii++) {
	JX.DOM.remove(nodes[ii]);
	}
	delete inline_phid_map[phid];
	}

	function mark_ref(node, phid) {
	JX.Stratcom.addSigil(node, 'pholio-inline-ref');
	JX.Stratcom.addData(node, {phid: phid});
	}

	function add_card(card, phid) {
	mark_ref(card, phid);

	cards.push(card);
	add_inline_node(card, phid);

	gutterElement.appendChild(card);
	}

	return {
	beginLoad: begin_load,
	endLoad: end_load,
	addReticle: add_reticle,
	clearStage: clear_stage,
	highlightInline: highlight_inline,
	removeInline: remove_inline,
	addCard: add_card
	};
	})();

	function get_image_index(id) {
	for (var ii = 0; ii < config.images.length; ii++) {
	if (config.images[ii].id == id) {
	return ii;
	}
	}
	return null;
	}

	function get_image(id) {
	var idx = get_image_index(id);
	if (idx === null) {
	return idx;
	}
	return config.images[idx];
	}

	function onload_image(id) {
	if (active_image.id != id) {
	// The user has clicked another image before this one loaded, so just
	// bail.
	return;
	}

	active_image.tag = this;
	redraw_image();
	}

	function switch_image(delta) {
	if (!active_image) {
	return;
	}
	var idx = get_image_index(active_image.id)
	idx = (idx + delta + config.images.length) % config.images.length;
	select_image(config.images[idx].id);
	}

	function redraw_image() {

	// Force the stage to scale as a function of the viewport size. Broadly,
	// we make the stage 95% of the height of the viewport, then scale images
	// to fit within it.
	var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
	new_y = Math.max(320, new_y);
	panel.style.height = new_y + 'px';

	if (!active_image \|\| !active_image.tag) {
	return;
	}

	var tag = active_image.tag;

	// If the image is too wide or tall for the viewport, scale it down so it
	// fits.
	var w = JX.Vector.getDim(panel);
	w.x -= 40;
	w.y -= 40;
	var scale = 1;
	if (w.x < tag.naturalWidth) {
	scale = Math.min(scale, w.x / tag.naturalWidth);
	}
	if (w.y < tag.naturalHeight) {
	scale = Math.min(scale, w.y / tag.naturalHeight);
	}

	if (scale < 1) {
	tag.width = Math.floor(scale * tag.naturalWidth);
	tag.height = Math.floor(scale * tag.naturalHeight);
	} else {
	tag.width = tag.naturalWidth;
	tag.height = tag.naturalHeight;
	}

	viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';

	stage.endLoad();

	JX.DOM.setContent(viewport, tag);

	redraw_inlines(active_image.id);
	}

	function select_image(image_id) {
	active_image = get_image(image_id);
	active_image.tag = null;

	stage.beginLoad();

	var img = JX.$N('img', {className: 'pholio-mock-image'});
	img.onload = JX.bind(img, onload_image, active_image.id);
	img.src = active_image.fullURI;

	var thumbs = JX.DOM.scry(
	JX.$('pholio-mock-carousel'),
	'a',
	'mock-thumbnail');

	for(var k in thumbs) {
	var thumb_meta = JX.Stratcom.getData(thumbs[k]);

	JX.DOM.alterClass(
	thumbs[k],
	'pholio-mock-carousel-thumb-current',
	(active_image.id == thumb_meta.imageID));
	}

	load_inline_comments();

	if (image_id != config.selectedID) {
	JX.History.replace(active_image.pageURI);
	}
	}

	JX.Stratcom.listen(
	['mousedown', 'click'],
	'mock-thumbnail',
	function(e) {
	if (!e.isNormalMouseEvent()) {
	return;
	}
	e.kill();
	select_image(e.getNodeData('mock-thumbnail').imageID);
	});

	select_image(config.selectedID);

	JX.Stratcom.listen('mousedown', 'mock-viewport', function(e) {
	if (!e.isNormalMouseEvent()) {
	return;
	}

	if (JX.Device.getDevice() != 'desktop') {
	return;
	}

	if (drag_begin) {
	return;
	}

	e.kill();

	is_dragging = true;
	drag_begin = get_image_xy(JX.$V(e));
	drag_end = drag_begin;

	redraw_selection();
	});


	JX.enableDispatch(document.body, 'mousemove');
	JX.Stratcom.listen('mousemove', null, function(e) {
	if (!is_dragging) {
	return;
	}
	drag_end = get_image_xy(JX.$V(e));
	redraw_selection();
	});

	JX.Stratcom.listen(
	['mouseover', 'mouseout'],
	'pholio-inline-ref',
	function(e) {
	var phid = e.getNodeData('pholio-inline-ref').phid;
	var show = (e.getType() == 'mouseover');
	stage.highlightInline(phid, show);
	});

	JX.Stratcom.listen(
	'mouseup',
	null,
	function(e) {
	if (!is_dragging) {
	return;
	}

	is_dragging = false;
	if (!config.loggedIn) {
	new JX.Workflow(config.logInLink).start();
	return;
	}

	drag_end = get_image_xy(JX.$V(e));

	resize_selection(16);

	var data = {mockID: config.mockID};
	var handler = function(r) {
	var dialog = JX.$H(r).getFragment().firstChild;
	JX.DOM.appendContent(viewport, dialog);

	JX.$V(
	Math.min(drag_begin.x, drag_end.x),
	Math.max(drag_begin.y, drag_end.y) + 4
	).setPos(dialog);

	JX.DOM.focus(JX.DOM.find(dialog, 'textarea'));
	}

	new JX.Workflow('/pholio/inline/save/', data)
	.setHandler(handler)
	.start();
	});

	function resize_selection(min_size) {
	var start = {
	x: Math.min(drag_begin.x, drag_end.x),
	y: Math.min(drag_begin.y, drag_end.y)
	};
	var end = {
	x: Math.max(drag_begin.x, drag_end.x),
	y: Math.max(drag_begin.y, drag_end.y)
	};

	var width = end.x - start.x;
	var height = end.y - start.y;

	if (width < min_size) {
	var addon = (min_size-width)/2;

	start.x = Math.max(0, start.x - addon);
	end.x = Math.min(active_image.tag.naturalWidth, end.x + addon);

	if (start.x == 0) {
	end.x = Math.min(min_size, active_image.tag.naturalWidth);
	} else if (end.x == active_image.tag.naturalWidth) {
	start.x = Math.max(0, active_image.tag.naturalWidth - min_size);
	}
	}

	if (height < min_size) {
	var addon = (min_size-height)/2;

	start.y = Math.max(0, start.y - addon);
	end.y = Math.min(active_image.tag.naturalHeight, end.y + addon);

	if (start.y == 0) {
	end.y = Math.min(min_size, active_image.tag.naturalHeight);
	} else if (end.y == active_image.tag.naturalHeight) {
	start.y = Math.max(0, active_image.tag.naturalHeight - min_size);
	}
	}

	drag_begin = start;
	drag_end = end;
	redraw_selection();
	}

	function redraw_inlines(id) {
	if (!active_image) {
	return;
	}

	if (active_image.id != id) {
	return;
	}

	stage.clearStage();
	var comment_holder = JX.$('mock-inline-comments');
	JX.DOM.setContent(comment_holder, render_image_info(active_image));

	var inlines = inline_comments[active_image.id];
	if (!inlines \|\| !inlines.length) {
	return;
	}

	for (var ii = 0; ii < inlines.length; ii++) {
	var inline = inlines[ii];
	var card = JX.$H(inline.contentHTML).getFragment().firstChild;

	stage.addCard(card, inline.phid);

	if (!active_image.tag) {
	// The image itself hasn't loaded yet, so we can't draw the inline
	// reticles.
	continue;
	}

	var inline_selection = render_reticle_fill();
	stage.addReticle(inline_selection, inline.phid);
	position_inline_rectangle(inline, inline_selection);

	if (!inline.transactionphid) {
	var inline_draft = render_reticle_border();
	stage.addReticle(inline_draft, inline.phid);
	position_inline_rectangle(inline, inline_draft);
	}
	}
	}

	function position_inline_rectangle(inline, rect) {
	var scale = active_image.tag.width / active_image.tag.naturalWidth;

	JX.$V(scale * inline.x, scale * inline.y).setPos(rect);
	JX.$V(scale * inline.width, scale * inline.height).setDim(rect);
	}

	function get_image_xy(p) {
	var img = active_image.tag;
	var imgp = JX.$V(img);

	var scale = 1 / get_image_scale();

	var x = scale * Math.max(0, Math.min(p.x - imgp.x, img.width));
	var y = scale * Math.max(0, Math.min(p.y - imgp.y, img.height));

	return {
	x: x,
	y: y
	};
	}

	function get_image_scale() {
	var img = active_image.tag;
	return img.width / img.naturalWidth;
	}

	function redraw_selection() {
	selection_border = selection_border \|\| render_reticle_border();
	selection_fill = selection_fill \|\| render_reticle_fill();

	var p = JX.$V(
	Math.min(drag_begin.x, drag_end.x),
	Math.min(drag_begin.y, drag_end.y));

	var d = JX.$V(
	Math.max(drag_begin.x, drag_end.x) - p.x,
	Math.max(drag_begin.y, drag_end.y) - p.y);

	var scale = get_image_scale();

	p.x *= scale;
	p.y *= scale;
	d.x *= scale;
	d.y *= scale;

	var nodes = [selection_fill, selection_border];
	for (var ii = 0; ii < nodes.length; ii++) {
	var node = nodes[ii];
	viewport.appendChild(node);
	p.setPos(node);
	d.setDim(node);
	}
	}

	function clear_selection() {
	selection_fill && JX.DOM.remove(selection_fill);
	selection_border && JX.DOM.remove(selection_border);
	}

	function load_inline_comments() {
	var id = active_image.id;
	var inline_comments_uri = "/pholio/inline/" + id + "/";

	new JX.Request(inline_comments_uri, function(r) {
	inline_comments[id] = r;
	redraw_inlines(id);
	}).send();
	}

	JX.Stratcom.listen(
	'click',
	'inline-delete',
	function(e) {
	var data = e.getNodeData('inline-delete');
	e.kill();
	interrupt_typing();

	stage.removeInline(data.phid);

	var deleteURI = '/pholio/inline/delete/' + data.id + '/';
	var del = new JX.Request(deleteURI, function(r) {

	});
	del.send();

	});

	JX.Stratcom.listen(
	'click',
	'inline-edit',
	function(e) {
	var data = e.getNodeData('inline-edit');
	e.kill();

	interrupt_typing();

	var editURI = "/pholio/inline/edit/" + data.id + '/';

	var edit_dialog = new JX.Request(editURI, function(r) {
	var dialog = JX.$N(
	'div',
	{
	className: 'pholio-edit-inline-popup'
	},
	JX.$H(r));

	JX.DOM.setContent(JX.$(data.phid + '_comment'), dialog);
	});

	edit_dialog.send();
	});

	JX.Stratcom.listen(
	'click',
	'inline-edit-cancel',
	function(e) {
	var data = e.getNodeData('inline-edit-cancel');
	e.kill();
	load_inline_comment(data.id);
	});

	JX.Stratcom.listen(
	'click',
	'inline-edit-submit',
	function(e) {
	var data = e.getNodeData('inline-edit-submit');
	var editURI = "/pholio/inline/edit/" + data.id + '/';
	e.kill();

	var edit = new JX.Request(editURI, function(r) {
	load_inline_comment(data.id);
	});
	edit.addData({
	op: 'update',
	content: JX.DOM.find(JX.$(data.phid + '_comment'), 'textarea').value
	});
	edit.send();
	});

	JX.Stratcom.listen(
	'click',
	'inline-save-cancel',
	function(e) {
	e.kill();
	interrupt_typing();
	}
	);

	JX.Stratcom.listen(
	'click',
	'inline-save-submit',
	function(e) {
	e.kill();

	var form = JX.$('pholio-new-inline-comment-dialog');
	var text = JX.DOM.find(form, 'textarea').value;
	if (!text.length) {
	interrupt_typing();
	return;
	}

	var data = {
	mockID: config.mockID,
	imageID: active_image.id,
	startX: Math.min(drag_begin.x, drag_end.x),
	startY: Math.min(drag_begin.y, drag_end.y),
	endX: Math.max(drag_begin.x, drag_end.x),
	endY: Math.max(drag_begin.y, drag_end.y)
	};

	var handler = function(r) {
	if (!inline_comments[active_image.id]) {
	inline_comments[active_image.id] = [];
	}
	inline_comments[active_image.id].push(r);

	interrupt_typing();
	redraw_inlines(active_image.id);
	};

	JX.Workflow.newFromForm(form, data)
	.setHandler(handler)
	.start();
	}
	);

	function load_inline_comment(id) {
	var viewInlineURI = '/pholio/inline/view/' + id + '/';
	var inline_comment = new JX.Request(viewInlineURI, function(r) {
	JX.DOM.replace(JX.$(r.phid + '_comment'), JX.$H(r.contentHTML));
	});
	inline_comment.send();
	}

	function interrupt_typing() {
	clear_selection();

	try {
	JX.DOM.remove(JX.$('pholio-new-inline-comment-dialog'));
	} catch (x) {
	// TODO: For now, ignore this.
	}

	drag_begin = null;
	}

	load_inline_comments();

	JX.Stratcom.listen('resize', null, redraw_image);
	redraw_image();


	/* -( Keyboard Shortcuts )------------------------------------------------- */


	new JX.KeyboardShortcut(['j', 'right'], 'Show next image.')
	.setHandler(function() {
	switch_image(1);
	})
	.register();

	new JX.KeyboardShortcut(['k', 'left'], 'Show previous image.')
	.setHandler(function() {
	switch_image(-1);
	})
	.register();

	JX.DOM.listen(panel, 'gesture.swipe.end', null, function(e) {
	var data = e.getData();

	if (data.length <= (JX.Vector.getDim(panel) / 2)) {
	// If the user didn't move their finger far enough, don't switch.
	return;
	}

	switch_image(data.direction == 'right' ? -1 : 1);
	});

	/* -( Render )------------------------------------------------------------- */


	function render_image_info(image) {
	var info = [];

	var title = JX.$N(
	'div',
	{className: 'pholio-image-title'},
	image.title);
	info.push(title);

	var desc = JX.$N(
	'div',
	{className: 'pholio-image-description'},
	image.desc);
	info.push(desc);

	+ var embed = JX.$N(
	+ 'div',
	+ {className: 'pholio-image-embedding'},
	+ JX.$H('Embed this image:<br />{M' + config.mockID +
	+ ', image=' + image.id + '}'));
	+ info.push(embed);
	+
	// Render image dimensions and visible size. If we have this infomation
	// from the server we can display some of it immediately; otherwise, we need
	// to wait for the image to load so we can read dimension information from
	// it.

	var image_x = image.width;
	var image_y = image.height;
	var display_x = null;
	if (image.tag) {
	image_x = image.tag.naturalWidth;
	image_y = image.tag.naturalHeight;
	display_x = image.tag.width;
	}

	var visible = [];
	if (image_x) {
	visible.push([image_x, '\u00d7', image_y, 'px']);
	if (display_x) {
	var area = Math.round(100 * (display_x / image_x));
	visible.push(' ');
	visible.push(
	JX.$N(
	'span',
	{className: 'pholio-visible-size'},
	['(', area, '%', ')']));
	}
	}

	if (visible.length) {
	info.push(visible);
	}

	var full_link = JX.$N(
	'a',
	{href: image.fullURI, target: '_blank'},
	'View Full Image');
	info.push(full_link);

	for (var ii = 0; ii < info.length; ii++) {
	info[ii] = JX.$N('div', {className: 'pholio-image-info-item'}, info[ii]);
	}
	info = JX.$N('div', {className: 'pholio-image-info'}, info);

	return info;
	}

	function render_reticle_border() {
	return JX.$N(
	'div',
	{className: 'pholio-mock-select-border'});
	}

	function render_reticle_fill() {
	return JX.$N(
	'div',
	{className: 'pholio-mock-select-fill'});
	}


	/* -( Device Lightbox )---------------------------------------------------- */

	// On devices, we show images full-size when the user taps them instead of
	// attempting to implement inlines.

	var lightbox = null;

	JX.Stratcom.listen('click', 'mock-viewport', function(e) {
	if (!e.isNormalMouseEvent()) {
	return;
	}
	if (JX.Device.getDevice() == 'desktop') {
	return;
	}
	lightbox_attach();
	e.kill();
	});

	JX.Stratcom.listen('click', 'pholio-device-lightbox', lightbox_detach);
	JX.Stratcom.listen('resize', null, lightbox_resize);

	function lightbox_attach() {
	JX.DOM.alterClass(document.body, 'lightbox-attached', true);
	JX.Mask.show('jx-dark-mask');

	lightbox = lightbox_render();
	var image = JX.$N('img');
	image.onload = lightbox_loaded;
	setTimeout(function() {
	image.src = active_image.fullURI;
	}, 1000);
	JX.DOM.setContent(lightbox, image);
	JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', true);

	lightbox_resize();

	document.body.appendChild(lightbox);
	}

	function lightbox_detach() {
	JX.DOM.remove(lightbox);
	JX.Mask.hide();
	JX.DOM.alterClass(document.body, 'lightbox-attached', false);
	lightbox = null;
	}

	function lightbox_resize(e) {
	if (!lightbox) {
	return;
	}
	JX.Vector.getScroll().setPos(lightbox);
	JX.Vector.getViewport().setDim(lightbox);
	}

	function lightbox_loaded() {
	JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', false);
	}

	function lightbox_render() {
	var el = JX.$N('div', {className: 'pholio-device-lightbox'});
	JX.Stratcom.addSigil(el, 'pholio-device-lightbox');
	return el;
	}


	/* -( Preload )------------------------------------------------------------ */

	var preload = [];
	for (var ii = 0; ii < config.images.length; ii++) {
	preload.push(config.images[ii].fullURI);
	}

	function preload_next() {
	next_src = preload[0];
	if (!next_src) {
	return;
	}
	preload.splice(0, 1);

	var img = JX.$N('img');
	img.onload = preload_next;
	img.onerror = preload_next;
	img.src = next_src;
	}

	preload_next();


	});

File Metadata

Mime Type: text/x-diff
Expires: Sun, Jan 19, 18:34 (1 w, 4 d ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1127476
Default Alt Text: (39 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions