Weird jQuery UI Slider behavior using Page Up/Down - jquery-ui

I'm using jQuery UI's slider to update a div containing a number. Dragging or using the left/right keys should only allow the user to choose a number between 1 and 5 (this works as intended). However, if the handle has focus and I use page up/down, I start to get rounded values that are well out of the range of 1-5. Anybody experience the same? Thoughts?

Here is the code from the JQuery.UI reopsitory. It looks to me like it may be a bug. You might want to report this here (you'll probably need to register.) BTW the feature was added only seven months ago see here.
switch ( event.keyCode ) {
case $.ui.keyCode.HOME:
newVal = self._valueMin();
break;
case $.ui.keyCode.END:
newVal = self._valueMax();
break;
case $.ui.keyCode.PAGE_UP:
newVal = curVal + ( (self._valueMax() - self._valueMin()) / numPages );
break;
case $.ui.keyCode.PAGE_DOWN:
newVal = curVal - ( (self._valueMax() - self._valueMin()) / numPages );
break;
case $.ui.keyCode.UP:
case $.ui.keyCode.RIGHT:
if ( curVal === self._valueMax() ) {
return;
}
newVal = curVal + step;
break;
case $.ui.keyCode.DOWN:
case $.ui.keyCode.LEFT:
if ( curVal === self._valueMin() ) {
return;
}
newVal = curVal - step;
break;
}

Related

Three.js - Raycaster doesn't work properly on Ipad

i had some issues with Raycaster when i tested my code on mobile device. I realised the same problem appears on the official examples on threejs.org when you activate tactile touch( ex: https://threejs.org/examples/?q=inter#webgl_interactive_cubes ).
Is there an alternative to Raycaster to interact with objects in threejs ?
I am using Firefox 58.0.2 (64 bits) to test my three.js project and to simulate tactile touch.
Thanks in advance
Thanks for the response,
In my example, i had to drag a panorama and interact with objects inside the panorama.
Here is the event listeners that works perfectly for me, if it can help others
function onDocumentTouchStart( event ) {
console.log("TouchStart")
event.preventDefault();
event.clientX = event.touches[0].pageX;
event.clientY = event.touches[0].pageY;
onDocumentMouseDown( event );
}
function onDocumentTouchMove( event ) {
console.log("TouchMove")
if ( event.touches.length == 1 ) {
event.preventDefault();
lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 && intersects[0].object.name.includes("sphere")) {
INTERSECTED = intersects[0].object;
//some code
isUserInteracting = true
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
Is there an alternative to Raycaster to interact with objects in threejs ?
Raycaster does not add event listeners, that's application level code.
Many three.js examples only support mouse interaction. If you want to support touch devices, implement event listeners like touchstart and use the event information in order to perform a raycast.

Get Call logs Blackberry

What i want
Hi, I am new to BB development and want to know how can i get all call logs list with attributes like time, number etc programmatically ??
What i Read
i have read this Link but not getting the way to implement.
Also there is not good support like android or iOS for blackberry.
Kindly suggest me with some code snippet.
Thanks
I assume you really do want Java (BBOS) code.
In my opinion, the link you referenced provides sufficient information to code something, but since you seem to need more, I hope this helps:
PhoneLogs _logs = PhoneLogs.getInstance();
int numberOfCalls = _logs.numberOfCalls(PhoneLogs.FOLDER_NORMAL_CALLS);
System.out.println("Number of calls: " + Integer.toString(numberOfCalls));
for ( int i = 0; i < numberOfCalls; i++ ) {
PhoneCallLog phoneLog = (PhoneCallLog)_logs.callAt(i,PhoneLogs.FOLDER_NORMAL_CALLS);
int callType = phoneLog.getType();
String callTypeString = "";
switch (callType) {
case PhoneCallLog.TYPE_MISSED_CALL_OPENED:
case PhoneCallLog.TYPE_MISSED_CALL_UNOPENED:
callTypeString = "Missed";
break;
case PhoneCallLog.TYPE_PLACED_CALL:
callTypeString = "Placed";
break;
case PhoneCallLog.TYPE_RECEIVED_CALL:
callTypeString = "Received";
break;
default:
callTypeString = "Unknown";
break;
}
PhoneCallLogID participant = phoneLog.getParticipant();
System.out.println("Call: " + Integer.toString(i) + " " + callTypeString + " " + participant.getAddressBookFormattedNumber());
}
Sample output (from debug log):
Number of calls: 1
Call: 0 Placed 1 (234) 534-5343 5555

jQuery UI Sortable: tolerance "intersect" doesn't work as expected (bug #8342)

9 days ago (at time of this writing) the following bug has been reopened:
Sortable: Incorrect behaviour (or incorrect documentation) of sortable option tolerance: 'intersect'
Unfortunately I can't wait for jQuery to fix this issue.
I have a single container with items that can be sorted vertically (all <div>s). These items have different heights (and none of those heights are predefined).
Is there a decent workaround available?
I wrote a workaround myself, inspired by dioslaska's solution to his own question here:
jQuery UI sortable tolerance option not working as expected
It works quite smoothly :)
Remove the tolerance option and use the following function as sort option:
function( e, ui ) {
var container = $( this ),
placeholder = container.children( '.ui-sortable-placeholder:first' );
var helpHeight = ui.helper.outerHeight(),
helpTop = ui.position.top,
helpBottom = helpTop + helpHeight;
container.children().each( function () {
var item = $( this );
if( !item.hasClass( 'ui-sortable-helper' ) && !item.hasClass( 'ui-sortable-placeholder' )) {
var itemHeight = item.outerHeight(),
itemTop = item.position().top,
itemBottom = itemTop + itemHeight;
if(( helpTop > itemTop ) && ( helpTop < itemBottom )) {
var tolerance = Math.min( helpHeight, itemHeight ) / 2,
distance = helpTop - itemTop;
if( distance < tolerance ) {
placeholder.insertBefore( item );
container.sortable( 'refreshPositions' );
return false;
}
} else if(( helpBottom < itemBottom ) && ( helpBottom > itemTop )) {
var tolerance = Math.min( helpHeight, itemHeight ) / 2,
distance = itemBottom - helpBottom;
if( distance < tolerance ) {
placeholder.insertAfter( item );
container.sortable( 'refreshPositions' );
return false;
}
}
}
});
}

How to I18N PrimeFaces Editor

I cannot work out how to add internationalization to the PrimeFaces Editor (Version 3.2).
I need to translate tooltips, texts in comboboxes and change icons of the toolbar.
In an old users guide http://www.scribd.com/doc/49595285/46/Editor I found an attribute called "language" but this seems to be kind of disabled or removed for the actual version.
My project setup is JSF 2 with PrimeFaces 3.2 and GlassFish 3.1.2
I'd be very glad if you could show me how I can solve this problem.
Thanks and Kind regards,
Pedro
JMelnik is right. There is a workaround though!
You can do that by downloading the editor.js file from the primefaces subversion repository: 3_3_1/src/main/resources/META-INF/resources/primefaces/editor/editor.js and place it inside your project's META-INF/resources/primefaces/editor folder.
Now you can edit the file and change it according to you locale. I did it for some of the buttons in pt_BR:
buttons: {
// name,title,command,popupName (""=use name)
init:
"bold,Negrito,|" +
"italic,Itálico,|" +
"underline,Sublinhado,|" +
"strikethrough,Tachado,|" +
"subscript,Subscrito,|" +
"superscript,Sobrescrito,|" +
"font,Fonte,fontname,|" +
"size,Tamanho da Fonte,fontsize,|" +
"style,Estilo,formatblock,|" +
"color,Cor da fonte,forecolor,|" +
"highlight,Cor de Destaque do Texto,hilitecolor,color|" +
"removeformat,Remove Formatting,|" +
"bullets,Marcadores,insertunorderedlist|" +
"numbering,Numeração,insertorderedlist|" +
"outdent,Diminuir Recuo,|" +
"indent,Aumentar Recuo,|" +
"alignleft,Alinhar à Esquerda,justifyleft|" +
"center,Centralizar,justifycenter|" +
"alignright,Alinhar à Direita,justifyright|" +
"justify,Justificar,justifyfull|" +
"undo,,|" +
"redo,,|" +
"rule,Insert Horizontal Rule,inserthorizontalrule|" +
"image,Insert Image,insertimage,url|" +
"link,Insert Hyperlink,createlink,url|" +
"unlink,Remove Hyperlink,|" +
"cut,,|" +
"copy,,|" +
"paste,,|" +
"pastetext,Paste as Text,inserthtml,|" +
"print,,|" +
"source,Mostrar Código Fonte"
},
A i18n solution for that would be great since this approach won't support multiple locales and make you code depend on specific encoding (as it may use special characters).
Analysis
If we look at the PrimeFaces 3.2 documentation, there is no such attribute as language for Editor component and there is nothing mentioned in localization chapter.
PrimeFaces do not provide a way to localize Editor as they do provide for Calendar. And obviously they do provide it for calendar, because it is out of box feature for jQuery datePicker, which caledar is based on.
Outcome
Look for editor.js in PrimeFaces 3.2 sources. There is a section, where all editor buttons are initialized:
buttons: {
// name,title,command,popupName (""=use name)
init:
.....
"font,,fontname,|" +
"size,Font Size,fontsize,|" +
.....
}
There is provided format for separate button setup: name,title,command,popupName. The title part is the one you can make use of.
What you can do, you can build primefaces sources with your own titles provided, or override them in other way I cannot think of.
Help
If you are using maven, you can install customized primefaces in local or centralized repository of your own and use it instead of original dependency.
Lesson
You shouldn't look for old documentation, when you are using newer version. Look for the documentation of the version you are using.
Since JSF2 and Primefaces have jQuery, you can simply run this code on your page:
$(function(){
$(".ui-editor-group>.ui-editor-button").each(function(){
var title = $(this).attr("title").toLowerCase();
switch(title){
case "bold": title = "Negrito"; break;
case "italic": title = "Itálico"; break;
case "underline": title = "Sublinhado"; break;
case "align text left": title = "Alinhado à esquerda"; break;
case "center": title = "Centralizado"; break;
case "align text right": title = "Alinhado à direita"; break;
case "justify": title = "Justificado"; break;
case "insert hyperlink": title = "Inserir link"; break;
case "remove hyperlink": title = "Remover link"; break;
}
$(this).attr("title", title);
})
})
This little jQuery code can change Primefaces Editor's strings to wherever you want. I made it only for a few editor's components because I didn't used all of them.
If you need to translate the other options, simply add them inside the switch command. Don't forget that all titles inside switch command are in lowercase, due to ".toLowerCase()" method on line three. I've done this to simplify string management.
You can put it inside a function inside an external JavaScript file to get it cached, too.
This is a working example I made for Greek language (el_GR locale), all buttons:
$(".ui-editor-group>.ui-editor-button").each(function () {
var title = $(this).attr("title").toLowerCase();
switch (title) {
case "bold":
title = "Έντονα";
break;
case "italic":
title = "Πλάγια";
break;
case "underline":
title = "Υπογραμμισμένα";
break;
case "align text left":
title = "Στοίχιση αριστερά";
break;
case "center":
title = "Στοίχιση στο κέντρο";
break;
case "align text right":
title = "Στοίχiση δεξιά";
break;
case "justify":
title = "Στοίχιση";
break;
case "insert hyperlink":
title = "Εισαγωγή συνδέσμου";
break;
case "remove hyperlink":
title = "Αφαίρεση συνδέσμου";
break;
case "strikethrough":
title = "Διεγραμμένα";
break;
case "subscript":
title = "Δείκτης";
break;
case "superscript":
title = "Εκθέτης";
break;
case "font":
title = "Γραμματοσειρά";
break;
case "font size":
title = "Μέγεθος γραμματοσειράς";
break;
case "style":
title = "Στυλ";
break;
case "font color":
title = "Χρώμα γραμματοσειράς";
break;
case "text highlight color":
title = "Χρώμα επισήμανσης κειμένου";
break;
case "remove formatting":
title = "Κατάργηση μορφοποίησης";
break;
case "bullets":
title = "Λίστα με κουκκίδες";
break;
case "numbering":
title = "Αριθμητική λίστα";
break;
case "outdent":
title = "Προεξοχή";
break;
case "indent":
title = "Εσοχή";
break;
case "undo":
title = "Αναίρέση";
case "redo":
title = "Επαναφορά";
break;
case "insert horizontal rule":
title = "Eισαγωγή οριζόντιας γραμμής";
break;
case "insert image":
title = "Εισαγωγή εικόνας";
break;
case "cut":
title = "Κόψιμο";
break;
case "copy":
title = "Αντιγραφή";
break;
case "paste":
title = "Επικόλληση";
break;
case "paste as text":
title = "Επικόλληση ως απλό κείμενο";
break;
case "print":
title = "Εκτύπωση";
break;
case "show source":
title = "Εμφάνιση κώδικα";
break;
case "Show Rich Text":
title = "Εμφάνιση εύκολης επεξεργασίας άρθρου";
break;
}
$(this).attr("title", title);
});

Set min/max for each range handle in jQuery UI slider?

I'm using a jQuery slider where users can select a time range between 00:00 and 1d+12:00. 36 hours all together.
Anyway.
I would like to apply min and max values to my handles based on what they're set to. These are my requirements:
left handle can never go over midnight on the next day (max is 24 hours)
left handle can never go more left than -24 hours from right handle (min is right handle value minus 24 hours)
right handle can never go more than +24 hours from the left handle (max is left handle value plus 24 hours)
As I understand, minimum and maximum values can only be applied to single handle slider control and not to range slider?
Is it possible to set minimums and maximums individually to both handles?
I've tried initializing it this way but no luck:
$(".timing-slider", timing).slider({
range: true,
min: [0, 0],
max: [24, 36],
}
This jQuery UI slider extension satisfies all upper requirements
I've managed to change default jQuery UI slider to include a few more configuration properties:
minRangeSize - sets minimum range size so ranges can't be narrower than this setting
maxRangeSize - sets maximum range size so ranges can't be wider than this setting
autoShift - when set to true it automatically drags the other handle along when range width reaches maximum; when set to false handle just can't be moved beyond maximum range width
lowMax - sets the lower handle upper boundary so it's impossible to set lower handle beyond this value
topMin - sets the upper handle lower boundary so it's impossible to set upper handle below this value
This is a working example of such range slider.
This is the extra code that has to be run after jQuery slider. It actually rewrites one of its internal functions to also check the new settings. This code will only change slider code when slider script has been loaded (hence the first if statement that checks whether slider widget has been loaded):
(function ($) {
if ($.ui.slider)
{
// add minimum range length option
$.extend($.ui.slider.prototype.options, {
minRangeSize: 0,
maxRangeSize: 100,
autoShift: false,
lowMax: 100,
topMin: 0
});
$.extend($.ui.slider.prototype, {
_slide: function (event, index, newVal) {
var otherVal,
newValues,
allowed,
factor;
if (this.options.values && this.options.values.length)
{
otherVal = this.values(index ? 0 : 1);
factor = index === 0 ? 1 : -1;
if (this.options.values.length === 2 && this.options.range === true)
{
// lower bound max
if (index === 0 && newVal > this.options.lowMax)
{
newVal = this.options.lowMax;
}
// upper bound min
if (index === 1 && newVal < this.options.topMin)
{
newVal = this.options.topMin;
}
// minimum range requirements
if ((otherVal - newVal) * factor < this.options.minRangeSize)
{
newVal = otherVal - this.options.minRangeSize * factor;
}
// maximum range requirements
if ((otherVal - newVal) * factor > this.options.maxRangeSize)
{
if (this.options.autoShift === true)
{
otherVal = newVal + this.options.maxRangeSize * factor;
}
else
{
newVal = otherVal - this.options.maxRangeSize * factor;
}
}
}
if (newVal !== this.values(index))
{
newValues = this.values();
newValues[index] = newVal;
newValues[index ? 0 : 1] = otherVal;
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal,
values: newValues
});
if (allowed !== false)
{
this.values(index, newVal, true);
this.values((index + 1) % 2, otherVal, true);
}
}
} else
{
if (newVal !== this.value())
{
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal
});
if (allowed !== false)
{
this.value(newVal);
}
}
}
}
});
}
})(jQuery);

Resources