Repository: seiyria/angular-bootstrap-slider
Branch: master
Commit: 4ea0e390ae95
Files: 10
Total size: 25.5 KB

Directory structure:
gitextract_63u_rypg/

├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── e2e-tests/
│   ├── protractor.conf.js
│   └── scenarios.js
├── package.json
├── slider.js
├── test.html
└── test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# bower #
#########
bower_components

# npm #
node_modules

# jetbrains #
#############
.idea
*.iml

.DS_STORE


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2014 Kyle Kemp

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
angular-bootstrap-slider
========================

This plugin was mostly put together quickly with the intent of using something that worked. It has zero test coverage. It is, however, registered on bower as `angular-bootstrap-slider`. Just include `slider.js` and use the package `ui.bootstrap-slider`. You will also need to include bootstrap-sliders CSS and JS.

Available Options
=================
See [bootstrap-slider](https://github.com/seiyria/bootstrap-slider) for examples and options.

Sample Usage
============
```html
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value"></slider>

<!-- ..or an attribute -->
<span slider ng-model="sliders.secondSliderValue" min="minTest"></span>
```

Troubleshooting
============
#### Tooltips
If you Want to hide the tooltip on your slider (or define a value for the bootstrap-slider `data-slider-tooltip` options, such as "show", "hide" or "always"), you should use the `tooltip` attribute, like this :
```html
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" tooltip="hide"></slider>
```
But, if the `tooltip` attribute is in conflict with another angular directive, you can use the alternative `slider-tooltip` attribute :
```html
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" slider-tooltip="hide"></slider>
```

#### Event Calbacks
```html
<!-- event callbacks receive the name of the event and the associated value with that event -->
<slider ng-model="sliders.sliderValue" on-stop-slide="myCallback($event,value)"></slider>
```


================================================
FILE: bower.json
================================================
{
  "name": "angular-bootstrap-slider",
  "version": "0.1.26",
  "authors": [
    "Kyle Kemp <kyle@seiyria.com>"
  ],
  "description": "An angular directive for seiyria-bootstrap-slider",
  "main": "slider.js",
  "keywords": [
    "angular",
    "slider",
    "bootstrap-slider",
    "bootstrap"
  ],
  "license": "MIT",
  "homepage": "http://seiyria.github.io/bootstrap-slider/",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "seiyria-bootstrap-slider": ">= 5.2 < 10.0",
    "angular": ">= 1.3 <=1.7"
  },
  "devDependencies": {
    "bootstrap": "~3.3.6"

  }
}


================================================
FILE: e2e-tests/protractor.conf.js
================================================
exports.config = {
	allScriptsTimeout: 11000,

	specs: [
		'*.js'
	],

	capabilities: {
		'browserName': 'chrome'
	},

	baseUrl: 'http://localhost:31337',

	framework: 'jasmine',

	jasmineNodeOpts: {
		defaultTimeoutInterval: 30000
	}
};

================================================
FILE: e2e-tests/scenarios.js
================================================
'use strict';

describe('angular-bootstrap-slider', function() {

	describe('tooltip', function() {
		var slider, handle, tooltip;

		beforeEach(function() {
			browser.get('/test.html');
			browser.waitForAngular();

			slider = element(by.css('[slider-id="tooltipSlider"]'));
			handle = slider.element(by.css('.slider-handle.min-slider-handle'))
			tooltip = slider.element(by.css('.tooltip.tooltip-main'));
		});

		it('should be visible on hover', function() {
			browser.actions().mouseMove(handle).perform();
			expect(tooltip.getAttribute('class')).toMatch('in');
		});

		it('should have filtered text', function() {
			browser.actions().mouseMove(handle).perform();
			expect(tooltip.getText()).toBe('Current value: 0%');
		});


		describe('should refresh filtered text', function() {
			var suffix, relayout;

			beforeEach(function() {
				suffix = element(by.model('suffix'));
				relayout = element(by.id('relayout-button'));
				suffix.clear();
			});

			it('on relayout event', function() {
				suffix.sendKeys('aaa');
				relayout.click();
				browser.actions().mouseMove(handle).perform();
				expect(tooltip.getText()).toBe('Current value: 0aaa');
			});

			it('on drag start', function() {
				suffix.sendKeys('bbb');
				handle.click();
				browser.actions().mouseMove(handle).perform();
				expect(tooltip.getText()).toBe('Current value: 0bbb');
			});
		});
	});

});

