Merge pull request #199 from dineshsonachalam/markdown-autodocs

Markdown autodocs

.github/workflows/markdown-autodocs.yml

@@ -0,0 +1,14 @@
+name: markdown-autodocs
+
+on:
+  push:
+    branches:    
+      - '**'        # matches every branch
+
+jobs:        
+  auto-update-readme:
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v2
+        - name: Markdown autodocs
+          uses: dineshsonachalam/markdown-autodocs@v1.0.2

examples/readme/availableOptions.json

@@ -0,0 +1,95 @@
+[{
+    "Option": "<code>width</code>",
+    "Purpose": "Total width of the control UI.",
+    "Default Value": "<code>300</code>"
+},
+{
+    "Option": "<code>color</code>",
+    "Purpose": "The initial color value. This can be any [supported color format](https://iro.js.org/color_api.html#supported-color-formats).",
+    "Default Value": "<code>#ffffff</code>"
+},
+{
+    "Option": "<code>colors</code>",
+    "Purpose": "Initial color values used for [multi-color selections](https://iro.js.org/advanced.html#multi-color-selections).",
+    "Default Value": "null"
+},
+{
+    "Option": "<code>display</code>",
+    "Purpose": "CSS display value for the color picker root element.",
+    "Default Value": "<code>block</code>"
+},
+{
+    "Option": "<code>id</code>",
+    "Purpose": "HTML ID for the color picker root element.",
+    "Default Value": "<code>null</code>"
+},
+{
+    "Option": "<code>layout</code>",
+    "Purpose": "Used for customising the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts).",
+    "Default Value": "<code>null</code>"
+},
+{
+    "Option": "<code>layoutDirection</code>",
+    "Purpose": "UI component stacking direction; either <code>vertical</code> or <code>horizontal</code>.",
+    "Default Value": "<code>vertical</code>"
+},
+{
+    "Option": "<code>padding</code>",
+    "Purpose": "Padding around the control handles.",
+    "Default Value": "<code>6</code>"
+},
+{
+    "Option": "<code>margin</code>",
+    "Purpose": "Gap between individual components.",
+    "Default Value": "<code>12</code>"
+},
+{
+    "Option": "<code>borderWidth</code>",
+    "Purpose": "Width of the border around the controls. Set to <code>0</code> for no border.",
+    "Default Value": "<code>0</code>"
+},
+{
+    "Option": "<code>borderColor</code>",
+    "Purpose": "Color of the border. Any valid CSS color is supported.",
+    "Default Value": "<code>#ffffff</code>"
+},
+{
+    "Option": "<code>handleRadius</code>",
+    "Purpose": "Radius of the control handles.",
+    "Default Value": "<code>8</code>"
+},
+{
+    "Option": "<code>handleSvg</code>",
+    "Purpose": "Custom handle SVG, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).",
+    "Default Value": "<code>null</code>"
+},
+{
+    "Option": "<code>handleProps</code>",
+    "Purpose": "Custom handle properties, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).",
+    "Default Value": "<code>{x:0, y:0}</code>"
+},
+{
+    "Option": "<code>wheelLightness</code>",
+    "Purpose": "If set to <code>false</code>, the color wheel will not fade to black when the lightness decreases.",
+    "Default Value": "<code>true</code>"
+},
+{
+    "Option": "<code>wheelAngle</code>",
+    "Purpose": "Starting angle of the color wheel's hue gradient, measured in degrees.",
+    "Default Value": "<code>0</code>"
+},
+{
+    "Option": "<code>wheelDirection</code>",
+    "Purpose": "Direction of the color wheel's hue gradient; either <code>clockwise</code> or <code>anticlockwise</code>.",
+    "Default Value": "<code>anticlockwise</code>"
+},
+{
+    "Option": "<code>sliderSize</code>",
+    "Purpose": "Slider control size. By default this will be calculated automatically.",
+    "Default Value": "<code>undefined</code>"
+},
+{
+    "Option": "<code>boxHeight</code>",
+    "Purpose": "Box control height. By default this will be the same as the <code>width</code>.",
+    "Default Value": "<code>undefined</code>"
+}]

examples/readme/colorChange.js

@@ -0,0 +1,6 @@
+colorPicker.on('color:change', function(color) {
+    // don't let the color saturation fall below 50!
+    if (color.saturation < 50) {
+      color.saturation = 50;
+    }
+});

