YUI/Modules - Revision history

Devdocsbot: Protected "YUI/Modules": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

2022-12-09T12:47:59Z

Protected "YUI/Modules": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

← Older revision	Revision as of 12:47, 9 December 2022
(No difference)

Devdocsbot: Update migration status and path

2022-12-09T12:45:40Z

Update migration status and path

Show changes

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:15:48Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:15, 15 July 2021
				
Line 139:
Line 139:
These will be presented to the JavaScript function you name: These will be presented to the JavaScript function you name:



<code javascript> <syntaxhighlight lang="javascript">
init = function(argument1, argument2) { init = function(argument1, argument2) {
     // Use the arguments here.      // Use the arguments here.
Line 158:
Line 158:
These will be presented to the JavaScript function you name: These will be presented to the JavaScript function you name:



<code javascript> <syntaxhighlight lang="javascript">
init = function(params) { init = function(params) {
     // Use the arguments through params.key1 and params.key2.      // Use the arguments through params.key1 and params.key2.
Line 197:
Line 197:
The easiest way of creating this structure is by using the logical OR operator. The easiest way of creating this structure is by using the logical OR operator.



<code javascript> <syntaxhighlight lang="javascript">
M.block_fruit = M.block_fruit || {}; M.block_fruit = M.block_fruit || {};
M.block_fruit.fruitbowl = {}; M.block_fruit.fruitbowl = {};
Line 222:
Line 222:
* use event delegation where possible. * use event delegation where possible.



<code javascript> <syntaxhighlight lang="javascript">
M.block_fruit = M.block_fruit || {}; M.block_fruit = M.block_fruit || {};
var NS = M.block_fruit.fruitbowl = {}; var NS = M.block_fruit.fruitbowl = {};
Line 247:
Line 247:
recommend creating two static objects at the top of your code: one for CSS recommend creating two static objects at the top of your code: one for CSS
selectors, and one for CSS class names. selectors, and one for CSS class names.
<code javascript> <syntaxhighlight lang="javascript">
var CSS = { var CSS = {
         FRUIT: 'fruit',          FRUIT: 'fruit',
Line 287:
Line 287:
call it accordingly. call it accordingly.



<code javascript> <syntaxhighlight lang="javascript">
var CSS = { var CSS = {
         FRUIT: 'fruit',          FRUIT: 'fruit',



Mudrd8mz: Text replacement - "" to ""

2021-07-14T20:36:20Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 20:36, 14 July 2021
				
Line 107:
Line 107:
function on the page requirements class. This can be accessed using: function on the page requirements class. This can be accessed using:



<code php> <syntaxhighlight lang="php">
$PAGE->requires->yui_module(); $PAGE->requires->yui_module();
// or: // or:
Line 117:
Line 117:
third argument: third argument:



<code php> <syntaxhighlight lang="php">
$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl', $PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
         'M.block_fruit.fruitbowl.init');          'M.block_fruit.fruitbowl.init');
Line 128:
Line 128:
arguments. arguments.



<code php> <syntaxhighlight lang="php">
$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl', $PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
         'M.block_fruit.fruitbowl.init',          'M.block_fruit.fruitbowl.init',
Line 147:
Line 147:
Often it makes more sense to pass a single argument with an associative array: Often it makes more sense to pass a single argument with an associative array:



<code php> <syntaxhighlight lang="php">
$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl', $PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
         'M.block_fruit.fruitbowl.init',          'M.block_fruit.fruitbowl.init',



Mudrd8mz: Text replacement - "" to ""
2021-07-14T20:20:21Z
Text replacement - "</code>" to "</syntaxhighlight>"

				
				
				
				
				
				← Older revision
				Revision as of 20:20, 14 July 2021
				
Line 79:
Line 79:
         |-- meta          |-- meta
             |-- fruitbowl.json              |-- fruitbowl.json
</code> </syntaxhighlight>
''Note: Moodle 2.5 onwards is backwards compatibly with the previous structure.'' ''Note: Moodle 2.5 onwards is backwards compatibly with the previous structure.''



Line 111:
Line 111:
// or: // or:
$this->page->requires->yui_module(); $this->page->requires->yui_module();
</code> </syntaxhighlight>



The yui_module function takes the module name, and the init function to The yui_module function takes the module name, and the init function to
Line 120:
Line 120:
$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl', $PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
         'M.block_fruit.fruitbowl.init');          'M.block_fruit.fruitbowl.init');
</code> </syntaxhighlight>



==== Passing arguments from your PHP to your module ==== ==== Passing arguments from your PHP to your module ====
Line 135:
Line 135:
             'value2',              'value2',
         ));          ));