================================================
FILE: package.json
================================================
{
  "name": "angular-bootstrap-slider",
  "version": "0.1.29",
  "description": "An angular directive for seiyria-bootstrap-slider",
  "main": "slider.js",
  "devDependencies": {
    "http-server": "^0.11.1",
    "jasmine-core": "^2.3.4",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^0.2.1",
    "karma-jasmine": "^0.3.6",
    "protractor": "^5.4.1",
    "bootstrap-slider": "^10.3.2",
    "angular": ">= 1.3 <=1.7",
    "bootstrap": "~3.3.6",
    "jquery": "3.3.1"
  },
  "dependencies": {},
  "scripts": {
    "start": "http-server -a localhost -p 31337 -c-1",
    "test": "npm run protractor",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/seiyria/angular-bootstrap-slider.git"
  },
  "author": "Kyle Kemp <kyle@seiyria.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/seiyria/angular-bootstrap-slider/issues"
  },
  "homepage": "https://github.com/seiyria/angular-bootstrap-slider#readme"
}


================================================
FILE: slider.js
================================================
(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['bootstrap-slider', 'angular'], factory);
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('bootstrap-slider'), require('angular'));
    } else if (window) {
        factory(window.Slider);
    }
})(function (Slider) {

angular.module('ui.bootstrap-slider', [])
    .directive('slider', ['$parse', '$timeout', '$rootScope', function ($parse, $timeout, $rootScope) {
        return {
            restrict: 'AE',
            replace: true,
            template: '<div><input class="slider-input" type="text" style="width:100%" /></div>',
            require: 'ngModel',
            scope: {
                max: "=",
                min: "=",
                step: "=",
                value: "=",
                ngModel: '=',
                ngDisabled: '=',
                range: '=',
                sliderid: '=',
                ticks: '=',
                ticksLabels: '=',
                ticksSnapBounds: '=',
                ticksPositions: '=',
                ticksTooltip: "=",
                scale: '=',
                focus: '=',
                rangeHighlights: '=',
                formatter: '&',
                onStartSlide: '&',
                onStopSlide: '&',
                onSlide: '&'
            },
            link: function ($scope, element, attrs, ngModelCtrl, $compile) {
                var ngModelDeregisterFn, ngDisabledDeregisterFn;

                var slider = initSlider();

                function initSlider() {
                    var options = {};

                    function setOption(key, value, defaultValue) {
                        options[key] = value || defaultValue;
                    }

                    function setFloatOption(key, value, defaultValue) {
                        options[key] = value || value === 0 ? parseFloat(value) : defaultValue;
                    }

                    function setBooleanOption(key, value, defaultValue) {
                        options[key] = value ? value + '' === 'true' : defaultValue;
                    }

                    function getArrayOrValue(value) {
                        return (angular.isString(value) && value.indexOf("[") === 0) ? angular.fromJson(value) : value;
                    }

                    setOption('id', $scope.sliderid);
                    setOption('orientation', attrs.orientation, 'horizontal');
                    setOption('selection', attrs.selection, 'before');
                    setOption('handle', attrs.handle, 'round');
                    setOption('tooltip', attrs.sliderTooltip || attrs.tooltip, 'show');
                    setOption('tooltip_position', attrs.sliderTooltipPosition, 'top');
                    setOption('tooltipseparator', attrs.tooltipseparator, ':');
                    setOption('ticks', $scope.ticks);
                    setOption('ticks_labels', $scope.ticksLabels);
                    setOption('ticks_snap_bounds', $scope.ticksSnapBounds);
                    setOption('ticks_positions', $scope.ticksPositions);
                    setOption('ticks_tooltip', $scope.ticksTooltip, false);
                    setOption('rangeHighlights', $scope.rangeHighlights);
                    setOption('scale', $scope.scale, 'linear');
                    setOption('focus', $scope.focus);

                    setFloatOption('min', $scope.min, 0);
                    setFloatOption('max', $scope.max, 10);
                    setFloatOption('step', $scope.step, 1);
                    var strNbr = options.step + '';
                    var dotPos = strNbr.search(/[^.,]*$/);
                    var decimals = strNbr.substring(dotPos);
                    setFloatOption('precision', attrs.precision, decimals.length);

                    setBooleanOption('tooltip_split', attrs.tooltipsplit, false);
                    setBooleanOption('enabled', attrs.enabled, true);
                    setBooleanOption('naturalarrowkeys', attrs.naturalarrowkeys, false);
                    setBooleanOption('reversed', attrs.reversed, false);

                    setBooleanOption('range', $scope.range, false);
                    if (options.range) {
                        if (angular.isArray($scope.value)) {
                            options.value = $scope.value;
                        }
                        else if (angular.isString($scope.value)) {
                            options.value = getArrayOrValue($scope.value);
                            if (!angular.isArray(options.value)) {
                                var value = parseFloat($scope.value);
                                if (isNaN(value)) value = 5;

                                if (value < $scope.min) {
                                    value = $scope.min;
                                    options.value = [value, options.max];
                                }
                                else if (value > $scope.max) {
                                    value = $scope.max;
                                    options.value = [options.min, value];
                                }
                                else {
                                    options.value = [options.min, options.max];
                                }
                            }
                        }
                        else {
                            options.value = [options.min, options.max]; // This is needed, because of value defined at $.fn.slider.defaults - default value 5 prevents creating range slider
                        }
                        $scope.ngModel = options.value; // needed, otherwise turns value into [null, ##]
                    }
                    else {
                        setFloatOption('value', $scope.value, 5);
                    }

                    if (attrs.formatter) {
                        options.formatter = function(value) {
                            return $scope.formatter({value: value});
                        }
                    }

                    // destroy previous slider to reset all options
                    if (element[0].__slider)
                        element[0].__slider.destroy();

                    var slider = new Slider(element[0].getElementsByClassName('slider-input')[0], options);
                    element[0].__slider = slider;

                    // everything that needs slider element
                    var updateEvent = getArrayOrValue(attrs.updateevent);
                    if (angular.isString(updateEvent)) {
                        // if only single event name in string
                        updateEvent = [updateEvent];
                    }
                    else {
                        // default to slide event
                        updateEvent = ['slide'];
                    }
                    angular.forEach(updateEvent, function (sliderEvent) {
                        slider.on(sliderEvent, function (ev) {
                            ngModelCtrl.$setViewValue(ev);
                        });
                    });
                    slider.on('change', function (ev) {
                        ngModelCtrl.$setViewValue(ev.newValue);
                    });


                    // Event listeners
                    var sliderEvents = {
                        slideStart: 'onStartSlide',
                        slide: 'onSlide',
                        slideStop: 'onStopSlide'
                    };
                    angular.forEach(sliderEvents, function (sliderEventAttr, sliderEvent) {
                        var fn = $parse(attrs[sliderEventAttr]);
                        slider.on(sliderEvent, function (ev) {
                            if ($scope[sliderEventAttr]) {
                                $scope.$apply(function () {
                                    fn($scope.$parent, { $event: ev, value: ev });
                                });
                            }
                        });
                    });

                    // deregister ngDisabled watcher to prevent memory leaks
                    if (angular.isFunction(ngDisabledDeregisterFn)) {
                        ngDisabledDeregisterFn();
                        ngDisabledDeregisterFn = null;
                    }

                    ngDisabledDeregisterFn = $scope.$watch('ngDisabled', function (value) {
                        if (value) {
                            slider.disable();
                        }
                        else {
                            slider.enable();
                        }
                    });

                    // deregister ngModel watcher to prevent memory leaks
                    if (angular.isFunction(ngModelDeregisterFn)) ngModelDeregisterFn();
                    ngModelDeregisterFn = $scope.$watch('ngModel', function (value) {
                        if($scope.range){
                            slider.setValue(value);
                        }else{
                            slider.setValue(parseFloat(value));
                        }
                        slider.relayout();
                    }, true);

                    return slider;
                }


                var watchers = ['min', 'max', 'step', 'range', 'scale', 'ticksLabels', 'ticks', 'rangeHighlights'];
                angular.forEach(watchers, function (prop) {
                    $scope.$watch(prop, function () {
                        slider = initSlider();
                    });
                });

                var globalEvents = ['relayout', 'refresh', 'resize'];
                angular.forEach(globalEvents, function(event) {
                    if(angular.isFunction(slider[event])) {
                        $scope.$on('slider:' + event, function () {
                            slider[event]();
                        });
                    }
                });
            }
        };
    }]);
});

