From 9584ca080c10777407c59c5939dd0cf2a88a847b Mon Sep 17 00:00:00 2001
From: redmatrix <git@macgirvin.com>
Date: Wed, 13 Jan 2016 17:32:09 -0800
Subject: some initial work on uploading and cropping cover photos

---
 view/tpl/cover_photo.tpl | 23 +++++++++++++++++++
 view/tpl/cropcover.tpl   | 58 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100755 view/tpl/cover_photo.tpl
 create mode 100755 view/tpl/cropcover.tpl

(limited to 'view/tpl')

diff --git a/view/tpl/cover_photo.tpl b/view/tpl/cover_photo.tpl
new file mode 100755
index 000000000..1db139e7b
--- /dev/null
+++ b/view/tpl/cover_photo.tpl
@@ -0,0 +1,23 @@
+<div class="generic-content-wrapper-styled">
+<h1>{{$title}}</h1>
+
+<form enctype="multipart/form-data" action="cover_photo" method="post">
+<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+<div id="profile-photo-upload-wrapper">
+
+<label id="profile-photo-upload-label" class="form-label" for="profile-photo-upload">{{$lbl_upfile}}</label>
+<input name="userfile" class="form-input" type="file" id="profile-photo-upload" size="48" />
+<div class="clear"></div>
+
+<div id="profile-photo-submit-wrapper">
+<input type="submit" name="submit" id="profile-photo-submit" value="{{$submit}}">
+</div>
+</div>
+
+</form>
+
+<div id="profile-photo-link-select-wrapper">
+{{$select}}
+</div>
+</div>
diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl
new file mode 100755
index 000000000..2bfd65a8f
--- /dev/null
+++ b/view/tpl/cropcover.tpl
@@ -0,0 +1,58 @@
+<h1>{{$title}}</h1>
+<p id="cropimage-desc">
+{{$desc}}
+</p>
+<div id="cropimage-wrapper">
+<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
+</div>
+<div id="cropimage-preview-wrapper" >
+<div id="previewWrap" ></div>
+</div>
+
+<script type="text/javascript" language="javascript">
+
+	function onEndCrop( coords, dimensions ) {
+		$( 'x1' ).value = coords.x1;
+		$( 'y1' ).value = coords.y1;
+		$( 'x2' ).value = coords.x2;
+		$( 'y2' ).value = coords.y2;
+		$( 'width' ).value = dimensions.width;
+		$( 'height' ).value = dimensions.height;
+	}
+
+	Event.observe( window, 'load', function() {
+		new Cropper.ImgWithPreview(
+		'croppa',
+		{
+			previewWrap: 'previewWrap',
+			minWidth: 850,
+			minHeight: 310,
+			maxWidth: 2400,
+			maxHeight: 872,
+			ratioDim: { x: 100, y:36 },
+			displayOnInit: true,
+			onEndCrop: onEndCrop
+		}
+		);
+	}
+	);
+
+</script>
+
+<form action="cover_photo/{{$resource}}" id="crop-image-form" method="post" />
+<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+<input type='hidden' name='profile' value='{{$profile}}'>
+<input type="hidden" name="cropfinal" value="1" />
+<input type="hidden" name="xstart" id="x1" />
+<input type="hidden" name="ystart" id="y1" />
+<input type="hidden" name="xfinal" id="x2" />
+<input type="hidden" name="yfinal" id="y2" />
+<input type="hidden" name="height" id="height" />
+<input type="hidden" name="width"  id="width" />
+
+<div id="crop-image-submit-wrapper" >
+<input type="submit" name="submit" value="{{$done}}" />
+</div>
+
+</form>
-- 
cgit v1.2.3