MDL-34353 Javascript: Allow chooser dialogues to fall back to non-JS …

…version

In order for a chooser dialogue to be able to fall back to it's non-JS
equivalent, we need to use a different set of styles.

This change makes the chooser dialogue preparation function add a new class
to the body which is utilised in the CSS to accomplish this. When the class
is not present, the dialogue content is displayed inline.

lib/yui/build/moodle-core-chooserdialogue/moodle-core-chooserdialogue-debug.js

@@ -35,6 +35,9 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
             return;
         }
 
+        // Ensure that we're showing the JS version of the chooser.
+        Y.one(Y.config.doc.body).addClass('jschooser');
+
         // Set Default options
         var paramkey,
             params = {

lib/yui/build/moodle-core-chooserdialogue/moodle-core-chooserdialogue.js

@@ -35,6 +35,9 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
             return;
         }
 
+        // Ensure that we're showing the JS version of the chooser.
+        Y.one(Y.config.doc.body).addClass('jschooser');
+
         // Set Default options
         var paramkey,
             params = {

lib/yui/src/chooserdialogue/js/chooserdialogue.js

@@ -33,6 +33,9 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
             return;
         }
 
+        // Ensure that we're showing the JS version of the chooser.
+        Y.one(Y.config.doc.body).addClass('jschooser');
+
         // Set Default options
         var paramkey,
             params = {

theme/base/style/core.css

@@ -1241,15 +1241,15 @@ sup {vertical-align: super;}
 }
 
 /* Only set these options if we're showing the js container */
-.jsenabled .choosercontainer #chooseform .alloptions {
+.jschooser .choosercontainer #chooseform .alloptions {
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 20.3em;
     box-shadow: inset 0px 0px 30px 0px #CCCCCC;
     -webkit-box-shadow: inset 0px 0px 30px 0px #CCCCCC;
     -moz-box-shadow: inset 0px 0px 30px 0px #CCCCCC;
 }
-.dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
+.dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
     max-width: 18.3em;
 }
 
@@ -1323,8 +1323,8 @@ sup {vertical-align: super;}
 }
 
 /* The instruction/help area */
-.jsenabled .choosercontainer #chooseform .instruction,
-.jsenabled .choosercontainer #chooseform .typesummary {
+.jschooser .choosercontainer #chooseform .instruction,
+.jschooser .choosercontainer #chooseform .typesummary {
     display: none;
     position: absolute;
     top: 0px;
@@ -1339,15 +1339,15 @@ sup {vertical-align: super;}
     line-height: 2em;
 }
 
-.dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
-.dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
+.dir-rtl.jschooser .choosercontainer #chooseform .instruction,
+.dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
     left: 0px;
     right: 18.5em;
     border-right: 1px solid grey;
 }
 
 /* Selected option settings */
-.jsenabled .choosercontainer #chooseform .instruction,
+.jschooser .choosercontainer #chooseform .instruction,
 .choosercontainer #chooseform .selected .typesummary {
     display: block;
 }

theme/bootstrapbase/less/moodle/core.less

@@ -1693,13 +1693,13 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     border-bottom: 1px solid #BBBBBB;
 }
 /* Only set these options if we're showing the js container */
-.jsenabled .choosercontainer #chooseform .alloptions {
+.jschooser .choosercontainer #chooseform .alloptions {
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 20.3em;
     .box-shadow(inset 0 0 30px 0px #ccc);
 }
-.dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
+.dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
     max-width: 18.3em;
 }
 /* Settings for option rows and option subtypes */
@@ -1764,8 +1764,8 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     margin: 0 0.2em 0 0;
 }
 /* The instruction/help area */
-.jsenabled .choosercontainer #chooseform .instruction,
-.jsenabled .choosercontainer #chooseform .typesummary {
+.jschooser .choosercontainer #chooseform .instruction,
+.jschooser .choosercontainer #chooseform .typesummary {
    display: none;
     position: absolute;
     top: 0;
@@ -1779,14 +1779,14 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     overflow-y: auto;
     line-height: 2em;
 }
-.dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
-.dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
+.dir-rtl.jschooser .choosercontainer #chooseform .instruction,
+.dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
     left: 0;
     right: 18.5em;
     border-right: 1px solid grey;
 }
 /* Selected option settings */
-.jsenabled .choosercontainer #chooseform .instruction,
+.jschooser .choosercontainer #chooseform .instruction,
 .choosercontainer #chooseform .selected .typesummary {
     display: block;
 }