YUI headaches

YUI headaches

by Carl LeBlond -
Number of replies: 1

I'm using moodle 2.6 and I can't seem to get this YUI script to work.   It complains with ReferenceError: ChemDoodle is not defined.

<script type='text/javascript'> 
            YUI().applyConfig({
                modules: { 
             'weblibs': { 
                        fullpath: M.cfg.wwwroot + '/question/type/easyoname/yui/chemdoodle/ChemDoodleWeb-libs.js' 
            },  
                   'web': { 
               fullpath: M.cfg.wwwroot + '/question/type/easyoname/yui/chemdoodle/ChemDoodleWeb.js' 
            }, 
                    'jquery': { 
                        fullpath: M.cfg.wwwroot + '/question/type/easyoname/yui/jquery-1.8.2/jquery-ui-1.8.7.custom.min.js' 
            }, 
                    'sketcher2': { 
                        fullpath: M.cfg.wwwroot + '/question/type/easyoname/yui/chemdoodle/sketcher/ChemDoodleWeb-sketcher.js' 
            }, 
                } 
            }); 
            </script>
 
 
<script type='text/javascript'> 
    YUI().use('sketcher2','weblibs', 'web', 'jquery', 'node-base', function (Y) { 

        Y.on('load', function () {
         var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300, '/resources/images/icons/', ChemDoodle.featureDetection.supports_touch(), true); 
          sketcher.specs.atoms_displayTerminalCarbonLabels_2D = true; 
          sketcher.specs.atoms_useJMOLColors = true; 
          sketcher.specs.bonds_clearOverlaps_2D = true; 
          sketcher.specs.bonds_overlapClearWidth_2D = 2; 
          sketcher.repaint(); 
        }); 
    }); 
    </script>
Average of ratings: -
In reply to Carl LeBlond

Re: YUI headaches

by Darko Miletić -

Few things:

You should use jquery included in Moodle core. See http://docs.moodle.org/dev/jQuery for details on how to do that.

That document also states:

Can I use YUI loader to include jQuery? No. Moodle jQuery support is not compatible with sandboxing.

 

Now this is how your page should look like:

<?php
require_once('path/to/config.php');

global $PAGE, $ME, $OUTPUT;

require_login();

$PAGE->set_url($ME);
$PAGE->set_context(context_system::instance());
$PAGE->set_title('Some title');
$PAGE->set_heading('Some Heading');

// Base JS dependencies.
$PAGE->requires->jquery();
$PAGE->requires->js('/question/type/easyoname/yui/chemdoodle/ChemDoodleWeb-libs.js', true);
$PAGE->requires->js('/question/type/easyoname/yui/chemdoodle/ChemDoodleWeb.js', true);
$PAGE->requires->js('/question/type/easyoname/yui/chemdoodle/sketcher/ChemDoodleWeb-sketcher.js', true);

// Your module code that must be located in /question/type/easyoname/yui/chemdoodle/chemdoodle.js .
$PAGE->requires->yui_module('moodle-qtype_easyoname-chemdoodle',
    'M.qtype_easyoname.chemdoodle.init',
    null,
    null,
    true
);

echo $OUTPUT->header();

// Your stuff here.

echo $OUTPUT->footer();

And this is the base content of chemdoodle.js

YUI.add('moodle-qtype_easyone-chemdoodle', function(Y) {

        M.qtype_easyone = M.qtype_easyone || {};

        M.qtype_easyone.chemdoodle = {
            init: function() {
                // Place your code here.
            } // end init
        }; // end module

    }, '@VERSION@', {requires: ['node', 'console']}
);
Average of ratings: -