From e5e376500626fb42bac1e35541edee62256013db Mon Sep 17 00:00:00 2001 From: Pierrick Prudhomme Date: Wed, 19 Dec 2018 08:23:05 +0100 Subject: [PATCH] feat(slider): update documentation --- server/documents/introduction/new.html.eco | 2 +- server/documents/modules/range.html.eco | 187 ------------ server/documents/modules/slider.html.eco | 313 +++++++++++++++++++++ server/files/javascript/docs.js | 2 +- server/files/javascript/new.js | 4 +- server/files/javascript/range.js | 41 --- server/files/javascript/slider.js | 82 +++++- server/layouts/basic.html.eco | 3 +- server/partials/ui-css.html.eco | 2 +- server/partials/ui-javascript.html.eco | 2 +- 10 files changed, 390 insertions(+), 248 deletions(-) delete mode 100644 server/documents/modules/range.html.eco create mode 100644 server/documents/modules/slider.html.eco delete mode 100644 server/files/javascript/range.js diff --git a/server/documents/introduction/new.html.eco b/server/documents/introduction/new.html.eco index 24c33cbaf..30354860b 100644 --- a/server/documents/introduction/new.html.eco +++ b/server/documents/introduction/new.html.eco @@ -204,7 +204,7 @@ type : 'Main'

- +
diff --git a/server/documents/modules/range.html.eco b/server/documents/modules/range.html.eco deleted file mode 100644 index 6adc0c5c6..000000000 --- a/server/documents/modules/range.html.eco +++ /dev/null @@ -1,187 +0,0 @@ ---- -layout : 'default' -css : 'range' -element : 'range' -elementType : 'module' -standalone : true - -title : 'Range' -description : 'A range slider allows users to select values within a range' -type : 'UI Module' -status : 'BETA' -statusColor : 'orange' - -themes : ['Default'] ---- - - - -<%- @partial('header', { tabs: 'module' }) %> - -
- -
- -

Types

-
-

Range

-

A standard range slider

-

-
- -
-
- $('.ui.range') - .range() - ; -
-
- -

Variations

-
-

Disabled

-

A range slider can appear disabled

-
-
- -
-

Inverted

-

A range slider can be inverted

-
-
-
-
- -
-

Colored

-

A range slider can be different colors

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Inverted Colored

-

A range slider can be different colors while inverted

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
- -

Examples

- -
-

Step

-

A range can have a custom step

-
-
-
- -
-
- -
-
- -

Initializing

- -
-

Initializing a range slider

-

Range is initialized on pre-existing markup

-
- $('.ui.range') - .range() - ; -
-
- -
- -
-

- Calendar -

- -

- Behavior -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
min0The lowest value the slider can be
maxfalseThe max value the slider can be
step1The slider step
start0The value the slider will start at
inputfalsejQuery selector for the input to set the slider value of
- -

- Callbacks -

- - - - - - - - - - - - - -
CallbackContextDescription
onChangeactive contentIs called when the slider value is changed
-
-
diff --git a/server/documents/modules/slider.html.eco b/server/documents/modules/slider.html.eco new file mode 100644 index 000000000..b78ecfcda --- /dev/null +++ b/server/documents/modules/slider.html.eco @@ -0,0 +1,313 @@ +--- +layout : 'default' +css : 'slider' +element : 'slider' +elementType : 'module' +standalone : true + +title : 'Slider' +description : 'A range slider allows users to select values within a range' +type : 'UI Module' +status : 'BETA' +statusColor : 'orange' + +themes : ['Default'] +--- + + + +<%- @partial('header', { tabs: 'module' }) %> + +
+ +
+ +

Types

+
+

Slider

+

A standard slider

+

+
+ +
+
+ $('.ui.slider') + .slider() + ; +
+
+
+

Labeled slider

+

A slider that show its labels

+
+
+
+

Labeled ticked slider

+

A slider that show its labels and ticks

+
+
+ +
+

Range slider

+

A range slider which allow you to select a range between two values

+

+
+ +
+
+
+ $('.ui.range.slider') + .slider({ + min: 5, + max: 100, + start: 10, + end: 90, + step: 5 + }) + ; +
+ +

Variations

+
+

Disabled

+

A slider can appear disabled

+
+
+ +
+

Inverted

+

A slider can be inverted

+
+
+
+
+ +
+

Reversed

+

A slider can be reversed

+
+
+ +
+

Vertical

+

A slider can be vertical

+
+
+ +
+

Colored

+

A slider can be different colors

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Inverted Colored

+

A slider can be different colors while inverted

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Size

+

A slider can have different sizes

+
+
+
+
+
+ +
+ +
+ +

Examples

+ +
+

Step

+

A slider can have a custom step...

+
+
+
+ +
+
+ $('.ui.slider') + .slider({ + min: 0, + max: 10, + start: 4, + step: 2 + }) + ; +
+
+
+

...or no step at all

+
+
+
+ +
+
+ $('.ui.slider') + .slider({ + min: 0, + max: 10, + start: 3.82, + step: 0 + }) + ; +
+
+ +
+

Smooth slide

+

A slider can have a smooth slide

+
+
+ $('.ui.slider') + .slider({ + min: 0, + max: 10, + start: 4, + step: 2 + smooth: true + }) + ; +
+
+ +
+
+ +

Initializing

+ +
+

Initializing a slider

+

Slider is initialized on pre-existing markup

+
+ $('.ui.slider') + .slider() + ; +
+
+ +
+ +
+

+ Calendar +

+ +

