TimeTrex Community Edition v16.2.0
This commit is contained in:
239
interface/html5/global/widgets/filebrowser/CameraBrowser.js
Normal file
239
interface/html5/global/widgets/filebrowser/CameraBrowser.js
Normal file
@ -0,0 +1,239 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.CameraBrowser = function( options ) {
|
||||
|
||||
Global.addCss( 'global/widgets/filebrowser/TImageBrowser.css' );
|
||||
var opts = $.extend( {}, $.fn.CameraBrowser.defaults, options );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
|
||||
var enabled = true;
|
||||
var video = null;
|
||||
var canvas = null;
|
||||
|
||||
var local_stream = null;
|
||||
|
||||
this.stopCamera = function() {
|
||||
|
||||
if ( local_stream ) {
|
||||
if ( local_stream.stop ) {
|
||||
// This is the legacy method to stop video.
|
||||
local_stream.stop();
|
||||
} else if ( local_stream.getTracks ) {
|
||||
// This is the modern approach for stopping the video. https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop
|
||||
local_stream.getTracks().forEach( track => track.stop() );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.showCamera = function() {
|
||||
|
||||
// check for getUserMedia support
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
|
||||
if ( navigator.mediaDevices && navigator.mediaDevices.getUserMedia ) {
|
||||
// Most up to date as of May 2020 (Aside from using async and await) https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
||||
|
||||
// get webcam feed if available
|
||||
navigator.mediaDevices.getUserMedia( { video: true } )
|
||||
.then(function(stream) {
|
||||
if ('srcObject' in video) {
|
||||
video.srcObject = stream;
|
||||
} else {
|
||||
// Fallback for older browsers. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject#Supporting_fallback_to_the_src_property
|
||||
video.src = URL.createObjectURL( stream );
|
||||
}
|
||||
video.play();
|
||||
local_stream = stream;
|
||||
})
|
||||
.catch(function(err) {
|
||||
errorBack();
|
||||
});
|
||||
} else if ( navigator.getUserMedia ) {
|
||||
// Semi-deprecated, legacy, but still works. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
|
||||
|
||||
// get webcam feed if available
|
||||
navigator.getUserMedia( { video: true }, function( stream ) {
|
||||
if ('srcObject' in video) {
|
||||
video.srcObject = stream;
|
||||
} else {
|
||||
// Fallback for older browsers. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject#Supporting_fallback_to_the_src_property
|
||||
video.src = URL.createObjectURL( stream );
|
||||
}
|
||||
video.play();
|
||||
local_stream = stream;
|
||||
}, errorBack );
|
||||
} else if ( navigator.webkitGetUserMedia ) { // WebKit-prefixed
|
||||
navigator.webkitGetUserMedia( { video: true }, function( stream ) {
|
||||
video.src = window.webkitURL.createObjectURL( stream );
|
||||
video.play();
|
||||
local_stream = stream;
|
||||
}, errorBack );
|
||||
} else if ( navigator.mozGetUserMedia ) { // Firefox-prefixed
|
||||
navigator.mozGetUserMedia( { video: true }, function( stream ) {
|
||||
video.src = window.URL.createObjectURL( stream );
|
||||
video.play();
|
||||
local_stream = stream;
|
||||
}, errorBack );
|
||||
} else {
|
||||
errorBack();
|
||||
}
|
||||
|
||||
function errorBack() {
|
||||
TAlertManager.showAlert( $.i18n._( 'Unable to access Camera.<br><br>Please check your camera connections, permissions, and ensure you are using HTTPS. Alternatively, use the File upload method instead.' ) );
|
||||
}
|
||||
};
|
||||
|
||||
this.setEnable = function( val ) {
|
||||
enabled = val;
|
||||
|
||||
var btn = this.children().eq( 1 );
|
||||
|
||||
if ( !val ) {
|
||||
btn.attr( 'disabled', true );
|
||||
btn.removeClass( 'disable-element' ).addClass( 'disable-element' );
|
||||
} else {
|
||||
btn.removeAttr( 'disabled' );
|
||||
btn.removeClass( 'disable-element' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
this.getFileName = function() {
|
||||
return 'camera_stream.png';
|
||||
};
|
||||
|
||||
this.getImageSrc = function() {
|
||||
return canvas[0].toDataURL();
|
||||
};
|
||||
|
||||
this.setImage = function( val ) {
|
||||
var image = $this.children().eq( 0 );
|
||||
|
||||
if ( !val ) {
|
||||
image.attr( 'src', '' );
|
||||
image.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var d = new Date();
|
||||
image.hide();
|
||||
image.attr( 'src', val + '&t=' + d.getTime() );
|
||||
image.css( 'height', 'auto' );
|
||||
image.css( 'width', 'auto' );
|
||||
|
||||
};
|
||||
|
||||
this.onImageLoad = function( image ) {
|
||||
|
||||
// var image_height = $( image ).height() > 0 ? $( image ).height() : image.naturalHeight;
|
||||
// var image_width = $( image ).width() > 0 ? $( image ).width() : image.naturalWidth;
|
||||
//
|
||||
// if ( image_height > default_height ) {
|
||||
// $( image ).css( 'height', default_height );
|
||||
//
|
||||
// }
|
||||
//
|
||||
// if ( image_width > default_width ) {
|
||||
// $( image ).css( 'width', default_width );
|
||||
//
|
||||
// $( image ).css( 'height', 'auto' );
|
||||
// }
|
||||
//
|
||||
// $this.trigger( 'setSize' );
|
||||
|
||||
$( image ).show();
|
||||
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
|
||||
field = o.field;
|
||||
|
||||
var $$this = this;
|
||||
|
||||
video = $( this ).children().eq( 0 ).children().eq( 0 )[0];
|
||||
canvas = $( this ).children().eq( 0 ).children().eq( 1 );
|
||||
|
||||
var take_picture = $( this ).children().eq( 1 ).children().eq( 0 );
|
||||
var try_again = $( this ).children().eq( 1 ).children().eq( 1 );
|
||||
|
||||
// Set initial states of the buttons.
|
||||
take_picture.prop( 'disabled', false );
|
||||
try_again.prop( 'disabled', true );
|
||||
|
||||
take_picture.bind( 'click', function() {
|
||||
take_picture.prop( 'disabled', true );
|
||||
try_again.prop( 'disabled', false );
|
||||
// Global.glowAnimation.start(); // not needed here as its triggered in UserPhotoWizardController.buildCurrentStepUI()
|
||||
|
||||
// flash the photo area to indicate a picture has been taken.
|
||||
canvas.parent().addClass( 'flash' );
|
||||
|
||||
setTimeout( function(){
|
||||
canvas.parent().removeClass( 'flash' );
|
||||
}, 1000); // Timeout must be the same length as the CSS3 transition or longer (or you'll mess up the transition)
|
||||
|
||||
// handle picture taking
|
||||
var ctx = canvas[0].getContext( '2d' );
|
||||
ctx.drawImage( video, 0, 0, 400, 300 );
|
||||
canvas.css( 'z-index', 51 );
|
||||
|
||||
$this.trigger( 'change', [$this] );
|
||||
} );
|
||||
|
||||
try_again.bind( 'click', function() {
|
||||
take_picture.prop( 'disabled', false );
|
||||
try_again.prop( 'disabled', true );
|
||||
Global.glowAnimation.stop();
|
||||
|
||||
canvas.css( 'z-index', -1 );
|
||||
|
||||
$this.trigger( 'NoImageChange', [$this] );
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.CameraBrowser.defaults = {};
|
||||
$.fn.CameraBrowser.html_template = `
|
||||
<div class="file-browser">
|
||||
<div class="video-div">
|
||||
<video class="video-display" width="400" height="300">
|
||||
</video>
|
||||
<canvas class="video-capture" width="400" height="300">
|
||||
</canvas>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button id="take_picture" class="t-button">Take Picture</button>
|
||||
<button id="try_again" class="t-button">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} )( jQuery );
|
||||
86
interface/html5/global/widgets/filebrowser/TImage.js
Normal file
86
interface/html5/global/widgets/filebrowser/TImage.js
Normal file
@ -0,0 +1,86 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TImage = function( options ) {
|
||||
|
||||
Global.addCss( 'global/widgets/filebrowser/TImageBrowser.css' );
|
||||
var opts = $.extend( {}, $.fn.TImage.defaults, options );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
return null;
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
if ( !val ) {
|
||||
this.attr( 'src', '' );
|
||||
return;
|
||||
}
|
||||
var d = new Date();
|
||||
this.attr( 'src', val + '&t=' + d.getTime() );
|
||||
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
|
||||
field = o.field;
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TImage.defaults = {};
|
||||
|
||||
$( document ).on( 'mouseover', '.file-browser img', function( e ) {
|
||||
var $this_image_widget = $( e.target ).parents( '.file-browser' );
|
||||
|
||||
if ( !$( '.file_browser_overlay' )[0] && $( e.target ).attr( 'enable-delete' ) == 1 ) {
|
||||
var height = $( e.target ).height();
|
||||
var top = ( height - 32 ) / 2;
|
||||
var left = top;
|
||||
|
||||
var file_browser_overlay = $( '<div class="file_browser_overlay"><img src="theme/default/images/delete-512.png" style="position:absolute;width:32px;height:32px;top:' + top + 'px;left:' + left + 'px;"></div>' );
|
||||
file_browser_overlay.css( 'position', 'absolute' );
|
||||
file_browser_overlay.css( 'top', '0px' );
|
||||
file_browser_overlay.css( 'left', '0' );
|
||||
file_browser_overlay.css( 'cursor', 'pointer' );
|
||||
file_browser_overlay.css( 'height', height + 'px' );
|
||||
file_browser_overlay.css( 'width', '100%' );
|
||||
file_browser_overlay.css( 'background', 'rgba(255,255,255,0.85)' );
|
||||
|
||||
$( e.target ).parents( '.file-browser' ).append( file_browser_overlay );
|
||||
|
||||
$( document ).on( 'click', '.file_browser_overlay', function( e ) {
|
||||
var img_src = $( e.target ).parent().find( 'img' ).attr( 'src' );
|
||||
TAlertManager.showConfirmAlert( $.i18n._( 'This will permanently delete the image. Are you sure?' ), '', function( flag ) {
|
||||
if ( flag ) {
|
||||
var e = { type: 'deleteClick', message: 'Delete image clicked.', time: new Date() };
|
||||
$this_image_widget.trigger( e );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
$( document ).on( 'mouseleave', '.file-browser', function() {
|
||||
$( document ).off( 'click', '.file_browser_overlay' );
|
||||
if ( $( '.file_browser_overlay' )[0] ) {
|
||||
var file_browser_overlay = $( this ).find( '.file_browser_overlay' );
|
||||
file_browser_overlay.off().remove();
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
182
interface/html5/global/widgets/filebrowser/TImageAdvBrowser.js
Normal file
182
interface/html5/global/widgets/filebrowser/TImageAdvBrowser.js
Normal file
@ -0,0 +1,182 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TImageAdvBrowser = function( options ) {
|
||||
|
||||
Global.addCss( 'global/widgets/filebrowser/TImageBrowser.css' );
|
||||
var opts = $.extend( {}, $.fn.TImageAdvBrowser.defaults, options );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
var name = 'filedata';
|
||||
|
||||
var accept_filter = '';
|
||||
|
||||
var default_width = 177;
|
||||
var default_height = 42;
|
||||
|
||||
var callBack = null;
|
||||
|
||||
var enabled = true;
|
||||
|
||||
var image;
|
||||
|
||||
var result_form_data;
|
||||
|
||||
this.setEnable = function( val ) {
|
||||
enabled = val;
|
||||
|
||||
var btn = this.children().eq( 1 );
|
||||
if ( !val ) {
|
||||
btn.hide();
|
||||
} else {
|
||||
btn.show();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
return result_form_data;
|
||||
};
|
||||
|
||||
this.setImage = function( val ) {
|
||||
if ( !val ) {
|
||||
image.attr( 'src', '' );
|
||||
image.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var d = new Date();
|
||||
image.hide();
|
||||
image.attr( 'src', val + '&t=' + d.getTime() + '&X-CSRF-Token=' + getCookie( 'CSRF-Token' ) );
|
||||
image.css( 'height', 'auto' );
|
||||
image.css( 'width', 'auto' );
|
||||
|
||||
};
|
||||
|
||||
this.onImageLoad = function( image ) {
|
||||
|
||||
var image_height = $( image ).height() > 0 ? $( image ).height() : image.naturalHeight;
|
||||
var image_width = $( image ).width() > 0 ? $( image ).width() : image.naturalWidth;
|
||||
|
||||
if ( image_height > default_height ) {
|
||||
$( image ).css( 'height', default_height );
|
||||
|
||||
}
|
||||
|
||||
if ( image_width > default_width ) {
|
||||
$( image ).css( 'width', default_width );
|
||||
$( image ).css( 'height', 'auto' );
|
||||
}
|
||||
|
||||
$this.trigger( 'setSize' );
|
||||
|
||||
if ( image_height < 5 ) {
|
||||
$( image ).hide();
|
||||
} else {
|
||||
$( image ).show();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.setEnableDelete = function( val ) {
|
||||
var image = $this.find( '.image' );
|
||||
if ( !val ) {
|
||||
image.removeAttr( 'enable-delete' );
|
||||
return;
|
||||
} else {
|
||||
image.attr( 'enable-delete', 1 );
|
||||
}
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
|
||||
field = o.field;
|
||||
|
||||
var $$this = this;
|
||||
|
||||
$( this ).find( '#upload_image' ).text( $.i18n._( 'Upload Image' ) );
|
||||
|
||||
if ( o.callBack ) {
|
||||
callBack = o.callBack;
|
||||
}
|
||||
|
||||
if ( o.show_browser === false ) {
|
||||
$( this ).children().eq( 1 ).hide();
|
||||
}
|
||||
|
||||
if ( o.default_width > 0 ) {
|
||||
default_width = o.default_width;
|
||||
}
|
||||
|
||||
if ( o.default_height > 0 ) {
|
||||
default_height = o.default_height;
|
||||
}
|
||||
|
||||
if ( Global.isSet( o.name ) ) {
|
||||
name = o.name;
|
||||
}
|
||||
|
||||
if ( Global.isSet( accept_filter ) ) {
|
||||
accept_filter = o.accept_filter;
|
||||
}
|
||||
|
||||
if ( Global.isSet( o.deleteImageHandler ) ) {
|
||||
$this.find( '.file-browser' ).on( 'deleteClick', function() {
|
||||
o.deleteImageHandler();
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
var browser = $( this ).children().eq( 1 );
|
||||
browser.bind( 'click', function() {
|
||||
IndexViewController.openWizard( 'UserPhotoWizard', null, function( form_data ) {
|
||||
|
||||
if ( callBack ) {
|
||||
callBack( form_data );
|
||||
}
|
||||
|
||||
result_form_data = form_data;
|
||||
|
||||
} );
|
||||
} );
|
||||
|
||||
image = $( this ).children().eq( 0 );
|
||||
image.on( 'load', function() {
|
||||
$this.onImageLoad( this );
|
||||
} );
|
||||
|
||||
image.hide();
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TImageAdvBrowser.defaults = {};
|
||||
$.fn.TImageAdvBrowser.html_template = `
|
||||
<div class="file-browser">
|
||||
<img class="image">
|
||||
<button id="upload_image" class="t-button file-browser-btn" style="display: block"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} )( jQuery );
|
||||
230
interface/html5/global/widgets/filebrowser/TImageBrowser.js
Normal file
230
interface/html5/global/widgets/filebrowser/TImageBrowser.js
Normal file
@ -0,0 +1,230 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TImageBrowser = function( options ) {
|
||||
Global.addCss( 'global/widgets/filebrowser/TImageBrowser.css' );
|
||||
var opts = $.extend( {}, $.fn.TImageBrowser.defaults, options );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
var id = 'file_browser';
|
||||
var name = 'filedata';
|
||||
var browser;
|
||||
|
||||
var accept_filter = '';
|
||||
|
||||
var default_width = 177;
|
||||
var default_height = 42;
|
||||
var enabled = true;
|
||||
|
||||
this.setEnabled = function( val ) {
|
||||
enabled = val;
|
||||
|
||||
var btn = this.find( '.browser-form input' );
|
||||
|
||||
if ( !val ) {
|
||||
btn.attr( 'disabled', true );
|
||||
btn.removeClass( 'disable-element' ).addClass( 'disable-element' );
|
||||
} else {
|
||||
btn.removeAttr( 'disabled' );
|
||||
btn.removeClass( 'disable-element' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
|
||||
};
|
||||
|
||||
this.getFileName = function() {
|
||||
|
||||
return browser.val();
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.setEnableDelete = function( val ) {
|
||||
var image = $this.find( '.image' );
|
||||
if ( !val ) {
|
||||
image.removeAttr( 'enable-delete' );
|
||||
return;
|
||||
} else {
|
||||
image.attr( 'enable-delete', 1 );
|
||||
}
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
var form_data;
|
||||
if ( browser && browser.val() ) {
|
||||
|
||||
if ( typeof FormData == 'undefined' ) {
|
||||
form_data = $this.find( '.browser-form' );
|
||||
} else {
|
||||
form_data = new FormData( $( $this.find( '.browser-form' ) )[0] );
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
form_data = null;
|
||||
}
|
||||
|
||||
return form_data;
|
||||
};
|
||||
|
||||
this.getImageSrc = function() {
|
||||
var image = $this.find( '.image' );
|
||||
return image.attr( 'src' );
|
||||
};
|
||||
|
||||
this.setImage = function( val ) {
|
||||
var image = $this.find( '.image' );
|
||||
|
||||
if ( !val ) {
|
||||
image.attr( 'src', '' );
|
||||
image.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var d = new Date();
|
||||
image.hide();
|
||||
image.attr( 'src', val + '&t=' + d.getTime() );
|
||||
image.css( 'height', 'auto' );
|
||||
image.css( 'width', 'auto' );
|
||||
|
||||
};
|
||||
|
||||
var onImageLoad = function( image ) {
|
||||
|
||||
var image_height = $( image ).height() > 0 ? $( image ).height() : image.naturalHeight;
|
||||
var image_width = $( image ).width() > 0 ? $( image ).width() : image.naturalWidth;
|
||||
|
||||
if ( image_height > default_height ) {
|
||||
$( image ).css( 'height', default_height );
|
||||
|
||||
}
|
||||
|
||||
if ( image_width > default_width ) {
|
||||
$( image ).css( 'width', default_width );
|
||||
$( image ).css( 'height', 'auto' );
|
||||
}
|
||||
|
||||
$this.trigger( 'setSize' );
|
||||
|
||||
if ( image_height < 5 ) {
|
||||
$( image ).hide();
|
||||
} else {
|
||||
$( image ).show();
|
||||
}
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.each( function() {
|
||||
var o = $.meta ? $.extend( {}, opts, $( this ).data() ) : opts;
|
||||
|
||||
field = o.field;
|
||||
|
||||
// var $this = this;
|
||||
|
||||
if ( o.default_width > 0 ) {
|
||||
default_width = o.default_width;
|
||||
}
|
||||
|
||||
if ( o.default_height > 0 ) {
|
||||
default_height = o.default_height;
|
||||
}
|
||||
|
||||
if ( Global.isSet( o.name ) ) {
|
||||
name = o.name;
|
||||
}
|
||||
|
||||
if ( Global.isSet( accept_filter ) ) {
|
||||
accept_filter = o.accept_filter;
|
||||
}
|
||||
|
||||
browser = $( this ).find( '.browser' );
|
||||
var image = $( this ).find( '.image' );
|
||||
image.hide();
|
||||
image.on( 'load', function() {
|
||||
onImageLoad( this );
|
||||
|
||||
} );
|
||||
|
||||
if ( accept_filter ) {
|
||||
browser.attr( 'accept', accept_filter );
|
||||
} else {
|
||||
accept_filter = 'image/*';
|
||||
browser.attr( 'accept', 'image/*' );
|
||||
}
|
||||
|
||||
browser.attr( 'id', id );
|
||||
browser.attr( 'name', name );
|
||||
|
||||
if ( Global.isSet( o.changeHandler ) ) {
|
||||
|
||||
$this.bind( 'imageChange', o.changeHandler );
|
||||
}
|
||||
if ( Global.isSet( o.deleteImageHandler ) ) {
|
||||
this.find( '.file-browser' ).on( 'deleteClick', function() {
|
||||
o.deleteImageHandler();
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
browser.bind( 'change', function() {
|
||||
image.hide();
|
||||
|
||||
if ( typeof FileReader != 'undefined' ) {
|
||||
|
||||
var files = !!this.files ? this.files : [];
|
||||
|
||||
// If no files were selected, or no FileReader support, return
|
||||
if ( !files.length || !window.FileReader ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( accept_filter === 'image/*' ) {
|
||||
// Create a new instance of the FileReader
|
||||
var reader = new FileReader();
|
||||
|
||||
// Read the local file as a DataURL
|
||||
reader.readAsDataURL( files[0] );
|
||||
|
||||
// When loaded, set image data as background of div
|
||||
reader.onloadend = function() {
|
||||
var url = this.result;
|
||||
image.attr( 'src', url );
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$this.trigger( 'imageChange', [$this] );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TImageBrowser.defaults = {};
|
||||
$.fn.TImageBrowser.html_template = `
|
||||
<div class="file-browser">
|
||||
<img class="image">
|
||||
<form enctype="multipart/form-data" class="browser-form">
|
||||
<input name="filedata" class="browser" type="file"/>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} )( jQuery );
|
||||
193
interface/html5/global/widgets/filebrowser/TImageCutArea.js
Normal file
193
interface/html5/global/widgets/filebrowser/TImageCutArea.js
Normal file
@ -0,0 +1,193 @@
|
||||
( function( $ ) {
|
||||
|
||||
$.fn.TImageCutArea = function( options ) {
|
||||
|
||||
Global.addCss( 'global/widgets/filebrowser/TImageBrowser.css' );
|
||||
var opts = $.extend( {}, $.fn.TImageCutArea.defaults, options );
|
||||
|
||||
var $this = this;
|
||||
var field;
|
||||
var name = 'filedata';
|
||||
|
||||
var default_width = 400;
|
||||
var default_height = 300;
|
||||
|
||||
var default_after_width = 200;
|
||||
var default_after_height = 150;
|
||||
|
||||
this.clearErrorStyle = function() {
|
||||
|
||||
};
|
||||
|
||||
this.getField = function() {
|
||||
return field;
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
|
||||
};
|
||||
|
||||
var setAfterImage = function( val ) {
|
||||
var image = $this.children().eq( 1 ).children().eq( 1 );
|
||||
|
||||
if ( !val ) {
|
||||
image.attr( 'src', '' );
|
||||
return;
|
||||
}
|
||||
var d = new Date();
|
||||
image.attr( 'src', val );
|
||||
|
||||
};
|
||||
|
||||
this.setImage = function( val ) {
|
||||
var image = $this.children().eq( 0 ).children().eq( 1 );
|
||||
|
||||
if ( !val ) {
|
||||
image.attr( 'src', '' );
|
||||
return;
|
||||
}
|
||||
var d = new Date();
|
||||
image.attr( 'src', val );
|
||||
|
||||
setAfterImage( val );
|
||||
|
||||
setTimeout( function() {
|
||||
$( image ).imgAreaSelect( {
|
||||
handles: true,
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: $( image ).width(),
|
||||
y2: $( image ).height(),
|
||||
onSelectEnd: function( img, selection ) {
|
||||
|
||||
var rate = image[0].naturalWidth / image.width();
|
||||
var sx = selection.x1 * rate;
|
||||
var sy = selection.y1 * rate;
|
||||
var tx = selection.x2 * rate;
|
||||
var ty = selection.y2 * rate - 1;
|
||||
var width = selection.width * rate;
|
||||
var height = selection.height * rate;
|
||||
|
||||
var canvas = $( '<canvas></canvas>' );
|
||||
canvas = canvas[0];
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
var ctx = canvas.getContext( '2d' );
|
||||
|
||||
ctx.drawImage( image[0], sx, sy, width - 1, height - 1, 0, 0, width, height );
|
||||
setAfterImage( '' );
|
||||
setAfterImage( canvas.toDataURL() );
|
||||
|
||||
}
|
||||
} );
|
||||
}, 100 );
|
||||
|
||||
};
|
||||
|
||||
this.getAfterImageSrc = function() {
|
||||
var image = $this.children().eq( 1 ).children().eq( 1 );
|
||||
|
||||
return image.attr( 'src' );
|
||||
};
|
||||
|
||||
this.clearSelect = function() {
|
||||
var image = $this.children().eq( 0 ).children().eq( 1 );
|
||||
|
||||
$( image ).imgAreaSelect( { remove: true } );
|
||||
|
||||
};
|
||||
|
||||
var onImageLoad = function( image ) {
|
||||
|
||||
// if ( $( image ).height() > default_height ) {
|
||||
// $( image ).css( 'height', default_height );
|
||||
//
|
||||
// }
|
||||
//
|
||||
// if ( $( image ).width() > default_width ) {
|
||||
// $( image ).css( 'width', default_width );
|
||||
//
|
||||
// $( image ).css( 'height', 'auto' );
|
||||
// }
|
||||
|
||||
// $( image ).show();
|
||||
|
||||
};
|
||||
|
||||
var onAfterImageLoad = function( image ) {
|
||||
|
||||
// if ( $( image ).height() > default_after_height ) {
|
||||
// $( image ).css( 'height', default_after_height );
|
||||
//
|
||||
// }
|
||||
//
|
||||
// if ( $( image ).width() > default_after_width ) {
|
||||
// $( image ).css( 'width', default_after_width );
|
||||
//
|
||||
// $( image ).css( 'height', 'auto' );
|
||||
// }
|
||||
|
||||
// $( image ).show();
|
||||
|
||||
};
|
||||
|
||||
this.setValue = function( val ) {
|
||||
|
||||
if ( !val ) {
|
||||
val = '';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
for ( var i = 0; i < this.length; i++ ) {
|
||||
var $item = this[i];
|
||||
|
||||
var o = $.meta ? $.extend( {}, opts, $( $item ).data() ) : opts;
|
||||
|
||||
field = o.field;
|
||||
|
||||
if ( o.default_width > 0 ) {
|
||||
default_width = o.default_width;
|
||||
}
|
||||
|
||||
if ( o.default_height > 0 ) {
|
||||
default_height = o.default_height;
|
||||
}
|
||||
|
||||
if ( Global.isSet( o.name ) ) {
|
||||
name = o.name;
|
||||
}
|
||||
|
||||
var image = $( $item ).children().eq( 0 ).children().eq( 1 );
|
||||
image.on( 'load', function() {
|
||||
onImageLoad( this );
|
||||
|
||||
} );
|
||||
|
||||
var after_image = $( $item ).children().eq( 1 ).children().eq( 1 );
|
||||
after_image.on( 'load', function() {
|
||||
onAfterImageLoad( this );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
$.fn.TImageCutArea.defaults = {};
|
||||
$.fn.TImageCutArea.html_template = `
|
||||
<div class="t-image-cut">
|
||||
<div class="before-div">
|
||||
<span>Before:</span>
|
||||
<img class="before-img">
|
||||
</div>
|
||||
<div class="after-div">
|
||||
<span>After:</span>
|
||||
<img class="after-img">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user