================================================
FILE: test.html
================================================
<html ng-app='angular-bootstrap-slider-test'>
<head>
    <title>Angular Bootstrap Slider test</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
</head>
<body ng-controller="TestCtrl">

<div class="col-md-2 col-md-offset-2">

    <p>

        <label for="sliderId">Slider Id:</label>
        <input id="sliderId" type="text" ng-model="testOptions.sliderId">

        <label for="modelValue">Slider Value in ng-model:</label>
        <input id="modelValue" type="range" ng-model="model.first" min="{{testOptions.min}}" step="{{testOptions.step}}"
               max="{{testOptions.max}}">
        <input ng-model="model.first" class="form-control">

        <label for="value">Value:</label>
        <input id="value" type="number" ng-model="value.first" class="form-control">

        <label for="min">Min:</label>
        <input id="min" type="number" ng-model="testOptions.min" class="form-control">

        <label for="max">Max:</label>
        <input id="max" type="number" ng-model="testOptions.max" class="form-control">

        <label for="step">Step:</label>
        <input id="step" type="number" ng-model="testOptions.step" class="form-control">

        <label for="range">Range:</label>
        <input id="range" type="checkbox" ng-model="testOptions.range" class="form-control">

        <label for="precision">Precision:</label>
        <input id="precision" type="number" ng-model="testOptions.precision" class="form-control">

        <label for="reversed">Reversed:</label>
        <input id="reversed" type="checkbox" ng-model="testOptions.reversed" class="form-control">

        <label for="orientation">Orientation:</label>
        <select id="orientation" ng-model="testOptions.orientation" class="form-control">
            <option value="horizontal">Horizontal</option>
            <option value="vertical">Vertical</option>
        </select>

        <label for="handle">Handle:</label>
        <select id="handle" ng-model="testOptions.handle" class="form-control">
            <option value="round">Round</option>
            <option value="square">Square</option>
            <option value="triangle">Triangle</option>
            <option value="custom">Custom</option>
        </select>

        <label for="enabled">Enabled:</label>
        <input id="enabled" type="checkbox" ng-model="testOptions.enabled" class="form-control">

        <label for="ngDisabled">ngDisabled:</label>
        <input id="ngDisabled" type="checkbox" ng-model="testOptions.ngDisabled" class="form-control">

        <label for="naturalarrowkeys">Natural arrow keys:</label>
        <input id="naturalarrowkeys" type="checkbox" ng-model="testOptions.naturalarrowkeys" class="form-control">
    </p>

    Slider using tags<br>
    <slider slider-id="testOptions.sliderId"
            ng-model="model.first"
            value="value.first"
            min="testOptions.min"
            max="testOptions.max"
            step="testOptions.step"
            range="testOptions.range"
            precision="{{ testOptions.precision }}"
            reversed="{{ testOptions.reversed }}"
            orientation="{{ testOptions.orientation }}"
            handle="{{ testOptions.handle }}"
            enabled="{{ testOptions.enabled }}"
            ng-disabled="testOptions.ngDisabled"
            naturalarrowkeys="{{ testOptions.naturalarrowkeys }}"
            >
        If you can see this then slider did not get compiled by Angular.
        Check that all necessary files are included, did you run "bower install"?
    </slider>

    <br><br>

    <p>
        <label for="tooltipseparator">Tooltip separator:</label>
        <input id="tooltipseparator" type="text" ng-model="testOptions.tooltipseparator" class="form-control">

        <label for="tooltipsplit">Tooltip split:</label>
        <input id="tooltipsplit" type="checkbox" ng-model="testOptions.tooltipsplit" class="form-control">
    </p>

    Range slider<br>
	<span slider
          slider-id="rangeSlider"
          ng-model="model.second"
          value="value.second"
          min="testOptions.min"
          max="testOptions.max"
          range="range"
          tooltipseparator="{{ testOptions.tooltipseparator }}"
          tooltipsplit="{{ testOptions.tooltipsplit }}">
	</span>
    Model: {{model.second | json}}<br>
    Value: {{value.second | json}}<br>

    <br><br>

    <p>
        <label for="tooltip">Tooltip:</label>
        <select id="tooltip" ng-model="testOptions.tooltip" class="form-control">
            <option value="show">Show</option>
            <option value="hide">Hide</option>
            <option value="always">Always</option>
        </select>

        <label for="formatter_prefix">Formatter prefix:</label>
        <input id="formatter_prefix" type="text" ng-model="prefix" class="form-control">

        <label for="formatter_sufffix">Formatter suffix:</label>
        <input id="formatter_sufffix" type="text" ng-model="suffix" class="form-control">
        <button id="relayout-button" ng-click="$broadcast('slider:relayout')">Relayout</button>
    </p>

    Slider with configurable tooltip<br>
    <slider slider-id="tooltipSlider"
            ng-model="model.third"
            precision="{{ testOptions.precision }}"
            tooltip="{{ testOptions.tooltip }}"
            formatter="formatterFn(value)"
            >
    </slider>
    Model: {{model.third}}<br>

    <br><br>

    Slider using event expressions
    <slider ng-model="model.fourth"
            on-start-slide="status='started'"
            on-slide="status=$event.type"
            on-stop-slide="status='stopped'"
            >
    </slider>
    Model: {{model.fourth}}<br>
    Status: {{status}}<br>

    <br><br>

    Slider using event callbacks
	<span slider
          ng-model="model.fifth"
          on-start-slide="slideDelegate(value, $event)"
          on-slide="slideDelegate(value, $event)"
          on-stop-slide="slideDelegate(value, $event)"
            >
	</span>
    Model: {{model.fifth}}<br>
    Event type: {{delegateEvent.type}}<br>

    <br><br>

    Slider using mixed expressions and callbacks
	<span slider
          ng-model="model.sixth"
          on-start-slide="status2='started'"
          on-slide="slideDelegate(value)"
          on-stop-slide="status2=$event.type; slideDelegate(value, $event)"
            >
	</span>
    Model: {{model.sixth}}<br>
    Status: {{status2}}<br>
    Event type: {{delegateEvent.type}}<br>

    <br><br>

    Updates model on slide event by default
    <slider ng-model="model.seventh"></slider>
    Model: {{model.seventh}}<br>

    <br><br>

    Updates model only on slideStop event
    <slider ng-model="model.eighth" updateevent="slideStop"></slider>
    Model: {{model.eighth}}<br>

    <br><br>

    Updates model on slideStart and slideStop
    <span slider ng-model="model.ninth" updateevent='["slideStart","slideStop"]'></span>
    Model: {{model.ninth}}<br>

    <br><br>

    Updates model on all events
    <span slider ng-model="model.tenth"
          updateevent="[&quot;slideStop&quot;, &quot;slide&quot;, &quot;slideStart&quot;]"></span>
    Model: {{model.tenth}}
