Docs - Add HAML alternatives to all ERB/HTML snippets

Sub-Xaero · Sub-Xaero · commit 28f0d656d85a · 2021-01-18T13:16:08.000Z
diff --git a/docs/controllers/async_block_controller.md b/docs/controllers/async_block_controller.md
@@ -51,7 +51,12 @@ None
 <!-- tabs:end -->
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/async_block_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/async_block_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 The controller will send out a fetch request, and on success will replace the block with the HTML content of the response.
 
diff --git a/docs/controllers/auto_submit_form_controller.md b/docs/controllers/auto_submit_form_controller.md
@@ -48,4 +48,9 @@ Adds event listeners for `input` and `change` to all `<input>` `<textarea>` and
 
 # How to Use
 
-[example](../examples/auto_submit_form_controller.html ':include :type=code')
+<!-- tabs:start -->
+## ** HTML **
+[example](../examples/auto_submit_form_controller.html ':include :type=code') 
+## ** HAML **
+[example](../examples/auto_submit_form_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/autosize_controller.md b/docs/controllers/autosize_controller.md
@@ -48,6 +48,9 @@ Only works for user-initiated changes, if changes are made in JavaScript and `in
 <!-- tabs:end -->
 
 # How to Use
-
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/autosize_controller.html ':include :type=code')
-
+## ** HAML **
+[example](../examples/autosize_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/char_count_controller.md b/docs/controllers/char_count_controller.md
@@ -52,4 +52,9 @@ The controller will add an event listener for `input` to the `input` target.
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/char_count_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/char_count_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/clipboard_controller.md b/docs/controllers/clipboard_controller.md
@@ -59,6 +59,11 @@ None
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/clipboard_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/clipboard_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 
diff --git a/docs/controllers/confirm_navigation_controller.md b/docs/controllers/confirm_navigation_controller.md
@@ -50,7 +50,12 @@ Shows a native confirmation dialogue using `window.onbeforeunload` to the user w
 
 On pages where you apply changes that might get lost.
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/confirm_navigation_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/confirm_navigation_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 Or if you are applying changes using Javascript that might get lost, you could add the following to prevent lost changes.
 
diff --git a/docs/controllers/detect_dirty_controller.md b/docs/controllers/detect_dirty_controller.md
@@ -50,7 +50,12 @@ Adds `input` and `change` event listeners to the attached input.
 
 ### Tracking dirty inputs
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/detect_dirty_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/detect_dirty_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 ### Build behaviours / style around dirty attributes
 
diff --git a/docs/controllers/disable_inputs_controller.md b/docs/controllers/disable_inputs_controller.md
@@ -46,7 +46,12 @@ None
 
 Example - when creating an event that can have the `end_time` turned off with a boolean:
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/disable_inputs_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/disable_inputs_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 # See also
 
diff --git a/docs/controllers/dismissable_controller.md b/docs/controllers/dismissable_controller.md
@@ -48,7 +48,12 @@ None
 
 A good example is a flash message, rather than it staying on the page forever, allowing the user to dismiss it with a little 'X' in the corner.
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/dismissable_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/dismissable_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 # Browser support / Necessary polyfills
 
diff --git a/docs/controllers/empty_dom_controller.md b/docs/controllers/empty_dom_controller.md
@@ -57,7 +57,13 @@ None
 
 The controller emits an event `dom:empty` when the container becomes empty, and `dom:not-empty` when it is no longer empty. Use those events to hook up other Stimulus actions. This particular example toggles the hide/show of a nice status message when the container is empty.
 
+
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/empty_dom_controller.html.erb ':include :type=code')
+## ** HAML **
+[example](../examples/empty_dom_controller.html.haml ':include :type=code')
+<!-- tabs:end -->
 
 ## Advanced Case
 
@@ -66,4 +72,9 @@ You can scope what the controller watches for inside the container using a CSS s
 The selector you specify will be used to `querySelectorAll` the children/subtree of the container you attach the controller too, and fire the
 `dom:empty` and `dom:not-empty` events when the results of the query are empty/not empty.
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/empty_dom_controller_advanced.html.erb ':include :type=code')
+## ** HAML **
+[example](../examples/empty_dom_controller_advanced.html.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/enable_inputs_controller.md b/docs/controllers/enable_inputs_controller.md
@@ -46,7 +46,12 @@ None
 
 Example - preventing inputs until T&Cs are checked
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/enable_inputs_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/enable_inputs_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 # See also
 
diff --git a/docs/controllers/fallback_image_controller.md b/docs/controllers/fallback_image_controller.md
@@ -46,10 +46,20 @@ None
 
 To make the image hide from the dom if it fails to load
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/fallback_image_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/fallback_image_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 To make the image change its `src` to the provided placeholder URL if it fails to load.
 
 *Please note:* If the placeholder URL you provide fails to load, there is no fallback - the borked image icon may still show. This controller relies on the `onError` behaviour of the `img` tag, but it may only run once.
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/fallback_image_controller_placeholder.html ':include :type=code')
+## ** HAML **
+[example](../examples/fallback_image_controller_placeholder.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/lazy_block_controller.md b/docs/controllers/lazy_block_controller.md
@@ -52,7 +52,12 @@ None
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/lazy_block_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/lazy_block_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 If the client browser supports IntersectionObserver, the controller will send out a Fetch request when the user scrolls near the element.
 
diff --git a/docs/controllers/limited_selection_checkboxes_controller.md b/docs/controllers/limited_selection_checkboxes_controller.md
@@ -53,4 +53,9 @@ None
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/limited_selection_checkboxes_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/limited_selection_checkboxes_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/password_confirm_controller.md b/docs/controllers/password_confirm_controller.md
@@ -64,4 +64,9 @@ If the user then corrects an input, the process runs again - any applied `error`
 
 ### Example
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/password_confirm_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/password_confirm_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/password_peek_controller.md b/docs/controllers/password_peek_controller.md
@@ -54,4 +54,9 @@ None
 Within a wrapper that loads the controller, add an `input[type="password"]` with a `data-password-peek-target='password'`
 and an adjacent button/link with `data-password-peek-target='button'`
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/password_peek_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/password_peek_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/responsive_iframe_controller.md b/docs/controllers/responsive_iframe_controller.md
@@ -62,11 +62,21 @@ You need to have access to both the frame content, and the parent iframe.
 
 On the parent iframe
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/responsive_iframe_wrapper_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/responsive_iframe_wrapper_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 In the content page
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/responsive_iframe_body_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/responsive_iframe_body_controller.haml ':include :type=code')
+<!-- tabs:end -->
 
 The `responsive-body` controller then installs a resize observer that uses the message-passing ability of the browser to pass messages to the enclosing parent document. Every time the document inside the iframe gets resized, it will report the recalculated size to the parent scope.
 
diff --git a/docs/controllers/self_destruct_controller.md b/docs/controllers/self_destruct_controller.md
@@ -48,4 +48,9 @@ The element the controller is installed on will be removed from the DOM after th
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/self_destruct_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/self_destruct_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/teleport_controller.md b/docs/controllers/teleport_controller.md
@@ -56,4 +56,9 @@ None
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/teleport_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/teleport_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/controllers/toggle_class_controller.md b/docs/controllers/toggle_class_controller.md
@@ -61,12 +61,22 @@ None
 
 ### Example - showing a dropdown menu on a click, and hiding it again if the user clicks away.
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/toggle_class_controller_click.html ':include :type=code')
+## ** HAML **
+[example](../examples/toggle_class_controller_click.haml ':include :type=code')
+<!-- tabs:end -->
 
 ![ezgif-3-697e3a644da7](https://user-images.githubusercontent.com/9960703/104182368-450ec700-5408-11eb-920b-becec527311d.gif)
 
 ### Example, showing an action button on hover
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/toggle_class_controller_hover.html ':include :type=code')
+## ** HAML **
+[example](../examples/toggle_class_controller_hover.haml ':include :type=code')
+<!-- tabs:end -->
 
 ![ezgif-3-dd9317a73732](https://user-images.githubusercontent.com/9960703/104182370-45a75d80-5408-11eb-8b3d-8feae48bbc5a.gif)
diff --git a/docs/controllers/word_count_controller.md b/docs/controllers/word_count_controller.md
@@ -52,4 +52,9 @@ The controller will add an event listener for `input` to the `input` target.
 
 # How to Use
 
+<!-- tabs:start -->
+## ** HTML **
 [example](../examples/word_count_controller.html ':include :type=code')
+## ** HAML **
+[example](../examples/word_count_controller.haml ':include :type=code')
+<!-- tabs:end -->
diff --git a/docs/examples/async_block_controller.haml b/docs/examples/async_block_controller.haml
@@ -0,0 +1,3 @@
+%div{"data-async-block-endpoint-value" => "/cats/mr-tibbins", "data-async-block-target" => "replace", "data-controller" => "async-block"}
+  %i.fas.fa-spinner.fa-spin.mr-10
+  Loading, please wait ...
diff --git a/docs/examples/auto_submit_form_controller.haml b/docs/examples/auto_submit_form_controller.haml
@@ -0,0 +1,4 @@
+form{ action: "", "data-controller"=>"auto-submit" }
+  %label
+    What is your quest?
+    %textarea{ name: "user[quest]" }
diff --git a/docs/examples/autosize_controller.haml b/docs/examples/autosize_controller.haml
@@ -0,0 +1 @@
+%textarea{name: "autosize", "data-controller"=>"autosize"}
diff --git a/docs/examples/autosize_controller.html b/docs/examples/autosize_controller.html
@@ -1 +1 @@
-<textarea name="autosize"></textarea>
+<textarea name="autosize" data-controller="autosize" ></textarea>
diff --git a/docs/examples/char_count_controller.haml b/docs/examples/char_count_controller.haml
@@ -0,0 +1,9 @@
+%label
+  %abbr.required{title: "required"} *
+  What is your quest?
+  We suggest at least 250 characters, but no more than 2000 characters.
+%div{"data-char-count-max-value" => "2000", "data-char-count-min-value" => "250", "data-controller" => "char-count"}
+  %textarea{"data-char-count-target" => "input", name: "quest"}
+  .text-right
+    %span{"data-char-count-target" => "output"}
+    %span{"data-char-count-target" => "output"} /2000
diff --git a/docs/examples/clipboard_controller.haml b/docs/examples/clipboard_controller.haml
@@ -0,0 +1,10 @@
+%p PIN:
+.input-group{"data-clipboard-remove-unused-value" => "true", "data-controller" => "clipboard"}
+  %input.input.input-group-field{"data-clipboard-target" => "source", readonly: "readonly", type: "text", value: "1234"}/
+  %a.button.input-group-button.clipboard-button{"data-action" => "clipboard#copy", href: "#"}
+    %span{"data-clipboard-target" => "copy"}
+      %i.far.fa-clipboard
+      Copy
+    %span{"data-clipboard-target" => "fallback"}
+      %i.far.fa-hand-pointer
+      Select
diff --git a/docs/examples/confirm_navigation_controller.haml b/docs/examples/confirm_navigation_controller.haml
@@ -0,0 +1,8 @@
+-# On Div
+%div{"data-controller" => "confirm-navigation"}
+  %p Lorem ipsum
+-# On a form
+%form{action: "", "data-controller" => "confirm-navigation"}
+  %p Lorem ipsum
+-# On a meta tag
+%meta{"data-controller" => "confirm-navigation"}/
diff --git a/docs/examples/detect_dirty_controller.haml b/docs/examples/detect_dirty_controller.haml
@@ -0,0 +1 @@
+%input{"data-controller" => "dirty", type: "text"}/
diff --git a/docs/examples/detect_dirty_controller_html.haml b/docs/examples/detect_dirty_controller_html.haml
@@ -0,0 +1 @@
+%input{"data-controller" => "dirty", type: "text"}/
diff --git a/docs/examples/disable_inputs_controller.haml b/docs/examples/disable_inputs_controller.haml
@@ -0,0 +1,7 @@
+.cell.medium-6{"data-controller" => "disable-inputs"}
+  %label
+    What time does the event end?
+    %input{"data-disable-inputs-target" => "disable", name: "end_time", type: "date"}/
+  %label
+    This event does not have an end time
+    %input{"data-disable-inputs-target" => "disabler", type: "checkbox"}/
diff --git a/docs/examples/dismissable_controller.haml b/docs/examples/dismissable_controller.haml
@@ -0,0 +1,4 @@
+.flash-alert.notice{"data-controller" => "dismissable", role: "notice"}
+  .col-start-3.col-span-8.text-center Something went wrong, batten down the hatches
+  .col-span-2.text-right
+    %a.btn.secondary.tiny.mr-2{"data-action" => "dismissable#dismiss"} X
diff --git a/docs/examples/empty_dom_controller.html.haml b/docs/examples/empty_dom_controller.html.haml
@@ -0,0 +1,7 @@
+%div{"data-action" => "dom:not-empty->toggle-class#on dom:empty->toggle-class#off", "data-controller" => "toggle-class", "data-toggle-class-class-value" => "hidden"}
+  %h2 Recently completed tasks
+  .hide{"data-toggle-class-target" => "toggle"}
+    %p You haven't completed any tasks yet.
+  = turbo_stream_from [current_user, "complete_tasks"]
+  = turbo_frame_tag "complete_tasks", data-controller='empty-dom' } do
+    = render @complete_tasks
diff --git a/docs/examples/empty_dom_controller_advanced.html.haml b/docs/examples/empty_dom_controller_advanced.html.haml
@@ -0,0 +1,8 @@
+%div{"data-action" => "dom:not-empty->toggle-class#on dom:empty->toggle-class#off", "data-controller" => "toggle-class", "data-toggle-class-class-value" => "hidden"}
+  %h2 Recently completed tasks
+  .hide{"data-toggle-class-target" => "toggle"}
+    %p You haven't completed any tasks yet.
+  = turbo_stream_from [current_user, "complete_tasks"]
+  = turbo_frame_tag "complete_tasks", data: { controller: 'empty-dom', empty_dom: { scope_selector_value: 'task' } } do
+    %input{type: "hidden", value: "Some other thing that definitely isn't a task but will break the count"}/
+    = render @complete_tasks
diff --git a/docs/examples/enable_inputs_controller.haml b/docs/examples/enable_inputs_controller.haml
@@ -0,0 +1,10 @@
+%div{"data-controller" => "disable-inputs"}
+  %label
+    I agree to the terms and conditions of use
+    %input{"data-disable-inputs-target" => "disabler", name: "agree_to_terms", type: "checkbox"}/
+  %label
+    Some Other Input&gt;
+    %input{"data-enable-inputs-target" => "enable", name: "some_other_input", type: "text"}/
+  %label
+    Some Other Input 2
+    %input{"data-enable-inputs-target" => "enable", name: "some_other_input_2", type: "text"}/
diff --git a/docs/examples/fallback_image_controller.haml b/docs/examples/fallback_image_controller.haml
@@ -0,0 +1 @@
+%img{alt: "Cat wearing Bowtie", "data-controller" => "fallback-image", src: "/cats/mr-tibbins.jpg"}/
diff --git a/docs/examples/fallback_image_controller_placeholder.haml b/docs/examples/fallback_image_controller_placeholder.haml
@@ -0,0 +1 @@
+%img{alt: "Cat wearing Bowtie", "data-controller" => "fallback-image", "data-fallback-placeholder-value" => "https://placehold.it/200", src: "/cats/mr-tibbins.jpg"}/
diff --git a/docs/examples/lazy_block_controller.haml b/docs/examples/lazy_block_controller.haml
@@ -0,0 +1,3 @@
+%div{"data-controller" => "lazy-block", "data-lazy-block-endpoint-value" => "/cats/mr-tibbins", "data-lazy-block-target" => "replace"}
+  %i.fas.fa-spinner.fa-spin.mr-10
+  Loading, please wait .......
diff --git a/docs/examples/limited_selection_checkboxes_controller.haml b/docs/examples/limited_selection_checkboxes_controller.haml
diff --git a/docs/examples/password_confirm_controller.haml b/docs/examples/password_confirm_controller.haml
diff --git a/docs/examples/password_peek_controller.haml b/docs/examples/password_peek_controller.haml
diff --git a/docs/examples/responsive_iframe_body_controller.haml b/docs/examples/responsive_iframe_body_controller.haml
diff --git a/docs/examples/responsive_iframe_wrapper_controller.haml b/docs/examples/responsive_iframe_wrapper_controller.haml
diff --git a/docs/examples/self_destruct_controller.haml b/docs/examples/self_destruct_controller.haml
diff --git a/docs/examples/teleport_controller.haml b/docs/examples/teleport_controller.haml
diff --git a/docs/examples/toggle_class_controller_click.haml b/docs/examples/toggle_class_controller_click.haml
diff --git a/docs/examples/toggle_class_controller_hover.haml b/docs/examples/toggle_class_controller_hover.haml
diff --git a/docs/examples/word_count_controller.haml b/docs/examples/word_count_controller.haml
diff --git a/docs/index.html b/docs/index.html
diff --git a/package.json b/package.json
