ruisoftware / jquery-rsSliderLens

UI slider control that magnifies the current value
MIT License
22 stars 5 forks source link

Bug when pragmatically updating value for single sliders #2

Closed jculloty closed 7 years ago

jculloty commented 7 years ago

There is a bug in the code when setting the sliders value via JavaScript.

The problem appears to be on line 662, changing it as below solves the problem. Note the same bug may be on line 513, I have not tested this. Sorry for not creating a pull request I was having trouble doing so.

ruisoftware commented 7 years ago

Thanks for pointing that out! I was able to reproduce the problem and today will provide a fix for it. But before doing that, please confirm that you get the following exception:

jquery.rsSliderLens.js:1057 Uncaught TypeError: Cannot read property 'css' of null
    at Object.setValue (jquery.rsSliderLens.js:1057)...

when you invoke $yourPlugin.rsSliderLens('option', 'value', 25) before you actually focus on the slider itself. If you focus on the slider, then programatically change the value, it works.

jculloty commented 7 years ago

I have retested and focused first as you suggested and I can confirm that there is no issue when focused. The problem only appears when I update the value and the slider is not focused. I am not sure if this will help me in my case as I am writing an AngularJS wrapper for your plugin. If the value changes in the view .rsSliderLens('option', 'value', x) if automatically called; I could try and focus automatically but that might get messy. Anyway I can confirm that the error triggered is on line 1057. Below is a stack trace from my angular call.

On a related note I am also trying to update the range programatically and running into two issues. (I am using a single handle and setting the range as an array by the way; and I want to change the min/max allowed values after the slider is created). The basic call I am using is

$yourPlugin.rsSliderLens('option', 'range', { type: [ -20, 55 ], draggable: true })

This after this call an error is thrown when I click the slider handle (see below). As far as I can tell the bug on line 668

var newRangeNeeded = value && (typeof value === 'object') && value.length === 2;

should read

var newRangeNeeded = value && (typeof value === 'object') && value.type.length === 2;

Changing this value appears to remove the first bug; I am resetting the value afterwards to correct the slider if it is in an invalid stage.

The second issue is that the size of the inner div showing the allowed range is not updated. I am styling the disallowed portion red; but this remains fixed after changing the range. I tried updating the dive directly but this broke the slider's lens. It still showed the old red portions.

Thanks for looking into this and for developing a really nice slider. It fits in perfectly with my planned UI. If you would like the angular code I am working let me know; It is limited to my use case for now; Perhaps is a few weeks when I complete this project I can expand on it.

John

Clicking the slider handle after updating the range

TypeError: null has no properties

jquery.rsSliderLens.js:1060:26 setValue http://localhost:3000/assets/jquery.rsSliderLens.js:1060:26 animDone http://localhost:3000/assets/jquery.rsSliderLens.js:1299:21 startDragFromHandle http://localhost:3000/assets/jquery.rsSliderLens.js:1424:25 startDragFromHandle1st http://localhost:3000/assets/jquery.rsSliderLens.js:1430:25 dispatch jquery.js:4434:14 add/r.handle jquery.js:4121:5

AngularJS update value when not focused

TypeError: $handleElem is null Stack trace: setValue@http://localhost:3000/assets/jquery.rsSliderLens.js:1057:25 http://localhost:3000/assets/jquery.rsSliderLens.js:1057:25 step@http://localhost:3000/assets/jquery.rsSliderLens.js:1355:33 run@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:24339 i@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:27659 n.fx.timer@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:30949 Xa@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:28355 g@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:29394 dequeue@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:1278 queue/<@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:1713 each@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:2:2880 each@https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:2:845 queue@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:1615 animate@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:29506 anim@http://localhost:3000/assets/jquery.rsSliderLens.js:1351:25 gotoAnim@http://localhost:3000/assets/jquery.rsSliderLens.js:1372:25 onSetter@http://localhost:3000/assets/jquery.rsSliderLens.js:662:37 dispatch@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:6414 add/r.handle@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:3224 trigger@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:5572 triggerHandler@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:11615 option@http://localhost:3000/assets/jquery.rsSliderLens.js:1748:33 $.fn.rsSliderLens@ http://localhost:3000/assets/jquery.rsSliderLens.js:1764:39 link/</ngModel.$render@http://localhost:3000/keystone.html:69:19 Rg/<@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:190:167 $digest@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:146:81 $apply@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:149:111 $$debounceViewValueCommit@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:296:450 $setViewValue@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:296:98 l@ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:180:254 dispatch@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:6414 add/r.handle@ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:3224