</code> </syntaxhighlight>



These will be presented to the JavaScript function you name: These will be presented to the JavaScript function you name:
Line 143:
Line 143:
     // Use the arguments here.      // Use the arguments here.
}; };
</code> </syntaxhighlight>



Often it makes more sense to pass a single argument with an associative array: Often it makes more sense to pass a single argument with an associative array:
Line 154:
Line 154:
             'key2' => 'value2',              'key2' => 'value2',
         )));          )));
</code> </syntaxhighlight>



These will be presented to the JavaScript function you name: These will be presented to the JavaScript function you name:
Line 162:
Line 162:
     // Use the arguments through params.key1 and params.key2.      // Use the arguments through params.key1 and params.key2.
}; };
</code> </syntaxhighlight>



=== A basic module === === A basic module ===
Line 193:
Line 193:
   }    }
} }
</code> </syntaxhighlight>



The easiest way of creating this structure is by using the logical OR operator. The easiest way of creating this structure is by using the logical OR operator.
Line 201:
Line 201:
M.block_fruit.fruitbowl = {}; M.block_fruit.fruitbowl = {};
var NS = M.block_fruit.fruitbowl; var NS = M.block_fruit.fruitbowl;
</code> </syntaxhighlight>



This ensures that any existing code on the M.block_fruit object is not This ensures that any existing code on the M.block_fruit object is not
Line 235:
Line 235:
     }, Y.config.doc, '.fruit');      }, Y.config.doc, '.fruit');
}; };
</code> </syntaxhighlight>



==== Separation of code from configuration and style (loose coupling) ==== ==== Separation of code from configuration and style (loose coupling) ====
Line 269:
Line 269:
     }, Y.config.doc, SELECTORS.FRUIT, this);      }, Y.config.doc, SELECTORS.FRUIT, this);
}; };
</code> </syntaxhighlight>



With this change, if at a later date you need to change the styling on a With this change, if at a later date you need to change the styling on a
Line 311:
Line 311:
     e.target.addClass(CSS.SELECTED);      e.target.addClass(CSS.SELECTED);
}; };
</code> </syntaxhighlight>



Now you can clearly see your what your initialiser does, and you can call handle_selection for other events too without duplicating code. Now you can clearly see your what your initialiser does, and you can call handle_selection for other events too without duplicating code.



Mudrd8mz: Text replacement - "" to ""

2021-07-14T19:17:07Z
Text replacement - "<code bash>" to "<syntaxhighlight lang="bash">"

				
				
				
				
				
				← Older revision
				Revision as of 19:17, 14 July 2021
				
Line 70:
Line 70:



Since Moodle 2.5, the structure for this directory is: Since Moodle 2.5, the structure for this directory is:
<code bash> <syntaxhighlight lang="bash">
yui/ yui/
|-- src |-- src
Line 185:
Line 185:
As a JavaScript object this would look like: As a JavaScript object this would look like:



<code bash> <syntaxhighlight lang="bash">
M: { M: {
   FRANKENSTYLE: {    FRANKENSTYLE: {



Andrewnicols at 03:14, 14 April 2021
2021-04-14T03:14:35Z


				
				
				
				
				
				← Older revision
				Revision as of 03:14, 14 April 2021
				
Line 1:
Line 1:
{{Deprecated|version=2.9}}

Note: As of Moodle 2.9 we are transitioning away from YUI to AMD modules. This transition will take a long time, but it is important because the YUI team have stopped all new development on the YUI library ( http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui ). See [[ Javascript Modules ]] for more information.

{{Moodle 2.5}} {{Moodle 2.5}}
{{Moodle 2.6}} {{Moodle 2.6}}



Danowar at 11:18, 27 July 2016
2016-07-27T11:18:55Z


				
				
				
				
				
				← Older revision
				Revision as of 11:18, 27 July 2016
				
Line 318:
Line 318:



There is a proposal to [[YUI/Namespacing|alter the namespace]] for YUI modules. This is likely to be implemented from Moodle 2.7 onwards. There is a proposal to [[YUI/Namespacing|alter the namespace]] for YUI modules. This is likely to be implemented from Moodle 2.7 onwards.

[[Category:Javascript]]



Danowar: Oops
2016-07-27T11:17:38Z
Oops

				
				
				
				
				
				← Older revision
				Revision as of 11:17, 27 July 2016
				
Line 2:
Line 2:
{{Moodle 2.6}} {{Moodle 2.6}}
{{Moodle 2.7}} {{Moodle 2.7}}
{{Javascript}} 



== YUI modules == == YUI modules ==



Danowar at 11:17, 27 July 2016
2016-07-27T11:17:13Z


				
				
				
				
				
				← Older revision
				Revision as of 11:17, 27 July 2016
				
Line 2:
Line 2:
{{Moodle 2.6}} {{Moodle 2.6}}
{{Moodle 2.7}} {{Moodle 2.7}}
{{Javascript}}



== YUI modules == == YUI modules ==

← Older revision		Revision as of 08:15, 15 July 2021
Line 139:		Line 139:
	These will be presented to the JavaScript function you name:		These will be presented to the JavaScript function you name:

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	init = function(argument1, argument2) {		init = function(argument1, argument2) {
	// Use the arguments here.		// Use the arguments here.
Line 158:		Line 158:
	These will be presented to the JavaScript function you name:		These will be presented to the JavaScript function you name:

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	init = function(params) {		init = function(params) {
	// Use the arguments through params.key1 and params.key2.		// Use the arguments through params.key1 and params.key2.
Line 197:		Line 197:
	The easiest way of creating this structure is by using the logical OR operator.		The easiest way of creating this structure is by using the logical OR operator.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	M.block_fruit = M.block_fruit \|\| {};		M.block_fruit = M.block_fruit \|\| {};
	M.block_fruit.fruitbowl = {};		M.block_fruit.fruitbowl = {};
Line 222:		Line 222:
	* use event delegation where possible.		* use event delegation where possible.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	M.block_fruit = M.block_fruit \|\| {};		M.block_fruit = M.block_fruit \|\| {};
	var NS = M.block_fruit.fruitbowl = {};		var NS = M.block_fruit.fruitbowl = {};
Line 247:		Line 247:
	recommend creating two static objects at the top of your code: one for CSS		recommend creating two static objects at the top of your code: one for CSS
	selectors, and one for CSS class names.		selectors, and one for CSS class names.
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	var CSS = {		var CSS = {
	FRUIT: 'fruit',		FRUIT: 'fruit',
Line 287:		Line 287:
	call it accordingly.		call it accordingly.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	var CSS = {		var CSS = {
	FRUIT: 'fruit',		FRUIT: 'fruit',

← Older revision		Revision as of 20:36, 14 July 2021
Line 107:		Line 107:
	function on the page requirements class. This can be accessed using:		function on the page requirements class. This can be accessed using:

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->yui_module();		$PAGE->requires->yui_module();
	// or:		// or:
Line 117:		Line 117:
	third argument:		third argument:

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',		$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
	'M.block_fruit.fruitbowl.init');		'M.block_fruit.fruitbowl.init');
Line 128:		Line 128:
	arguments.		arguments.

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',		$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
	'M.block_fruit.fruitbowl.init',		'M.block_fruit.fruitbowl.init',
Line 147:		Line 147:
	Often it makes more sense to pass a single argument with an associative array:		Often it makes more sense to pass a single argument with an associative array:

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',		$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
	'M.block_fruit.fruitbowl.init',		'M.block_fruit.fruitbowl.init',

← Older revision		Revision as of 20:20, 14 July 2021
Line 79:		Line 79:
	\|-- meta		\|-- meta
	\|-- fruitbowl.json		\|-- fruitbowl.json
	</~~code~~>		</syntaxhighlight>
	''Note: Moodle 2.5 onwards is backwards compatibly with the previous structure.''		''Note: Moodle 2.5 onwards is backwards compatibly with the previous structure.''

Line 111:		Line 111:
	// or:		// or:
	$this->page->requires->yui_module();		$this->page->requires->yui_module();
	</~~code~~>		</syntaxhighlight>

	The yui_module function takes the module name, and the init function to		The yui_module function takes the module name, and the init function to
Line 120:		Line 120:
	$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',		$PAGE->requires->yui_module('moodle-block_fruit-fruitbowl',
	'M.block_fruit.fruitbowl.init');		'M.block_fruit.fruitbowl.init');
	</~~code~~>		</syntaxhighlight>

	==== Passing arguments from your PHP to your module ====		==== Passing arguments from your PHP to your module ====
Line 135:		Line 135:
	'value2',		'value2',
	));		));
	</~~code~~>		</syntaxhighlight>

	These will be presented to the JavaScript function you name:		These will be presented to the JavaScript function you name:
Line 143:		Line 143:
	// Use the arguments here.		// Use the arguments here.
	};		};
	</~~code~~>		</syntaxhighlight>

	Often it makes more sense to pass a single argument with an associative array:		Often it makes more sense to pass a single argument with an associative array:
Line 154:		Line 154:
	'key2' => 'value2',		'key2' => 'value2',
	)));		)));
	</~~code~~>		</syntaxhighlight>

	These will be presented to the JavaScript function you name:		These will be presented to the JavaScript function you name:
