Cropper.js at angular 2: cropper displays the previos image - javascript

I build ionic2 application - based on angular 2.
In my app I use Cropper.js library for let user edit the images he loaded.
Now I have a problem.
When user load new picture, I show it at the main container and open the crop-box for this image.
But the crop-box show the previous image which was at the container.
The only solution that worked for me is to open the crop by setTimeout, but it is not good solution, as we know.
Any idea else?
Here is my code:
HTML - the container element:
<div class="selected-image">
<img *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>
Now, after user click a button to add picture from the camera (by cordova plugin), and I get the image url, I push the picture to pictures array and then set currentImage variable to hold the new image.
Here is my typeScript code, it also have viewChild to hold the container.
Notice to the setTimeout block, now its is work but if I unwrap the code from setTimeout wrapper - it open the crop-box with the previous picture.
I also tried to change it to NgZone.run wrapper, but it didn't help.
export class myClass {
#ViewChild('selectedPhoto') input: ElementRef;
pictures: PictureData[] = new Array();
mainImage: PictureData = new PictureData();
private cropper: Cropper;
constructor(public _zone: NgZone) {}
function addPicture(){
var self = this;
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
quality: 95,
targetHeight: 400,
targetWidth:400
}).then((imageURI) => {
var picture = {src:imageURI};
self._zone.run(() => {
self.pictures.push(picture);
self.currentImage = picture;
setTimeout(() => {
if (this.cropper && this.cropper['canvas']) {
this.cropper.destroy();
}
if (!this.cropper || !this.cropper['canvas']) {
this.cropper = new Cropper(this.input.nativeElement, {
aspectRatio: 1 / 1,
dragMode: 'crop',
modal: true,
guides: false,
center: true,
highlight: false,
background: false,
autoCrop: true,
autoCropArea: 0.9,
responsive: true,
checkCrossOrigin: false,
crop: (e: Cropper.CropperCustomEvent) => {
}
});
}
}, 2000);
});
});
}
}
P.S. If you are user with more then 1500 reputation, please, think about create new tag for 'cropper.js'.

Related

Semantic-ui popup Dynamic content

Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.
The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});

Progress Bar with Sencha (JS)

I am new with Sencha, Javascript and HTML. I'm trying to make a progress bar (animated) using Sencha. I don't quite get how Sencha works. I need a step by step tutorial on how to do it? I want the output to be:
one without status percentage, and
one with percentage)?
below are my coding:
Ext.onReady(function(){
var pb = Ext.create('Ext.ProgressBar', {
margin: 50,ui:'default'
});
// Wait for 5 seconds, then update the status el (progress bar will auto-reset)
pb.wait({
interval: 500, //bar will move fast!
duration: 50000,
increment: 15,
text: "Hi, I've got a custom UI...",
scope: this,
fn: function(){
p.updateText('Done!');
}
});
var pa = Ext.create("Ext.panel.Panel", {
title: "I'm a regular 'default' UI Panel",
width: 500,
items: pb, // put the progressbar in our panel
floating: true,
renderTo: Ext.getBody(),
closable: true
})
})

How to open a file with epiceditor?

I have the following file structure
And in content.php i have the following JS code
var file = "http://2sense.net/blog/posts/my-second-post.md"
var opts = {
basePath: "http://2sense.net/blog/posts/",
container: 'epiceditor',
textarea: null,
basePath: 'epiceditor',
clientSideStorage: true,
localStorageName: 'epiceditor',
useNativeFullscreen: true,
parser: marked,
file: {
name: 'epiceditor',
defaultContent: '',
autoSave: 100
},
theme: {
base: '/themes/base/epiceditor.css',
preview: '/themes/preview/preview-dark.css',
editor: '/themes/editor/epic-dark.css'
},
button: {
preview: true,
fullscreen: true
},
focusOnLoad: false,
shortcut: {
modifier: 18,
fullscreen: 70,
preview: 80
},
string: {
togglePreview: 'Toggle Preview Mode',
toggleEdit: 'Toggle Edit Mode',
toggleFullscreen: 'Enter Fullscreen'
}
}
window.editor = new EpicEditor(opts);
editor.load(function () {
console.log("Editor loaded.")
});
$("#openfile").on("click", function() {
console.log("openfile");
editor.open(file);
editor.enterFullscreen();
})
When i try to open the file with "editor.open(file);" does not happen anything. And I have verified that the event is triggered proprely when i press the button.
Do you have any idea how to fix this, or do you have a real example... the documentation for the API on the epiceditor website does not say so much.
Cheers
Client side JS cannot open desktop files (or, not easily or cross browser). This would be a nice feature to use with the File API, but that's not implemented. EpicEditor stores "files" in localStorage. When you do editor.open('foo') you're basically doing: JSON.parse(localStorage['epiceditor'])['foo'].content. This has been asked a few times, so I made a ticket to make it more clear in the docs.
https://github.com/OscarGodson/EpicEditor/issues/276
Does that help?
P.S. a pull request with docs that make sense to you are always welcome :)

how to load mask while the grid is double clicked to wait for the detail window

forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');

What is wrong with this javascript?

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.
Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.

Categories