# HG changeset patch # User ymh # Date 1482253932 -3600 # Node ID 814468b0fc698149ee8a319ba8a5b318709ed935 # Parent e7df0b5b09b65974bfdb3010a46a5ab8816685f7 use rangeslider.js polyfill to ensure cross browser compatibility diff -r e7df0b5b09b6 -r 814468b0fc69 cms/app-client/app/components/player-sound-control.js --- a/cms/app-client/app/components/player-sound-control.js Tue Dec 20 01:50:35 2016 +0100 +++ b/cms/app-client/app/components/player-sound-control.js Tue Dec 20 18:12:12 2016 +0100 @@ -53,6 +53,23 @@ }), + mutedObserver: Ember.observer('muted', function() { + const rangeslider = this.$("#sound-control-range-slider"); + if(!rangeslider) { + return; + } + rangeslider.rangeslider('update', true); + }), + + volumeObserver: Ember.observer('volume', function() { + const rangeslider = this.$("#sound-control-range-slider"); + const volume = this.get('volume'); + if(!rangeslider) { + return; + } + rangeslider.val(volume).change(); + }), + popcornObserver: Ember.observer('popcorn', function() { let popcorn = this.get('popcorn'); if(!popcorn) { @@ -85,18 +102,31 @@ }, didInsertElement: function() { - this.set('volumeSliderHandler', this.$(".volume-slider").on("input change", (event) => { this.set('volume',Ember.$(event.target).val()); })); + const volume = this.get('volume'); + let rangeslider = this.$('#sound-control-range-slider'); + rangeslider.rangeslider({ + polyfill: false, + onSlide: (pos, value) => { + this.set('volume', value); + }, + onSlideEnd: (pos, value) => { + this.set('volume', value); + }, + onInit: function() { + Ember.$(this).value = volume; + } + }); }, willDestroyElement: function() { - let volumeSliderHandler = this.get('volumeSliderHandler'); - if(volumeSliderHandler) { - this.$(".volume-slider").off({"input change": volumeSliderHandler}); - } + this.$('#sound-control-range-slider').rangeslider('destroy'); }, actions: { muteToggle() { + if(!this.get('volume')) { + return; + } this.set('muted', !this.get('muted')); }, clickMinus() { diff -r e7df0b5b09b6 -r 814468b0fc69 cms/app-client/app/styles/components/player-sound-control.scss --- a/cms/app-client/app/styles/components/player-sound-control.scss Tue Dec 20 01:50:35 2016 +0100 +++ b/cms/app-client/app/styles/components/player-sound-control.scss Tue Dec 20 18:12:12 2016 +0100 @@ -64,103 +64,40 @@ pointer-events: none; } - // taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html - // http://danielstern.ca/range.css/#/ #sound-control-range-wrapper { - width: 50px; - transform: rotate(270deg) translate(-10px, -12px); - -webkit-transform: rotate(270deg) translate(-15px, -19px); - -moz-transform: rotate(270deg) translate(-15px, -12px); - -ms-transform: rotate(270deg) translate(2px, -8px); - transform-origin: 50% 50%; + height: 50px; + margin-left: 8px; + } + + + .rangeslider--vertical { + width: 5px; + height: 50px; + min-height: 50px; + max-height: 100%; } - input[type=range] { - -webkit-appearance: none; - width: 100%; - margin: 3px 3px; - } - input[type=range]:focus { - outline: none; - } - input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 5px; - cursor: pointer; - box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); - background: rgba(48, 113, 169, 0.78); - border-radius: 1.3px; - border: 0.2px solid #010101; - } - input[type=range]::-webkit-slider-thumb { - box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b; - border: 1px solid #00001e; + .rangeslider__handle { + width: 11px; height: 11px; - width: 11px; - border-radius: 11px; - background: #ffffff; - cursor: pointer; - -webkit-appearance: none; - margin-top: -3.5px; - //margin-top: -2px; - } - input[type=range]:focus::-webkit-slider-runnable-track { - background: rgba(106, 163, 213, 0.78); - } - input[type=range]::-moz-range-track { - width: 100%; - height: 5px; - cursor: pointer; - box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); - background: rgba(48, 113, 169, 0.78); - border-radius: 1.3px; - border: 0.2px solid #010101; } - input[type=range]::-moz-range-thumb { - box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b; - border: 1px solid #00001e; - height: 11px; - width: 11px; - border-radius: 11px; - background: #ffffff; - cursor: pointer; - } - input[type=range]::-ms-track { - width: 100%; + + .rangeslider__handle:after { + width: 5px; height: 5px; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; - } - input[type=range]::-ms-fill-lower { - background: rgba(25, 60, 90, 0.78); - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); - } - input[type=range]::-ms-fill-upper { - background: rgba(48, 113, 169, 0.78); - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); - } - input[type=range]::-ms-thumb { - box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b; - border: 1px solid #00001e; - height: 11px; - width: 11px; - border-radius: 11px; - background: #ffffff; - cursor: pointer; - } - input[type=range]:focus::-ms-fill-lower { - background: rgba(48, 113, 169, 0.78); - } - input[type=range]:focus::-ms-fill-upper { - background: rgba(106, 163, 213, 0.78); } + .rangeslider--vertical .rangeslider__handle { + left: -4px + } + + .rangeslider__fill { + background: $corpus-blue; + } + + .rangeslider--disabled { + pointer-events: none; + } #sound-control-scale-minus { position: absolute; diff -r e7df0b5b09b6 -r 814468b0fc69 cms/app-client/app/templates/components/player-sound-control.hbs --- a/cms/app-client/app/templates/components/player-sound-control.hbs Tue Dec 20 01:50:35 2016 +0100 +++ b/cms/app-client/app/templates/components/player-sound-control.hbs Tue Dec 20 18:12:12 2016 +0100 @@ -1,17 +1,17 @@ -{{!----}} - +
+
-
- {{input +
+
-
diff -r e7df0b5b09b6 -r 814468b0fc69 cms/app-client/bower.json --- a/cms/app-client/bower.json Tue Dec 20 01:50:35 2016 +0100 +++ b/cms/app-client/bower.json Tue Dec 20 18:12:12 2016 +0100 @@ -17,6 +17,7 @@ "urijs": "^1.18.2", "leaflet": "^1.0.0", "social-share-kit": "^1.0.13", - "interval-tree2": "IRI-Research/interval-tree2" + "interval-tree2": "IRI-Research/interval-tree2", + "rangeslider.js": "^2.3.0" } } diff -r e7df0b5b09b6 -r 814468b0fc69 cms/app-client/ember-cli-build.js --- a/cms/app-client/ember-cli-build.js Tue Dec 20 01:50:35 2016 +0100 +++ b/cms/app-client/ember-cli-build.js Tue Dec 20 18:12:12 2016 +0100 @@ -49,6 +49,12 @@ production: 'bower_components/urijs/src/URI.min.js' }); app.import('bower_components/interval-tree2/dist/interval-tree.js'); + app.import({ + development: 'bower_components/rangeslider.js/dist/rangeslider.js', + production: 'bower_components/rangeslider.js/dist/rangeslider.min.js' + }); + app.import('bower_components/rangeslider.js/dist/rangeslider.css'); + //shims app.import('vendor/shims/ammaps.js', {