Line 162:		Line 162:
	// Use the arguments through params.key1 and params.key2.		// Use the arguments through params.key1 and params.key2.
	};		};
	</~~code~~>		</syntaxhighlight>

	=== A basic module ===		=== A basic module ===
Line 193:		Line 193:
	}		}
	}		}
	</~~code~~>		</syntaxhighlight>

	The easiest way of creating this structure is by using the logical OR operator.		The easiest way of creating this structure is by using the logical OR operator.
Line 201:		Line 201:
	M.block_fruit.fruitbowl = {};		M.block_fruit.fruitbowl = {};
	var NS = M.block_fruit.fruitbowl;		var NS = M.block_fruit.fruitbowl;
	</~~code~~>		</syntaxhighlight>

	This ensures that any existing code on the M.block_fruit object is not		This ensures that any existing code on the M.block_fruit object is not
Line 235:		Line 235:
	}, Y.config.doc, '.fruit');		}, Y.config.doc, '.fruit');
	};		};
	</~~code~~>		</syntaxhighlight>

	==== Separation of code from configuration and style (loose coupling) ====		==== Separation of code from configuration and style (loose coupling) ====
Line 269:		Line 269:
	}, Y.config.doc, SELECTORS.FRUIT, this);		}, Y.config.doc, SELECTORS.FRUIT, this);
	};		};
	</~~code~~>		</syntaxhighlight>

	With this change, if at a later date you need to change the styling on a		With this change, if at a later date you need to change the styling on a
Line 311:		Line 311:
	e.target.addClass(CSS.SELECTED);		e.target.addClass(CSS.SELECTED);
	};		};
	</~~code~~>		</syntaxhighlight>

	Now you can clearly see your what your initialiser does, and you can call handle_selection for other events too without duplicating code.		Now you can clearly see your what your initialiser does, and you can call handle_selection for other events too without duplicating code.

← Older revision		Revision as of 19:17, 14 July 2021
Line 70:		Line 70:

	Since Moodle 2.5, the structure for this directory is:		Since Moodle 2.5, the structure for this directory is:
	<~~code~~ bash>		<syntaxhighlight lang="bash">
	yui/		yui/
	\|-- src		\|-- src
Line 185:		Line 185:
	As a JavaScript object this would look like:		As a JavaScript object this would look like:

	<~~code~~ bash>		<syntaxhighlight lang="bash">
	M: {		M: {
	FRANKENSTYLE: {		FRANKENSTYLE: {

← Older revision		Revision as of 03:14, 14 April 2021
Line 1:		Line 1:
			{{Deprecated\|version=2.9}}

			Note: As of Moodle 2.9 we are transitioning away from YUI to AMD modules. This transition will take a long time, but it is important because the YUI team have stopped all new development on the YUI library ( http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui ). See [[ Javascript Modules ]] for more information.

	{{Moodle 2.5}}		{{Moodle 2.5}}
	{{Moodle 2.6}}		{{Moodle 2.6}}

← Older revision		Revision as of 11:18, 27 July 2016
Line 318:		Line 318:

	There is a proposal to [[YUI/Namespacing\|alter the namespace]] for YUI modules. This is likely to be implemented from Moodle 2.7 onwards.		There is a proposal to [[YUI/Namespacing\|alter the namespace]] for YUI modules. This is likely to be implemented from Moodle 2.7 onwards.

			[[Category:Javascript]]

← Older revision		Revision as of 11:17, 27 July 2016
Line 2:		Line 2:
	{{Moodle 2.6}}		{{Moodle 2.6}}
	{{Moodle 2.7}}		{{Moodle 2.7}}
	~~{{Javascript}}~~

	== YUI modules ==		== YUI modules ==