On Thu, Aug 24, 2017 at 6:22 AM, Jose Rui Santos notifications@github.com wrote:

Thanks for pointing that out! I was able to reproduce the problem and today will provide a fix for it. But before doing that, please confirm that you get the following exception:

jquery.rsSliderLens.js:1057 Uncaught TypeError: Cannot read property 'css' of null at Object.setValue (jquery.rsSliderLens.js:1057)...

when you invoke $yourPlugin.rsSliderLens('option', 'value', 25) before you actually focus on the slider itself. If you focus on the slider, then programatically change the value, it works.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ruisoftware/jquery-rsSliderLens/issues/2#issuecomment-324535944, or mute the thread https://github.com/notifications/unsubscribe-auth/AdvW2FeL_Gwqpy7pxGMmml4Nl1CP4tBFks5sbQicgaJpZM4PALpg .

ruisoftware commented 7 years ago

Regarding your first problem, you don't need to refocus as a workaround. Just wait a bit for a new fix that I should publish tonight (right now I am away from my main work computer).

I have moved your second problem into a new issue. This issue will take some time to fix, maybe tomorrow or during the weekend.

Thanks for your interest. I myself already thought about making angular versions of my plugins, but unfortunately time is my enemy. When you are done, I would apreciate a link to your repository, so I can add a reference to it in my readme.

jculloty commented 7 years ago

Thanks for taking the time to fix these and for the speedy responses. I can tweak my local JS file to prevent any errors, so it is only the style of the bars that is a problem for me now. I am live with this until you have time to update the code.

One this project is completed I will tidy up my angular version a little and send you a link to the repository.

Thanks again John

On Thu, Aug 24, 2017 at 12:25 PM, Jose Rui Santos notifications@github.com wrote:

Regarding your first problem, you don't need to refocus as a workaround. Just wait a bit for a new fix that I should publish tonight (right now I am away from my main work computer).

I have moved your second problem into a new issue https://github.com/ruisoftware/jquery-rsSliderLens/issues/3. This issue will take some time to fix, maybe tomorrow or during the weekend.

Thanks for your interest. I myself already thought about making angular versions of my plugins, but unfortunately time is my enemy. When you are done, I would apreciate a link to your repository, so I can add a reference to it in my readme.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ruisoftware/jquery-rsSliderLens/issues/2#issuecomment-324608498, or mute the thread https://github.com/notifications/unsubscribe-auth/AdvW2GY3Pe2guc_tgNRq6Fo57HfYkiyjks5sbV2igaJpZM4PALpg .

ruisoftware commented 7 years ago

Hi John!

This issue has been fixed. Please let me know if it works for you. In the meantime, I've also fixed the issue #3, but will commit it tomorrow, since still wanna test it more, just to be on the safe side.

Regards, Jose Rui Santos

jculloty commented 7 years ago

Jose,

Setting the value without focus is now working.

Thanks for the speedy update.

John

On Thu, Aug 24, 2017 at 10:38 PM, Jose Rui Santos notifications@github.com wrote:

Hi John!

This issue has been fixed. Please let me know if it works for you. In the meantime, I've also fixed the issue #3 https://github.com/ruisoftware/jquery-rsSliderLens/issues/3, but will commit it tomorrow, since still wanna test it more, just to be on the safe side.

Regards, Jose Rui Santos

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ruisoftware/jquery-rsSliderLens/issues/2#issuecomment-324764850, or mute the thread https://github.com/notifications/unsubscribe-auth/AdvW2CRnOvIdaF_4fABHRoB1cBhqqXtHks5sbe1fgaJpZM4PALpg .

ruisoftware commented 7 years ago

Hi John

Issue #3 is fixed. I also suggest you to visit the new jquery-rsSliderLens/src/demo/test.html with several test buttons for the all the setters.

Regards, Jose Rui Santos

jculloty commented 7 years ago

Jose,

Sorry for not replying sooner; I have just got around to testing your changes, and they work perfectly.

Many thanks John

On Fri, Aug 25, 2017 at 11:13 PM, Jose Rui Santos notifications@github.com wrote:

Hi John

Issue #3 https://github.com/ruisoftware/jquery-rsSliderLens/issues/3 is fixed. I also suggest you to visit the new jquery-rsSliderLens/src/demo/ test.html with several test buttons for the all the setters.

Regards, Jose Rui Santos

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ruisoftware/jquery-rsSliderLens/issues/2#issuecomment-325045808, or mute the thread https://github.com/notifications/unsubscribe-auth/AdvW2NCLn7Q1N7seHU08N-bdaXndBlpBks5sb0cegaJpZM4PALpg .