Broken/JavaScript guidelines - Historial de revisió

Howardsmiller: /* Getting Moodle to load your JavaScript files */

2011-02-18T13:26:04Z

Getting Moodle to load your JavaScript files

← Versió més antiga		Revisió del 13:26, 18 feb 2011
Línia 102:		Línia 102:
	</code>		</code>

	''mod_mymod'' needs changed to reflect the plugin type (~~e.g. mod,block,local,coursereport~~) and the name of your plugin throughout.		''mod_mymod'' needs changed to reflect the plugin type (see [[Development:Frankenstyle]]) and the name of your plugin throughout.

	===JavaScript coding style===		===JavaScript coding style===

Howardsmiller: /* How to achive these general principles in Moodle */

2011-02-18T13:22:54Z

How to achive these general principles in Moodle

← Versió més antiga		Revisió del 13:22, 18 feb 2011
Línia 47:		Línia 47:
	==How to achive these general principles in Moodle==		==How to achive these general principles in Moodle==

	The rest of this page explains how you can achieve the above goals.		The rest of this page explains how you can achieve the above goals. Note that this particularly applies to loading and using the YUI 3 library which is Moodle 2.0's default. You should check which version of YUI Moodle is using as it may lag behind the latest YUI release (and, hence, the documentation).

	===Getting Moodle to load your JavaScript files===		===Getting Moodle to load your JavaScript files===

Howardsmiller: /* Getting Moodle to load your JavaScript files */

2011-02-18T13:20:24Z

Getting Moodle to load your JavaScript files

← Versió més antiga		Revisió del 13:20, 18 feb 2011
Línia 87:		Línia 87:

	$PAGE->requires keeps track of which files have been included. For example if two other modules both require the YUI base module, then it is only included once.		$PAGE->requires keeps track of which files have been included. For example if two other modules both require the YUI base module, then it is only included once.

			Your 'module.js' file in your plugin's directory will look something like this:

			<code javascript>
			M.mod_mymod = {};

			M.mod_mymod.init = function(Y) {

			// example to submit a form field on change
			Y.on('change', function(e) {
			Y.one('#mform1').submit();
			}, '#id_fieldname' );
			};
			</code>

			''mod_mymod'' needs changed to reflect the plugin type (e.g. mod,block,local,coursereport) and the name of your plugin throughout.

	===JavaScript coding style===		===JavaScript coding style===

Howardsmiller: /* Getting Moodle to load your JavaScript files */

2011-02-18T13:16:26Z

Getting Moodle to load your JavaScript files

← Versió més antiga		Revisió del 13:16, 18 feb 2011
Línia 81:		Línia 81:
	The third (boolean) parameter is defined as "Wait for DOM Ready".		The third (boolean) parameter is defined as "Wait for DOM Ready".

	The libraries in the 'requires' sub-array are YUI3 (or YUI2) libraries.		The libraries in the 'requires' sub-array are YUI3 (or YUI2) libraries. Moodle contains YUIs 'phploader' which understands what the library dependencies are, so this is all taken care of for you.

	The strings are Moodle language strings. In order for Moodle to have correctly determined the user's language, you should only call js_init_call after the call to require_login, which sets the current course, and ensures the user is logged in.		The strings are Moodle language strings. In order for Moodle to have correctly determined the user's language, you should only call js_init_call after the call to require_login, which sets the current course, and ensures the user is logged in.

Marxjohnson: /* See also */

2011-02-08T14:00:13Z

Marxjohnson: /* How to achive these general principles in Moodle */

2011-02-08T13:52:29Z

How to achive these general principles in Moodle

← Versió més antiga		Revisió del 13:52, 8 feb 2011
Línia 84:		Línia 84:

	The strings are Moodle language strings. In order for Moodle to have correctly determined the user's language, you should only call js_init_call after the call to require_login, which sets the current course, and ensures the user is logged in.		The strings are Moodle language strings. In order for Moodle to have correctly determined the user's language, you should only call js_init_call after the call to require_login, which sets the current course, and ensures the user is logged in.
			Strings that are passed to Javascript in this way are then available from Javascript using M.util.get_string(), which works just like the PHP function.

	$PAGE->requires keeps track of which files have been included. For example if two other modules both require the YUI base module, then it is only included once.		$PAGE->requires keeps track of which files have been included. For example if two other modules both require the YUI base module, then it is only included once.

Howardsmiller: /* Getting Moodle to load your JavaScript files */

2011-02-08T13:20:53Z

Getting Moodle to load your JavaScript files

← Versió més antiga		Revisió del 13:20, 8 feb 2011
Línia 78:		Línia 78:
	</code>		</code>
	(Naturally, it would be a good idea to put the definition of the $jsmodule array somewhere central like in the locallib.php file.)		(Naturally, it would be a good idea to put the definition of the $jsmodule array somewhere central like in the locallib.php file.)

			The third (boolean) parameter is defined as "Wait for DOM Ready".

	The libraries in the 'requires' sub-array are YUI3 (or YUI2) libraries.		The libraries in the 'requires' sub-array are YUI3 (or YUI2) libraries.

