get ( 'offsetHeight' ) var scrolltop = panel. get ( 'winHeight' )) - ( buffer * 2 ) - dock. buffer var screenheight = parseInt ( dock. To start with open javascript/dockmod.js in your favourite editor and type the following:īody. Functions that rely on the position or orientation of the dock such as making the titles vertical have code within them that checks it makes sense to do so based upon the values of those properties.Īll in all this makes our modification a lot simpler as half the work is already done! I know that a few of you in the community who have looked at making a horizontal dock have found these properties. Now this isn't actually as nasty as it sounds because in a limited way the dock supports this! When I first wrote the dock I had in mind that one day I would have time to extend the dock to make it moveable, as such I wrote some basic support into it to allow the position and orientation to be switched. In our case we want to make the dock horizontal. It also published several events that we are able to listen to in order to make further modifications when certain things happen. The dock is pretty cool in that it looks for a specific JavaScript function when it loads and calls it if it exists, we can use this to modify the dock as we want. OK this is where the tutorial starts to enter the unknown. We have one stylesheet also called dockmod (theme/dockmod/style/dockmod.css), and we have one JavaScript file also called dockmod (theme/dockmod/javascript/dockmod.js) and of course its essential we enable the dock, otherwise there's no point in creating this modification. The parents for this new theme are standard and base as explained above. So pretty simple really, the name of our theme is dockmod, you already knew that! name = 'dockmod' $THEME -> sheets = array ( 'dockmod' ) $THEME -> parents = array ( 'standard', 'base' ) $THEME -> enable_dock = true $THEME -> javascripts = array ( 'dockmod' ) So open the config.php file in your favourite editor and type the following in: This has the advantage that our theme will only consist of the JS and CSS required to achieve the dock modification we want. The idea of this theme is to simply extend the standard theme and make the dock modification. In this step we will be setting up the config.php file for this theme, to be truthful there should be nothing new here for you, this is the easy part of the tutorial. Moodle/theme/dockmod/javascript/dockmod.js You should end up with the following files: dockmod.css will be created in the style directory, this file will contain the CSS we need in order to make the dock horizontal.dockmod.js will be created in the JavaScript directory, this file will contain the bit of JavaScript we need to write to get our modification to work.config.php is of course for our theme's configuration and as you know an essential for any theme.The next step is to create the three files we are going to need, config.php, dockmod.js, and dockmod.css. You should now have a directory structure like the one shown below: Within this new directory we'll create two further directories JavaScript, and style. So first step within your Moodle theme directory create a new directory called dockmod. In order to make this tutorial easier to understand I am going to create a new theme that we'll call dockmod in which we will create this modification. I'd also strongly suggest you read Styling and customising the dock which explains the structure of the dock and a few of the things you will need to know in order to tackle this tutorial. If you're new to Moodle and haven't yet read the tutorial on creating your first theme I strongly suggest you head there first.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |