Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'doc/development/fe_guide/droplab/plugins')
-rw-r--r--doc/development/fe_guide/droplab/plugins/ajax.md46
-rw-r--r--doc/development/fe_guide/droplab/plugins/filter.md55
-rw-r--r--doc/development/fe_guide/droplab/plugins/index.md14
-rw-r--r--doc/development/fe_guide/droplab/plugins/input_setter.md72
4 files changed, 0 insertions, 187 deletions
diff --git a/doc/development/fe_guide/droplab/plugins/ajax.md b/doc/development/fe_guide/droplab/plugins/ajax.md
deleted file mode 100644
index f12f8f260c7..00000000000
--- a/doc/development/fe_guide/droplab/plugins/ajax.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-stage: none
-group: unassigned
-info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
----
-
-# Ajax plugin
-
-`Ajax` is a DropLab plugin that allows for retrieving and rendering list data
-from a server.
-
-## Usage
-
-Add the `Ajax` object to the plugins array of a `DropLab.prototype.init` or
-`DropLab.prototype.addHook` call.
-
-`Ajax` requires 2 configuration values: the `endpoint` and `method`.
-
-- `endpoint`: Should be a URL to the request endpoint.
-- `method`: Should be `setData` or `addData`.
-- `setData`: Completely replaces the dropdown with the response data.
-- `addData`: Appends the response data to the current dropdown list.
-
-```html
-<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
-<ul id="list" data-dropdown><!-- ... --><ul>
-```
-
-```javascript
-const droplab = new DropLab();
-
-const trigger = document.getElementById('trigger');
-const list = document.getElementById('list');
-
-droplab.addHook(trigger, list, [Ajax], {
- Ajax: {
- endpoint: '/some-endpoint',
- method: 'setData',
- },
-});
-```
-
-Optionally, you can set `loadingTemplate` to a HTML string. This HTML string
-replaces the dropdown list while the request is pending.
-
-Additionally, you can set `onError` to a function to catch any XHR errors.
diff --git a/doc/development/fe_guide/droplab/plugins/filter.md b/doc/development/fe_guide/droplab/plugins/filter.md
deleted file mode 100644
index 79f10cdb6c1..00000000000
--- a/doc/development/fe_guide/droplab/plugins/filter.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-stage: none
-group: unassigned
-info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
----
-
-# Filter plugin
-
-`Filter` is a DropLab plugin that allows for filtering data that has been added
-to the dropdown using a simple fuzzy string search of an input value.
-
-## Usage
-
-Add the `Filter` object to the plugins array of a `DropLab.prototype.init` or
-`DropLab.prototype.addHook` call.
-
-- `Filter`: Requires a configuration value for `template`.
-- `template`: Should be the key of the objects within your data array that you
- want to compare to the user input string, for filtering.
-
-```html
-<input href="#" id="trigger" data-dropdown-trigger="#list">
-<ul id="list" data-dropdown data-dynamic>
- <li><a href="#" data-id="{{id}}">{{text}}</a></li>
-<ul>
-```
-
-```javascript
-const droplab = new DropLab();
-
-const trigger = document.getElementById('trigger');
-const list = document.getElementById('list');
-
-droplab.init(trigger, list, [Filter], {
- Filter: {
- template: 'text',
- },
-});
-
-droplab.addData('trigger', [{
- id: 0,
- text: 'Jacob',
-}, {
- id: 1,
- text: 'Jeff',
-}]);
-```
-
-In the previous code, the input string is compared against the `test` key of the
-passed data objects.
-
-Optionally you can set `filterFunction` to a function. This function is then
-used instead of `Filter`'s built-in string search. `filterFunction` is passed
-two arguments: the first is one of the data objects, and the second is the
-current input value.
diff --git a/doc/development/fe_guide/droplab/plugins/index.md b/doc/development/fe_guide/droplab/plugins/index.md
deleted file mode 100644
index c7a2865ca83..00000000000
--- a/doc/development/fe_guide/droplab/plugins/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-stage: none
-group: unassigned
-info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
-description: A list of DropLab plugins.
----
-
-# DropLab plugins
-
-The following plugins are available for use with [DropLab](../droplab.md):
-
-- [Ajax plugin](ajax.md)
-- [Filter plugin](filter.md)
-- [InputSetter plugin](input_setter.md)
diff --git a/doc/development/fe_guide/droplab/plugins/input_setter.md b/doc/development/fe_guide/droplab/plugins/input_setter.md
deleted file mode 100644
index a3c073520cb..00000000000
--- a/doc/development/fe_guide/droplab/plugins/input_setter.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-stage: none
-group: unassigned
-info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
----
-
-# InputSetter plugin
-
-`InputSetter` is a DropLab plugin that allows for updating DOM out of the scope
-of DropLab when a list item is clicked.
-
-## Usage
-
-Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init`
-or `DropLab.prototype.addHook` call.
-
-- `InputSetter`: Requires a configuration value for `input` and `valueAttribute`.
-- `input`: The DOM element that you want to manipulate.
-- `valueAttribute`: A string that's the name of an attribute on your list items
- that's used to get the value to update the `input` element with.
-
-You can also set the `InputSetter` configuration to an array of objects, which
-allows you to update multiple elements.
-
-```html
-<input id="input" value="">
-<div id="div" data-selected-id=""></div>
-
-<input href="#" id="trigger" data-dropdown-trigger="#list">
-<ul id="list" data-dropdown data-dynamic>
- <li><a href="#" data-id="{{id}}">{{text}}</a></li>
-<ul>
-```
-
-```javascript
-const droplab = new DropLab();
-
-const trigger = document.getElementById('trigger');
-const list = document.getElementById('list');
-
-const input = document.getElementById('input');
-const div = document.getElementById('div');
-
-droplab.init(trigger, list, [InputSetter], {
- InputSetter: [{
- input: input,
- valueAttribute: 'data-id',
- } {
- input: div,
- valueAttribute: 'data-id',
- inputAttribute: 'data-selected-id',
- }],
-});
-
-droplab.addData('trigger', [{
- id: 0,
- text: 'Jacob',
-}, {
- id: 1,
- text: 'Jeff',
-}]);
-```
-
-In the previous code, if the second list item was clicked, it would update the
-`#input` element to have a `value` of `1`, it would also update the `#div`
-element's `data-selected-id` to `1`.
-
-Optionally, you can set `inputAttribute` to a string that's the name of an
-attribute on your `input` element that you want to update. If you don't provide
-an `inputAttribute`, `InputSetter` updates the `value` of the `input`
-element if it's an `INPUT` element, or the `textContent` of the `input` element
-if it isn't an `INPUT` element.