TOBAGO-2014: Remove jQuery dependency
demo
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
index 1f0a3f1..29dadd3 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
@@ -15,56 +15,26 @@
* limitations under the License.
*/
-(function ($) {
-
-
- $.widget("demo.maps", {
-
- options: {
- position: { // tobago
- x: -60.687103,
- y: 11.249123
- },
- zoom: 0.2
- },
-
- _create: function () {
- this._on({
- click: function (event) {
- var position = this.element.data("maps-position");
- if (position === null) {
- position = this.options.position;
- }
- var zoom = this.element.data("maps-zoom");
- if (zoom === null) {
- zoom = this.options.zoom;
- }
- var target = this.element.data("maps-target");
- var url = 'https://www.openstreetmap.org/export/embed.html?bbox='
+class MapDemo {
+ static init() {
+ document.querySelectorAll("[data-maps-target]").forEach((element) => element.addEventListener("click",
+ function (event) {
+ const button = event.currentTarget;
+ const targetId = button.dataset.mapsTarget;
+ const position = JSON.parse(button.dataset.mapsPosition);
+ const zoom = JSON.parse(button.dataset.mapsZoom);
+ const url = 'https://www.openstreetmap.org/export/embed.html?bbox='
+ (position.x - zoom) + ','
+ (position.y - zoom) + ','
+ (position.x + zoom) + ','
+ (position.y + zoom);
- jQuery(DomUtils.escapeClientId(target)).attr('src', url);
- }
- });
- },
+ document.getElementById(targetId).setAttribute("src", url);
+ event.preventDefault();
+ }));
+ }
+}
- _setOption: function (key, value) {
- },
-
- _destroy: function () {
- }
-
- });
-
-}(jQuery));
-
-var initMaps = function () {
- jQuery("[data-maps-target]")
- .maps()
- .first()
- .click();
-};
-
-Listener.register(initMaps, Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", MapDemo.init);
+// todo: ajax
+Listener.register(MapDemo.init, Phase.DOCUMENT_READY);
+Listener.register(MapDemo.init, Phase.AFTER_UPDATE);
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
index 566d628..697ba0c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
@@ -27,6 +27,9 @@
file="#{request.contextPath}/content/20-component/110-wysiwyg/00-tinymce/tinymce/js/tinymce/tinymce.min.js"/>
<tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/00-tinymce/tinymce.js"/>
+<!-- todo-->
+ <tc:badge value="Todo: This page needs to be refactored, still using jQuery..." markup="warning"/>
+
<tc:section label="Installation">
<p>Download <tc:link link="http://www.tinymce.com/" target="_blank" label="TinyMCE"/>
and unpack the ZIP file directly beside this XHTML-file.</p>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
index 6cbdf50..fb3fc0a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
@@ -27,6 +27,9 @@
file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/ckeditor/ckeditor.js"/>
<tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js"/>
+ <!-- todo-->
+ <tc:badge value="Todo: This page needs to be refactored, still using jQuery..." markup="warning"/>
+
<tc:section label="Installation">
<p>Download <tc:link link="http://ckeditor.com/" target="_blank" label="CKEditor"/>
and unpack the ZIP file directly beside this XHTML-file.
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
index 875bdaa..0f019d2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
@@ -15,55 +15,25 @@
* limitations under the License.
*/
-/*
- jQuery(function () {
- jQuery("[data-colored]")
- .css("background-color", "#aaaaaa")
- .click(function () {
- jQuery(this).css("background-color", jQuery(this).data("colored"));
- })
- .dblclick(function () {
- jQuery(this).css("background-color", "#aaaaaa");
- });
- });
- */
+class ColoredDemo {
-(function ($) {
-
- $.widget("demo.colored", {
-
- options: {
- resetColor: "#aaaaaa"
- },
-
- _create: function () {
- this.element.css("background-color", this.options.resetColor);
- this._on({
- click: function (event) {
- this.element.css("background-color", this.element.data("color"));
- },
- dblclick: function (event) {
- this.element.css("background-color", this.options.resetColor);
- }
- });
- },
-
- _setOption: function (key, value) {
- switch (key) {
- case "resetColor":
- this.options.resetColor = value;
- break;
- }
- this._super("_setOption", key, value);
- },
-
- _destroy: function () {
- }
-
+ static init() {
+ document.querySelectorAll("[data-color]").forEach((element) => {
+ element.addEventListener("click",
+ function (event) {
+ const area = event.currentTarget;
+ area.style.backgroundColor = area.dataset.color;
+ });
+ element.addEventListener("dblclick",
+ function (event) {
+ const area = event.currentTarget;
+ area.style.backgroundColor = "#aaaaaa";
+ });
});
+ }
+}
-}(jQuery));
-
-Listener.register(function() {
- jQuery("[data-color]").colored({resetColor: "#f8f8f8"});
-}, Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", ColoredDemo.init);
+// todo: ajax
+// Listener.register(ColoredDemo.init, Phase.DOCUMENT_READY);
+// Listener.register(ColoredDemo.init, Phase.AFTER_UPDATE);
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/script/login.js b/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
index d75eeda..c70412f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
@@ -15,30 +15,24 @@
* limitations under the License.
*/
-/**
- * Copies the values from the data-login attribute to the username/password fields.
- */
-Demo.prepareQuickLinks = function () {
- jQuery("button[data-login]").click(function () {
- var link = jQuery(this);
- var login = link.data("login");
- jQuery(DomUtils.escapeClientId("page:mainForm:username::field")).val(login.username);
- jQuery(DomUtils.escapeClientId("page:mainForm:password::field")).val(login.password);
- return false;
- });
-};
+class LoginDemo {
-Listener.register(Demo.prepareQuickLinks, Phase.DOCUMENT_READY);
+ /**
+ * Copies the values from the data-login attribute to the username/password fields.
+ */
+ static initQuickLinks() {
+ document.querySelectorAll("button[data-login]").forEach((element) => element.addEventListener("click",
+ function (event) {
+ const link = event.currentTarget;
+ const login = JSON.parse(link.dataset.login);
+ document.getElementById("page:mainForm:username::field").value = login.username;
+ document.getElementById("page:mainForm:password::field").value = login.password;
+ event.preventDefault();
+ }));
+ };
+}
-/**
- * This code is needed to "repair" the submit parameter names and url to use
- * the names that a required for servlet authentication.
- */
-Demo.prepareLoginForm = function() {
- jQuery(DomUtils.escapeClientId("page:mainForm:username::field")).attr("name", "j_username");
- jQuery(DomUtils.escapeClientId("page:mainForm:password::field")).attr("name", "j_password");
- var contextPath = jQuery(DomUtils.escapeClientId("page:mainForm:login")).data("context-path");
- jQuery(DomUtils.escapeClientId("page::form")).attr("action", contextPath + "/j_security_check");
-};
-
-// XXX turned off in the moment Tobago5.Listener.register(Demo.prepareLoginForm, Tobago5.Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", LoginDemo.initQuickLinks);
+// todo: ajax
+// Listener.register(LoginDemo.initQuickLinks, Phase.DOCUMENT_READY);
+// Listener.register(LoginDemo.initQuickLinks, Phase.AFTER_UPDATE);
