suggestion about jquery resource

Hi, you provide the resource jquery-1.9.1.min.js. May I suggest that you also provide a symlink to it, jquery.min.js, as part of the package? The reason is that if you update the version of jquery that you provide, then we have to update all our code as well. Of course, we can always put the symlink in ourselves, but it would be easier if you just provide it as part of the package.

Our examples demonstrates how Marvin JS can corporate with 1.9.1 version of JQuery API.  There is no guaranty that the current version of the example works seamless with any JQuery versions. So, it is very important to distinguish which JQuery version is used in current examples.

Because of it, we do not plan to bundle a jquery.min.js file in our package.

The core Marvin JS does not need JQuery. Only the examples require the JQuery API. It is the only reason that jquery-1.9.1.min.js is bundled to the Marvin JS package.

If you integrate Marvin JS with the help of JQuery API, you can consider which JQuery version you prefer and how you load it.

Hmm. Following your instructions, I have lines such as the following in my code:

 $(document).ready(function handleDocumentReady(e) {

     getMarvinPromise('#' + appletName).done(function (sketcherInstance) {

         marvinSketcherInstance = sketcherInstance;

         if (!isEmpty(mol)) marvinSketcherInstance.importStructure(null, mol);

     }).fail(function () {

         alert('Cannot retrieve sketcher instance from iframe.');

     });

 });

If I am not mistaken, the first line is JQuery code, is it not? So if JQuery is not needed to run MarvinJS, how would I rewrite this code without JQuery?

And here's another question. Right now, you bundle jquery-1.9.1-min.js with MarvinJS, and this version of JQuery works with MarvinJS examples. Can you envision a situation where you will bundle a version of JQuery that does not work with MarvinJS examples? If not, why not also bundle a symlink, jquery.min.js, that currently points to jquery-1.9.1-min.js, but in the future you can change to point to whatever version of JQuery that you happen to be bundling with MarvinJS? Again, the point is that if you decide to change the version of JQuery that you bundle, and you don't have the generically named symlink, then we have to update all our code to point to the new JQuery version. 

Hi Bob,

Indeed, the code sniplet that you cited requires JQuery API.

Despite of it, our current examples are written in JQuery, it does not mean that JQuery is essential for Marvin JS integration.

If you take a look at our developers guide, you can also see examples how you can embed Marvin JS into pure JavaScript code.

https://marvinjs-demo.chemaxon.com/latest/docs/dev/embed.html

In the future, we would like extending our developers guide to give examples how you can integrate Marvin JS into other JavaScript frameworks.

I can imagine that we write further examples in the future that require another JQuery version.

We do not like version independent dependencies. Later, it is hard to figure out for which version of JQuery is verified your code.

Of course, I do not want to convince you which JQuery library you prefer.

See our examples as proposals. They flash only a way as you can use our API.

OK, I looked at that page, and I am confused. Under what circumstances would I use MarvinJSUtil.getEditor(), and under what circumstances would I use MarvinJSUtil.getPackage()? What is the difference between the sketcher and the package? Finally, do both MarvinJSUtil methods already wait until the document is loaded before executing, so I don't need to add code such as:

document.getElementById("sketch").addEventListener("load", function() {

or:

$(document).ready(function handleDocumentReady(e) {

if I use MarvinJSUtil.getEditor() or MarvinJSUtil.getPackage()?

Be sure to refer either methods (MarvinJSUtil.getEditor or MarvinJSUtil.getPackage), after the iframe of the sketcher is in the DOM. That's why we recommend to call it after the host page is loaded.

In most cases, MarvinJSUtil.getEditor is the best choice. It gives a direct reference to the sketcher instance.

MarvinJSUtil.getPackage is needed when you would like to use the ImageExporter object to render an image without the editor.

In this example, you can see the usage of MarvinJSUtil.getPackage:

https://marvinjs-demo.chemaxon.com/latest/examples/example-edit-images.html

In another example, both methods are used:

https://marvinjs-demo.chemaxon.com/latest/examples/example-edit-images.html

Thanks for your help. I have written the two following sets of code; both use Promise objects, but one uses JQuery and one does not. Common to both:

function startMarvinJS(mol, qTypeRaw, qFlags, appletName) {

    var qTypeNeg = qTypeRaw < 0;

    var qType = Math.abs(qTypeRaw);

    var isMechanism = qType === MECHANISM;

    var isSynthesis = qType === SYNTHESIS;

    var panelWidth = 450;

    var panelHeight = (['responseApplet', 'synthAuthApplet',

            'hybridMarvin', 'pKaMarvin', 'targetapplet', 'queryapplet',

            'evalApplet'].contains(appletName) ? 400 : 350);

    if (((isMechanism || isSynthesis) && !qTypeNeg) ||

            (!isMechanism && !isSynthesis && qTypeNeg)) {

        panelWidth = 500;

        panelHeight = (appletName === 'responseApplet' ? 530 : 500);

    } // how big to make canvas



    // use of editorws.html in following line makes it possible to use 

    // JChem Web Services

    var bld = new String.builder().

            append('<iframe id="').append(appletName).

            append('" class="sketcher-frame" ' +

                'src="\/nosession\/marvinJS\/editorws.html" ');

    if (is3D(qFlags)) {

        bld.append('data-templateurl="templates\/3DTemplates.mrv" ');

    } // if is3D

    bld.append('style="min-width:').append(panelWidth).

            append('px; min-height:').append(panelHeight).

            append('px; overflow:hidden; border:1px solid darkgray;" \/><\/iframe>');

    var iframe = bld.toString();

    setInnerHTML(appletName + 'Cell', iframe);

    setMarvinJS(mol, appletName, qFlags);

} // startMarvinJS()

With JQuery, setMarvinJS() is:

function setMarvinJS(mol, appletName, qFlags) {

    $(document).ready(function handleDocumentReady(e) {

        getMarvinPromise('#' + appletName).done(function (sketcherInstance) {

            marvinSketcherInstance = sketcherInstance;

            if (qFlags >= 0) {

                marvinSketcherInstance.setDisplaySettings({

                        'toolbars': 'reporting',

                        'copyasmrv': true,

                        'carbonLabelVisible': allCVisible(qFlags),

                        'implicitHydrogen': getHVisibilityJS(qFlags),

                        'valenceErrorVisible': valenceErrorVisible(qFlags),

                        'atomIndicesVisible': appletName === 'hybridMarvin',

                        'lonePairsVisible': lonePairsVisible(qFlags),

                        'atomMapsVisible': atomMapsVisible(qFlags),

                        'chiralFlagVisible': true,

                        'cpkColoring': true

                        });

            } // if qFlags

            if (!isEmpty(mol)) marvinSketcherInstance.importStructure(null, mol);

            if (loadSelections) loadSelections();

    }).fail(function () {

            alert('Cannot retrieve sketcher instance from iframe.');

        });

    });

} // setMarvinJS()

Without JQuery, setMarvinJS() is:

function setMarvinJS(mol, appletName, qFlags) {

    // wait until the iframe (id = appletName) is loaded

    document.getElementById(appletName).addEventListener('load', function() {

        // wait until the MarvinJS editor (id = #appletName) is loaded

        MarvinJSUtil.getEditor('#' + appletName).then(function(sketcherInstance) {

            marvinSketcherInstance = sketcherInstance;

            if (qFlags >= 0) {

                marvinSketcherInstance.setDisplaySettings({ 

                        'toolbars': 'reporting',

                        'copyasmrv': true,

                        'carbonLabelVisible': allCVisible(qFlags),

                        'implicitHydrogen': getHVisibilityJS(qFlags),

                        'valenceErrorVisible': valenceErrorVisible(qFlags),

                        'atomIndicesVisible': appletName === 'hybridMarvin',

                        'lonePairsVisible': lonePairsVisible(qFlags),

                        'atomMapsVisible': atomMapsVisible(qFlags),

                        'chiralFlagVisible': true,

                        'cpkColoring': true

                        });

            } // if qFlags

            if (!isEmpty(mol)) marvinSketcherInstance.importStructure(null, mol);

            if (loadSelections) loadSelections();

        }, function(error) {

            alert('Loading of the sketcher failed: ' + error);

        }); // getEditor()

    }); // addEventListener()

} // setMarvinJS()

With the code that does not use JQuery, the requested toolbar is not loaded; see screen shots. I note that the requested toolbar also fails to load when I specify the toolbar in the iframe tag instead of using setDisplaySettings(). ???

Thank you very much for these example codes. They are highlighting this issue.

Best regards,

Efi

Hi Bob,

I have created a standalone example from your non-JQuery exampe that use only pure JS functions. Please, see the attached code.

It works fine for me.The proper toolbars display as I expected.

I isolated the problem and started a new post.

Thank you,

Efi