Skip to content

Commit 667a813

Browse files
sarjonasarjona
authored
Merge pull request #1286 from sarjona/addmissingatto401
Add missing Atto plugintype page for 4.1
2 parents 70ed1c6 + c0fce97 commit 667a813

File tree

8 files changed

+232
-3
lines changed

8 files changed

+232
-3
lines changed

‎versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!-- markdownlint-disable first-line-heading -->
2+
The plugin must implement a YUI module that will be included by the editor when the page loads.
3+
4+
That YUI module **must** be named `button` and must create a namespaced class in `Y.M.[plugin name]`.

‎versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright (c) Moodle Pty Ltd.
3+
*
4+
* Moodle is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU General Public License as published by
6+
* the Free Software Foundation, either version 3 of the License, or
7+
* (at your option) any later version.
8+
*
9+
* Moodle is distributed in the hope that it will be useful,
10+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
* GNU General Public License for more details.
13+
*
14+
* You should have received a copy of the GNU General Public License
15+
* along with Moodle. If not, see <http://www.gnu.org/licenses/>.
16+
*/
17+
import React from 'react';
18+
import { ComponentFileSummary } from '../../../../_utils';
19+
import type { Props } from '../../../../_utils';
20+
21+
const defaultExample = `Y.namespace('M.atto_media').Button = Y.Base.create(
22+
'button',
23+
Y.M.editor_atto.EditorPlugin,
24+
[],
25+
{
26+
initializer: function() {
27+
this.addButton({
28+
callback: this._toggleMedia,
29+
icon: 'e/media',
30+
inlineFormat: true,
31+
32+
// Key code for the keyboard shortcut which triggers this button:
33+
keys: '66',
34+
35+
// Watch the following tags and add/remove highlighting as appropriate:
36+
tags: 'media'
37+
});
38+
},
39+
40+
_toggleMedia: function() {
41+
// Handle the button click here.
42+
// You can fetch any passed in parameters here as follows:
43+
var langs = this.get('langs');
44+
}
45+
}, {
46+
ATTRS: {
47+
// If any parameters were defined in the 'params_for_js' function,
48+
// they should be defined here for proper access.
49+
langs: {
50+
value: ['Default', 'Value']
51+
}
52+
}
53+
}
54+
);
55+
`;
56+
import ButtonDescription from './button.md';
57+
58+
export default (initialProps: Props): ComponentFileSummary => (
59+
<ComponentFileSummary
60+
// defaultDescription={DefaultDescription}
61+
defaultExample={defaultExample}
62+
defaultDescription={ButtonDescription}
63+
plugintype="atto"
64+
filepath="/yui/src/button/js/button.js"
65+
filetype="js"
66+
summary="Example Button JavaScript"
67+
{...initialProps}
68+
/>
69+
);

‎versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- markdownlint-disable first-line-heading -->
2+
An optional file which can be used to implement optional component callbacks.
3+
4+
The available callbacks are:
5+
6+
- `atto_[pluginname]_strings_for_js` - To add strings required by the YUI code
7+
- `atto_[pluginname]_params_for_js` - To get the parameters required to instantiate the plugin

‎versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Initialise the js strings required for this plugin.
3+
*/
4+
function atto_media_strings_for_js(): void {
5+
global $PAGE;
6+
7+
$PAGE->requires->strings_for_js([
8+
'add',
9+
'width',
10+
], 'atto_media');
11+
}
12+
13+
/**
14+
* Sends the parameters to the JS module.
15+
*
16+
* @return array
17+
*/
18+
function atto_media_params_for_js(): array {
19+
global $OUTPUT, $PAGE;
20+
$currentlang = current_language();
21+
$langsinstalled = get_string_manager()->get_list_of_translations(true);
22+
$params = [
23+
'langs' => [
24+
'installed' => [],
25+
],
26+
];
27+
28+
foreach ($langsinstalled as $code => $name) {
29+
$params['langs']['installed'][] = [
30+
'lang' => $name,
31+
'code' => $code,
32+
'default' => $currentlang == $code,
33+
];
34+
}
35+
36+
return $params;
37+
}

‎versioned_docs/version-4.1/apis/plugintypes/atto/index.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Atto
3+
tags: []
4+
---
5+
6+
<Since versions={["2.7"]} issueNumber="MDL-43841" />
7+
8+
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](./../../subsystems/editor/index.md). Most of the code is written in JavaScript using YUI modules.
9+
10+
All of the buttons in Atto are implemented as Moodle subplugins. This means that the subplugins can do anything a subplugin can do including, using language strings, database tables, other JavaScript, and more.
11+
12+
:::caution Sunset of Atto
13+
14+
A new Editor was created for Moodle 4.1 and later using the latest version of TinyMCE.
15+
16+
It is likely that Atto will be removed in Moodle 4.6.
17+
18+
:::
19+
20+
## File structure
21+
22+
import {
23+
Lang,
24+
Lib,
25+
VersionPHP,
26+
} from '../../_files';
27+
import Button from './_examples/button';
28+
29+
Atto plugins are located in the `/lib/editor/atto/plugins` directory.
30+
31+
Each plugin is in a separate subdirectory and consists of a number of _mandatory files_ and any other files the developer is going to use.
32+
33+
<details>
34+
<summary>View an example directory layout for the `atto_media` plugin.</summary>
35+
36+
```console
37+
lib/editor/atto/plugins/media
38+
|-- db
39+
| └-- upgrade.php
40+
|-- lang
41+
| └-- en
42+
| └-- atto_media.php
43+
|-- yui
44+
| └-- src
45+
| └-- button
46+
| └-- atto_media.php
47+
| ├── build.json
48+
| ├── js
49+
| │   └── button.js
50+
| └── meta
51+
| └── button.json
52+
|-- settings.php
53+
└-- version.php
54+
```
55+
56+
</details>
57+
58+
Some of the important files for the Atto plugintype are described below. See the [common plugin files](../commonfiles) documentation for details of other files which may be useful in your plugin.
59+
60+
### version.php
61+
62+
<VersionPHP
63+
plugintype="atto"
64+
/>
65+
66+
### lib.php
67+
68+
import LibExample from '!!raw-loader!./_examples/lib.php';
69+
import LibDescription from './_examples/lib.md';
70+
71+
<Lib
72+
plugintype="atto"
73+
pluginname="media"
74+
description={LibDescription}
75+
example={LibExample}
76+
legacy={false}
77+
optional
78+
/>
79+
80+
### yui/src/button/*
81+
82+
<!-- markdownlint-disable no-inline-html -->
83+
84+
<Button
85+
pluginname="media"
86+
modulename="button"
87+
/>
88+
89+
:::note
90+
91+
It is recommended that you extend the `EditorPlugin` class as described below.
92+
See: [YUI/Modules](../../../guides/javascript/yui/modules.md) for more information about YUI modules.
93+
94+
:::
95+
96+
The plugin:
97+
98+
- **must** register a class at `Y.M.atto_PLUGINNAME.button`;
99+
- **must** provide a constructor; and
100+
- ***should*** extend [Y.M.editor_atto.EditorPlugin](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin.js).
101+
102+
#### EditorPlugin
103+
104+
It is up to the plugin author to decide how best to write their plugin, but it is highly advisable to extend `EditorPlugin` class, which provides a number of useful functions for dealing with the Editor, Toolbars, Keyboard Navigation, and other related areas.
105+
106+
Of particular interest are:
107+
108+
- [addBasicButton](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js#L293) - to add a basic button which directly uses document.execCommand with minimal effort;
109+
- [addButton](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js#L161) - to add a button giving you a greater degree of control via your own callback;
110+
- [addToolbarMenu](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js#L337) - to add a dropdown toolbar menu;
111+
- [markUpdated](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin.js#L91) - should be called after making changes to the content area; and
112+
- [getDialogue](https://github.com/moodle/moodle/blob/MOODLE_37_STABLE/lib/editor/atto/yui/src/editor/js/editor-plugin-dialogue.js#L54) - return a standard dialogue, creating one if it does not already exist.

‎versioned_docs/version-4.3/apis/plugintypes/atto/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags: []
55

66
<Since versions={["2.7"]} issueNumber="MDL-43841" />
77

8-
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](https://docs.moodle.org/dev/Editors). Most of the code is written in JavaScript using YUI modules.
8+
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](./../../subsystems/editor/index.md). Most of the code is written in JavaScript using YUI modules.
99

1010
All of the buttons in Atto are implemented as Moodle subplugins. This means that the subplugins can do anything a subplugin can do including, using language strings, database tables, other JavaScript, and more.
1111

‎versioned_docs/version-4.4/apis/plugintypes/atto/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags: []
55

66
<Since versions={["2.7"]} issueNumber="MDL-43841" />
77

8-
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](https://docs.moodle.org/dev/Editors). Most of the code is written in JavaScript using YUI modules.
8+
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](./../../subsystems/editor/index.md). Most of the code is written in JavaScript using YUI modules.
99

1010
All of the buttons in Atto are implemented as Moodle subplugins. This means that the subplugins can do anything a subplugin can do including, using language strings, database tables, other JavaScript, and more.
1111

‎versioned_docs/version-4.5/apis/plugintypes/atto/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags: []
55

66
<Since versions={["2.7"]} issueNumber="MDL-43841" />
77

8-
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](https://docs.moodle.org/dev/Editors). Most of the code is written in JavaScript using YUI modules.
8+
Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](./../../subsystems/editor/index.md). Most of the code is written in JavaScript using YUI modules.
99

1010
All of the buttons in Atto are implemented as Moodle subplugins. This means that the subplugins can do anything a subplugin can do including, using language strings, database tables, other JavaScript, and more.
1111

0 commit comments

Comments
 (0)