align get/set of "line-wrap"

with new preferences
Edirom · Aug 5, 2022 · f1d9a71 · f1d9a71
1 parent 02910cc
commit f1d9a71
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 64 deletions.
diff --git a/modules/app.xqm b/modules/app.xqm
@@ -140,18 +140,10 @@ declare
  : get and set line-wrap variable
  : (whether a user prefers code examples with or without wrapped lines)
  :)
-declare 
-    %templates:wrap
-    function app:line-wrap($node as node(), $model as map(*)) as map(*)? {
-        map {
-            'line-wrap' : config:line-wrap()
-        }
-};
-
 declare function app:set-line-wrap($node as node(), $model as map(*)) as element() {
     element {node-name($node)} {
-        if($model('line-wrap')) then ( 
-            $node/@*[not(name(.)='class')],
+        if(wega-util-shared:semantic-boolean($model?settings?('line-wrap'))) then ( 
+            $node/@* except $node/@class,
             attribute class {string-join(($node/@class, 'line-wrap'), ' ')}
         )
         else $node/@*,
@@ -1950,7 +1942,7 @@ declare function app:inject-api-base($node as node(), $model as map(*))  {
  : depending on the `$model?settings` property which is injected 
  : in view-html.xql.
  :)
-declare function app:init-marker-switch($node as node(), $model as map(*)) as element(xhtml:input) {
+declare function app:init-custom-switch($node as node(), $model as map(*)) as element(xhtml:input) {
     element {node-name($node)} {
         $node/@* except $node/@checked,
         if(wega-util-shared:semantic-boolean($model?settings($node/@id))) 

diff --git a/modules/config.xqm b/modules/config.xqm
@@ -501,22 +501,6 @@ declare function config:entries-per-page() as xs:int {
         else (10, config:log('error', 'Failed to get default "entriesPerPage" from options file. Falling back to "10"!'))
 };
 
-(:~
- : get (from URL parameter, or session, or options file) and set (to the session) the line wrap preference of the user
-~:)
-declare function config:line-wrap() as xs:boolean {
-    let $urlParam := if(request:exists()) then request:get-parameter('line-wrap', ()) else ()
-    let $sessionParam := if(session:exists()) then session:get-attribute('line-wrap') else ()
-    let $default-option := true() (:config:get-option('line-wrap'):)
-    return
-        if($urlParam) then 
-            if($urlParam = ('true', '1', 'yes')) then (true(), session:set-attribute('line-wrap', true()))
-            else (false(), session:set-attribute('line-wrap', false()))
-        else if($sessionParam instance of xs:boolean) then $sessionParam
-        else if($default-option instance of xs:boolean) then $default-option
-        else (true(), config:log('error', 'Failed to get default "line-wrap" from options file. Falling back to "true"!'))
-};
-
 (:~
  : Set user preferences and save to the current session
  :

diff --git a/resources/js/init.js b/resources/js/init.js
@@ -663,32 +663,6 @@ $(window).on("load", function () {
 });
 
 
-/* 
- * Toggle line wrap for XML preview 
- */
-function init_line_wrap_toggle() {
-    var pre = $('.line-wrap-toggle ~ pre'),
-        input = $('.line-wrap-toggle input'),
-        url = $('.allFilter .nav-tabs .loaded').attr('data-tab-url');
-
-    // set toggle on load 
-    if(pre.hasClass('line-wrap')) {
-        input.attr('checked', 'checked')
-    }
-    else {
-        input.removeAttr('checked');
-    }
-
-    // set listener for toggle
-    input.change(
-        function(a,b) {
-            pre.toggleClass('line-wrap');
-            // update session
-            $.get(url + '?line-wrap=' + pre.hasClass('line-wrap'));
-        }
-    )
-};
-
 /* 
  * Helper function
  * Get active facets to append as URL parameters 

diff --git a/templates/ajax/xml.html b/templates/ajax/xml.html
@@ -1,12 +1,43 @@
-<div xmlns="http://www.w3.org/1999/xhtml" data-template="app:line-wrap">
+<div xmlns="http://www.w3.org/1999/xhtml">
     <h2 data-template="lang:translate">XML-Preview</h2>
     <div class="custom-control custom-switch line-wrap-toggle">
-        <input class="custom-control-input" type="checkbox" id="linewrap-switch" checked="checked"/>
-        <label class="custom-control-label" for="linewrap-switch"><span data-template="lang:translate">linewrap</span> </label>
+        <input class="custom-control-input" type="checkbox" id="line-wrap" checked="checked" data-template="app:init-custom-switch"/>
+        <label class="custom-control-label" for="line-wrap"><span data-template="lang:translate">linewrap</span> </label>
     </div>
     <pre class="prettyprint" data-template="app:set-line-wrap"><code class="language-xml" data-template="app:xml-prettify"><![CDATA[<element xmlns="http://bla.org"><foo>some text</foo></element>]]></code></pre>
     <script type="text/javascript">
-        prettyPrint();
-        init_line_wrap_toggle();
+        function defer(method) {
+            if (window.jQuery) {
+                method();
+            } else {
+                setTimeout(function() { defer(method) }, 50);
+            }
+        }
+
+        function init_line_wrap_toggle() {
+            let pre = $('.line-wrap-toggle ~ pre'),
+                input = $('.line-wrap-toggle input'),
+                endpoint_url = $('#settings').attr('data-api-base') + '/application/preferences';
+
+            // set listener for toggle
+            input.change(
+                function(a,b) {
+                    pre.toggleClass('line-wrap');
+                    // update session
+                    data = { [this.getAttribute('id')]: this.checked };
+                    fetch(endpoint_url, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(data),
+                    });
+                }
+            )
+            prettyPrint();
+        }
+
+        defer(init_line_wrap_toggle);
     </script>
-</div>
+</div>
diff --git a/templates/includes/settings.html b/templates/includes/settings.html
@@ -5,23 +5,23 @@ <h2>
     <div id="settings" class="panel-collapse collapse" data-template="app:inject-api-base">
         <p data-template="lang:translate">show_markers_paragraph</p>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="rdg-marker" checked="checked" data-toggle-class=".noteMarker:contains('Δ')" data-template="app:init-marker-switch"/>
+            <input class="custom-control-input" type="checkbox" id="rdg-marker" checked="checked" data-toggle-class=".noteMarker:contains('Δ')" data-template="app:init-custom-switch"/>
             <label class="custom-control-label" for="rdg-marker"><span data-template="lang:translate">appRdgs</span> Δ</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="textConst-marker" checked="checked" data-toggle-class=".noteMarker:contains('‡')" data-template="app:init-marker-switch"/>
+            <input class="custom-control-input" type="checkbox" id="textConst-marker" checked="checked" data-toggle-class=".noteMarker:contains('‡')" data-template="app:init-custom-switch"/>
             <label class="custom-control-label" for="textConst-marker"><span data-template="lang:translate">textConstitution</span> ‡</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="supplied-marker" checked="checked" data-toggle-class=".tei_supplied" data-template="app:init-marker-switch"/>
+            <input class="custom-control-input" type="checkbox" id="supplied-marker" checked="checked" data-toggle-class=".tei_supplied" data-template="app:init-custom-switch"/>
             <label class="custom-control-label" for="supplied-marker"><span data-template="lang:translate">supplied-marker</span> [&#x2009;]</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="note-marker" checked="checked" data-toggle-class=".noteMarker:contains('*')" data-template="app:init-marker-switch"/>
+            <input class="custom-control-input" type="checkbox" id="note-marker" checked="checked" data-toggle-class=".noteMarker:contains('*')" data-template="app:init-custom-switch"/>
             <label class="custom-control-label" for="note-marker"><span data-template="lang:translate">note_commentary</span> *</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="thematicCommentaries-marker" checked="checked" data-toggle-class=".noteMarker:contains('T')" data-template="app:init-marker-switch"/>
+            <input class="custom-control-input" type="checkbox" id="thematicCommentaries-marker" checked="checked" data-toggle-class=".noteMarker:contains('T')" data-template="app:init-custom-switch"/>
             <label class="custom-control-label" for="thematicCommentaries-marker"><span data-template="lang:translate">thematicCommentaries</span> T</label>
         </div>
     </div>