You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2019/08/08 12:26:40 UTC
[myfaces-tobago] branch master updated: scrolling: refactor (WIP)
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 7c4cdc5 scrolling: refactor (WIP)
7c4cdc5 is described below
commit 7c4cdc5f89359e93656dd902be5bf0dfc542740a
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Thu Aug 8 14:22:15 2019 +0200
scrolling: refactor (WIP)
issue: TOBAGO-1633: TS refactoring
---
.../src/main/npm/package.json | 2 +-
.../src/main/npm/ts/tobago-all.ts | 1 +
.../src/main/npm/ts/tobago-core.ts | 39 -----------------
.../src/main/npm/ts/tobago-scroll.ts | 51 ++++++++++++++++++++++
.../src/main/resources/META-INF/tobago-config.xml | 1 +
5 files changed, 54 insertions(+), 40 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/package.json b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
index fe0d72b..4077fcf 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/package.json
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
@@ -24,7 +24,7 @@
"css-prefix": "postcss --config postcss.config.js --replace \"css/*.css\" \"!css/*.min.css\"",
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output css/tobago.min.css css/tobago.css",
"ts-compile": "tsc",
- "js-minify": "uglifyjs --compress typeofs=false,drop_console=true --mangle --source-map includeSources --output js/tobago.min.js js/tobago-myfaces.js js/tobago-deltaspike.js js/tobago-polyfill.js js/tobago-listener.js js/tobago-core.js js/tobago-dropdown.js js/tobago-calendar.js js/tobago-command.js js/tobago-file.js js/tobago-focus.js js/tobago-header-footer.js js/tobago-in.js js/tobago-jsf.js js/tobago-overlay.js js/tobago-panel.js js/tobago-popover.js js/tobago-popup.js js/tobago- [...]
+ "js-minify": "uglifyjs --compress typeofs=false,drop_console=true --mangle --source-map includeSources --output js/tobago.min.js js/tobago-myfaces.js js/tobago-deltaspike.js js/tobago-polyfill.js js/tobago-listener.js js/tobago-core.js js/tobago-dropdown.js js/tobago-calendar.js js/tobago-command.js js/tobago-file.js js/tobago-focus.js js/tobago-header-footer.js js/tobago-in.js js/tobago-jsf.js js/tobago-overlay.js js/tobago-panel.js js/tobago-popover.js js/tobago-popup.js js/tobago- [...]
"test": "jest"
},
"devDependencies": {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index 1813a8f..6d7a304 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -30,6 +30,7 @@ import "./tobago-panel";
import "./tobago-popover";
import "./tobago-popup";
import "./tobago-reload";
+import "./tobago-scroll";
import "./tobago-select-boolean-checkbox";
import "./tobago-select-boolean-toggle";
import "./tobago-select-many-checkbox";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-core.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-core.ts
index 7c9d6fa..b664e9e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-core.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-core.ts
@@ -95,39 +95,6 @@ export class Tobago4 {
Listener.executeBeforeExit();
}
};
-
- static initDom = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-
- Tobago4.initScrollPosition(elements ? elements : jQuery(".tobago-page"));
- };
-
- static initScrollPosition = function (elements) {
- var scrollPanels;
- if (elements.data("tobago-scroll-panel")) {
- scrollPanels = elements;
- } else {
- scrollPanels = elements.find("[data-tobago-scroll-panel]");
- }
- scrollPanels.on("scroll", function () {
- var panel = jQuery(this);
- var scrollLeft = panel.prop("scrollLeft");
- var scrollTop = panel.prop("scrollTop");
- // store the position in a hidden field
- panel.children("[data-tobago-scroll-position]").val(scrollLeft + ";" + scrollTop);
- });
- scrollPanels.each(function () {
- var panel = jQuery(this);
- const position: string = panel.children("[data-tobago-scroll-position]").val() as string;
- var sep = position.indexOf(";");
- if (sep !== -1) {
- var scrollLeft = position.substr(0, sep);
- var scrollTop = position.substr(sep + 1);
- panel.prop("scrollLeft", scrollLeft);
- panel.prop("scrollTop", scrollTop);
- }
- });
- };
}
document.addEventListener('DOMContentLoaded', function () {
@@ -137,9 +104,3 @@ document.addEventListener('DOMContentLoaded', function () {
window.addEventListener("load", function () {
Listener.executeWindowLoad();
});
-
-// using Tobago.Order.LATE, because the command event generated by data-tobago-commands
-// may produce a submit, but we need to do something before the submit (and also on click,
-// e. g. selectOne in a toolBar).
-Listener.register(Tobago4.initDom, Phase.DOCUMENT_READY, Order.LATER);
-Listener.register(Tobago4.initDom, Phase.AFTER_UPDATE, Order.LATER);
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-scroll.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-scroll.ts
new file mode 100644
index 0000000..974f68e
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-scroll.ts
@@ -0,0 +1,51 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Listener, Phase, Order} from "./tobago-listener";
+import {Overlay} from "./tobago-overlay";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
+import {Command} from "./tobago-command";
+
+class Scroll {
+
+ static initScrollPosition = function (element: HTMLElement) {
+ for (const panel of DomUtils.selfOrQuerySelectorAll(element, "[data-tobago-scroll-panel]")) {
+
+ const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]") as HTMLInputElement;
+ const values: number[] = JSON.parse(hidden.value);
+ if (values.length === 2) {
+ panel.scrollLeft = values[0];
+ panel.scrollTop = values[1];
+ } else {
+ console.warn("Wrong syntax for scroll: " + hidden.value);
+ }
+
+ panel.addEventListener("scroll", Scroll.scroll);
+ }
+ };
+
+ static scroll = function (event: Event) {
+ const panel = event.currentTarget as HTMLDivElement;
+ const scrollLeft = panel.scrollLeft;
+ const scrollTop = panel.scrollTop;
+ const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]") as HTMLInputElement;
+ hidden.value = JSON.stringify([scrollLeft, scrollTop]);
+ };
+}
+
+Listener.register(Scroll.initScrollPosition, Phase.DOCUMENT_READY, Order.LATER);
+Listener.register(Scroll.initScrollPosition, Phase.AFTER_UPDATE, Order.LATER);
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
index 948a1eb..2d49bec 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
@@ -84,6 +84,7 @@
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-popover.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-popup.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-reload.js"/>
+ <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-scroll.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-select-....js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-sheet.js"/>
<script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-split-layout.js"/>