I'm using this awesome plugin "Cropper" to upload Images of a specific size.
So far, evertything works fine, but:
When I call:
function moveImageToZero() {
$("#target").cropper('moveTo',0,0);
}
from a button click or inside the
on('ready') event of the cropper element like this
$("#target").on('ready', function () {
moveImageToZero();
});
the canvas DOES move to the top-left corner.
Anyway, calling the 'moveTo' function from inside an Event-Handler of a cropper element:
$("#target").on('zoom',function () {
moveImageToZero();
});
nothing actually happens.
Functions are invoked properly and do not throw errors or exceptions.
Does someone have a solution for this?
I'm trying to keep the Image/Canvas always fixed to the top-left corner.
Any help is highly appreciated!
Try this:
$("#target").on('ready', function () {
moveImageToZero(this.cropper);
});
function moveImageToZero(cropper) {
cropper('moveTo',0,0);
}
I'm not sure it works, but when I used cropper last time, I used native js cropper lib, and code looked like that:
const cropper = new Cropper(imageEl, {
aspectRatio: this.aspectRatio
background: false,
rotatable: true,
zoomable: !!this.aspectRatio,
movable: false,
checkCrossOrigin: false,
crop: (e) => {
// on cropp event
},
ready: function () {
self.cropper = this.cropper; // so I use it outside in my function/class
}
});
Related
Calling function
$($copy_button[0]).on("click", (event) => {
show_tooltip($copy_button);
});
Called function
export function show_tooltip($copy_button) {
// Display a tooltip to notify the user the version was copied.
const instance = tippy($copy_button[0], {
placement: 'top',
onUntrigger() {
remove_instance();
},
});
instance.setContent("Copied!");
instance.show();
function remove_instance() {
if (!instance.state.isDestroyed) {
instance.destroy();
}
}
setTimeout(remove_instance, 3000);
}
In Image 1 copied! confirmation placement it weird and I would like to make it the same as image 2. "Copied" is shown on click.
Here the copy code will be shown on hover and the placement is perfect.
This is the box structure for the image.
I just want the "Copied!" tooltip to be placed same as "copy code" tooltip. But for some reason the "Copied!" tooltip placement is weird. Thanks in advance.
export function show_tooltip($copy_button) {
// Display a tooltip to notify the user the version was copied.
const instance = tippy($copy_button[0], {
placement: 'top',
appendTo: () => document.body, //Just added this line.
onUntrigger() {
remove_instance();
},
});
instance.setContent("Copied!");
instance.show();
function remove_instance() {
if (!instance.state.isDestroyed) {
instance.destroy();
}
}
setTimeout(remove_instance, 3000);
}
Appending the element to document.body seems to help solve this problem.
I am working with ag-grid. I have event handlers defined in my gridOptions:
gridOptions =
{
...
onCellEditingStarted: function (event) { /* magic happens!*/ },
onCellEditingStopped: function (event) { /* magic happens!*/ }
...
}
When cell editing starts/stops - everything works great. But at some point I need to trigger these events from other .js file, where I don't even have ag-grid instance.
I'm trying something like this:
$(window).trigger('cellEditingStopped');
But unfortunately it doesn't work. What am I doing wrong? Is it possible to trigger events for ag-grid in this way or I need some more code to write?
This is solution i've found to achieve my goal:
gridOptions =
{
...
onCellEditingStarted: function (event) { /* magic happens!*/ },
onCellEditingStopped: function (event) { /* magic happens!*/ }
onGridReady: function() {
$('#gridContainer').off("cell-editing-stop");
$('#gridContainer').on("cell-editing-stop", function () {
gridOptions.api.stopEditing();
});
},
...
}
So in my other file i can do something like this:
that.OnCellEditingStop = new Event('cell-editing-stop');
$('#gridContainer').trigger('cell-editing-stop');
This solution looks clean for me and i don't have to move my grid instance to another file somehow. Hope it will help others somehow
In the official TinyMCE docs is nothing written about the possibility to manually open/close the sidebar:
https://www.tinymce.com/docs/advanced/creating-a-sidebar/#editorsidebarapi
Can anybody help me? I think it must be something like this:
editor.getSidebar('mysidebar').close();
I need it, because I want to close my custom sidebar in my file browser callback.
Use tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname'); to toggle the sidebar. You could place event dispacthers and listeners to know if it is currently opened or closed:
tinymce.PluginManager.add('cheminfo', function (editor, url) {
editor.ui.registry.addSidebar('cheminfo', {
tooltip: 'My sidebar',
icon: 'comment',
onShow: function (api) {
var event = new CustomEvent('tinymce-chem-sidebar', {'detail': true});
window.parent.document.dispatchEvent(event);
},
onHide: function (api) {
var event = new CustomEvent('tinymce-chem-sidebar', {'detail': false});
window.parent.document.dispatchEvent(event);
}
});
});
Then (I am using React):
// detect sidebar state open/close
document.addEventListener('tinymce-chem-sidebar', function (e) {
setOpen(e.detail);
});
PS: Make sure the sidebar's name is lowercase or it won't work
adding to #Kristiyan Tsvetanov's solution, an alternative to using event listeners in determining open/close state of sidebar, the following code can be used:
function is_sidebar_open() {
//class names taken from using inspect on the
//sidebar area of the editor in a browser session
if ($(".tox-sidebar__slider").hasClass("tox-sidebar--sliding-closed")) {
return false;
}
else {
return true;
}
}
function open_sidebar(){
if (is_sidebar_open() == false){
tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname');
}
}
function close_sidebar(){
if (is_sidebar_open() == true){
tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname');
}
}
I'm trying to make use of cropper plugin by fengyuanchen but meeting quite an impossible error
I constantly get into Uncaught TypeError: canvas.cropper is not a function even though I already tried everything I searched in your guide and even issues but I couldn't solve it. I try to initialize a cropper in canvas when my button is clicked, like this
$('#crop-mode').click(function(e){
var canvas=$('#image-display canvas')[0];
var options={
viewMode:0,
dragMode:'crop',
aspectRatio: NaN,
preview:'.extra-preview',
responsive:true,
cropBoxMovable: true,
cropBoxResizable: true,
autoCropArea:0.8
};
canvas.cropper(options);
canvas.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
});
});
I'm completely in vain
There is also another error: canvas.on is not a function
I don't know why. I already include jQuery 3.1
From the jQuery docs:
Attach an event handler function for one or more events to the selected elements.
Now, canvas after var canvas=$('#image-display canvas')[0]; is not a selected element. It's the first property of the selected element. $() will return a selected element (if found, obviously), but $()[0] is something completely else. Drop the [0].
First, make sure you have the library loaded with jquery:
<script src="/path/to/jquery.js"></script>
<script src="/path/to/cropper.js"></script>
Cropper is a jquery extension, thus instead of:
var canvas=$('#image-display canvas')[0];
do:
var canvas=$('#image-display canvas');
Be sure to download the correct package with
npm install cropper
Please don't use this
npm install cropperjs
as Cropper.js is not a jQuery plugin.
This will work definitely >> after following every step correctly as mention in link-https://www.npmjs.com/package/ngx-image-editor .
do only this.>>> goto your angular node module find >>>ngx-image-editor/esm5/ngx-image-editor.js >>> here you can import>>>import {default as Cropper} from 'cropperjs'; and refresh your node module and save ...
Even if you are with jQuery you have to import the cropper library file,
<script src="/plugin/cropper/cropper.js"></script>
<script src="/plugin/cropper/jquery-cropper.js"></script>
<link href="'/plugin/cropper/cropper.css'" rel="stylesheet" type="text/css"/>
Remember! You still have to have jQuery above this all.
I have this gallery the designer handed to me, and I have to put it on my twig. The thing is the slider is not working. This is the code (the js with the problem):
$(function () {
var demo1 = $("#demo1").slippry({
transition: "fade",
useCSS: true,
speed: 2e3,
pause: 4e3,
auto: true,
preload: "visible"
});
$(".stop").click(function () {
demo1.stopAuto()
});
$(".start").click(function () {
demo1.startAuto()
});
$(".prev").click(function () {
demo1.goToPrevSlide();
return false
});
$(".next").click(function () {
demo1.goToNextSlide();
return false
});
$(".reset").click(function () {
demo1.destroySlider();
return false
});
$(".reload").click(function () {
demo1.reloadSlider();
return false
});
$(".init").click(function () {
demo1 = $("#demo1").slippry();
return false
})
});
The error is in the part where it includes one of my css files, the one called "slippry". The error says: "Undefined function or method". My question is: Do I have to call this css file in another way to make the slider work? Do I have to change the path?
Instead of trying to answer your question directly, I would first recommend that you use Twitter Bootstrap's Carousel (slider), as you won't have to worry about binding your click events to controls. In addition to its robust design/extensibility that includes events.
You can fully customize the css to make the slider look like whatever you want it too... Plus the bootstrap package provides a very nice responsive framework, and you should be using one of these anyways.