dojo ValuePickerDatePicker on Android device - javascript

The Dojo mobile DatePicker - dojox.mobile.ValuePickerDatePicker - is behaving incorrectly:
Clicking on the plus(+) and minus(-) buttons for the year updates the day value and the otherway around.
This only appears on the device and never in a browser during development. Have reproduced on multiple Android devices.
This is also somewhat intermittent in that the steps to reproduce are not exactly the same every time. However once it starts to go wrong it continues to be wrong...
To reproduce: in the Date Picker widget, repeatedly and randomly click on the plus(+) and minus(-) buttons and on the editable fields. Eventually the fields will start to update incorrectly. (I would like it to be more predictable)
Have never reproduced the error on my PC/MAC.
I have a suspicion that the predictive text on the device is interfering, but I have no proof of that.
You can reproduce the error with the widget/Date Picker on its own. Tested with Dojo version 1.9.4 and 1.10.1. The Date Picker is created declaratively:
<div id="dateSelectorDatePicker" data-dojo-type="dojox.mobile.ValuePickerDatePicker" data-dojo-props="slotOrder:[2,1,0]"></div>
Try this example in your browser on a Android device http://jsfiddle.net/sport_johan/q943mbrs/1/

We fixed the problem by creating a new versions of the dojox.mobile.ValuePickerSlot
class and the dojox.mobile.ValuePickerDatePicker class.
In the MyValuePickerSlot which is a copy of ValuePickerSlot we are using click events instead touch events.
So first copy ValuePickerSlot.js and then inside MyValuePickerSlot.js you remove the following handlers:
// this.connect(this.plusBtnNode, touch.press, "_onTouchStart"),
// this.connect(this.minusBtnNode, touch.press, "_onTouchStart"),
and instead add
this.connect(this.plusBtnNode, "onclick", "_onClick"),
this.connect(this.minusBtnNode, "onclick", "_onClick"),
You can also remove the functions _onTouchStart, _onTouchMove and _onTouchEnd since you wont be using them anymore.
You now have to create a new class MyValuePickerDatePicker which inherits all functionality from the original class but you override the constructor that creates the slot classes which now are the new MyValuePickerSlot.
define(["dojo/_base/declare",
"dojo/_base/lang",
"dojox/mobile/ValuePickerDatePicker",
"myApp/dojox-fix/MyValuePickerSlot"],
function (declare, lang, ValuePickerDatePicker, MyValuePickerSlot) {
return declare("myApp.dojox-fix.MyValuePickerDatePicker",[ValuePickerDatePicker], {
// Override of the ValuePickerDatePicker to fix a touch event bug
// on Android device
constructor: function (args) {
this.slotClasses = [
MyValuePickerSlot,
MyValuePickerSlot,
MyValuePickerSlot
];
lang.mixin(this, args);
}
});
});
You can now use the MyValuePickerDatePicker in your code instead of the broken ValuePickerDatePicker.
<div id="dateSelectorDatePicker" data-dojo-type="myApp.dojox-fix.MyValuePickerDatePicker" data-dojo-props="slotOrder:[2,1,0]"></div>
A side effect is that you can't press and hold the +/- buttons if you want to scroll far; you will have to repeatedly press the button(s), but you can still type in a value, so it is not big a problem.

Related

Jupyter: Move cell to top of notebook

