aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorzotlabs <mike@macgirvin.com>2018-01-23 16:36:56 -0800
committerzotlabs <mike@macgirvin.com>2018-01-23 16:36:56 -0800
commit4b7947d98c0625cfc53b481e2240a275e48c0d19 (patch)
tree6c292f51123f0c394999e03710eef9db0b8a790e /view
parentc034fab4da043aceca212270f0c00fec9492e78d (diff)
downloadvolse-hubzilla-4b7947d98c0625cfc53b481e2240a275e48c0d19.tar.gz
volse-hubzilla-4b7947d98c0625cfc53b481e2240a275e48c0d19.tar.bz2
volse-hubzilla-4b7947d98c0625cfc53b481e2240a275e48c0d19.zip
replace image cropping library
Diffstat (limited to 'view')
-rwxr-xr-xview/tpl/cropbody.tpl43
-rwxr-xr-xview/tpl/cropcover.tpl42
-rwxr-xr-xview/tpl/crophead.tpl7
3 files changed, 36 insertions, 56 deletions
diff --git a/view/tpl/cropbody.tpl b/view/tpl/cropbody.tpl
index 01d9a24a0..d35546ec6 100755
--- a/view/tpl/cropbody.tpl
+++ b/view/tpl/cropbody.tpl
@@ -6,36 +6,27 @@
<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
</div>
<div id="cropimage-preview-wrapper" >
-<div id="previewWrap" ></div>
+<div id="previewWrap" class="crop-preview" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></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: 300,
- minHeight: 300,
- maxWidth: 1024,
- maxHeight: 1024,
- ratioDim: { x: 100, y:100 },
- displayOnInit: true,
- onEndCrop: onEndCrop
- }
- );
- }
- );
+
+var image = document.getElementById('croppa');
+var cropper = new Cropper(image, {
+ aspectRatio: 1 / 1,
+ viewMode: 1,
+ preview: '.crop-preview',
+ crop: function(e) {
+ $( 'x1' ).value = e.detail.x;
+ $( 'y1' ).value = e.detail.y;
+ $( 'x2' ).value = e.detail.x + e.detail.width;
+ $( 'y2' ).value = e.detail.y + e.detail.height;
+ $( 'width' ).value = e.detail.scaleX;
+ $( 'height' ).value = e.detail.scaleY;
+
+ }
+});
</script>
diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl
index 04b96a603..8888a967a 100755
--- a/view/tpl/cropcover.tpl
+++ b/view/tpl/cropcover.tpl
@@ -6,36 +6,26 @@
<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
</div>
<div id="cropimage-preview-wrapper" >
-<div id="previewWrap" ></div>
+<div id="previewWrap" class="crop-preview" style="width: 320px; height: 116px; max-width: 320px; max-height: 116px; overflow: hidden"></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: 240,
- minHeight: 87,
- maxWidth: 320,
- maxHeight: 116,
- ratioDim: { x: 100, y:36 },
- displayOnInit: true,
- onEndCrop: onEndCrop
- }
- );
- }
- );
+var image = document.getElementById('croppa');
+var cropper = new Cropper(image, {
+ aspectRatio: 2.75 / 1,
+ viewMode: 1,
+ preview: '.crop-preview',
+ crop: function(e) {
+ $( 'x1' ).value = e.detail.x;
+ $( 'y1' ).value = e.detail.y;
+ $( 'x2' ).value = e.detail.x + e.detail.width;
+ $( 'y2' ).value = e.detail.y + e.detail.height;
+ $( 'width' ).value = e.detail.scaleX;
+ $( 'height' ).value = e.detail.scaleY;
+
+ }
+});
</script>
diff --git a/view/tpl/crophead.tpl b/view/tpl/crophead.tpl
index 48f375426..a5a80c187 100755
--- a/view/tpl/crophead.tpl
+++ b/view/tpl/crophead.tpl
@@ -1,4 +1,3 @@
- <script type="text/javascript" src="library/cropper/lib/prototype.js" language="javascript"></script>
- <script type="text/javascript" src="library/cropper/lib/scriptaculous.js?load=effects,builder,dragdrop" language="javascript"></script>
- <script type="text/javascript" src="library/cropper/cropper.js" language="javascript"></script>
- <link rel="stylesheet" href="library/cropper/cropper.css" type="text/css" />
+<script type="text/javascript" src="library/cropperjs/dist/cropper.js" language="javascript"></script>
+<link rel="stylesheet" href="library/cropperjs/dist/cropper.css" type="text/css" />
+