I have code for disabling double click event which preventing to show text field.
var priority = 10000;
function DisableContentEditable(eventBus) {
eventBus.on('element.dblclick', priority, function (context) {
var element = context.element;
if(element.type == 'bpmn:Task' || element.type == "bpmn:StartEvent" || element.type == "bpmn:IntermediateThrowEvent" || element.type == "bpmn:EndEvent" || element.type == "bpmn:ExclusiveGateway" || element.type == "bpmn:DataObjectReference" || element.type == "bpmn:DataStoreReference"){
return false;
}
});
}
but while dragging task element.dblclick event is not applied and its editable. but after dragging and clicking anywhere in canvas the element.dblclick event is applied. but i want to disable after dragging as well.
if have any solution will be helpful.
Thanks.
Seems like you want to disable Label Editing for BPMN.io
You have to disable labelEditingProvider for your modeler
const modelerInstance = new BpmnModeler({
container: canvas,
additionalModules: [{
__init__: [
"labelEditingProvider"
],
labelEditingProvider: ['value', null],
}],
});
Related
Hi i am trying to add two new fields to the Barcode mobile view. I went through the default js code of odoo, but didn't find a way to add my custome fields to it.
Here is the default code
stock_barcode/static/src/js/client_action/lines_widget.js
init: function (parent, page, pageIndex, nbPages) {
this._super.apply(this, arguments);
this.page = page; #don't know where this argument page coming from in argument list.
this.pageIndex = pageIndex;
this.nbPages = nbPages;
this.mode = parent.mode;
this.groups = parent.groups;
this.model = parent.actionParams.model;
this.show_entire_packs = parent.show_entire_packs;
this.displayControlButtons = this.nbPages > 0 && parent._isControlButtonsEnabled();
this.displayOptionalButtons = parent._isOptionalButtonsEnabled();
this.isPickingRelated = parent._isPickingRelated();
this.isImmediatePicking = parent.isImmediatePicking ? true : false;
this.sourceLocations = parent.sourceLocations;
this.destinationLocations = parent.destinationLocations;
// detect if touchscreen (more complicated than one would expect due to browser differences...)
this.istouchSupported = 'ontouchend' in document ||
'ontouchstart' in document ||
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
},
In _renderLines function,
_renderLines: function () {
//Skipped some codes here
// Render and append the lines, if any.
var $body = this.$el.filter('.o_barcode_lines');
console.log('this model',this.model);
if (this.page.lines.length) {
var $lines = $(QWeb.render('stock_barcode_lines_template', {
lines: this.getProductLines(this.page.lines),
packageLines: this.getPackageLines(this.page.lines),
model: this.model,
groups: this.groups,
isPickingRelated: this.isPickingRelated,
istouchSupported: this.istouchSupported,
}));
$body.prepend($lines);
for (const line of $lines) {
if (line.dataset) {
this._updateIncrementButtons($(line));
}
}
$lines.on('click', '.o_edit', this._onClickEditLine.bind(this));
$lines.on('click', '.o_package_content', this._onClickTruckLine.bind(this));
}
In the above code, you can see this.page.lines field, i need to add my custom two more fields.
Actually it's dead-end for me.
Any solution?
I have this Vue directive to detect if I scroll past a certain element. But it stopped working since I set overflow-x to hidden. So I logged all the comparisons with the client bounding rect. How can I make my scroll detection work again?
import Vue from 'vue'
Vue.directive(
"infocus" , {
bind: function (el, binding, vnode) {
let f = () => {
let clientBoundingRect = el.getBoundingClientRect();
console.log(clientBoundingRect.width > 0);
console.log(clientBoundingRect.height > 0);
console.log(clientBoundingRect.top >= 0);
console.log(clientBoundingRect.width <= (window.innerHeight || document.documentElement.clientHeight));
let isInView = (
clientBoundingRect.width > 0 &&
clientBoundingRect.height > 0 &&
clientBoundingRect.top >= 0 &&
clientBoundingRect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
)
if (isInView) {
if(typeof binding.value === "function")
binding.value(el);
else
throw new Error("v-infocus requires you to bind a method.");
window.removeEventListener('scroll', f)
}
}
window.addEventListener('scroll', f);
f();
}
}
)
At the end or beginning of a Sencha Touch 2 carousel, a user can drag the item past where it should be able to go and display the white background (screenshot here: http://i.imgur.com/MkX0sam.png). I'm trying to disable this functionality, so a user can't drag past the end/beginning of a carousel.
I've attempted to do this with the various scrollable configurations, including the setup that is typically suggested for dealing with overscrolling
scrollable : {
direction: 'horizontal',
directionLock: true,
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 5
},
outOfBoundRestrictFactor: 0
}
The above configuration, especially outOfBoundRestrictFactor does stop the ability to drag past the end, but it also stops the ability to drag anywhere else in a carousel either...so that doesn't work. I've screwed around with all of the other configurations to no positive effect.
Unfortunately, I haven't been able to find much on modifying the configurations of dragging. Any help here would be awesomesauce.
What you need to do is override the onDrag functionality in Carousel. This is where the logic is to detect which direction the user is dragging, and where you can check if it is the first or last item.
Here is a class that does exactly what you want. The code you are interested in is right at the bottom of the function. The rest is simply taken from Ext.carousel.Carousel.
Ext.define('Ext.carousel.Custom', {
extend: 'Ext.carousel.Carousel',
onDrag: function(e) {
if (!this.isDragging) {
return;
}
var startOffset = this.dragStartOffset,
direction = this.getDirection(),
delta = direction === 'horizontal' ? e.deltaX : e.deltaY,
lastOffset = this.offset,
flickStartTime = this.flickStartTime,
dragDirection = this.dragDirection,
now = Ext.Date.now(),
currentActiveIndex = this.getActiveIndex(),
maxIndex = this.getMaxItemIndex(),
lastDragDirection = dragDirection,
offset;
if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {
delta *= 0.5;
}
offset = startOffset + delta;
if (offset > lastOffset) {
dragDirection = 1;
}
else if (offset < lastOffset) {
dragDirection = -1;
}
if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {
this.flickStartOffset = lastOffset;
this.flickStartTime = now;
}
this.dragDirection = dragDirection;
// now that we have the dragDirection, we should use that to check if there
// is an item to drag to
if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) {
return;
}
this.setOffset(offset);
}
});
I want Carousel to stop swiping at start and end of the pages.
I mean to prevent the end page to swipe to the right and the start page to swipe to the left:
Is there any config or some other way to implement it?
Thank you in Advance.
By default, ST2's carousel component has this configuration. So, you need not put in any extra effort to achieve this.
Look at this example from Sencha's website. When you reach the last item, it will prevent swiping to the right and when you are on first item, it will prevent swiping to the left.
Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
});
You can create your own carousel and then override the onDrag event following is the code form Ext.carousel.Carousel
Ext.define('Ext.carousel.Custom', {
extend: 'Ext.carousel.Carousel',
onDrag: function(e) {
if (!this.isDragging) {
return;
}
var startOffset = this.dragStartOffset,
direction = this.getDirection(),
delta = direction === 'horizontal' ? e.deltaX : e.deltaY,
lastOffset = this.offset,
flickStartTime = this.flickStartTime,
dragDirection = this.dragDirection,
now = Ext.Date.now(),
currentActiveIndex = this.getActiveIndex(),
maxIndex = this.getMaxItemIndex(),
lastDragDirection = dragDirection,
offset;
if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {
delta *= 0.5;
}
offset = startOffset + delta;
if (offset > lastOffset) {
dragDirection = 1;
}
else if (offset < lastOffset) {
dragDirection = -1;
}
if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {
this.flickStartOffset = lastOffset;
this.flickStartTime = now;
}
this.dragDirection = dragDirection;
// now that we have the dragDirection, we should use that to check if there
// is an item to drag to
if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) {
return;
}
this.setOffset(offset);
}
});
reference :=Link
I have a little problem / question. I work on a little WYSIWYG editor. I use a div with the option contentEditable="true" and I would like to know when there is a click on a button which element in my div is modifying by the user.
For example if there is 3 paragraphs on the the div, and that user modifies the second, I would like to know when he clicks on a button that he is currently to modify the second paragraph to show the text content ! In this example "P2" :
<div contenteditable="true"><p>P1</p><p>P2</p><p>P3</p></div>
Thanks in advance for your help.
Nicolas
You could examine the selection in the mousedown event of the button. The following will work in all major browsers:
function getSelectionBoundaryContainerElement(start) {
var container = null;
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(start);
container = range.startContainer;
if (container.nodeType != 1) {
container = container.parentNode;
}
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
textRange.collapse(start);
container = textRange.parentElement();
}
return container;
}
document.getElementById("yourButtonId").onmousedown = function() {
alert(getSelectionBoundaryContainerElement().innerHTML);
}