</div>


<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>

<!-- angular-slider include -->
<script src="slider.js"></script>

<!-- test file include -->
<script src="test.js"></script>
</body>
</html>


================================================
FILE: test.js
================================================
angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider'])
    .controller('TestCtrl', ['$scope', '$log', function ($scope, $log) {

        $scope.testOptions = {
            min: 5,
            max: 100,
            step: 5,
            precision: 2,
            orientation: 'horizontal',  // vertical
            handle: 'round', //'square', 'triangle' or 'custom'
            tooltip: 'show', //'hide','always'
            tooltipseparator: ':',
            tooltipsplit: false,
            enabled: true,
            naturalarrowkeys: false,
            range: false,
            ngDisabled: false,
            reversed: false
        };

        $scope.range = true;

        $scope.model = {
            first: 0,
            second: [],
            third: 0,
            fourth: 0,
            fifth: 0,
            sixth: 0,
            seventh: 0,
            eighth: 0,
            ninth: 0,
            tenth: 0
        };

        $scope.value = {
            first: $scope.testOptions.min + $scope.testOptions.step,
            second: [$scope.testOptions.min + $scope.testOptions.step, $scope.testOptions.max - $scope.testOptions.step],
            third: 0,
            fourth: 0,
            fifth: 0,
            sixth: 0,
            seventh: 0,
            eighth: 0,
            ninth: 0,
            tenth: 0
        };

        $scope.prefix = 'Current value: ';
        $scope.suffix = '%';

        $scope.formatterFn = function (value) {
            return $scope.prefix + value + $scope.suffix;
        };

        $scope.delegateEvent = null;
        $scope.slideDelegate = function (value, event) {
            if (angular.isObject(event)) {
                $log.log('Slide delegate value on ' + event.type + ': ' + value);
            }
            else {
                $log.log('Slide delegate value: ' + event);
            }
            $scope.delegateEvent = event;
        };
    }]
);