Often I realize halfway through a notebook that I forgot an import and I want to move it to the top of the notebook (where I try to keep most of my imports). Is there a way to add a keyboard shortcut to ~/.jupyter/custom/custom.js that moves a cell to the top of a notebook?
Currently I do this by cutting the cell, scrolling to the top of the notebook, pasting and scrolling back down to where I was (often losing my place on the way back).
Below is some code from fastai forums to accomplish a different task: going to the running cell:
Jupyter.keyboard_manager.command_shortcuts.add_shortcut('CMD-I', {
help : 'Go to Running cell',
help_index : 'zz',
handler : function (event) {
setTimeout(function() {
// Find running cell and click the first one
if ($('.running').length > 0) {
//alert("found running cell");
$('.running')[0].scrollIntoView();
}}, 250);
return false;
}
});
It's partially documented; however you have to know a little JavaScript to create a keyboard shortcut.
As you've figured out, edit custom.js to bind a keyboard shortcut, as mentioned in the documentation (the second method must be used if the action is not built-in)
For the documentation, read the source code (either online or in site-packages/notebook/static/notebook/js/*.js if you installed jupyter locally). In particular, actions.js contains example bindings and notebook.js contains the functions that you can call on the notebook.
This is an example. It has the disadvantage of modifying the jupyter clipboard. To avoid that, you might be able to look into the source code of notebook.move_cell_down function to see how it's implemented, and modify it correspondingly.
Jupyter.keyboard_manager.command_shortcuts.add_shortcut('cmdtrl-I', {
help : 'Move cell to first in notebook',
handler : function (env) {
var index = env.notebook.get_selected_index();
env.notebook.cut_cell();
env.notebook.select(0);
env.notebook.paste_cell_above();
env.notebook.select(index);
}
});

Why are touch event listeners seemingly preventing the selection of google translate languages on the iphone or ipad?

I've a problem with the google translate widget. When using the iphone or the ipad I can't select the language to translate to. I can click the first button, but then when the languages menu appears and I tap a language, the menu immediately disappears and the click registers on the element that was behind the menu. This problem only occurs under very specific situations which I will outline below.
The problem described below has been observed on an iphone4 ios5.0.1
and ipad2 ios 7.0.6.
The problem has NOT been observed on firefox 29.0.1, chrome
31.0.1650.63 m or internet explorer 11.
JSfiddle of the problem at http://jsfiddle.net/LfkLy/1/
Reveal.js is not needed to recreate this problem.
I first noticed the problem when I used the widget on a page with reveal.js After a lot of playing around, I found that if I set touch to false in the reveal.js config or commented out lines below, the widget worked as it should have.
dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
I decided to remove reveal.js touch events and implement my own using hammer.js and the hammer jquery plugin.
I used something like this
// hammer.js
$('.reveal').hammer().on("tap", function()
{
console.log("tapped with a hammer");
});
Once the above code was implemented, the problem occurred again. I modified the code and tried it with just hammer.js and got the same result. The problem occurred regardless of which part of the page I attached the touch listener to. For curiosity's sake I tried it with jquery and again got the same result.
//Test with jquery
$('.reveal').on("touchstart", function()
{
console.log("touched with jquery");
});
Interestingly enough, when I used the click function there was no problem with the widget.
$('.reveal').on('click',function()
{
console.log("jquery click worked");
});
Despite the obvious link between touch events and the problem, I haven't dismissed the possibility that this may somehow be related to CSS. UPDATE: In particular, I'm starting to suspect it might have something to do with :hover and the touch events.
QUESTIONS
Why is this happening?
How can I listen for touch events such as touchstart and still use the google translate
widget on the iphone/ipad?
MY GOOGLE TRANSLATE WIDGET CODE
<div class="custom-translate" id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},'google_translate_element');
}
(function() {
var googleTranslateScript = document.createElement('script');
googleTranslateScript.type = 'text/javascript';
googleTranslateScript.async = true;
googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( googleTranslateScript );
})();
</script>
The problem is that for the layout you've selected, the Google Translate widget opens the language options "dropdown" in a new iframe, and (long story short) hammer.js doesn't play nicely with iframe content (presumably reveal.js has the same issue).
You could try some pretty complicated means of working around the issue involving dealing with the events and the iframe content, but a much simpler solution is to use another layout that doesn't use the iframe, e.g. replace SIMPLE with HORIZONTAL or VERTICAL
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
autoDisplay: false
},'google_translate_element');
}
I've updated your most recent fiddle here: http://jsfiddle.net/LfkLy/10/

TinyMCE 4 replicate clicking of a toolbar icon

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

Ext.layout.CardLayout requires fullscreen?

I'm programming a Sencha Touch app with a moderately complex composition of Ext.TabBar with Ext.Panel 's inside it.
But my Ext.Panel using Ext.layout.CardLayout runs in to a mysterious problem when not having a fullscreen: true property set on it: it throws an TypeError: Object card has no method 'setActiveItem' when I try to call the panel's .setActiveItem() method which it didn't in my proof of concept version that had fullscreen: true turned on.
I can replicate the problem on Chrome's console at a page with the Sencha Touch library loaded like this:
> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]})
undefined
> p1.setActiveItem(0)
TypeError: Object card has no method 'setActiveItem'
And it doesn't happen with the .fullscreenproperty:
> var p2 = new Ext.Panel({fullscreen: true,
layout:'card',
items:[{html:'a'},{html:'b'}]})
undefined
> p2.setActiveItem(0)
subclass
What gives?
Version info: I'm using Sencha Touch 1.0.1a
Update 1 (Jan 3, ~10.30UTC+1h), stepping around with the debugger and discovering things:
Just setting layout: 'card' won't trigger the creation of an actual Ext.layout.CardLayout object being created for real. Since .setActiveItem() tries to delegate to the compent's .layout property, it will fail almost instantly. However, setting .layout to a new Ext.layout.CardLayout causes more problems down the line..
Update 2: (Jan 3, ~12:25UTC+1h) It all comes down to various component objects not being rendered/inserted in the dependency sufficiently to be ready to render. I managed to get my code working by adding listeners, first a listener for the added event in the enclosing panel that does a this.setLayout(new Ext.layout.CardLayout());, then an afterrender listener on the component being added that finally calls .setActiveItem() to switch to the desired card.
A card layout works fine when it's not the outer, fullscreen one, but of course something has to be the root, fullscreen panel.
In this case, I'm using a 'fit' layout around the inner card layout, and setting the active item works fine:
var inner = new Ext.Panel({
layout:'card',
items:[
{html:'a'},
{html:'b'}
]
});
var outer = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:[
inner
]
});
I suspect the matter is more about whether the panel has been rendered or not, and fullscreen:true just happens to force immediate rendering (and of any children, which is why it works in my code above).
This is from the Ext.Component source:
if (this.fullscreen || this.floating) {
this.monitorOrientation = true;
this.autoRender = true;
}
if (this.fullscreen) {
var viewportSize = Ext.Viewport.getSize();
this.width = viewportSize.width;
this.height = viewportSize.height;
this.cls = (this.cls || '') + ' x-fullscreen';
this.renderTo = document.body;
}
I suppose you could do some of this set up manually... but I have to ask, how do you avoid have a fullscreen ancestor component outside it in the first place?
I had the same problem. The card layout only works if the container panel had the layout of 'fit'. But setting the container class to fit was causing the scroller to not working properly. So what I had to do is disabling the scroller for container and the card panel and set the scroller for the children of card panel.
Update 2 in my question kind of answers the question, although the solution feels distinctly cargo-cultish. I won't be too surprised if it breaks in future Sencha Touch versions.
Sencha may have changed this since this was posted since I don't get an error. However, setActiveItem() will force my views to be rendered immediately which is undesirable when setting up the UI. If you want to set the initial card without rendering the views immediately, use the property directly instead of the setter, like this:
yourComp.activeItem = yourView;
instead of
yourComp.setActiveItem(yourView);

ExtJS: starting HtmlEditor defaulting to source

I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.

Categories

Resources