--- loncom/interface/loncommon.pm	2016/09/01 01:27:25	1.1075.2.111
+++ loncom/interface/loncommon.pm	2016/09/15 04:18:38	1.1075.2.112
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common routines
 #
-# $Id: loncommon.pm,v 1.1075.2.111 2016/09/01 01:27:25 raeburn Exp $
+# $Id: loncommon.pm,v 1.1075.2.112 2016/09/15 04:18:38 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1744,6 +1744,242 @@ RESIZE
 
 }
 
+sub colorfuleditor_js {
+    return <<"COLORFULEDIT"
+<script type="text/javascript">
+// <![CDATA[>
+    function fold_box(curDepth, lastresource){
+
+    // we need a list because there can be several blocks you need to fold in one tag
+        var block = document.getElementsByName('foldblock_'+curDepth);
+    // but there is only one folding button per tag
+        var foldbutton = document.getElementById('folding_btn_'+curDepth);
+
+        if(block.item(0).style.display == 'none'){
+
+            foldbutton.value = '@{[&mt("Hide")]}';
+            for (i = 0; i < block.length; i++){
+                block.item(i).style.display = '';
+            }
+        }else{
+
+            foldbutton.value = '@{[&mt("Show")]}';
+            for (i = 0; i < block.length; i++){
+                // block.item(i).style.visibility = 'collapse';
+                block.item(i).style.display = 'none';
+            }
+        };
+        saveState(lastresource);
+    }
+
+    function saveState (lastresource) {
+
+        var tag_list = getTagList();
+        if(tag_list != null){
+            var timestamp = new Date().getTime();
+            var key = lastresource;
+
+            // the value pattern is: 'time;key1,value1;key2,value2; ... '
+            // starting with timestamp
+            var value = timestamp+';';
+
+            // building the list of key-value pairs
+            for(var i = 0; i < tag_list.length; i++){
+                value += tag_list[i]+',';
+                value += document.getElementsByName(tag_list[i])[0].style.display+';';
+            }
+
+            // only iterate whole storage if nothing to override
+            if(localStorage.getItem(key) == null){
+
+                // prevent storage from growing large
+                if(localStorage.length > 50){
+                    var regex_getTimestamp = /^(?:\d)+;/;
+                    var oldest_timestamp = regex_getTimestamp.exec(localStorage.key(0));
+                    var oldest_key;
+
+                    for(var i = 1; i < localStorage.length; i++){
+                        if (regex_getTimestamp.exec(localStorage.key(i)) < oldest_timestamp) {
+                            oldest_key = localStorage.key(i);
+                            oldest_timestamp = regex_getTimestamp.exec(oldest_key);
+                        }
+                    }
+                    localStorage.removeItem(oldest_key);
+                }
+            }
+            localStorage.setItem(key,value);
+        }
+    }
+
+    // restore folding status of blocks (on page load)
+    function restoreState (lastresource) {
+        if(localStorage.getItem(lastresource) != null){
+            var key = lastresource;
+            var value = localStorage.getItem(key);
+            var regex_delTimestamp = /^\d+;/;
+
+            value.replace(regex_delTimestamp, '');
+
+            var valueArr = value.split(';');
+            var pairs;
+            var elements;
+            for (var i = 0; i < valueArr.length; i++){
+                pairs = valueArr[i].split(',');
+                elements = document.getElementsByName(pairs[0]);
+
+                for (var j = 0; j < elements.length; j++){
+                    elements[j].style.display = pairs[1];
+                    if (pairs[1] == "none"){
+                        var regex_id = /([_\\d]+)\$/;
+                        regex_id.exec(pairs[0]);
+                        document.getElementById("folding_btn"+RegExp.\$1).value = "Show";
+                    }
+                }
+            }
+        }
+    }
+
+    function getTagList () {
+
+        var stringToSearch = document.lonhomework.innerHTML;
+
+        var ret = new Array();
+        var regex_findBlock = /(foldblock_.*?)"/g;
+        var tag_list = stringToSearch.match(regex_findBlock);
+
+        if(tag_list != null){
+            for(var i = 0; i < tag_list.length; i++){
+                ret.push(tag_list[i].replace(/"/, ''));
+            }
+        }
+        return ret;
+    }
+
+    function saveScrollPosition (resource) {
+        var tag_list = getTagList();
+
+        // we dont always want to jump to the first block
+        // 170 is roughly above the "Problem Editing" header. we just want to save if the user scrolled down further than this
+        if(\$(window).scrollTop() > 170){
+            if(tag_list != null){
+                var result;
+                for(var i = 0; i < tag_list.length; i++){
+                    if(isElementInViewport(tag_list[i])){
+                        result += tag_list[i]+';';
+                    }
+                }
+                sessionStorage.setItem('anchor_'+resource, result);
+            }
+        } else {
+            // we dont need to save zero, just delete the item to leave everything tidy
+            sessionStorage.removeItem('anchor_'+resource);
+        }
+    }
+
+    function restoreScrollPosition(resource){
+
+        var elem = sessionStorage.getItem('anchor_'+resource);
+        if(elem != null){
+            var tag_list = elem.split(';');
+            var elem_list;
+
+            for(var i = 0; i < tag_list.length; i++){
+                elem_list = document.getElementsByName(tag_list[i]);
+
+                if(elem_list.length > 0){
+                    elem = elem_list[0];
+                    break;
+                }
+            }
+            elem.scrollIntoView();
+        }
+    }
+
+    function isElementInViewport(el) {
+
+        // change to last element instead of first
+        var elem = document.getElementsByName(el);
+        var rect = elem[0].getBoundingClientRect();
+
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+        );
+    }
+
+    function autosize(depth){
+        var cmInst = window['cm'+depth];
+        var fitsizeButton = document.getElementById('fitsize'+depth);
+
+        // is fixed size, switching to dynamic
+        if (sessionStorage.getItem("autosized_"+depth) == null) {
+            cmInst.setSize("","auto");
+            fitsizeButton.value = "@{[&mt('Fixed size')]}";
+            sessionStorage.setItem("autosized_"+depth, "yes");
+
+        // is dynamic size, switching to fixed
+        } else {
+            cmInst.setSize("","300px");
+            fitsizeButton.value = "@{[&mt('Dynamic size')]}";
+            sessionStorage.removeItem("autosized_"+depth);
+        }
+    }
+
+
+
+// ]]>
+</script>
+COLORFULEDIT
+}
+
+sub xmleditor_js {
+    return <<XMLEDIT
+<script type="text/javascript" src="/adm/jQuery/addons/jquery-scrolltofixed.js"></script>
+<script type="text/javascript">
+// <![CDATA[>
+
+    function saveScrollPosition (resource) {
+
+        var scrollPos = \$(window).scrollTop();
+        sessionStorage.setItem(resource,scrollPos);
+    }
+
+    function restoreScrollPosition(resource){
+
+        var scrollPos = sessionStorage.getItem(resource);
+        \$(window).scrollTop(scrollPos);
+    }
+
+    // unless internet explorer
+    if (!(window.navigator.appName == "Microsoft Internet Explorer" && (document.documentMode || document.compatMode))){
+
+        \$(document).ready(function() {
+             \$(".LC_edit_actionbar").scrollToFixed(\{zIndex: 100\});
+        });
+    }
+
+    // inserts text at cursor position into codemirror (xml editor only)
+    function insertText(text){
+        cm.focus();
+        var curPos = cm.getCursor();
+        cm.replaceRange(text.replace(/ESCAPEDSCRIPT/g,'script'), {line: curPos.line,ch: curPos.ch});
+    }
+// ]]>
+</script>
+XMLEDIT
+}
+
+sub insert_folding_button {
+    my $curDepth = $Apache::lonxml::curdepth;
+    my $lastresource = $env{'request.ambiguous'};
+
+    return "<input type=\"button\" id=\"folding_btn_$curDepth\"
+            value=\"".&mt('Hide')."\" onclick=\"fold_box('$curDepth','$lastresource')\">";
+}
+
+
 =pod
 
 =head1 Excel and CSV file utility routines
@@ -6593,7 +6829,7 @@ div.LC_edit_problem_footer,
 div.LC_edit_problem_footer div,
 div.LC_edit_problem_editxml_header,
 div.LC_edit_problem_editxml_header div {
-  margin-top: 5px;
+  z-index: 100;
 }
 
 div.LC_edit_problem_header_title {
@@ -6609,14 +6845,17 @@ table.LC_edit_problem_header_title {
   background: $tabbg;
 }
 
-div.LC_edit_problem_discards {
-  float: left;
-  padding-bottom: 5px;
+div.LC_edit_actionbar {
+    background-color: $sidebg;
+    margin: 0;
+    padding: 0;
+    line-height: 200%;
 }
 
-div.LC_edit_problem_saves {
-  float: right;
-  padding-bottom: 5px;
+div.LC_edit_actionbar div{
+    padding: 0;
+    margin: 0;
+    display: inline-block;
 }
 
 .LC_edit_opt {
@@ -6632,6 +6871,10 @@ div.LC_edit_problem_saves {
     margin-left: 40px;
 }
 
+#LC_edit_problem_codemirror div{
+    margin-left: 0px;
+}
+
 img.stift {
   border-width: 0;
   vertical-align: middle;
@@ -6762,23 +7005,48 @@ ol.LC_primary_menu li {
   vertical-align: middle;
   text-align: left;
   list-style: none;
+  position: relative;
   float: left;
+  z-index: 100; /* will be displayed above codemirror and underneath the help-layer */
+  line-height: 1.5em;
 }
 
-ol.LC_primary_menu li a {
+ol.LC_primary_menu li a 
+ol.LC_primary_menu li p {
   display: block;
   margin: 0;
   padding: 0 5px 0 10px;
   text-decoration: none;
 }
 
-ol.LC_primary_menu li ul {
+ol.LC_primary_menu li p span.LC_primary_menu_innertitle {
+  display: inline-block;
+  width: 95%;
+  text-align: left;
+}
+
+ol.LC_primary_menu li p span.LC_primary_menu_innerarrow {
+  display: inline-block;
+  width: 5%;
+  float: right;
+  text-align: right;
+  font-size: 70%;
+}
+
+ol.LC_primary_menu ul {
   display: none;
-  width: 10em;
+  width: 15em;
   background-color: $data_table_light;
+  position: absolute;
+  top: 100%;
+}
+
+ol.LC_primary_menu ul ul {
+  left: 100%;
+  top: 0;
 }
 
-ol.LC_primary_menu li:hover ul, ol.LC_primary_menu li.hover ul {
+ol.LC_primary_menu li:hover > ul, ol.LC_primary_menu li.hover > ul {
   display: block;
   position: absolute;
   margin: 0;
@@ -6787,15 +7055,21 @@ ol.LC_primary_menu li:hover ul, ol.LC_pr
 }
 
 ol.LC_primary_menu li:hover li, ol.LC_primary_menu li.hover li {
+/* First Submenu -> size should be smaller than the menu title of the whole menu */
   font-size: 90%;
   vertical-align: top;
   float: none;
   border-left: 1px solid black;
   border-right: 1px solid black;
+/* A dark bottom border to visualize different menu options;
+overwritten in the create_submenu routine for the last border-bottom of the menu */
+  border-bottom: 1px solid $data_table_dark;
 }
 
-ol.LC_primary_menu li:hover li a, ol.LC_primary_menu li.hover li a {
-  background-color:$data_table_light;
+ol.LC_primary_menu li li p:hover {
+  color:$button_hover;
+  text-decoration:none;
+  background-color:$data_table_dark;
 }
 
 ol.LC_primary_menu li li a:hover {
@@ -6803,6 +7077,11 @@ ol.LC_primary_menu li li a:hover {
    background-color:$data_table_dark;
 }
 
+/* Font-size equal to the size of the predecessors*/
+ol.LC_primary_menu li:hover li li {
+  font-size: 100%;
+}
+
 ol.LC_primary_menu li img {
   vertical-align: bottom;
   height: 1.1em;