Merge pull request #1190 from maartenbreddels/repeat-button

new: repeat button for Play widget, can be hidden
jupyter-widgets · Apr 26, 2017 · 760156a · 760156a
2 parents d40df7e + a07de87
commit 760156a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/docs/source/changelog.md b/docs/source/changelog.md
@@ -20,7 +20,7 @@ Major user-visible changes in ipywidgets 7.0 include:
   IntSlider(layout={'width': '100%'}, style={'handle_color': 'lightgreen'})
   ```
 - Removed the version validation check since it was causing too many false warnings about the widget javascript not being installed or the wrong version number. It is now up to the user to ensure that the ipywidgets and widgetsnbextension packages are compatible. ([#1219](https://github.com/jupyter-widgets/ipywidgets/pull/1219))
-
+- Play range is now inclusive (max value is max, instead of max-1), to be consistent with Sliders
 
 Major changes developers should be aware of include:
 

diff --git a/ipywidgets/widgets/widget_int.py b/ipywidgets/widgets/widget_int.py
@@ -228,6 +228,8 @@ class Play(_BoundedInt):
     _model_module = Unicode('jupyter-js-widgets').tag(sync=True)
 
     _playing = Bool().tag(sync=True)
+    _repeat = Bool().tag(sync=True)
+    show_repeat = Bool(True).tag(sync=True)
 
 class _BoundedIntRange(_IntRange):
     max = CInt(100, help="Max value").tag(sync=True)

diff --git a/jupyter-js-widgets/src/widget_int.ts b/jupyter-js-widgets/src/widget_int.ts
@@ -723,6 +723,8 @@ class PlayModel extends BoundedIntModel {
             _model_name: 'PlayModel',
             _view_name: 'PlayView',
             _playing: false,
+            _repeat: false,
+            show_repeat: true,
             interval: 100,
             step: 1,
         });
@@ -739,12 +741,16 @@ class PlayModel extends BoundedIntModel {
     loop() {
         if (this.get('_playing')) {
             var next_value = this.get('value') + this.get('step');
-            if (next_value < this.get('max')) {
+            if (next_value <= this.get('max')) {
                 this.set('value', next_value);
                 window.setTimeout(this.loop.bind(this), this.get('interval'));
             } else {
-                this.set('value', this.get('min'));
-                this.set('_playing', false);
+                if(this.get('_repeat')) {
+                    this.set('value', this.get('min'));
+                    window.setTimeout(this.loop.bind(this), this.get('interval'));
+                } else {
+                    this.set('_playing', false);
+                }
             }
             this.save_changes();
         }
@@ -765,6 +771,11 @@ class PlayModel extends BoundedIntModel {
         this.set('_playing', true);
         this.save_changes();
     }
+
+    repeat() {
+        this.set('_repeat', !this.get('_repeat'));
+        this.save_changes();
+    }
 }
 
 export
@@ -778,14 +789,17 @@ class PlayView extends DOMWidgetView {
         this.playButton = document.createElement('button');
         this.pauseButton = document.createElement('button');
         this.stopButton = document.createElement('button');
+        this.repeatButton = document.createElement('button');
 
         this.playButton.className = 'jupyter-button';
         this.pauseButton.className = 'jupyter-button';
         this.stopButton.className = 'jupyter-button';
+        this.repeatButton.className = 'jupyter-button';
 
         this.el.appendChild(this.playButton);  // Toggle button with playing
         this.el.appendChild(this.pauseButton); // Disable if not playing
         this.el.appendChild(this.stopButton);  // Disable if not playing
+        this.el.appendChild(this.repeatButton);  // Always enabled, but may be hidden
 
         var playIcon = document.createElement('i');
         playIcon.className = 'fa fa-play';
@@ -796,13 +810,20 @@ class PlayView extends DOMWidgetView {
         var stopIcon = document.createElement('i');
         stopIcon.className = 'fa fa-stop';
         this.stopButton.appendChild(stopIcon);
+        var repeatIcon = document.createElement('i');
+        repeatIcon.className = 'fa fa-retweet';
+        this.repeatButton.appendChild(repeatIcon);
 
         this.playButton.onclick = this.model.play.bind(this.model);
         this.pauseButton.onclick = this.model.pause.bind(this.model);
         this.stopButton.onclick = this.model.stop.bind(this.model);
+        this.repeatButton.onclick = this.model.repeat.bind(this.model);
 
         this.listenTo(this.model, 'change:_playing', this.update_playing);
+        this.listenTo(this.model, 'change:_repeat', this.update_repeat);
+        this.listenTo(this.model, 'change:show_repeat', this.update_repeat);
         this.update_playing();
+        this.update_repeat();
     }
 
     update_playing() {
@@ -816,8 +837,19 @@ class PlayView extends DOMWidgetView {
         }
     }
 
+    update_repeat() {
+        var repeat = this.model.get('_repeat');
+        this.repeatButton.style.display = this.model.get('show_repeat') ? this.playButton.style.display : 'none';
+        if (repeat) {
+            this.repeatButton.classList.add('mod-active');
+        } else {
+            this.repeatButton.classList.remove('mod-active');
+        }
+    }
+
     playButton: HTMLButtonElement;
     pauseButton: HTMLButtonElement;
     stopButton: HTMLButtonElement;
+    repeatButton: HTMLButtonElement;
     model: PlayModel;
 }