Skip to content

I
i20rzslider
Commit 53d7c6b3 authored by haxxxton's avatar haxxxton Committed by Valentin Hervieu
Browse files
Options

update to use latest ui.bootstrap components (#441)

parent fdb3580f
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 50 deletions
demo.js
View file @ 53d7c6b3
...@@ -24,7 +24,7 @@ app.directive('clickableLabel', function () { ...@@ -24,7 +24,7 @@ app.directive('clickableLabel', function () {
}; };
}); });
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) { app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $uibModal) {
//Minimal slider config //Minimal slider config
$scope.minSlider = { $scope.minSlider = {
value: 10 value: 10
...@@ -568,9 +568,9 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) { ...@@ -568,9 +568,9 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
} }
}; };
$scope.openModal = function () { $scope.openModal = function () {
var modalInstance = $modal.open({ var modalInstance = $uibModal.open({
templateUrl: 'sliderModal.html', templateUrl: 'sliderModal.html',
controller: function ($scope, $modalInstance, values) { controller: function ($scope, $uibModalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller. $scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
var formatToPercentage = function (value) { var formatToPercentage = function (value) {
...@@ -589,10 +589,10 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) { ...@@ -589,10 +589,10 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
translate: formatToPercentage translate: formatToPercentage
}; };
$scope.ok = function () { $scope.ok = function () {
$modalInstance.close($scope.percentages); $uibModalInstance.close($scope.percentages);
}; };
$scope.cancel = function () { $scope.cancel = function () {
$modalInstance.dismiss(); $uibModalInstance.dismiss();
}; };
}, },
resolve: { resolve: {
......
index.html
View file @ 53d7c6b3
...@@ -308,17 +308,17 @@ ...@@ -308,17 +308,17 @@
rz-slider-tpl-url="custom-template.html" rz-slider-tpl-url="custom-template.html"
></rzslider> ></rzslider>
<i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/> <i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/>
<tabset class="code"> <uib-tabset class="code">
<tab heading="HTML"> <uib-tab heading="HTML">
<div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div> <div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div>
</tab> </uib-tab>
<tab heading="JS"> <uib-tab heading="JS">
<div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div> <div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div>
</tab> </uib-tab>
<tab heading="your-custom-template.html"> <uib-tab heading="your-custom-template.html">
<div hljs hljs-include="'custom-template.html'" hljs-language="html"></div> <div hljs hljs-include="'custom-template.html'" hljs-language="html"></div>
</tab> </uib-tab>
</tabset> </uib-tabset>
</article> </article>
<article> <article>
...@@ -347,17 +347,17 @@ ...@@ -347,17 +347,17 @@
rz-slider-options="slider_custom_directive_inside_template.options" rz-slider-options="slider_custom_directive_inside_template.options"
rz-slider-tpl-url="directive-in-custom-template.html" rz-slider-tpl-url="directive-in-custom-template.html"
></rzslider> ></rzslider>
<tabset class="code"> <uib-tabset class="code">
<tab heading="HTML"> <uib-tab heading="HTML">
<div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div> <div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div>
</tab> </uib-tab>
<tab heading="JS"> <uib-tab heading="JS">
<div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div> <div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div>
</tab> </uib-tab>
<tab heading="directive-in-custom-template.html"> <uib-tab heading="directive-in-custom-template.html">
<div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div> <div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div>
</tab> </uib-tab>
</tabset> </uib-tabset>
</article> </article>
<article> <article>
...@@ -461,31 +461,31 @@ ...@@ -461,31 +461,31 @@
</br> </br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
<tabset class="code"> <uib-tabset class="code">
<tab heading="HTML"> <uib-tab heading="HTML">
<div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div> <div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
</tab> </uib-tab>
<tab heading="JS"> <uib-tab heading="JS">
<div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div> <div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
</tab> </tab>
<tab heading="sliderModal.html"> <uib-tab heading="sliderModal.html">
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div> <div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
</tab> </uib-tab>
</tabset> </uib-tabset>
</article> </article>
<article> <article>
<h2>Sliders inside tabs</h2> <h2>Sliders inside tabs</h2>
<p>Price 1: {{tabSliders.slider1.value}}</p> <p>Price 1: {{tabSliders.slider1.value}}</p>
<p>Price 2: {{tabSliders.slider2.value}}</p> <p>Price 2: {{tabSliders.slider2.value}}</p>
<tabset> <uib-tabset>
<tab heading="Slider 1" select="refreshSlider()"> <uib-tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider> <rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab> </uib-tab>
<tab heading="Slider 2" select="refreshSlider()"> <uib-tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider> <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab> </uib-tab>
</tabset> </uib-tabset>
<show-code js-file="tabSliders" html-file="tabSliders"></show-code> <show-code js-file="tabSliders" html-file="tabSliders"></show-code>
</article> </article>
......
show-code.html
View file @ 53d7c6b3
<tabset class="code"> <uib-tabset class="code">
<tab heading="JS"> <uib-tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div> <div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab> </uib-tab>
<tab heading="HTML"> <uib-tab heading="HTML">
<div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div> <div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div>
</tab> </uib-tab>
</tabset> </uib-tabset>
snippets/slider_modal.js
View file @ 53d7c6b3
...@@ -8,9 +8,9 @@ $scope.percentages = { ...@@ -8,9 +8,9 @@ $scope.percentages = {
} }
}; };
$scope.openModal = function () { $scope.openModal = function () {
var modalInstance = $modal.open({ var modalInstance = $uibModal.open({
templateUrl: 'slider_modal.html', templateUrl: 'slider_modal.html',
controller: function ($scope, $modalInstance, values) { controller: function ($scope, $uibModalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller. $scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
...@@ -30,10 +30,10 @@ $scope.openModal = function () { ...@@ -30,10 +30,10 @@ $scope.openModal = function () {
translate: formatToPercentage translate: formatToPercentage
}; };
$scope.ok = function () { $scope.ok = function () {
$modalInstance.close($scope.percentages); $uibModalInstance.close($scope.percentages);
}; };
$scope.cancel = function () { $scope.cancel = function () {
$modalInstance.dismiss(); $uibModalInstance.dismiss();
}; };
}, },
resolve: { resolve: {
......
snippets/tabSliders.html
View file @ 53d7c6b3
<tabset> <uib-tabset>
<tab heading="Slider 1" select="refreshSlider()"> <uib-tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider> <rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab> </uib-tab>
<tab heading="Slider 2" select="refreshSlider()"> <uib-tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider> <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab> </uib-tab>
</tabset> </uib-tabset>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment