Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Method 'slickPause' not compatible with Play/Pause button #58

Open
warriotox opened this issue Feb 22, 2022 · 0 comments
Open

Method 'slickPause' not compatible with Play/Pause button #58

warriotox opened this issue Feb 22, 2022 · 0 comments

Comments

@warriotox
Copy link

warriotox commented Feb 22, 2022

Clicking on the play/pause button triggers the autoPlayToggleHandler function which toggles between the two buttons.
This logic is not called when calling the slickPause method. This can be easily fixed by moving the logic for the play/pause buttons directly into the slickPlay and slickPause function...

Original code:

Slick.prototype.autoPlayToggleHandler = function() {
        var _ = this;

        if(_.paused) {
            _.$playIcon.css('display', 'none'); //to be extracted to slickPlay
            _.$pauseIcon.css('display', 'inline');  //to be extracted to slickPlay

            _.$pauseButton.find('.slick-play-text').attr('style', 'display: none');  //to be extracted to slickPlay
            _.$pauseButton.find('.slick-pause-text').removeAttr('style');  //to be extracted to slickPlay

            _.slickPlay();
        } else {
            _.$playIcon.css('display', 'inline');  //to be extracted to slickPause
            _.$pauseIcon.css('display', 'none');  //to be extracted to slickPause

            _.$pauseButton.find('.slick-play-text').removeAttr('style');  //to be extracted to slickPause
            _.$pauseButton.find('.slick-pause-text').attr('style', 'display: none');  //to be extracted to slickPause

            _.slickPause();
        }
    };

I have solved this exactly as I was suggesting above. I have moved the toggle logic into slickPlay and slickPause functions respectively, which means calling slickPause manually triggers the slickPause function which now also toggles the button states. Works as expected!

New code for Slick.prototype.autoPlayToggleHandler:

Slick.prototype.autoPlayToggleHandler = function() {
        var _ = this;

        if(_.paused) {
            _.slickPlay();
        } else {
            _.slickPause();
        }
    };

New code for Slick.prototype.slickPause

Slick.prototype.pause = Slick.prototype.slickPause = function() {

        var _ = this;

        if ( _.options.autoplay){ //added
          _.$playIcon.css('display', 'inline'); //added
          _.$pauseIcon.css('display', 'none'); //added

          _.$pauseButton.find('.slick-play-text').removeAttr('style'); //added
          _.$pauseButton.find('.slick-pause-text').attr('style', 'display: none'); //added
        } //added

        _.autoPlayClear();
        _.paused = true;

    };

New code for Slick.prototype.slickPlay

    Slick.prototype.play = Slick.prototype.slickPlay = function() {

        var _ = this;

        if ( _.options.autoplay){ //added
          _.$playIcon.css('display', 'none'); //added
          _.$pauseIcon.css('display', 'inline'); //added

          _.$pauseButton.find('.slick-play-text').attr('style', 'display: none'); //added
          _.$pauseButton.find('.slick-pause-text').removeAttr('style'); //added
        } //added

        _.autoPlay();
        _.options.autoplay = true;
        _.paused = false;
        _.focussed = false;
        _.interrupted = false;

    };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant