From 4ebd3dd76742d9be8aaf3d997b2b312502a4f2d9 Mon Sep 17 00:00:00 2001 From: John Allers Date: Wed, 7 May 2014 10:54:54 -0400 Subject: [PATCH 1/3] Added Right-To-Left text direction support. When the HTML attribute dir="rtl" is set on the page, the input value does not get aligned properly with the knob. Use jquery.knob({ rtl: true }) to adjust the alignment appropriately. --- js/jquery.knob.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 4c927f7..b79c159 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -119,6 +119,7 @@ inline : false, step : this.$.data('step') || 1, rotation: this.$.data('rotation'), + rtl: false, // Hooks draw : null, // function () {} @@ -700,13 +701,12 @@ ) + 2; this.o.displayInput - && this.i.css({ + && (this.i.css({ 'width' : ((this.w / 2 + 4) >> 0) + 'px' ,'height' : ((this.w / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' ,'margin-top' : ((this.w / 3) >> 0) + 'px' - ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font @@ -715,6 +715,11 @@ ,'padding' : '0px' ,'-webkit-appearance': 'none' }) + && (this.o.rtl + ? this.i.css({ 'margin-right' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' }) + : this.i.css({ 'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' }) + ) + ) || this.i.css({ 'width' : '0px' ,'visibility' : 'hidden' From ca3da3c0cd823dfd6fad67245e14ba3c2da86b82 Mon Sep 17 00:00:00 2001 From: John Allers Date: Wed, 7 May 2014 19:59:34 -0400 Subject: [PATCH 2/3] Minor refactoring to eliminate redundant margin calculation. --- js/jquery.knob.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index b79c159..f97e324 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -715,10 +715,10 @@ ,'padding' : '0px' ,'-webkit-appearance': 'none' }) - && (this.o.rtl - ? this.i.css({ 'margin-right' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' }) - : this.i.css({ 'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' }) - ) + && this.i.css( + this.o.rtl ? 'margin-right' : 'margin-left' + , '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' + ) ) || this.i.css({ 'width' : '0px' From 9133ad72c8cf7bddb2ba2a43022a97c610683afd Mon Sep 17 00:00:00 2001 From: John Allers Date: Sun, 11 May 2014 12:18:48 -0400 Subject: [PATCH 3/3] Added rtl option to the docs. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6ed8efc..9202817 100755 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ UI : * font : font family. * fontWeight : font weight. * bgColor : background color. +* rtl : default=false | true=displays the input properly for right-to-left languages (Arabic, Hebrew, etc.). Requires displayInput=true. Hooks -------