close #8, prepare 0.17,1

blutorange · Jun 26, 2019 · f4b5276 · f4b5276
1 parent 0a64e8f
commit f4b5276
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,11 @@ See also [the changelog of monaco-editor](https://github.com/Microsoft/monaco-ed
 
 # 0.17.1
 
-- update to monaco editor 0.17.1
-- add transparent `getValue` / `setValue` to the widget API
-- The widget is now a `PrimeFaces.widget.DeferredWidget` so that it works better with 
-  tabs etc.
+- Update to monaco editor 0.17.1
+- Add transparent `getValue` / `setValue` methods to the widget API, see #7
+- Keep scrolling position during AJAX update, see #8
+- The widget is now a `PrimeFaces.widget.DeferredWidget`, so that it works better with 
+  `p:tabs` etc, see #6
 
 # 0.17.0
 

diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ Make sure you're running at least PrimeFaces 7.0. Include this as a dependency:
         <dependency>
             <groupId>com.github.blutorange</groupId>
             <artifactId>primefaces.monaco</artifactId>
-            <version>0.17.0</version>
+            <version>0.17.1</version>
         </dependency>
     </dependencies>
 

diff --git a/demo/src/main/java/TestBean.java b/demo/src/main/java/TestBean.java
@@ -1,6 +1,8 @@
 
 import com.github.blutorange.primefaces.config.monacoeditor.*;
 
+import org.apache.commons.lang3.StringUtils;
+
 import javax.annotation.PostConstruct;
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.ViewScoped;
@@ -16,6 +18,7 @@
 public class TestBean implements Serializable {
 
     private String code;
+    private String longCode;
     private String uiLanguage;
     private boolean rendered;
     private TheEnum theEnum;
@@ -26,6 +29,7 @@ private void init() {
         uiLanguage = "en";
         theEnum = TheEnum.Foo;
         code = "/**\n" + " * @param {number} x The first number.\n" + " * @param {number} y The second number.\n" + " * @return {number} The sum of the numbers\n" + " */\n" + "function testbar(x, y) {\n" + "\treturn x + y;\n" + "}\n" + "const z1 = testbar(5, 3);\n" + "const z2 = testbar(5, 3);\n" + "const z3 = testbar(5, 3);\n\n$(\".acc\").accordion(\"refresh\");";
+        longCode = StringUtils.repeat(code, 20);
         editorOptions = new EditorOptions()
                 .setLanguage(ELanguage.JAVASCRIPT)
                 .setTheme(ETheme.VS)
@@ -66,6 +70,14 @@ public void setCode(final String code) {
         this.code = code;
     }
 
+    public String getLongCode() {
+        return longCode;
+    }
+
+    public void setLongCode(final String longCode) {
+        this.longCode = longCode;
+    }
+
     public TheEnum getTheEnum() {
         return theEnum;
     }

diff --git a/demo/src/main/webapp/test5.xhtml b/demo/src/main/webapp/test5.xhtml
@@ -0,0 +1,31 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/jsf/core"
+	xmlns:blut="http://github.com/blutorange"
+	xmlns:xi="http://www.xima.de/taglib/xfc"
+	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
+	xmlns:c="http://java.sun.com/jsp/jstl/core"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	template="./template.xhtml">
+
+	<ui:define name="monaco">
+		<blut:monacoEditor widgetVar="monaco" id="monaco"
+			value="#{testBean.longCode}" width="100%" autoResize="true"
+			basename="simple.js" directory="blutorange/examples"
+			editorOptions="#{testBean.editorOptions}"
+			style="flex-grow: 1;flex-basis: 0" height="auto"
+			uiLanguage="#{testBean.uiLanguage}">
+		</blut:monacoEditor>
+	</ui:define>
+
+	<ui:define name="script">
+		<script>
+			window.testCase = function() {
+				log("Scroll down.");
+				log("Click on update.");
+				log("After the update, the scroll position should not have changed..");
+			};
+		</script>
+	</ui:define>
+</ui:composition>
diff --git a/demo/src/main/webapp/tests.xhtml b/demo/src/main/webapp/tests.xhtml
@@ -12,6 +12,7 @@
 		<li><p:link value="get/setValue" outcome="test2"></p:link></li>
 		<li><p:link value="events" outcome="test3"></p:link></li>
 		<li><p:link value="deferred" outcome="test4"></p:link></li>
+		<li><p:link value="update(scroll)" outcome="test5"></p:link></li>
 	</ul>
 
 </ui:composition>
diff --git a/src/main/java/com/github/blutorange/primefaces/util/Constants.java b/src/main/java/com/github/blutorange/primefaces/util/Constants.java
@@ -4,5 +4,5 @@ public final class Constants {
   private Constants() {}
 
   public final static String LIBRARY = "primefaces-blutorange";
-  public final static String VERSION = "0.17.0";
+  public final static String VERSION = "0.17.1";
 }
diff --git a/src/main/js/widget.js b/src/main/js/widget.js
@@ -240,13 +240,11 @@ const EditorDefaults = {
     editorOptions: {},
     extender: "",
     extension: "",
-    height: "",
     language: "plaintext",
     readonly: false,
     uiLanguage: "",
     uiLanguageUri: "",
     version: "1.0",
-    width: "",
 };
 
 // Make sure the monaco environment is set.
@@ -258,34 +256,28 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
      */
     constructor(...args) {
         super(...args);
-        /* super calls #init
-        this._editor = undefined;
-        this._editorContainer = $();
-        this._extenderInstance = undefined;
-        this._input = jQuery();
-        this._resizeObserver = undefined;
-        this._resolvedUiLanguageUri = "";
-        this.options = jQuery.extend({}, EditorDefaults);
-        */
     }
 
+    /**
+     * 
+     * @param {Partial<typeof EditorDefaults>} cfg 
+     */
     init(cfg) {
         super.init(cfg);
 
         // Set defaults.
+        /** @type {typeof EditorDefaults} */
         this.options = jQuery.extend({}, EditorDefaults, this.cfg);
 
         /** @type {{resolve: (widget: ExtMonacoEditor) => void, reject: (reason: any) => void}[]} */
         this._onDone = [];
         this.jq.data("initialized", false);
+        this.scrollTop = this.scrollTop || 0;
 
         // Get elements
         this._input = this.jq.find(".ui-helper-hidden-accessible textarea");
         this._editorContainer = this.jq.children(".ui-monaco-editor-ed");
 
-        // Remove any existing editor.
-        this.destroy();
-
         // Default to the given value
         this._editorValue = this.getInput().val();
 
@@ -305,6 +297,9 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
             };
         }
 
+        this.addRefreshListener(() => this.onRefresh());
+        this.addDestroyListener(() => this.onDestroy());
+
         // Begin loading the editor
         this._setup().then(() => {
             this._fireEvent("initialized");
@@ -384,7 +379,12 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
         }
     }
 
-    destroy() {
+    onRefresh() {
+        this.scrollTop = this.getMonaco().getScrollTop();
+        this.onDestroy();
+    }
+
+    onDestroy() {
         const extender = this._extenderInstance;
         const monaco = this.getMonaco();
         if (extender && typeof extender.beforeDestroy === "function") {
@@ -455,36 +455,23 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
         // Create a new editor instance.
         this._editor = monaco.editor.create(this.getEditorContainer().get(0), options);
 
-        // Evaluate the `afterCreate` callback of the extender.
-        if (typeof extender.afterCreate === "function") {
-            extender.afterCreate(this, wasLibLoaded);
+        // Restore scroll position (when ajax updating the editor)
+        if (typeof this.scrollTop === "number" && this.scrollTop > 0) {
+            this.getMonaco().setScrollTop(this.scrollTop);
         }
 
-        // Resize
+        // Auto resize
         if (this.options.autoResize) {
             if (typeof ResizeObserver === "function") {
                 this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
                 this._resizeObserver.observe(this.jq.get(0));
             }
             else {
-                console.warn("Browser environment does not support autoresize. window.ResizeObserver is not defined.");
+                console.warn("Browser environment does not support autoresize: window.ResizeObserver is not available.");
             }
         }
 
-        if (typeof extender.afterCreate === "function") {
-            extender.afterCreate(this, wasLibLoaded);
-        }
-
-        // Resize
-        if (this.options.autoResize) {
-            if (typeof ResizeObserver === "function") {
-                this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
-                this._resizeObserver.observe(this.jq.get(0));
-            }
-            else {
-                console.warn("Browser environment does not support autoresize. window.ResizeObserver is not defined.");
-            }
-        }
+        // Event handling
 
         // Change event.
         // Set the value of the editor on the hidden textarea.
@@ -507,6 +494,11 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
         this._editor.onKeyDown(keyboardEvent => this._fireEvent('keydown', keyboardEvent));
         this._editor.onKeyUp(keyboardEvent => this._fireEvent('keyup', keyboardEvent));
         this._editor.onDidType(key => this._fireEvent('keypress', key));
+
+        // After create callback
+        if (typeof extender.afterCreate === "function") {
+            extender.afterCreate(this, wasLibLoaded);
+        }
     }
 
     _onResize() {

diff --git a/src/npm/package-lock.json b/src/npm/package-lock.json