examples/readme/colorPickerEventsExample1.js

@@ -0,0 +1,6 @@
+// listen to a color picker's color:change event
+// color:change callbacks receive the current color
+colorPicker.on('color:change', function(color) {
+    // log the current color as a HEX string
+    console.log(color.hexString);
+});

examples/readme/colorPickerEventsExample2.js

@@ -0,0 +1,5 @@
+// listen to a color picker's color:init and color:change events
+colorPicker.on(['color:init', 'color:change'], function(color) {
+    // log the current color as a HEX string
+    console.log(color.hexString);
+});

examples/readme/colorPickerEventsExample3.js

@@ -0,0 +1,10 @@
+// create a callback function
+function onColorChange(color) {
+    console.log(color.hexString);
+}
+
+// add color:change listener
+colorPicker.on('color:change', onColorChange);
+
+// later, if we want to stop listening to color:change...
+colorPicker.off('color:change', onColorChange);

examples/readme/colorPickerOptions.js

@@ -0,0 +1,6 @@
+var colorPicker = new iro.ColorPicker("#picker", {
+    // Set the size of the color picker
+    width: 320,
+    // Set the initial color to pure red
+    color: "#f00"
+});

examples/readme/colorProperties.json

@@ -0,0 +1,80 @@
+[{
+    "Property": "<code>hexString</code>",
+    "Example Format": "<code>#ff0000</code>"
+},
+{
+    "Property": "<code>hex8String</code>",
+    "Example Format": "<code>#ff0000ff</code>"
+},
+{
+    "Property": "<code>rgb</code>",
+    "Example Format": "<code>{ r: 255, g: 0, b: 0 }</code>"
+},
+{
+    "Property": "<code>rgba</code>",
+    "Example Format": "<code>{ r: 255, g: 0, b: 0, a: 1 }</code>"
+},
+{
+    "Property": "<code>rgbString</code>",
+    "Example Format": "<code>rgb(255, 0, 0)</code>"
+},
+{
+    "Property": "<code>rgbaString</code>",
+    "Example Format": "<code>rgb(255, 0, 0, 1)</code>"
+},
+{
+    "Property": "<code>hsl</code>",
+    "Example Format": "<code>{ h: 360, s: 100, l: 50 }</code>"
+},
+{
+    "Property": "<code>hsla</code>",
+    "Example Format": "<code>{ h: 360, s: 100, l: 50, a: 1 }</code>"
+},
+{
+    "Property": "<code>hslString</code>",
+    "Example Format": "<code>hsl(360, 100%, 50%)</code>"
+},
+{
+    "Property": "<code>hslaString</code>",
+    "Example Format": "<code>hsla(360, 100%, 50%, 1)</code>"
+},
+{
+    "Property": "<code>hsv</code>",
+    "Example Format": "<code>{ h: 360, s: 100, v: 100 }</code>"
+},
+{
+    "Property": "<code>hsva</code>",
+    "Example Format": "<code>{ h: 360, s: 100, v: 100, a: 1 }</code>"
+},
+{
+    "Property": "<code>red</code>",
+    "Example Format": "<code>0</code> to <code>255</code>"
+},
+{
+    "Property": "<code>green</code>",
+    "Example Format": "<code>0</code> to <code>255</code>"
+},
+{
+    "Property": "<code>blue</code>",
+    "Example Format": "<code>0</code> to <code>255</code>"
+},
+{
+    "Property": "<code>alpha</code>",
+    "Example Format": "<code>0</code> to <code>1</code>"
+},
+{
+    "Property": "<code>hue</code>",
+    "Example Format": "<code>0</code> to <code>360</code>"
+},
+{
+    "Property": "<code>saturation</code>",
+    "Example Format": "<code>0</code> to <code>100</code>"
+},
+{
+    "Property": "<code>value</code>",
+    "Example Format": "<code>0</code> to <code>100</code>"
+},
+{
+    "Property": "<code>kelvin</code>",
+    "Example Format": "<code>1000</code> to <code>40000</code>"
+}]

examples/readme/install.html

@@ -0,0 +1 @@
+<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>

examples/readme/install.js

@@ -0,0 +1,5 @@
+// Using ES6 module syntax
+import iro from '@jaames/iro';
+
+// Using CommonJS modules
+const iro = require('@jaames/iro');

examples/readme/install.sh

@@ -0,0 +1 @@
+npm install @jaames/iro --save