Afhole a 19:41, 16 ago 2010

2010-08-16T19:41:14Z

← Versió més antiga		Revisió del 19:41, 16 ago 2010
Línia 3:		Línia 3:
	These guidelines can only be applied fully from Moodle 2.0 onwards, because they rely on our new API to facilitate use of JavaScript.		These guidelines can only be applied fully from Moodle 2.0 onwards, because they rely on our new API to facilitate use of JavaScript.

	When writing JavaScript for earlier versions of Moodle, please try to follow these guidelines in spirit and use the '''require_js''' function in place of $PAGE->requires->js_module/~~yui_lib~~.		When writing JavaScript for earlier versions of Moodle, please try to follow these guidelines in spirit and use the '''require_js''' function in place of $PAGE->requires->js_module/yui2_lib.

	==General principles==		==General principles==

Nlounds: fixed type

2010-06-16T13:29:30Z

fixed type

← Versió més antiga		Revisió del 13:29, 16 juny 2010
Línia 43:		Línia 43:
	On the other hand, organise the JavaScript logically to ease maintenance, and don't include large amounts of irrelevant JavaScript code. Code that is loaded but never used is a waste of time.		On the other hand, organise the JavaScript logically to ease maintenance, and don't include large amounts of irrelevant JavaScript code. Code that is loaded but never used is a waste of time.

	So, if you are writing a new module that needs its own JavaScript, try starting ~~with~~ with a single file mod/mymod/module.js. If you find that you are writing a lot of JavaScript that is only needed when the teacher edits your module, but is not needed by students, then consider splitting that code into a separate file like mod/mymod/edit.js, and only including it where needed.		So, if you are writing a new module that needs its own JavaScript, try starting with a single file mod/mymod/module.js. If you find that you are writing a lot of JavaScript that is only needed when the teacher edits your module, but is not needed by students, then consider splitting that code into a separate file like mod/mymod/edit.js, and only including it where needed.

	==How to achive these general principles in Moodle==		==How to achive these general principles in Moodle==

Samhemelryk: /* Different in content when JavaScript is on or off */

2010-06-14T03:21:05Z

Different in content when JavaScript is on or off

← Versió més antiga		Revisió del 03:21, 14 juny 2010
Línia 95:		Línia 95:
	Do not pollute the global JavaScript name-space. Try to package your JavaScript into objects, and put all objects inside the global M object, like the M.mod_mymod example above.		Do not pollute the global JavaScript name-space. Try to package your JavaScript into objects, and put all objects inside the global M object, like the M.mod_mymod example above.

	===Different in content when JavaScript is on or off===		===Different content when JavaScript is on or off===

	Remember the overriding principals that everything should work with JavaScript off, and we should adopt a [[Progressive enhancement]] approach. However, there are valid reasons why sometimes you need different content with JavaScript is on or off. We can break it down into three cases:		Remember the overriding principals that everything should work with JavaScript off, and we should adopt a [[Progressive enhancement]] approach. However, there are valid reasons why sometimes you need different content with JavaScript is on or off. We can break it down into three cases:
Línia 150:		Línia 150:
	=====Content generated by PHP code=====		=====Content generated by PHP code=====

	In this case, you need to make sure the content is always covered by a display: none; rule in the CSS, but then when the user takes an action like clicking a button to reveal the extra content, you need to override that class name some how, perhaps my adding or removing a className using JavaScript.		In this case, you need to make sure the content is always covered by a ''display: none;'' rule in the CSS, but then when the user takes an action like clicking a button to reveal the extra content, you need to override that class name some how, perhaps by adding or removing a className using JavaScript.

	=====Content generated by JavaScript code=====		=====Content generated by JavaScript code=====
Línia 156:		Línia 156:
	In this case, there is no problem. When the use triggers the extra content to appear, it is constructed using DOM methods. There may be a tiny delay, but the chances are that it will hardly be noticeable to the human eye.		In this case, there is no problem. When the use triggers the extra content to appear, it is constructed using DOM methods. There may be a tiny delay, but the chances are that it will hardly be noticeable to the human eye.

	In the content generation may be slow (perhaps because it is waiting for an Ajax request) then you should display a progress icon. See, for example, the loading of the tooltip for help icons.		If the content generation may be slow (perhaps because it is waiting for an Ajax request) then you should display a progress icon. See, for example, the loading of the tooltip for help icons.

	===Don't break XHTML strict!===		===Don't break XHTML strict!===

← Versió més antiga		Revisió del 14:00, 8 feb 2011
Línia 186:		Línia 186:
	* [http://developer.yahoo.com/yui/ YUI documentation]		* [http://developer.yahoo.com/yui/ YUI documentation]
	* [[Javascript FAQ]]		* [[Javascript FAQ]]
			* [[Javascript and YUI 3 FAQ]]
	* [[Development:Unobtrusive Javascript]]		* [[Development:Unobtrusive Javascript]]
	* [[Development:JavaScript functions]]		* [[Development:JavaScript functions]]