+ Behavior +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
min0The lowest value the slider can be
max20The max value the slider can be
step1The slider step. Set to 0 to disable step
start0The value the slider will start at
end20The second value to set in case of a range slider
labelTypenumberThe type of label to display for a labeled slider. Can be number or letter
showLabelTicksfalseShow ticks on a labeled slider
smoothfalseDefine smoothness when the slider is moving
decimalPlaces2Number of decimals to use with an unstepped slider
pageMultiplier2Page up/down multiplier. Define how many more times the steps to take on page up/down press
+ +

+ Callbacks +

+ + + + + + + + + + + + + + + + + + +
CallbackContextDescription
onChangeactive contentIs called when the slider value is changed
onMoveactive contentIs called when the slider is moving
+
+
diff --git a/server/files/javascript/docs.js b/server/files/javascript/docs.js index fbbb6999e..37d688e24 100644 --- a/server/files/javascript/docs.js +++ b/server/files/javascript/docs.js @@ -71,7 +71,7 @@ semantic.ready = function() { $example = $('.example'), $popupExample = $example.not('.no'), $shownExample = $example.filter('.shown'), - $prerenderedExample = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.progress, .ui.rating, .ui.dimmer, .ui.embed, .ui.calendar, .ui.range, .ui.placeholder'), + $prerenderedExample = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.progress, .ui.rating, .ui.dimmer, .ui.embed, .ui.calendar, .ui.slider, .ui.placeholder'), $visibilityExample = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'), diff --git a/server/files/javascript/new.js b/server/files/javascript/new.js index 6623c5b07..4d3cd0733 100644 --- a/server/files/javascript/new.js +++ b/server/files/javascript/new.js @@ -393,11 +393,11 @@ semantic.new.ready = function() { // 2.5 $('.ui.calendar').calendar(); - $('.ui.range').range({ + $('.ui.slider').slider({ min: 0, max: 10, start: 5, - input: '#range-input-25' + input: '#slider-input-25' }); }; diff --git a/server/files/javascript/range.js b/server/files/javascript/range.js deleted file mode 100644 index 2f0bec4f0..000000000 --- a/server/files/javascript/range.js +++ /dev/null @@ -1,41 +0,0 @@ -semantic.range = {}; - -// ready event -semantic.range.ready = function() { - // selector cache - var - $range = $('.ui.range') - ; - $range - .range({ - min: 0, - max: 10, - start: 5 - }) - ; - - $('#range-1') - .range({ - min: 0, - max: 10, - start: 5, - input: '#range-input-1' - }) - ; - - $('#range-3') - .range({ - min: 0, - max: 10, - start: 4, - step: 2, - input: '#range-input-3' - }) - ; -}; - - -// attach ready event -$(document) - .ready(semantic.range.ready) -; \ No newline at end of file diff --git a/server/files/javascript/slider.js b/server/files/javascript/slider.js index 2c698c253..c0dc47d3f 100644 --- a/server/files/javascript/slider.js +++ b/server/files/javascript/slider.js @@ -1,29 +1,85 @@ -semantic.dropdown = {}; +semantic.slider = {}; // ready event -semantic.dropdown.ready = function() { - +semantic.slider.ready = function() { // selector cache var - $slider = $('.example').find('.ui.slider'), - // alias - handler + $slider = $('.ui.slider') + ; + $slider + .slider({ + min: 0, + max: 10, + start: 5 + }) + ; + + $('#slider-1') + .slider({ + min: 0, + max: 10, + start: 5, + onChange: function(value) { + $('#slider-input-1').val(value) + } + }) ; - // event handlers - handler = { - - }; + $('#slider-range') + .slider({ + min: 5, + max: 100, + start: 10, + end: 90, + step: 5, + debug: true, + verbose: true, + onChange: function(range, firstVal, secondVal) { + if (firstVal > secondVal) { + $('#range-slider-input-1').val('|' + firstVal + " - " + secondVal + '| = ' + range); + } else { + $('#range-slider-input-1').val('|' + secondVal + " - " + firstVal + '| = ' + range); + } + } + }) + ; - $slider - .slider() + $('#slider-custom-step') + .slider({ + min: 0, + max: 10, + start: 4, + step: 2, + onChange: function(value) { + $('#slider-input-3').val(value) + } + }) ; + $('#slider-unstepped') + .slider({ + min: 0, + max: 10, + start: 3.82, + step: 0, + onChange: function(value) { + $('#slider-input-unstepped').val(value) + } + }) + ; + $('#slider-smooth') + .slider({ + min: 0, + max: 10, + start: 4, + smooth: true + }) + ; }; // attach ready event $(document) - .ready(semantic.dropdown.ready) + .ready(semantic.slider.ready) ; \ No newline at end of file diff --git a/server/layouts/basic.html.eco b/server/layouts/basic.html.eco index 31f4d7565..7af90862a 100755 --- a/server/layouts/basic.html.eco +++ b/server/layouts/basic.html.eco @@ -66,7 +66,7 @@ - + <% else: %> @@ -125,6 +125,7 @@ + diff --git a/server/partials/ui-css.html.eco b/server/partials/ui-css.html.eco index 79030d7ae..a4ba7753b 100644 --- a/server/partials/ui-css.html.eco +++ b/server/partials/ui-css.html.eco @@ -51,7 +51,7 @@ - + <% else: %> diff --git a/server/partials/ui-javascript.html.eco b/server/partials/ui-javascript.html.eco index 263346512..82e61bc45 100755 --- a/server/partials/ui-javascript.html.eco +++ b/server/partials/ui-javascript.html.eco @@ -13,11 +13,11 @@ - +