diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4eb7794a30093704914a4c645ad43b8537d04d0b..6817020fcabf4b7551e264709fc89cc487e4f0a0 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -102,18 +102,13 @@ build-testenv:
# stage: deploy
# Special job for serving a static website. See https://docs.gitlab.com/ee/ci/yaml/README.html#pages
-pages:
- tags: [ docker ]
+pages_prepare: &pages_prepare
+ tags: [ cached-dind ]
stage: deploy
only:
refs:
- /^release-.*$/i
- - master
- variables:
- # run pages only on gitlab.com
- - $CI_SERVER_HOST == "gitlab.com"
script:
- # TODO is this a good location here?
- npm install jsdoc
- npm install jsdoc-sphinx
- echo "Deploying"
@@ -122,3 +117,8 @@ pages:
artifacts:
paths:
- public
+pages:
+ <<: *pages_prepare
+ only:
+ refs:
+ - main
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b85b3be264d74a67fdce9e2d8eb0cba3de33b2d..a08df41984aecb0f2a0f32bb5f9b3b05da096e22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,17 +8,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added (for new features, dependecies etc.)
+- `ext_applicable` module for building fancy features which append
+ functionality to entities (EXPERIMENTAL).
+- `ext_cosmetics` module which converts http(s) uris in property values into
+ clickable links.
+- Added a menu/toc for the tour
+- Added a previous and next buttons for pages in the tour
+- Added warnings to inform about minimum width when accessing tour and
+ edit mode on small screens.
+- Added a tutorial for the edit mode to the documentation
+
### Changed (for changes in existing functionality)
-### Deprecated (for soon-to-be removed features)
+- Updated from bootstrap 3 to bootstrap 5. This is a major change which will
+ possibly break existing custom implementations (e.g. a custom welcome page)
+ since a lot of classes where renamed by bootstrap an other classes have been
+ dropped entirely (e.g. "jumbotron"). Please have a look at
+ * https://getbootstrap.com/docs/5.0/migration/
+ * https://getbootstrap.com/docs/4.6/migration/
+
+### Deprecated (for soon-to-be removed features)
+
+- css-class `.caosdb-property-text-value`. Please use
+ `.caosdb-f-property-text-value` or `.caosdb-v-property-text-value` instead.
### Removed (for now removed features)
+* `#subnav` element from navbar which was previously used for spacing
+* `caosdb.form.ready` event
+
### Fixed
+- #212 - form_elements: Drop-down menu shows wrong value after clicking "None"
+- #202 - Make filter fields in edit mode toolbox visible
+- #117 - Reload data model after adding an RT or a Property
+- #214 - Paging panel is hidden.
+- Displaying issues with long lists in property values
+- An issue whereby a grey container would appear above the map when
+ changing the map view.
+- #200 - Re-enabled the file-upload button
+
### Security (in case of vulnerabilities)
-## [0.3.1]- 2021-06-15
+## [v0.3.1]- 2021-06-15
This is the last Bootstrap-3 compatible release.
@@ -33,8 +65,7 @@ This is the last Bootstrap-3 compatible release.
the module documentation for more information.
### Changed (for changes in existing functionality)
-
-- The heading attributes datatype, path, checksum and size are now placed
+- The heading attributes datatype, path, checksum and size are now placed
in a `details` html element.
### Deprecated (for soon-to-be removed features)
@@ -57,7 +88,7 @@ This is the last Bootstrap-3 compatible release.
### Security (in case of vulnerabilities)
-## [0.3.0] - 2021-02-10
+## [v0.3.0] - 2021-02-10
### Added (for new features, dependecies etc.)
@@ -87,7 +118,7 @@ This is the last Bootstrap-3 compatible release.
- enabled and enhanced autocompletion
* Login form is hidden behind another button.
-### Deprecated (for soon-to-be removed features)
+### Deprecated (for soon-to-be removed features)
### Removed (for now removed features)
@@ -112,7 +143,7 @@ This is the last Bootstrap-3 compatible release.
### Changed (for changes in existing functionality)
-### Deprecated (for soon-to-be removed features)
+### Deprecated (for soon-to-be removed features)
### Removed (for now removed features)
@@ -150,7 +181,7 @@ This is the last Bootstrap-3 compatible release.
See the doc string of that method for more information.
- added a layout argument to the create_plot function of ext_bottom_line
-### Deprecated (for soon-to-be removed features)
+### Deprecated (for soon-to-be removed features)
* css class `caosdb-property-text-value` is deprecated because different
functionality interpreted it differently and most of the uses of this class
@@ -240,20 +271,20 @@ This is the last Bootstrap-3 compatible release.
* updated QUnit test framework to 2.9.2
-### Deprecated (for soon-to-be removed features)
+### Deprecated (for soon-to-be removed features)
* Image Preview in the FileSystem. The functionality is to be replaced by real
thumbnails, which cover also non-image data-formats. The thumbnails resource
is part of the new file system API of the CaosDB Server which is currently
under development.
-### Removed (for now removed features)
+### Removed (for now removed features)
* Removed non-informative tests for webcaosdb.css
* Hard-coded image and video preview in the entity panel. The preview of images
and videos is controlled by the `ext_bottom_line` module now.
-### Fixed (for any bug fixes)
+### Fixed (for any bug fixes)
* #95 - Edit Mode removes property values of reference properties when server
response for possible reference targets is empty.
diff --git a/Makefile b/Makefile
index 1f182e7864a2252e4c1263cde7fa4238d31a4269..0aa47756d72dcfcaff88efb673b5fa5044f8e05a 100644
--- a/Makefile
+++ b/Makefile
@@ -43,7 +43,8 @@ LIBS_DIR = $(abspath libs)
TEST_CORE_DIR = $(abspath test/core/)
TEST_EXT_DIR = $(abspath test/ext)
TEST_SSS_DIR =$(abspath test/server_side_scripting)
-LIBS = fonts css/bootstrap.css js/bootstrap.js js/state-machine.js js/jquery.js js/showdown.js js/dropzone.js css/dropzone.css js/loglevel.js js/leaflet.js css/leaflet.css css/images js/leaflet-latlng-graticule.js js/proj4.js js/proj4leaflet.js js/leaflet-coordinates.js css/leaflet-coordinates.css js/leaflet-graticule.js js/bootstrap-select.js css/bootstrap-select.css js/bootstrap-autocomplete.min.js js/plotly.js js/pako.js js/utif.js
+LIBS = fonts css/fonts css/bootstrap.css css/bootstrap-icons.css js/state-machine.js js/jquery.js js/showdown.js js/dropzone.js css/dropzone.css js/loglevel.js js/leaflet.js css/leaflet.css css/images js/leaflet-latlng-graticule.js js/proj4.js js/proj4leaflet.js js/leaflet-coordinates.js css/leaflet-coordinates.css js/leaflet-graticule.js js/bootstrap-select.js css/bootstrap-select.css js/bootstrap-autocomplete.min.js js/plotly.js js/pako.js js/utif.js js/bootstrap.js
+
TEST_LIBS = $(LIBS) js/qunit.js css/qunit.css $(subst $(TEST_CORE_DIR)/,,$(shell find $(TEST_CORE_DIR)/))
@@ -52,9 +53,9 @@ LIBS_SUBDIRS = $(addprefix $(LIBS_DIR)/, js css fonts)
ALL: install
-install: clean install-sss cp-src cp-ext cp-conf $(addprefix $(PUBLIC_DIR)/, $(LIBS)) build_properties merge_xsl
+install: clean-ignore-zips install-sss cp-src cp-ext cp-conf $(addprefix $(PUBLIC_DIR)/, $(LIBS)) merge_js build_properties merge_xsl
-test: clean install-sss cp-src cp-ext cp-ext-test cp-conf $(addprefix $(PUBLIC_DIR)/, $(TEST_LIBS)) build_properties merge_xsl
+test: clean-ignore-zips install-sss cp-src cp-ext cp-ext-test cp-conf $(addprefix $(PUBLIC_DIR)/, $(TEST_LIBS)) merge_js build_properties merge_xsl
@for f in $(shell find $(TEST_EXT_DIR) -type f -iname *.js) ; do \
sed -i "/EXTENSIONS/a \<script src=\"$${f#$(TEST_EXT_DIR)/}\" ></script>" $(PUBLIC_DIR)/index.html ; \
echo include $$f; \
@@ -67,6 +68,10 @@ test: clean install-sss cp-src cp-ext cp-ext-test cp-conf $(addprefix $(PUBLIC_D
merge_xsl:
misc/merge_xsl.sh
+merge_js:
+ for f in ${BUILDFILELIST} ; do source "$$f" ; done ; \
+ JS_DIST_BUNDLE=$${JS_DIST_BUNDLE} AUTO_DISCOVER_MODULES=$$AUTO_DISCOVER_MODULES misc/merge_js.sh $${MODULE_DEPENDENCIES[*]}
+
EXCLUDE_EXPR = %~ %.backup
BUILDFILELIST = $(filter-out $(EXCLUDE_EXPR),$(wildcard build.properties.d/*))
build_properties:
@@ -91,24 +96,24 @@ build_properties:
@ln -s $(PUBLIC_DIR) $(PUBLIC_DIR)/$(BUILD_NUMBER)
@ln -s $(PUBLIC_DIR) $(PUBLIC_DIR)/webinterface
-PORT = 8000
+TEST_PORT ?= 8000
TIMEOUT = 60
run-test-server: test
- $(MISC_DIR)/unit_test_http_server.py $(PORT) $(TIMEOUT) False $(PUBLIC_DIR)
+ $(MISC_DIR)/unit_test_http_server.py $(TEST_PORT) $(TIMEOUT) False $(PUBLIC_DIR)
keep-test-server: test
- $(MISC_DIR)/unit_test_http_server.py $(PORT) -1 True $(PUBLIC_DIR)
+ $(MISC_DIR)/unit_test_http_server.py $(TEST_PORT) -1 True $(PUBLIC_DIR)
run-qunit: test
$(foreach exec, firefox Xvfb xwd,\
$(if $(shell which $(exec)),echo "found $(exec)",$(error "No $(exec) in PATH")))
# start server in background
- $(MISC_DIR)/unit_test_http_server.py $(PORT) $(TIMEOUT) False $(PUBLIC_DIR) &
+ $(MISC_DIR)/unit_test_http_server.py $(TEST_PORT) $(TIMEOUT) False $(PUBLIC_DIR) &
# start firefox with virtual xserver
Xvfb :1 -screen 0 1024x768x24 &
- DISPLAY=:1 firefox "http://localhost:$(PORT)/?hidepassed" &
+ DISPLAY=:1 firefox "http://localhost:$(TEST_PORT)/?hidepassed" &
while [ 1 -eq 1 ]; do \
sleep 5 ; \
@@ -211,22 +216,25 @@ $(PUBLIC_DIR)/%: $(TEST_EXT_DIR)/%
cp -r $< $@
$(LIBS_DIR)/fonts: unzip
- ln -s $(LIBS_DIR)/bootstrap-3.4.1-dist/fonts $@
+ ln -s $(LIBS_DIR)/bootstrap-icons-1.4.1/fonts/ $@
$(LIBS_DIR)/js/bootstrap.js: unzip $(LIBS_DIR)/js
- ln -s $(LIBS_DIR)/bootstrap-3.4.1-dist/js/bootstrap.min.js $@
+ ln -s $(LIBS_DIR)/bootstrap-5.0.1-dist/js/bootstrap.bundle.min.js $@
$(LIBS_DIR)/css/bootstrap.css: unzip $(LIBS_DIR)/css
- ln -s $(LIBS_DIR)/bootstrap-3.4.1-dist/css/bootstrap.min.css $@
+ ln -s $(LIBS_DIR)/bootstrap-5.0.1-dist/css/bootstrap.min.css $@
+
+$(LIBS_DIR)/css/bootstrap-icons.css: unzip $(LIBS_DIR)/css
+ ln -s $(LIBS_DIR)/bootstrap-icons-1.4.1/bootstrap-icons.css $@
$(LIBS_DIR)/js/bootstrap-select.js: unzip $(LIBS_DIR)/js
- ln -s $(LIBS_DIR)/bootstrap-select-1.13.9/dist/js/bootstrap-select.min.js $@
+ ln -s $(LIBS_DIR)/bootstrap-select-1.14.0-beta2/js/bootstrap-select.min.js $@
$(LIBS_DIR)/css/bootstrap-select.css: unzip $(LIBS_DIR)/css
- ln -s $(LIBS_DIR)/bootstrap-select-1.13.9/dist/css/bootstrap-select.min.css $@
+ ln -s $(LIBS_DIR)/bootstrap-select-1.14.0-beta2/css/bootstrap-select.min.css $@
$(LIBS_DIR)/js/jquery.js: unzip $(LIBS_DIR)/js
- ln -s $(LIBS_DIR)/jquery-3.5.1/jquery-3.5.1.min.js $@
+ ln -s $(LIBS_DIR)/jquery-3.6.0.min.js $@
$(LIBS_DIR)/js/showdown.js: unzip $(LIBS_DIR)/js
ln -s $(LIBS_DIR)/showdown-1.8.6/dist/showdown.min.js $@
@@ -261,6 +269,9 @@ $(LIBS_DIR)/css/images: unzip $(LIBS_DIR)/css
$(LIBS_DIR)/js/leaflet-graticule.js: unzip $(LIBS_DIR)/js
ln -s $(LIBS_DIR)/L.Graticule.js $@
+$(LIBS_DIR)/js/bootstrap.bundle.min.js: unzip $(LIBS_DIR)/js
+ ln -s $(LIBS_DIR)/bootstrap.bundle.min.js $@
+
$(LIBS_DIR)/js/leaflet-latlng-graticule.js: unzip $(LIBS_DIR)/js
ln -s $(LIBS_DIR)/leaflet.latlng-graticule-20191007/leaflet.latlng-graticule.js $@
@@ -292,17 +303,23 @@ $(LIBS_DIR)/js/utif.js: unzip $(LIBS_DIR)/js
$(addprefix $(LIBS_DIR)/, js css):
mkdir $@ || true
-.PHONY: clean
-clean:
+$(LIBS_DIR)/css/fonts: $(LIBS_DIR)/css
+ ln -s $(LIBS_DIR)/fonts/ $(LIBS_DIR)/css/fonts
+
+.PHONY: clean-ignore-zips
+clean-ignore-zips:
$(RM) -r $(SSS_BIN_DIR)
$(RM) -r $(PUBLIC_DIR)
for f in $(LIBS_SUBDIRS); do unlink $$f || $(RM) -r $$f || true; done
- for f in $(patsubst %.zip,%/,$(LIBS_ZIP)); do $(RM) -r $$f; done
$(RM) .server_done
+.PHONY: clean
+clean: clean-ignore-zips
+ for f in $(patsubst %.zip,%/,$(LIBS_ZIP)); do $(RM) -r $$f; done
+
.PHONY: unzip
unzip:
- for f in $(LIBS_ZIP); do unzip -q -o -d libs $$f; done
+ for f in $(LIBS_ZIP); do echo "unzip $$f" ; unzip -u -q -o -d libs $$f; done
PYLINT ?= pylint
diff --git a/README.md b/README.md
index 5abbfafe8f45ad430e91d66ddd50f055cad61a25..dca645c4244573ae31c7e0072208b53a47cec1d2 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,9 @@ when creating the merge request. This allows our team to work with you on your r
- If you have a suggestion for the [documentation](https://docs.indiscale.com/caosdb-webui/),
the preferred way is also a merge request as describe above (the documentation resides in `src/doc`).
However, you can also create an issue for it.
-- You can also contact us at **info (AT) caosdb.de**.
+- You can also contact us at **info (AT) caosdb.de** and join the
+ CaosDB community on
+ [#caosdb:matrix.org](https://matrix.to/#/!unwwlTfOznjEnMMXxf:matrix.org).
## License
diff --git a/build.properties.d/00_default.properties b/build.properties.d/00_default.properties
index 482913473a8d2620a4484b69424aab82e52e48f3..58d20c521100bbd43e094c2da402abc38ea555bc 100644
--- a/build.properties.d/00_default.properties
+++ b/build.properties.d/00_default.properties
@@ -50,6 +50,7 @@ BUILD_MODULE_EXT_BOTTOM_LINE=ENABLED
BUILD_MODULE_EXT_BOTTOM_LINE_TABLE_PREVIEW=DISABLED
BUILD_MODULE_EXT_BOTTOM_LINE_TIFF_PREVIEW=DISABLED
BUILD_MODULE_EXT_BOOKMARKS=ENABLED
+BUILD_MODULE_EXT_ANNOTATION=ENABLED
BUILD_MODULE_USER_MANAGEMENT=ENABLED
BUILD_MODULE_USER_MANAGEMENT_CHANGE_OWN_PASSWORD_REALM=CaosDB
@@ -90,3 +91,61 @@ BUILD_CUSTOM_IMPRINT='<p> Put an imprint note here </p>'
# ext_trigger_crawler_form properties
##############################################################################
BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX="Tools"
+
+##############################################################################
+# Build a dist file containing all JS code from the files in the
+# MODULE_DEPENDENCIES array.
+##############################################################################
+JS_DIST_BUNDLE=TRUE
+##############################################################################
+# TRUE means that all javascript sources which are no mentioned in the
+# MODULE_DEPENDENCIES array will be added in no particular order into the
+# build. If you need to guarantee a specific order (in which the are loaded or
+# appear in the dit file) you need to add them to the MODULE_DEPENDENCIES.
+##############################################################################
+AUTO_DISCOVER_MODULES=TRUE
+##############################################################################
+# Module dependencies
+# Override or extend to specify the order of js files in the resulting
+# bundled js file
+##############################################################################
+MODULE_DEPENDENCIES=(
+ jquery.js
+ bootstrap.js
+ bootstrap-autocomplete.min.js
+ bootstrap-select.js
+ state-machine.js
+ showdown.js
+ dropzone.js
+ loglevel.js
+ plotly.js
+ webcaosdb.js
+ pako.js
+ utif.js
+ caosdb.js
+ form_elements.js
+ ext_autocomplete.js
+ preview.js
+ ext_references.js
+ ext_applicable.js
+ ext_table_preview.js
+ ext_xls_download.js
+ query_shortcuts.js
+ ext_jupyterdrag.js
+ annotation.js
+ edit_mode.js
+ ext_entity_state.js
+ ext_file_download.js
+ leaflet.js
+ leaflet-graticule.js
+ leaflet-latlng-graticule.js
+ leaflet-coordinates.js
+ proj4.js
+ proj4leaflet.js
+ ext_map.js
+ tour.js
+ ext_bottom_line.js
+ ext_sss_markdown.js
+ ext_trigger_crawler_form.js
+ ext_bookmarks.js
+)
diff --git a/libs/bootstrap-3.4.1-dist.zip b/libs/bootstrap-3.4.1-dist.zip
deleted file mode 100644
index 9002b8521706bc582546f41635da3437edf20c3c..0000000000000000000000000000000000000000
Binary files a/libs/bootstrap-3.4.1-dist.zip and /dev/null differ
diff --git a/libs/bootstrap-5.0.1-dist.zip b/libs/bootstrap-5.0.1-dist.zip
new file mode 100644
index 0000000000000000000000000000000000000000..196a8212a471170f120de352455dbcf9f3466639
Binary files /dev/null and b/libs/bootstrap-5.0.1-dist.zip differ
diff --git a/libs/bootstrap-icons-1.4.1.zip b/libs/bootstrap-icons-1.4.1.zip
new file mode 100644
index 0000000000000000000000000000000000000000..dc9398e6d6e6ce3c96e01b4734a29a37432f43b1
Binary files /dev/null and b/libs/bootstrap-icons-1.4.1.zip differ
diff --git a/libs/bootstrap-select-1.14.0-beta2.zip b/libs/bootstrap-select-1.14.0-beta2.zip
new file mode 100644
index 0000000000000000000000000000000000000000..9d7a97280ee9825b6a23aaddb40d20256a892f85
Binary files /dev/null and b/libs/bootstrap-select-1.14.0-beta2.zip differ
diff --git a/libs/bootstrap-select-v1.13.9.zip b/libs/bootstrap-select-v1.13.9.zip
deleted file mode 100644
index f52eea6450673782ba84504b249d65f3e6f8fa14..0000000000000000000000000000000000000000
Binary files a/libs/bootstrap-select-v1.13.9.zip and /dev/null differ
diff --git a/libs/jquery-3.5.1.zip b/libs/jquery-3.5.1.zip
deleted file mode 100644
index c554bbf416786da9c18bef62061cba932646f996..0000000000000000000000000000000000000000
Binary files a/libs/jquery-3.5.1.zip and /dev/null differ
diff --git a/libs/jquery-3.6.0.min.js b/libs/jquery-3.6.0.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..c4c6022f2982e8dae64cebd6b9a2b59f2547faad
--- /dev/null
+++ b/libs/jquery-3.6.0.min.js
@@ -0,0 +1,2 @@
+/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","g"),$=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="<a id='"+S+"'></a><select id='"+S+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0<se(t,C,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!=C&&T(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=C&&T(e);var n=b.attrHandle[t.toLowerCase()],r=n&&D.call(b.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:d.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!d.detectDuplicates,u=!d.sortStable&&e.slice(0),e.sort(j),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(b=se.selectors={cacheLength:50,createPseudo:le,match:G,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace(B," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),x="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=x&&e.nodeName.toLowerCase(),p=!n&&!x,d=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(x?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&p){d=(s=(r=(i=(o=(a=c)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if(1===a.nodeType&&++d&&a===e){i[h]=[k,s,d];break}}else if(p&&(d=s=(r=(i=(o=(a=e)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1]),!1===d)while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if((x?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++d&&(p&&((i=(o=a[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[k,d]),a===e))break;return(d-=v)===g||d%g==0&&0<=d/g}}},PSEUDO:function(e,o){var t,a=b.pseudos[e]||b.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[S]?a(o):1<a.length?(t=[e,e,"",o],b.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=P(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace($,"$1"));return s[S]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return V.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===C.activeElement&&(!C.hasFocus||C.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!b.pseudos.empty(e)},header:function(e){return J.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=b.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})b.pseudos[e]=de(e);for(e in{submit:!0,reset:!0})b.pseudos[e]=he(e);function me(){}function xe(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function be(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,p=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[k,p];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[S]||(e[S]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===k&&r[1]===p)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Te(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Ce(d,h,g,v,y,e){return v&&!v[S]&&(v=Ce(v)),y&&!y[S]&&(y=Ce(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!d||!e&&h?c:Te(c,s,d,n,r),p=g?y||(e?d:l||v)?[]:t:f;if(g&&g(f,p,n,r),v){i=Te(p,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(p[u[o]]=!(f[u[o]]=a))}if(e){if(y||d){if(y){i=[],o=p.length;while(o--)(a=p[o])&&i.push(f[o]=a);y(null,p=[],i,r)}o=p.length;while(o--)(a=p[o])&&-1<(i=y?P(e,a):s[o])&&(e[i]=!(t[i]=a))}}else p=Te(p===t?p.splice(l,p.length):p),y?y(null,t,p,r):H.apply(t,p)})}function Ee(e){for(var i,t,n,r=e.length,o=b.relative[e[0].type],a=o||b.relative[" "],s=o?1:0,u=be(function(e){return e===i},a,!0),l=be(function(e){return-1<P(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=b.relative[e[s].type])c=[be(we(c),t)];else{if((t=b.filter[e[s].type].apply(null,e[s].matches))[S]){for(n=++s;n<r;n++)if(b.relative[e[n].type])break;return Ce(1<s&&we(c),1<s&&xe(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace($,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&xe(e))}c.push(t)}return we(c)}return me.prototype=b.filters=b.pseudos,b.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=x[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=b.preFilter;while(a){for(o in n&&!(r=_.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=z.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace($," ")}),a=a.slice(n.length)),b.filter)!(r=G[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):x(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,x,r,i=[],o=[],a=A[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[S]?i.push(a):o.push(a);(a=A(e,(v=o,m=0<(y=i).length,x=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],p=w,d=e||x&&b.find.TAG("*",i),h=k+=null==p?1:Math.random()||.1,g=d.length;for(i&&(w=t==C||t||i);l!==g&&null!=(o=d[l]);l++){if(x&&o){a=0,t||o.ownerDocument==C||(T(o),n=!E);while(s=v[a++])if(s(o,t||C,n)){r.push(o);break}i&&(k=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=q.call(r));f=Te(f)}H.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(k=h,w=p),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&b.relative[o[1].type]){if(!(t=(b.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=G.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],b.relative[s=a.type])break;if((u=b.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&xe(o)))return H.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},d.sortStable=S.split("").sort(j).join("")===S,d.detectDuplicates=!!l,T(),d.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(C.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),d.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(R,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(C);S.find=d,S.expr=d.selectors,S.expr[":"]=S.expr.pseudos,S.uniqueSort=S.unique=d.uniqueSort,S.text=d.getText,S.isXMLDoc=d.isXML,S.contains=d.contains,S.escapeSelector=d.escape;var h=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&S(e).is(n))break;r.push(e)}return r},T=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},k=S.expr.match.needsContext;function A(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var N=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1<i.call(n,e)!==r}):S.filter(n,e,r)}S.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?S.find.matchesSelector(r,e)?[r]:[]:S.find.matches(e,S.grep(t,function(e){return 1===e.nodeType}))},S.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(S(e).filter(function(){for(t=0;t<r;t++)if(S.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)S.find(e,i[t],n);return 1<r?S.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&k.test(e)?S(e):e||[],!1).length}});var D,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(S.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&S(e);if(!k.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&S.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?S.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(S(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(S.uniqueSort(S.merge(this.get(),S(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),S.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return h(e,"parentNode")},parentsUntil:function(e,t,n){return h(e,"parentNode",n)},next:function(e){return O(e,"nextSibling")},prev:function(e){return O(e,"previousSibling")},nextAll:function(e){return h(e,"nextSibling")},prevAll:function(e){return h(e,"previousSibling")},nextUntil:function(e,t,n){return h(e,"nextSibling",n)},prevUntil:function(e,t,n){return h(e,"previousSibling",n)},siblings:function(e){return T((e.parentNode||{}).firstChild,e)},children:function(e){return T(e.firstChild)},contents:function(e){return null!=e.contentDocument&&r(e.contentDocument)?e.contentDocument:(A(e,"template")&&(e=e.content||e),S.merge([],e.childNodes))}},function(r,i){S.fn[r]=function(e,t){var n=S.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=S.filter(t,n)),1<this.length&&(H[r]||S.uniqueSort(n),L.test(r)&&n.reverse()),this.pushStack(n)}});var P=/[^\x20\t\r\n\f]+/g;function R(e){return e}function M(e){throw e}function I(e,t,n,r){var i;try{e&&m(i=e.promise)?i.call(e).done(t).fail(n):e&&m(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}S.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},S.each(e.match(P)||[],function(e,t){n[t]=!0}),n):S.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){S.each(e,function(e,t){m(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==w(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return S.each(arguments,function(e,t){var n;while(-1<(n=S.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<S.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},S.extend({Deferred:function(e){var o=[["notify","progress",S.Callbacks("memory"),S.Callbacks("memory"),2],["resolve","done",S.Callbacks("once memory"),S.Callbacks("once memory"),0,"resolved"],["reject","fail",S.Callbacks("once memory"),S.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return S.Deferred(function(r){S.each(o,function(e,t){var n=m(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&m(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,m(t)?s?t.call(e,l(u,o,R,s),l(u,o,M,s)):(u++,t.call(e,l(u,o,R,s),l(u,o,M,s),l(u,o,R,o.notifyWith))):(a!==R&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){S.Deferred.exceptionHook&&S.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==M&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(S.Deferred.getStackHook&&(t.stackTrace=S.Deferred.getStackHook()),C.setTimeout(t))}}return S.Deferred(function(e){o[0][3].add(l(0,e,m(r)?r:R,e.notifyWith)),o[1][3].add(l(0,e,m(t)?t:R)),o[2][3].add(l(0,e,m(n)?n:M))}).promise()},promise:function(e){return null!=e?S.extend(e,a):a}},s={};return S.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=S.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(I(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||m(i[t]&&i[t].then)))return o.then();while(t--)I(i[t],a(t),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;S.Deferred.exceptionHook=function(e,t){C.console&&C.console.warn&&e&&W.test(e.name)&&C.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},S.readyException=function(e){C.setTimeout(function(){throw e})};var F=S.Deferred();function B(){E.removeEventListener("DOMContentLoaded",B),C.removeEventListener("load",B),S.ready()}S.fn.ready=function(e){return F.then(e)["catch"](function(e){S.readyException(e)}),this},S.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--S.readyWait:S.isReady)||(S.isReady=!0)!==e&&0<--S.readyWait||F.resolveWith(E,[S])}}),S.ready.then=F.then,"complete"===E.readyState||"loading"!==E.readyState&&!E.documentElement.doScroll?C.setTimeout(S.ready):(E.addEventListener("DOMContentLoaded",B),C.addEventListener("load",B));var $=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===w(n))for(s in i=!0,n)$(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,m(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(S(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},_=/^-ms-/,z=/-([a-z])/g;function U(e,t){return t.toUpperCase()}function X(e){return e.replace(_,"ms-").replace(z,U)}var V=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function G(){this.expando=S.expando+G.uid++}G.uid=1,G.prototype={cache:function(e){var t=e[this.expando];return t||(t={},V(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[X(t)]=n;else for(r in t)i[X(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][X(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(X):(t=X(t))in r?[t]:t.match(P)||[]).length;while(n--)delete r[t[n]]}(void 0===t||S.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!S.isEmptyObject(t)}};var Y=new G,Q=new G,J=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,K=/[A-Z]/g;function Z(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(K,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:J.test(i)?JSON.parse(i):i)}catch(e){}Q.set(e,t,n)}else n=void 0;return n}S.extend({hasData:function(e){return Q.hasData(e)||Y.hasData(e)},data:function(e,t,n){return Q.access(e,t,n)},removeData:function(e,t){Q.remove(e,t)},_data:function(e,t,n){return Y.access(e,t,n)},_removeData:function(e,t){Y.remove(e,t)}}),S.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=Q.get(o),1===o.nodeType&&!Y.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=X(r.slice(5)),Z(o,r,i[r]));Y.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){Q.set(this,n)}):$(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=Q.get(o,n))?t:void 0!==(t=Z(o,n))?t:void 0;this.each(function(){Q.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){Q.remove(this,e)})}}),S.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Y.get(e,t),n&&(!r||Array.isArray(n)?r=Y.access(e,t,S.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=S.queue(e,t),r=n.length,i=n.shift(),o=S._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){S.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:S.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),S.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?S.queue(this[0],t):void 0===n?this:this.each(function(){var e=S.queue(this,t,n);S._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&S.dequeue(this,t)})},dequeue:function(e){return this.each(function(){S.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=S.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=Y.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var ee=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,te=new RegExp("^(?:([+-])=|)("+ee+")([a-z%]*)$","i"),ne=["Top","Right","Bottom","Left"],re=E.documentElement,ie=function(e){return S.contains(e.ownerDocument,e)},oe={composed:!0};re.getRootNode&&(ie=function(e){return S.contains(e.ownerDocument,e)||e.getRootNode(oe)===e.ownerDocument});var ae=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ie(e)&&"none"===S.css(e,"display")};function se(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return S.css(e,t,"")},u=s(),l=n&&n[3]||(S.cssNumber[t]?"":"px"),c=e.nodeType&&(S.cssNumber[t]||"px"!==l&&+u)&&te.exec(S.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)S.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,S.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}var ue={};function le(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=Y.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ae(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=ue[s])||(o=a.body.appendChild(a.createElement(s)),u=S.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),ue[s]=u)))):"none"!==n&&(l[c]="none",Y.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}S.fn.extend({show:function(){return le(this,!0)},hide:function(){return le(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ae(this)?S(this).show():S(this).hide()})}});var ce,fe,pe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="<textarea>x</textarea>",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="<option></option>",y.option=!!ce.lastChild;var ge={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n<r;n++)Y.set(e[n],"globalEval",!t||Y.get(t[n],"globalEval"))}ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td,y.option||(ge.optgroup=ge.option=[1,"<select multiple='multiple'>","</select>"]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d<h;d++)if((o=e[d])||0===o)if("object"===w(o))S.merge(p,o.nodeType?[o]:o);else if(me.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=ge[s]||ge._default,a.innerHTML=u[1]+S.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;S.merge(p,a.childNodes),(a=f.firstChild).textContent=""}else p.push(t.createTextNode(o));f.textContent="",d=0;while(o=p[d++])if(r&&-1<S.inArray(o,r))i&&i.push(o);else if(l=ie(o),a=ve(f.appendChild(o),"script"),l&&ye(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}var be=/^([^.]*)(?:\.(.+)|)/;function we(){return!0}function Te(){return!1}function Ce(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ee(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ee(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Te;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return S().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=S.guid++)),e.each(function(){S.event.add(this,t,i,r,n)})}function Se(e,i,o){o?(Y.set(e,i,!1),S.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Y.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(S.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Y.set(this,i,r),t=o(this,i),this[i](),r!==(n=Y.get(this,i))||t?Y.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n&&n.value}else r.length&&(Y.set(this,i,{value:S.event.trigger(S.extend(r[0],S.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Y.get(e,i)&&S.event.add(e,i,we)}S.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Y.get(t);if(V(t)){n.handler&&(n=(o=n).handler,i=o.selector),i&&S.find.matchesSelector(re,i),n.guid||(n.guid=S.guid++),(u=v.events)||(u=v.events=Object.create(null)),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof S&&S.event.triggered!==e.type?S.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(P)||[""]).length;while(l--)d=g=(s=be.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=S.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=S.event.special[d]||{},c=S.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&S.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),S.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Y.hasData(e)&&Y.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(P)||[""]).length;while(l--)if(d=g=(s=be.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=S.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||S.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)S.event.remove(e,d+t[l],n,r,!0);S.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=S.event.fix(e),l=(Y.get(this,"events")||Object.create(null))[u.type]||[],c=S.event.special[u.type]||{};for(s[0]=u,t=1;t<arguments.length;t++)s[t]=arguments[t];if(u.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,u)){a=S.event.handlers.call(this,u,l),t=0;while((i=a[t++])&&!u.isPropagationStopped()){u.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!u.isImmediatePropagationStopped())u.rnamespace&&!1!==o.namespace&&!u.rnamespace.test(o.namespace)||(u.handleObj=o,u.data=o.data,void 0!==(r=((S.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s))&&!1===(u.result=r)&&(u.preventDefault(),u.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,u),u.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<S(i,this).index(l):S.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(S.Event.prototype,t,{enumerable:!0,configurable:!0,get:m(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[S.expando]?e:new S.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click",we),!1},trigger:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click"),!0},_default:function(e){var t=e.target;return pe.test(t.type)&&t.click&&A(t,"input")&&Y.get(t,"click")||A(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},S.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},S.Event=function(e,t){if(!(this instanceof S.Event))return new S.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?we:Te,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&S.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[S.expando]=!0},S.Event.prototype={constructor:S.Event,isDefaultPrevented:Te,isPropagationStopped:Te,isImmediatePropagationStopped:Te,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=we,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=we,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=we,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},S.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:!0},S.event.addProp),S.each({focus:"focusin",blur:"focusout"},function(e,t){S.event.special[e]={setup:function(){return Se(this,e,Ce),!1},trigger:function(){return Se(this,e),!0},_default:function(){return!0},delegateType:t}}),S.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){S.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||S.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),S.fn.extend({on:function(e,t,n,r){return Ee(this,e,t,n,r)},one:function(e,t,n,r){return Ee(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,S(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Te),this.each(function(){S.event.remove(this,e,n,t)})}});var ke=/<script|<style|<link/i,Ae=/checked\s*(?:[^=]|=\s*.checked.)/i,Ne=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n<r;n++)S.event.add(t,i,s[i][n]);Q.hasData(e)&&(o=Q.access(e),a=S.extend({},o),Q.set(t,a))}}function He(n,r,i,o){r=g(r);var e,t,a,s,u,l,c=0,f=n.length,p=f-1,d=r[0],h=m(d);if(h||1<f&&"string"==typeof d&&!y.checkClone&&Ae.test(d))return n.each(function(e){var t=n.eq(e);h&&(r[0]=d.call(this,e,t.html())),He(t,r,i,o)});if(f&&(t=(e=xe(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=S.map(ve(e,"script"),De)).length;c<f;c++)u=e,c!==p&&(u=S.clone(u,!0,!0),s&&S.merge(a,ve(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,S.map(a,qe),c=0;c<s;c++)u=a[c],he.test(u.type||"")&&!Y.access(u,"globalEval")&&S.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?S._evalUrl&&!u.noModule&&S._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):b(u.textContent.replace(Ne,""),u,l))}return n}function Oe(e,t,n){for(var r,i=t?S.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||S.cleanData(ve(r)),r.parentNode&&(n&&ie(r)&&ye(ve(r,"script")),r.parentNode.removeChild(r));return e}S.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=ie(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||S.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&pe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ve(e),a=a||ve(c),r=0,i=o.length;r<i;r++)Le(o[r],a[r]);else Le(e,c);return 0<(a=ve(c,"script")).length&&ye(a,!f&&ve(e,"script")),c},cleanData:function(e){for(var t,n,r,i=S.event.special,o=0;void 0!==(n=e[o]);o++)if(V(n)){if(t=n[Y.expando]){if(t.events)for(r in t.events)i[r]?S.event.remove(n,r):S.removeEvent(n,r,t.handle);n[Y.expando]=void 0}n[Q.expando]&&(n[Q.expando]=void 0)}}}),S.fn.extend({detach:function(e){return Oe(this,e,!0)},remove:function(e){return Oe(this,e)},text:function(e){return $(this,function(e){return void 0===e?S.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return He(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||je(this,e).appendChild(e)})},prepend:function(){return He(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=je(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(S.cleanData(ve(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return S.clone(this,e,t)})},html:function(e){return $(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!ke.test(e)&&!ge[(de.exec(e)||["",""])[1].toLowerCase()]){e=S.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(S.cleanData(ve(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return He(this,arguments,function(e){var t=this.parentNode;S.inArray(this,n)<0&&(S.cleanData(ve(this)),t&&t.replaceChild(e,this))},n)}}),S.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){S.fn[e]=function(e){for(var t,n=[],r=S(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),S(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Pe=new RegExp("^("+ee+")(?!px)[a-z%]+$","i"),Re=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=C),t.getComputedStyle(e)},Me=function(e,t,n){var r,i,o={};for(i in t)o[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=o[i];return r},Ie=new RegExp(ne.join("|"),"i");function We(e,t,n){var r,i,o,a,s=e.style;return(n=n||Re(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||ie(e)||(a=S.style(e,t)),!y.pixelBoxStyles()&&Pe.test(a)&&Ie.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function Fe(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",re.appendChild(u).appendChild(l);var e=C.getComputedStyle(l);n="1%"!==e.top,s=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),r=36===t(e.width),l.style.position="absolute",i=12===t(l.offsetWidth/3),re.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s,u=E.createElement("div"),l=E.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",y.clearCloneStyle="content-box"===l.style.backgroundClip,S.extend(y,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),s},scrollboxSize:function(){return e(),i},reliableTrDimensions:function(){var e,t,n,r;return null==a&&(e=E.createElement("table"),t=E.createElement("tr"),n=E.createElement("div"),e.style.cssText="position:absolute;left:-11111px;border-collapse:separate",t.style.cssText="border:1px solid",t.style.height="1px",n.style.height="9px",n.style.display="block",re.appendChild(e).appendChild(t).appendChild(n),r=C.getComputedStyle(t),a=parseInt(r.height,10)+parseInt(r.borderTopWidth,10)+parseInt(r.borderBottomWidth,10)===t.offsetHeight,re.removeChild(e)),a}}))}();var Be=["Webkit","Moz","ms"],$e=E.createElement("div").style,_e={};function ze(e){var t=S.cssProps[e]||_e[e];return t||(e in $e?e:_e[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=Be.length;while(n--)if((e=Be[n]+t)in $e)return e}(e)||e)}var Ue=/^(none|table(?!-c[ea]).+)/,Xe=/^--/,Ve={position:"absolute",visibility:"hidden",display:"block"},Ge={letterSpacing:"0",fontWeight:"400"};function Ye(e,t,n){var r=te.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function Qe(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=S.css(e,n+ne[a],!0,i)),r?("content"===n&&(u-=S.css(e,"padding"+ne[a],!0,i)),"margin"!==n&&(u-=S.css(e,"border"+ne[a]+"Width",!0,i))):(u+=S.css(e,"padding"+ne[a],!0,i),"padding"!==n?u+=S.css(e,"border"+ne[a]+"Width",!0,i):s+=S.css(e,"border"+ne[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function Je(e,t,n){var r=Re(e),i=(!y.boxSizingReliable()||n)&&"border-box"===S.css(e,"boxSizing",!1,r),o=i,a=We(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Pe.test(a)){if(!n)return a;a="auto"}return(!y.boxSizingReliable()&&i||!y.reliableTrDimensions()&&A(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===S.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===S.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+Qe(e,t,n||(i?"border":"content"),o,r,a)+"px"}function Ke(e,t,n,r,i){return new Ke.prototype.init(e,t,n,r,i)}S.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=We(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=X(t),u=Xe.test(t),l=e.style;if(u||(t=ze(s)),a=S.cssHooks[t]||S.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=te.exec(n))&&i[1]&&(n=se(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(S.cssNumber[s]?"":"px")),y.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=X(t);return Xe.test(t)||(t=ze(s)),(a=S.cssHooks[t]||S.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=We(e,t,r)),"normal"===i&&t in Ge&&(i=Ge[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),S.each(["height","width"],function(e,u){S.cssHooks[u]={get:function(e,t,n){if(t)return!Ue.test(S.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?Je(e,u,n):Me(e,Ve,function(){return Je(e,u,n)})},set:function(e,t,n){var r,i=Re(e),o=!y.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===S.css(e,"boxSizing",!1,i),s=n?Qe(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-Qe(e,u,"border",!1,i)-.5)),s&&(r=te.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=S.css(e,u)),Ye(0,t,s)}}}),S.cssHooks.marginLeft=Fe(y.reliableMarginLeft,function(e,t){if(t)return(parseFloat(We(e,"marginLeft"))||e.getBoundingClientRect().left-Me(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),S.each({margin:"",padding:"",border:"Width"},function(i,o){S.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+ne[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(S.cssHooks[i+o].set=Ye)}),S.fn.extend({css:function(e,t){return $(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Re(e),i=t.length;a<i;a++)o[t[a]]=S.css(e,t[a],!1,r);return o}return void 0!==n?S.style(e,t,n):S.css(e,t)},e,t,1<arguments.length)}}),((S.Tween=Ke).prototype={constructor:Ke,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||S.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(S.cssNumber[n]?"":"px")},cur:function(){var e=Ke.propHooks[this.prop];return e&&e.get?e.get(this):Ke.propHooks._default.get(this)},run:function(e){var t,n=Ke.propHooks[this.prop];return this.options.duration?this.pos=t=S.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):Ke.propHooks._default.set(this),this}}).init.prototype=Ke.prototype,(Ke.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=S.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){S.fx.step[e.prop]?S.fx.step[e.prop](e):1!==e.elem.nodeType||!S.cssHooks[e.prop]&&null==e.elem.style[ze(e.prop)]?e.elem[e.prop]=e.now:S.style(e.elem,e.prop,e.now+e.unit)}}}).scrollTop=Ke.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},S.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},S.fx=Ke.prototype.init,S.fx.step={};var Ze,et,tt,nt,rt=/^(?:toggle|show|hide)$/,it=/queueHooks$/;function ot(){et&&(!1===E.hidden&&C.requestAnimationFrame?C.requestAnimationFrame(ot):C.setTimeout(ot,S.fx.interval),S.fx.tick())}function at(){return C.setTimeout(function(){Ze=void 0}),Ze=Date.now()}function st(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=ne[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function ut(e,t,n){for(var r,i=(lt.tweeners[t]||[]).concat(lt.tweeners["*"]),o=0,a=i.length;o<a;o++)if(r=i[o].call(n,t,e))return r}function lt(o,e,t){var n,a,r=0,i=lt.prefilters.length,s=S.Deferred().always(function(){delete u.elem}),u=function(){if(a)return!1;for(var e=Ze||at(),t=Math.max(0,l.startTime+l.duration-e),n=1-(t/l.duration||0),r=0,i=l.tweens.length;r<i;r++)l.tweens[r].run(n);return s.notifyWith(o,[l,n,t]),n<1&&i?t:(i||s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l]),!1)},l=s.promise({elem:o,props:S.extend({},e),opts:S.extend(!0,{specialEasing:{},easing:S.easing._default},t),originalProperties:e,originalOptions:t,startTime:Ze||at(),duration:t.duration,tweens:[],createTween:function(e,t){var n=S.Tween(o,l.opts,e,t,l.opts.specialEasing[e]||l.opts.easing);return l.tweens.push(n),n},stop:function(e){var t=0,n=e?l.tweens.length:0;if(a)return this;for(a=!0;t<n;t++)l.tweens[t].run(1);return e?(s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l,e])):s.rejectWith(o,[l,e]),this}}),c=l.props;for(!function(e,t){var n,r,i,o,a;for(n in e)if(i=t[r=X(n)],o=e[n],Array.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),(a=S.cssHooks[r])&&"expand"in a)for(n in o=a.expand(o),delete e[r],o)n in e||(e[n]=o[n],t[n]=i);else t[r]=i}(c,l.opts.specialEasing);r<i;r++)if(n=lt.prefilters[r].call(l,o,c,l.opts))return m(n.stop)&&(S._queueHooks(l.elem,l.opts.queue).stop=n.stop.bind(n)),n;return S.map(c,ut,l),m(l.opts.start)&&l.opts.start.call(o,l),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always),S.fx.timer(S.extend(u,{elem:o,anim:l,queue:l.opts.queue})),l}S.Animation=S.extend(lt,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return se(n.elem,e,te.exec(t),n),n}]},tweener:function(e,t){m(e)?(t=e,e=["*"]):e=e.match(P);for(var n,r=0,i=e.length;r<i;r++)n=e[r],lt.tweeners[n]=lt.tweeners[n]||[],lt.tweeners[n].unshift(t)},prefilters:[function(e,t,n){var r,i,o,a,s,u,l,c,f="width"in t||"height"in t,p=this,d={},h=e.style,g=e.nodeType&&ae(e),v=Y.get(e,"fxshow");for(r in n.queue||(null==(a=S._queueHooks(e,"fx")).unqueued&&(a.unqueued=0,s=a.empty.fire,a.empty.fire=function(){a.unqueued||s()}),a.unqueued++,p.always(function(){p.always(function(){a.unqueued--,S.queue(e,"fx").length||a.empty.fire()})})),t)if(i=t[r],rt.test(i)){if(delete t[r],o=o||"toggle"===i,i===(g?"hide":"show")){if("show"!==i||!v||void 0===v[r])continue;g=!0}d[r]=v&&v[r]||S.style(e,r)}if((u=!S.isEmptyObject(t))||!S.isEmptyObject(d))for(r in f&&1===e.nodeType&&(n.overflow=[h.overflow,h.overflowX,h.overflowY],null==(l=v&&v.display)&&(l=Y.get(e,"display")),"none"===(c=S.css(e,"display"))&&(l?c=l:(le([e],!0),l=e.style.display||l,c=S.css(e,"display"),le([e]))),("inline"===c||"inline-block"===c&&null!=l)&&"none"===S.css(e,"float")&&(u||(p.done(function(){h.display=l}),null==l&&(c=h.display,l="none"===c?"":c)),h.display="inline-block")),n.overflow&&(h.overflow="hidden",p.always(function(){h.overflow=n.overflow[0],h.overflowX=n.overflow[1],h.overflowY=n.overflow[2]})),u=!1,d)u||(v?"hidden"in v&&(g=v.hidden):v=Y.access(e,"fxshow",{display:l}),o&&(v.hidden=!g),g&&le([e],!0),p.done(function(){for(r in g||le([e]),Y.remove(e,"fxshow"),d)S.style(e,r,d[r])})),u=ut(g?v[r]:0,r,p),r in v||(v[r]=u.start,g&&(u.end=u.start,u.start=0))}],prefilter:function(e,t){t?lt.prefilters.unshift(e):lt.prefilters.push(e)}}),S.speed=function(e,t,n){var r=e&&"object"==typeof e?S.extend({},e):{complete:n||!n&&t||m(e)&&e,duration:e,easing:n&&t||t&&!m(t)&&t};return S.fx.off?r.duration=0:"number"!=typeof r.duration&&(r.duration in S.fx.speeds?r.duration=S.fx.speeds[r.duration]:r.duration=S.fx.speeds._default),null!=r.queue&&!0!==r.queue||(r.queue="fx"),r.old=r.complete,r.complete=function(){m(r.old)&&r.old.call(this),r.queue&&S.dequeue(this,r.queue)},r},S.fn.extend({fadeTo:function(e,t,n,r){return this.filter(ae).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(t,e,n,r){var i=S.isEmptyObject(t),o=S.speed(e,n,r),a=function(){var e=lt(this,S.extend({},t),o);(i||Y.get(this,"finish"))&&e.stop(!0)};return a.finish=a,i||!1===o.queue?this.each(a):this.queue(o.queue,a)},stop:function(i,e,o){var a=function(e){var t=e.stop;delete e.stop,t(o)};return"string"!=typeof i&&(o=e,e=i,i=void 0),e&&this.queue(i||"fx",[]),this.each(function(){var e=!0,t=null!=i&&i+"queueHooks",n=S.timers,r=Y.get(this);if(t)r[t]&&r[t].stop&&a(r[t]);else for(t in r)r[t]&&r[t].stop&&it.test(t)&&a(r[t]);for(t=n.length;t--;)n[t].elem!==this||null!=i&&n[t].queue!==i||(n[t].anim.stop(o),e=!1,n.splice(t,1));!e&&o||S.dequeue(this,i)})},finish:function(a){return!1!==a&&(a=a||"fx"),this.each(function(){var e,t=Y.get(this),n=t[a+"queue"],r=t[a+"queueHooks"],i=S.timers,o=n?n.length:0;for(t.finish=!0,S.queue(this,a,[]),r&&r.stop&&r.stop.call(this,!0),e=i.length;e--;)i[e].elem===this&&i[e].queue===a&&(i[e].anim.stop(!0),i.splice(e,1));for(e=0;e<o;e++)n[e]&&n[e].finish&&n[e].finish.call(this);delete t.finish})}}),S.each(["toggle","show","hide"],function(e,r){var i=S.fn[r];S.fn[r]=function(e,t,n){return null==e||"boolean"==typeof e?i.apply(this,arguments):this.animate(st(r,!0),e,t,n)}}),S.each({slideDown:st("show"),slideUp:st("hide"),slideToggle:st("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,r){S.fn[e]=function(e,t,n){return this.animate(r,e,t,n)}}),S.timers=[],S.fx.tick=function(){var e,t=0,n=S.timers;for(Ze=Date.now();t<n.length;t++)(e=n[t])()||n[t]!==e||n.splice(t--,1);n.length||S.fx.stop(),Ze=void 0},S.fx.timer=function(e){S.timers.push(e),S.fx.start()},S.fx.interval=13,S.fx.start=function(){et||(et=!0,ot())},S.fx.stop=function(){et=null},S.fx.speeds={slow:600,fast:200,_default:400},S.fn.delay=function(r,e){return r=S.fx&&S.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=C.setTimeout(e,r);t.stop=function(){C.clearTimeout(n)}})},tt=E.createElement("input"),nt=E.createElement("select").appendChild(E.createElement("option")),tt.type="checkbox",y.checkOn=""!==tt.value,y.optSelected=nt.selected,(tt=E.createElement("input")).value="t",tt.type="radio",y.radioValue="t"===tt.value;var ct,ft=S.expr.attrHandle;S.fn.extend({attr:function(e,t){return $(this,S.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){S.removeAttr(this,e)})}}),S.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?S.prop(e,t,n):(1===o&&S.isXMLDoc(e)||(i=S.attrHooks[t.toLowerCase()]||(S.expr.match.bool.test(t)?ct:void 0)),void 0!==n?null===n?void S.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=S.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!y.radioValue&&"radio"===t&&A(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(P);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),ct={set:function(e,t,n){return!1===t?S.removeAttr(e,n):e.setAttribute(n,n),n}},S.each(S.expr.match.bool.source.match(/\w+/g),function(e,t){var a=ft[t]||S.find.attr;ft[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=ft[o],ft[o]=r,r=null!=a(e,t,n)?o:null,ft[o]=i),r}});var pt=/^(?:input|select|textarea|button)$/i,dt=/^(?:a|area)$/i;function ht(e){return(e.match(P)||[]).join(" ")}function gt(e){return e.getAttribute&&e.getAttribute("class")||""}function vt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(P)||[]}S.fn.extend({prop:function(e,t){return $(this,S.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[S.propFix[e]||e]})}}),S.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&S.isXMLDoc(e)||(t=S.propFix[t]||t,i=S.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=S.find.attr(e,"tabindex");return t?parseInt(t,10):pt.test(e.nodeName)||dt.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),y.optSelected||(S.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),S.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){S.propFix[this.toLowerCase()]=this}),S.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(m(t))return this.each(function(e){S(this).addClass(t.call(this,e,gt(this)))});if((e=vt(t)).length)while(n=this[u++])if(i=gt(n),r=1===n.nodeType&&" "+ht(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=ht(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(m(t))return this.each(function(e){S(this).removeClass(t.call(this,e,gt(this)))});if(!arguments.length)return this.attr("class","");if((e=vt(t)).length)while(n=this[u++])if(i=gt(n),r=1===n.nodeType&&" "+ht(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=ht(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):m(i)?this.each(function(e){S(this).toggleClass(i.call(this,e,gt(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=S(this),r=vt(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=gt(this))&&Y.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":Y.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+ht(gt(n))+" ").indexOf(t))return!0;return!1}});var yt=/\r/g;S.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=m(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,S(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=S.map(t,function(e){return null==e?"":e+""})),(r=S.valHooks[this.type]||S.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=S.valHooks[t.type]||S.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(yt,""):null==e?"":e:void 0}}),S.extend({valHooks:{option:{get:function(e){var t=S.find.attr(e,"value");return null!=t?t:ht(S.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!A(n.parentNode,"optgroup"))){if(t=S(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=S.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<S.inArray(S.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),S.each(["radio","checkbox"],function(){S.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<S.inArray(S(e).val(),t)}},y.checkOn||(S.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),y.focusin="onfocusin"in C;var mt=/^(?:focusinfocus|focusoutblur)$/,xt=function(e){e.stopPropagation()};S.extend(S.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,p=[n||E],d=v.call(e,"type")?e.type:e,h=v.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||E,3!==n.nodeType&&8!==n.nodeType&&!mt.test(d+S.event.triggered)&&(-1<d.indexOf(".")&&(d=(h=d.split(".")).shift(),h.sort()),u=d.indexOf(":")<0&&"on"+d,(e=e[S.expando]?e:new S.Event(d,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:S.makeArray(t,[e]),c=S.event.special[d]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!x(n)){for(s=c.delegateType||d,mt.test(s+d)||(o=o.parentNode);o;o=o.parentNode)p.push(o),a=o;a===(n.ownerDocument||E)&&p.push(a.defaultView||a.parentWindow||C)}i=0;while((o=p[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||d,(l=(Y.get(o,"events")||Object.create(null))[e.type]&&Y.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&V(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=d,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(p.pop(),t)||!V(n)||u&&m(n[d])&&!x(n)&&((a=n[u])&&(n[u]=null),S.event.triggered=d,e.isPropagationStopped()&&f.addEventListener(d,xt),n[d](),e.isPropagationStopped()&&f.removeEventListener(d,xt),S.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=S.extend(new S.Event,n,{type:e,isSimulated:!0});S.event.trigger(r,null,t)}}),S.fn.extend({trigger:function(e,t){return this.each(function(){S.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return S.event.trigger(e,t,n,!0)}}),y.focusin||S.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){S.event.simulate(r,e.target,S.event.fix(e))};S.event.special[r]={setup:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r);t||e.addEventListener(n,i,!0),Y.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r)-1;t?Y.access(e,r,t):(e.removeEventListener(n,i,!0),Y.remove(e,r))}}});var bt=C.location,wt={guid:Date.now()},Tt=/\?/;S.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new C.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||S.error("Invalid XML: "+(n?S.map(n.childNodes,function(e){return e.textContent}).join("\n"):e)),t};var Ct=/\[\]$/,Et=/\r?\n/g,St=/^(?:submit|button|image|reset|file)$/i,kt=/^(?:input|select|textarea|keygen)/i;function At(n,e,r,i){var t;if(Array.isArray(e))S.each(e,function(e,t){r||Ct.test(n)?i(n,t):At(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==w(e))i(n,e);else for(t in e)At(n+"["+t+"]",e[t],r,i)}S.param=function(e,t){var n,r=[],i=function(e,t){var n=m(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!S.isPlainObject(e))S.each(e,function(){i(this.name,this.value)});else for(n in e)At(n,e[n],t,i);return r.join("&")},S.fn.extend({serialize:function(){return S.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=S.prop(this,"elements");return e?S.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!S(this).is(":disabled")&&kt.test(this.nodeName)&&!St.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=S(this).val();return null==n?null:Array.isArray(n)?S.map(n,function(e){return{name:t.name,value:e.replace(Et,"\r\n")}}):{name:t.name,value:n.replace(Et,"\r\n")}}).get()}});var Nt=/%20/g,jt=/#.*$/,Dt=/([?&])_=[^&]*/,qt=/^(.*?):[ \t]*([^\r\n]*)$/gm,Lt=/^(?:GET|HEAD)$/,Ht=/^\/\//,Ot={},Pt={},Rt="*/".concat("*"),Mt=E.createElement("a");function It(o){return function(e,t){"string"!=typeof e&&(t=e,e="*");var n,r=0,i=e.toLowerCase().match(P)||[];if(m(t))while(n=i[r++])"+"===n[0]?(n=n.slice(1)||"*",(o[n]=o[n]||[]).unshift(t)):(o[n]=o[n]||[]).push(t)}}function Wt(t,i,o,a){var s={},u=t===Pt;function l(e){var r;return s[e]=!0,S.each(t[e]||[],function(e,t){var n=t(i,o,a);return"string"!=typeof n||u||s[n]?u?!(r=n):void 0:(i.dataTypes.unshift(n),l(n),!1)}),r}return l(i.dataTypes[0])||!s["*"]&&l("*")}function Ft(e,t){var n,r,i=S.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&S.extend(!0,e,r),e}Mt.href=bt.href,S.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:bt.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(bt.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Rt,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":S.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Ft(Ft(e,S.ajaxSettings),t):Ft(S.ajaxSettings,e)},ajaxPrefilter:It(Ot),ajaxTransport:It(Pt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var c,f,p,n,d,r,h,g,i,o,v=S.ajaxSetup({},t),y=v.context||v,m=v.context&&(y.nodeType||y.jquery)?S(y):S.event,x=S.Deferred(),b=S.Callbacks("once memory"),w=v.statusCode||{},a={},s={},u="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(h){if(!n){n={};while(t=qt.exec(p))n[t[1].toLowerCase()+" "]=(n[t[1].toLowerCase()+" "]||[]).concat(t[2])}t=n[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return h?p:null},setRequestHeader:function(e,t){return null==h&&(e=s[e.toLowerCase()]=s[e.toLowerCase()]||e,a[e]=t),this},overrideMimeType:function(e){return null==h&&(v.mimeType=e),this},statusCode:function(e){var t;if(e)if(h)T.always(e[T.status]);else for(t in e)w[t]=[w[t],e[t]];return this},abort:function(e){var t=e||u;return c&&c.abort(t),l(0,t),this}};if(x.promise(T),v.url=((e||v.url||bt.href)+"").replace(Ht,bt.protocol+"//"),v.type=t.method||t.type||v.method||v.type,v.dataTypes=(v.dataType||"*").toLowerCase().match(P)||[""],null==v.crossDomain){r=E.createElement("a");try{r.href=v.url,r.href=r.href,v.crossDomain=Mt.protocol+"//"+Mt.host!=r.protocol+"//"+r.host}catch(e){v.crossDomain=!0}}if(v.data&&v.processData&&"string"!=typeof v.data&&(v.data=S.param(v.data,v.traditional)),Wt(Ot,v,t,T),h)return T;for(i in(g=S.event&&v.global)&&0==S.active++&&S.event.trigger("ajaxStart"),v.type=v.type.toUpperCase(),v.hasContent=!Lt.test(v.type),f=v.url.replace(jt,""),v.hasContent?v.data&&v.processData&&0===(v.contentType||"").indexOf("application/x-www-form-urlencoded")&&(v.data=v.data.replace(Nt,"+")):(o=v.url.slice(f.length),v.data&&(v.processData||"string"==typeof v.data)&&(f+=(Tt.test(f)?"&":"?")+v.data,delete v.data),!1===v.cache&&(f=f.replace(Dt,"$1"),o=(Tt.test(f)?"&":"?")+"_="+wt.guid+++o),v.url=f+o),v.ifModified&&(S.lastModified[f]&&T.setRequestHeader("If-Modified-Since",S.lastModified[f]),S.etag[f]&&T.setRequestHeader("If-None-Match",S.etag[f])),(v.data&&v.hasContent&&!1!==v.contentType||t.contentType)&&T.setRequestHeader("Content-Type",v.contentType),T.setRequestHeader("Accept",v.dataTypes[0]&&v.accepts[v.dataTypes[0]]?v.accepts[v.dataTypes[0]]+("*"!==v.dataTypes[0]?", "+Rt+"; q=0.01":""):v.accepts["*"]),v.headers)T.setRequestHeader(i,v.headers[i]);if(v.beforeSend&&(!1===v.beforeSend.call(y,T,v)||h))return T.abort();if(u="abort",b.add(v.complete),T.done(v.success),T.fail(v.error),c=Wt(Pt,v,t,T)){if(T.readyState=1,g&&m.trigger("ajaxSend",[T,v]),h)return T;v.async&&0<v.timeout&&(d=C.setTimeout(function(){T.abort("timeout")},v.timeout));try{h=!1,c.send(a,l)}catch(e){if(h)throw e;l(-1,e)}}else l(-1,"No Transport");function l(e,t,n,r){var i,o,a,s,u,l=t;h||(h=!0,d&&C.clearTimeout(d),c=void 0,p=r||"",T.readyState=0<e?4:0,i=200<=e&&e<300||304===e,n&&(s=function(e,t,n){var r,i,o,a,s=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(v,T,n)),!i&&-1<S.inArray("script",v.dataTypes)&&S.inArray("json",v.dataTypes)<0&&(v.converters["text script"]=function(){}),s=function(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(v,s,T,i),i?(v.ifModified&&((u=T.getResponseHeader("Last-Modified"))&&(S.lastModified[f]=u),(u=T.getResponseHeader("etag"))&&(S.etag[f]=u)),204===e||"HEAD"===v.type?l="nocontent":304===e?l="notmodified":(l=s.state,o=s.data,i=!(a=s.error))):(a=l,!e&&l||(l="error",e<0&&(e=0))),T.status=e,T.statusText=(t||l)+"",i?x.resolveWith(y,[o,l,T]):x.rejectWith(y,[T,l,a]),T.statusCode(w),w=void 0,g&&m.trigger(i?"ajaxSuccess":"ajaxError",[T,v,i?o:a]),b.fireWith(y,[T,l]),g&&(m.trigger("ajaxComplete",[T,v]),--S.active||S.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return S.get(e,t,n,"json")},getScript:function(e,t){return S.get(e,void 0,t,"script")}}),S.each(["get","post"],function(e,i){S[i]=function(e,t,n,r){return m(t)&&(r=r||n,n=t,t=void 0),S.ajax(S.extend({url:e,type:i,dataType:r,data:t,success:n},S.isPlainObject(e)&&e))}}),S.ajaxPrefilter(function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")}),S._evalUrl=function(e,t,n){return S.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){S.globalEval(e,t,n)}})},S.fn.extend({wrapAll:function(e){var t;return this[0]&&(m(e)&&(e=e.call(this[0])),t=S(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return m(n)?this.each(function(e){S(this).wrapInner(n.call(this,e))}):this.each(function(){var e=S(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=m(t);return this.each(function(e){S(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){S(this).replaceWith(this.childNodes)}),this}}),S.expr.pseudos.hidden=function(e){return!S.expr.pseudos.visible(e)},S.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},S.ajaxSettings.xhr=function(){try{return new C.XMLHttpRequest}catch(e){}};var Bt={0:200,1223:204},$t=S.ajaxSettings.xhr();y.cors=!!$t&&"withCredentials"in $t,y.ajax=$t=!!$t,S.ajaxTransport(function(i){var o,a;if(y.cors||$t&&!i.crossDomain)return{send:function(e,t){var n,r=i.xhr();if(r.open(i.type,i.url,i.async,i.username,i.password),i.xhrFields)for(n in i.xhrFields)r[n]=i.xhrFields[n];for(n in i.mimeType&&r.overrideMimeType&&r.overrideMimeType(i.mimeType),i.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest"),e)r.setRequestHeader(n,e[n]);o=function(e){return function(){o&&(o=a=r.onload=r.onerror=r.onabort=r.ontimeout=r.onreadystatechange=null,"abort"===e?r.abort():"error"===e?"number"!=typeof r.status?t(0,"error"):t(r.status,r.statusText):t(Bt[r.status]||r.status,r.statusText,"text"!==(r.responseType||"text")||"string"!=typeof r.responseText?{binary:r.response}:{text:r.responseText},r.getAllResponseHeaders()))}},r.onload=o(),a=r.onerror=r.ontimeout=o("error"),void 0!==r.onabort?r.onabort=a:r.onreadystatechange=function(){4===r.readyState&&C.setTimeout(function(){o&&a()})},o=o("abort");try{r.send(i.hasContent&&i.data||null)}catch(e){if(o)throw e}},abort:function(){o&&o()}}}),S.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),S.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return S.globalEval(e),e}}}),S.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),S.ajaxTransport("script",function(n){var r,i;if(n.crossDomain||n.scriptAttrs)return{send:function(e,t){r=S("<script>").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1<s&&(r=ht(e.slice(s)),e=e.slice(0,s)),m(t)?(n=t,t=void 0):t&&"object"==typeof t&&(i="POST"),0<a.length&&S.ajax({url:e,type:i||"GET",dataType:"html",data:t}).done(function(e){o=arguments,a.html(r?S("<div>").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}});var Xt=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;S.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),m(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||S.guid++,i},S.holdReady=function(e){e?S.readyWait++:S.ready(!0)},S.isArray=Array.isArray,S.parseJSON=JSON.parse,S.nodeName=A,S.isFunction=m,S.isWindow=x,S.camelCase=X,S.type=w,S.now=Date.now,S.isNumeric=function(e){var t=S.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},S.trim=function(e){return null==e?"":(e+"").replace(Xt,"")},"function"==typeof define&&define.amd&&define("jquery",[],function(){return S});var Vt=C.jQuery,Gt=C.$;return S.noConflict=function(e){return C.$===S&&(C.$=Gt),e&&C.jQuery===S&&(C.jQuery=Vt),S},"undefined"==typeof e&&(C.jQuery=C.$=S),S});
diff --git a/misc/install_comment_datamodel.py b/misc/install_comment_datamodel.py
new file mode 100755
index 0000000000000000000000000000000000000000..b8204811d37756c805c9ae8104cd4e58c6f19ab6
--- /dev/null
+++ b/misc/install_comment_datamodel.py
@@ -0,0 +1,41 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+#
+# ** header v3.0
+# This file is a part of the CaosDB Project.
+#
+# Copyright (C) 2020 IndiScale GmbH <info@indiscale.com>
+# Copyright (C) 2020 Timm Fitschen <t.fitschen@indiscale.com>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/>.
+#
+# ** end header
+
+import sys
+import caosdb as db
+
+
+if len(db.execute_query("FIND RecordType CommentAnnotation")) > 0:
+ print("RecordType CommentAnnotation does exist")
+ sys.exit(1)
+
+comment = db.Property("comment", datatype=db.TEXT).insert()
+annotationOf = db.Property("annotationOf", datatype=db.REFERENCE).insert()
+par = db.RecordType("Annotation")
+par.add_property(annotationOf, importance=db.OBLIGATORY)
+par.insert()
+rt = db.RecordType("CommentAnnotation").add_parent("Annotation",
+ inheritance=db.OBLIGATORY)
+rt.add_property(comment, importance=db.OBLIGATORY)
+rt.insert()
diff --git a/misc/merge_js.sh b/misc/merge_js.sh
new file mode 100755
index 0000000000000000000000000000000000000000..506a65866db42c329b4e19c197842f04bdfc4aca
--- /dev/null
+++ b/misc/merge_js.sh
@@ -0,0 +1,127 @@
+#!/bin/bash
+#
+# ** header v3.0
+# This file is a part of the CaosDB Project.
+#
+# Copyright (C) 2021 IndiScale GmbH
+# Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/>.
+#
+# ** end header
+
+# This file can be used to merge js files together.
+#
+# call: `./merge_js.sh [JS_FILE]*`
+# where the JS_FILE are the files which will be merged into the resulting
+# `public/webcaosdb.dist.js` in the order they appear in the command line
+# call. See `Makefile` for an example.
+#
+# All other files in `public/js` are appended to the resulting file in no
+# particular order.
+
+
+CORE_MODULES=$@
+PUBLIC_JS_DIR=public/js/
+DIST_BUNDLE=webcaosdb.dist.js
+DIST_BUNDLE_TARGET=public/${DIST_BUNDLE}
+JSHEADER_TARGET=public/xsl/jsheader.xsl
+ALL_SOURCES=()
+
+_create_jsheader () {
+ _JS_INCLUDE=
+ if [ "$JS_DIST_BUNDLE" == "TRUE" ] ; then
+ _SIZE=$(( $(wc -c ${DIST_BUNDLE_TARGET} | awk '{print $1}')/1024))
+ echo "including ${DIST_BUNDLE} (${_SIZE}kB) into ${JSHEADER_TARGET}"
+ _JS_INCLUDE="
+ <xsl:element name=\"script\">
+ <xsl:attribute name=\"src\">
+ <xsl:value-of select=\"concat(\$basepath,'webinterface/\${BUILD_NUMBER}/${DIST_BUNDLE}')\"/>
+ </xsl:attribute>
+ </xsl:element>
+ "
+ [[ -f "public/index.html" ]] && sed -i "s|^\(.*JS_INCLUDE.*\)$| <script src=\"${DIST_BUNDLE}\"><\/script>\n\1|g" public/index.html ;
+ else
+ _ALL_SOURCES=$@
+ echo "${_ALL_SOURCES}"
+ for _SOURCE in ${_ALL_SOURCES[@]} ; do
+ _SIZE=$(( $(wc -c ${_SOURCE} | awk '{print $1}')/1024))
+ _SOURCE=js/${_SOURCE/${PUBLIC_JS_DIR}/}
+ echo "including ${_SOURCE} (${_SIZE}kB) into ${JSHEADER_TARGET}"
+ _JS_INCLUDE="${_JS_INCLUDE}
+ <xsl:element name=\"script\">
+ <xsl:attribute name=\"src\">
+ <xsl:value-of select=\"concat(\$basepath,'webinterface/\${BUILD_NUMBER}/${_SOURCE}')\"/>
+ </xsl:attribute>
+ </xsl:element>
+ "
+ sed -i "s|^\(.*JS_INCLUDE.*\)$| <script src=\"${_SOURCE}\"><\/script>\n\1|g" public/index.html ;
+ done
+ fi
+
+
+ echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
+<!-- THIS FILE IS AUTO-GENERATED BY THE merge_js.sh SCRIPT -->
+<xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\">
+ <xsl:output method=\"html\"/>
+ <xsl:template name=\"caosdb-head-js\">
+ <script>
+ window.sessionStorage.caosdbBasePath = \"<xsl:value-of select=\"\$basepath\"/>\";
+ </script>
+ ${_JS_INCLUDE}
+ </xsl:template>
+</xsl:stylesheet>" > ${JSHEADER_TARGET}
+}
+
+function _merge () {
+ if [ "$JS_DIST_BUNDLE" != "TRUE" ] ; then
+ return 0
+ fi
+ _SOURCE=$2
+ _TARGET=$3
+
+ echo "merging $1 module ${_SOURCE} into ${_TARGET}"
+
+
+ echo "//COPIED FROM ${_SOURCE} (START)" >> ${_TARGET}
+ cat ${_SOURCE} >> ${_TARGET}
+ echo "//COPIED FROM ${_SOURCE} (END)" >> ${_TARGET}
+
+ rm ${_SOURCE}
+}
+
+# clean up old
+rm $DIST_BUNDLE_TARGET || true
+touch $DIST_BUNDLE_TARGET
+
+for _SOURCE in ${CORE_MODULES[@]} ; do
+ [[ ! " ${ALL_SOURCES[@]} " =~ " ${_SOURCE} " ]] && ALL_SOURCES+=(${PUBLIC_JS_DIR}${_SOURCE})
+ _merge "core" "${PUBLIC_JS_DIR}${_SOURCE}" $DIST_BUNDLE_TARGET
+done
+
+if [ "$AUTO_DISCOVER_MODULES" == "TRUE" ] ; then
+ # load other js files but exclude any subdirectory
+ for _SOURCE in $(find ${PUBLIC_JS_DIR}* -prune -iname "*.js") ; do
+ [[ ! " ${ALL_SOURCES[@]} " =~ " ${_SOURCE} " ]] && ALL_SOURCES+=(${_SOURCE})
+ _merge "extension" ${_SOURCE} $DIST_BUNDLE_TARGET
+ done
+fi
+
+# for `make test`
+for _SOURCE in $(find ${PUBLIC_JS_DIR} -ipath "${PUBLIC_JS_DIR}modules/*.js") ; do
+ [[ ! " ${ALL_SOURCES[@]} " =~ " ${_SOURCE} " ]] && ALL_SOURCES+=(${_SOURCE})
+ _merge "extension" ${_SOURCE} $DIST_BUNDLE_TARGET
+done
+
+_create_jsheader ${ALL_SOURCES[@]}
diff --git a/misc/merge_xsl.sh b/misc/merge_xsl.sh
index 07cc6d7ce8dc690eaa58ad8a42e6c883e5eda149..abf95444de1ca550f5cd66ae1f02e2f0587503f0 100755
--- a/misc/merge_xsl.sh
+++ b/misc/merge_xsl.sh
@@ -30,7 +30,7 @@
SOURCE_DIR=public/
-MERGE="xsl/footer.xsl xsl/filesystem.xsl xsl/entity.xsl xsl/query.xsl xsl/messages.xsl xsl/navbar.xsl xsl/main.xsl xsl/welcome.xsl xsl/common.xsl"
+MERGE="xsl/jsheader.xsl xsl/footer.xsl xsl/filesystem.xsl xsl/entity.xsl xsl/query.xsl xsl/messages.xsl xsl/navbar.xsl xsl/main.xsl xsl/welcome.xsl xsl/common.xsl"
TARGET=public/webcaosdb.xsl
diff --git a/misc/unit_test_http_server.py b/misc/unit_test_http_server.py
index 68e6a7434a584a26a242e5891329f3fb6c6d159f..56205df8d34491b865698742f6b24b1679894df8 100755
--- a/misc/unit_test_http_server.py
+++ b/misc/unit_test_http_server.py
@@ -153,5 +153,5 @@ class UnitTestHTTPServer(HTTPServer):
os._exit(self._exit_code)#pylint: disable=protected-access
-UnitTestHTTPServer(server_address=('127.0.0.1', int(sys.argv[1])),
+UnitTestHTTPServer(server_address=('0.0.0.0', int(sys.argv[1])),
timeout=float(sys.argv[2]), ignore_done=(sys.argv[3] == "True")).start()
diff --git a/src/core/css/tour.css b/src/core/css/tour.css
index 3bb471369b698981f49858b8127652e957a11f8d..beec314ff8f8aa944e1fbb1fd9efd20e1fb17aa5 100644
--- a/src/core/css/tour.css
+++ b/src/core/css/tour.css
@@ -29,40 +29,44 @@
width: 5em;
/* line-height: 50px; */
}
-.caosdb-v-tour-button.small {
- height: 2em;
- width: 2em;
+.caosdb-v-tour-button {
+ height: 1.5em;
+ width: 1.5em;
/* line-height: 30px; */
}
-
+
.caosdb-v-tour-highlight {
background-color: #ff593c !important;
color: white !important;
animation: color-change 1s 2;
}
+
.caosdb-v-tour-highlighter {
color: #ff593c;
animation: color-change 1s 3;
}
+.caosdb-v-tour-highlighter a:hover {
+ color: #212529;
+}
+
@keyframes color-change {
- 0% {
+ 0% {
box-shadow: 0 0 0 0 #ff593c;
- }
- 50% {
+ }
+ 50% {
box-shadow: 0 0 1em 0.5em #ff593c;
- }
- 100% {
+ }
+ 100% {
box-shadow: 0 0 0 0 #ff593c;
- }
+ }
}
.caosdb-v-tour-menu-entry-highlight {
- background-color: #ff593c !important;
+ background-color: #348187 !important;
color: white !important;
}
.caosdb-f-tour-menu-entry {
background-color: #ff593c;
- color: white !important;
}
.caosdb-f-tour-menu-entry:hover {
background-color: transparent;
@@ -88,9 +92,11 @@
/*}*/
.caosdb-f-tour-overview-entry.caosdb-v-tour-overview-entry-pageset {
}
+/*
.caosdb-f-tour-overview-entry.caosdb-v-tour-overview-entry-page {
display: none;
}
+*/
li.list-group-item > ul.list-group {
margin-bottom: 0px;
}
@@ -155,3 +161,97 @@ li.list-group-item > .btn {
color: LightSeaGreen;
}
+.caosdb-v-tour-overview {
+ padding: 0px;
+}
+
+.caosdb-v-tour-toc-sidebar {
+ height: 100%;
+ width: 200px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: #1a4548;
+ color: #e1eff0;
+ overflow-x: hidden;
+ padding-top: 20px;
+ visibility: hidden;
+}
+
+.caosdb-v-tour-toc-sidebar a {
+ color: #e1eff0;
+}
+
+.caosdb-v-tour-toc-sidebar a:hover {
+ color: #212529;
+}
+
+body.tour-sidebar-visible .caosdb-v-tour-toc-sidebar {
+ visibility: visible;
+}
+
+body.tour-sidebar-visible {
+ margin-left: 200px;
+}
+
+.caosdb-v-tour-toc-active-item {
+ background-color: #a1c4c6;
+}
+
+.caosdb-v-tour-toc-active-item a {
+ color: #333;
+}
+
+.caosdb-v-tour-toc-pageset {
+ width: 100%;
+ text-align: left;
+ color: #e1eff0;
+}
+.caosdb-v-tour-pn-btn {
+ width:6em;
+}
+
+button.caosdb-v-tour-toc-show {
+ position: fixed;
+ top: calc(50vh - 12px);
+ left: -2px;
+ padding: 0;
+ margin: 0;
+ border: none;
+ transform: rotate(45deg);
+ width: 24px;
+ height: 24px;
+ background-color: #1a4548;
+ visibility: hidden;
+ z-index: 100000;
+}
+
+div.caosdb-v-tour-toc-show {
+ background-color: #1a4548;
+ visibility: hidden;
+ width: 12px;
+ height: 100%;
+ position: fixed;
+ padding: 0;
+ margin: 0;
+ border: none;
+ z-index: 100000;
+}
+
+.caosdb-v-tour-toc-detour {
+ font-size: 0.875em;
+ padding-left: 1em;
+}
+
+.caosdb-v-tour-toc-cur {
+ border: 1px dashed #e1eff0;
+}
+
+.caosdb-v-tour-toc-active-item.caosdb-v-tour-toc-cur {
+ border: none;
+}
+
+/* For elements in popovers which are not for clicking but only illustrative. */
+.caosdb-v-tour-unclickable {
+ cursor: text !important;
+}
diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index 8d4fd1cfe69d64bf631c23eac033baee00873188..b76a5fe9ecc9f6d866dc159429ef7401ac3ddd5d 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -22,14 +22,29 @@
*/
@CHARSET "UTF-8";
+
+main {
+}
+
body {
- display: flex;
- flex-direction: column;
+ background-color: lightgrey;
+}
+
+.background {
+ background-color: white;
+ min-height: 60vh;
}
-html {
- min-height: 100vh%;
- background-color: lightgray;
+@media screen and (min-height: 1150px) {
+ .background {
+ min-height: 80vh;
+ }
+}
+
+
+footer {
+ background-color: lightgrey;
+ width:100%;
}
.caosdb-v-server-message strong {
@@ -64,12 +79,6 @@ tbody:not(:hover) tr .caosdb-v-entity-version-hint-cur {
color: unset;
}
-#top-navbar>ul>li>a {
- margin: 8px 0px;
- padding: 6px 12px;
- display: inline-block;
-}
-
.caosdb-v-state-model-label .caosdb-v-state-label {
margin-left: .6em; font-size: 100%;
}
@@ -83,7 +92,6 @@ tbody:not(:hover) tr .caosdb-v-entity-version-hint-cur {
.caosdb-v-bookmark-button:focus,
.caosdb-v-bookmark-button:hover {
color: #333;
- position: relative;
top: 3px;
}
@@ -123,20 +131,12 @@ tbody:not(:hover) tr .caosdb-v-entity-version-hint-cur {
text-align: center;
}
-button.caosdb-v-entity-version-button {
- height: 15px;
-}
-
.caosdb-v-entity-header-buttons-list > * {
- margin: 0;
- margin-left: 8px;
padding: 0;
- vertical-align: middle;
}
-.caosdb-v-main-col {
- flex-grow: 1;
- max-width: 90vw;
+.caosdb-v-entity-property-attributes {
+ font-size: 0.75em;
}
.caosdb-v-show-only-child {
@@ -159,7 +159,8 @@ button.caosdb-v-entity-version-button {
/* DEPRECATED css class .caosdb-property-text-value - Use
* .caosdb-f-property-single-raw-value or introduce new
* .caosdb-v-property-text-value */
-.caosdb-property-text-value {
+.caosdb-property-text-value,
+.caosdb-v-property-text-value {
white-space: pre-line;
}
@@ -183,24 +184,12 @@ button.caosdb-v-entity-version-button {
font-size: 16px;
}
-.caosdb-f-main {
- display: flex;
- width: unset;
- min-height: 65vh;
-}
-.caosdb-f-main-entities {
- width: calc(100% - 5px);
- min-width: 50vw;
-}
-
.caosdb-show-preview-button, .caosdb-hide-preview-button {
position: absolute;
- top: 2px;
- left: -8px;
-}
-
-.caosdb-entity-heading-attr {
- overflow-x: auto;
+ left: -0.65rem;
+ padding-left: 0;
+ padding-right: 0;
+ background-color: transparent !important;
}
a.label.caosdb-id-button:hover {
@@ -211,8 +200,12 @@ h5 {
margin: auto;
}
-.caosdb-properties-heading {
- display: none;
+.caosdb-f-main-entities {
+ max-width: 100%;
+}
+
+.caosdb-f-main-entities-edit {
+ max-width: calc(100% - 240px);
}
.caosdb-entity-preview .caosdb-entity-panel-body {
@@ -230,31 +223,42 @@ h5 {
.caosdb-preview-carousel-nav {
position: relative;
}
+
+.caosdb-query-form {
+ width: 100%;
+}
+
.caosdb-query-panel {
- padding-top: 20px;
- padding-bottom: 20px;
+ padding-top: 20px;
+ padding-bottom: 20px;
}
-.navbar-default .btn-link:hover {
+.navbar-light .btn-link:hover {
text-decoration: none;
}
-.navbar-default .btn-link:focus {
+.navbar-light .btn-link:focus {
text-decoration: none;
}
-.navbar-fixed-top, .navbar-fixed-bottom {
- position: sticky;
+.caosdb-v-property-left-col {
+ min-height: 30px;
+ display: inline-block;
+}
+
+.caosdb-v-property-left-col > * {
+ margin-top: 3px;
+ margin-bottom: 3px;
+ display: inline-block;
}
.caosdb-property-name {
- font-weight: bold;
- margin-left: 8px;
+ font-weight: bold;
}
.caosdb-square {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
}
.caosdb-entity-actions-panel {
@@ -275,14 +279,9 @@ h5 {
left: 0px;
}
-.caosdb-parent-name {
- margin: 0 0.4em;
- font-size: 14px;
- color: black;
-}
-
.caosdb-label-name {
font-weight: bold;
+ text-decoration: none;
}
/* lists of values */
@@ -296,7 +295,7 @@ h5 {
}
.caosdb-value-list > .btn-group,
.caosdb-value-list > ol {
- display: inline-block;
+ display: inline-block;
float: none;
white-space: nowrap;
margin-bottom: 0px;
@@ -304,32 +303,37 @@ h5 {
}
.caosdb-value-list > .list-inline > li {
- border-left-width: 0px;
+ background-color: white;
+ padding: 0.2rem 0.5rem;
+ margin: auto 0;
+ border: 1px solid #212529;
+ border-left-width: 0px;
+ font-size: 0.875rem;
}
.caosdb-value-list > .list-inline > li:first-child {
- border-radius: 4px 0px 0px 4px;
- border-left-width: 1px;
+ border-radius: 0.2rem 0px 0px 0.2rem;
+ border-left-width: 1px;
}
.caosdb-value-list > .list-inline > li:last-child {
- border-radius: 0px 4px 4px 0px;
+ border-radius: 0px 0.2rem 0.2rem 0px;
}
/* single boolean values */
.caosdb-boolean-true {
- font-weight: bold;
- font-size: 90%;
- border: 1px solid #bbb;
- padding: 2px 8px;
- border-radius: 8px;
+ font-weight: bold;
+ font-size: 90%;
+ border: 1px solid #bbb;
+ padding: 0 5px;
+ border-radius: 8px;
}
.caosdb-boolean-false {
font-weight: bold;
font-size: 90%;
border: 1px solid #bbb;
- padding: 2px 8px;
+ padding: 0 5px;
border-radius: 8px;
}
@@ -338,16 +342,14 @@ h5 {
border-bottom-right-radius: 3px;
}
-.caosdb-entity-panel-body {
- padding: 0px 10px;
-}
-
-.caosdb-entity-panel-body > :first-child {
- margin-top: 15px;
+.coasdb-entity-version-attr,
+.caosdb-entity-heading-attr {
+ overflow-x: auto;
}
+.coasdb-entity-version-attr-name,
.caosdb-entity-heading-attr-name {
- color: #6c6c6c;
+ color: #6c6c6c;
font-size: 90%;
margin-right: 0.3em;
}
@@ -377,25 +379,11 @@ h5 {
padding: 5px;
}
-.caosdb-v-edit-list {
- padding-left: 0px;
-}
-
-.caosdb-v-editmode-existing {
- height: 320.7px;
+.caosdb-v-editmode-existing ul {
+ height: 280.0px;
overflow-y: auto;
}
-.caosdb-v-edit-panel {
- position: sticky;
- top: 57px;
- padding: 0px;
- margin-top: 5px;
- margin-left: 5px;
- width: unset;
- height: 800px;
-}
-
.caosdb-v-editmode-btngroup {
padding-bottom: 15px;
}
@@ -426,33 +414,22 @@ h5 {
.caosdb-label-record {
background-color: #F92108;
- margin: -4px 0.2em 0 0.4em;
+ border: 1px solid #F92108;
}
.caosdb-label-recordtype {
background-color: #00A32E;
- margin-right: 8px;
+ border: 1px solid #00A32E;
}
.caosdb-label-property {
background-color: #496DAB;
- margin-right: 8px;
+ border: 1px solid #496DAB;
}
.caosdb-label-file {
background-color: #C92E86;
- margin-right: 8px;
-}
-
-.label.caosdb-id-button {
- background-color: #4E5752;
-}
-
-.caosdb-properties-heading {
- padding-top: 2px;
- padding-bottom: 2px;
- background-color: #f5f5f5;
- color: #7c7c7c;
+ border: 1px solid #C92E86;
}
.caosdb-parents-heading {
@@ -471,13 +448,13 @@ h5 {
.caosdb-parent-item {
border: 1px solid #666;
- border-radius: 1ex;
- padding: .3ex .2em .3ex;
- margin: 0 0.5em;
+ color: black;
+ text-decoration: none;
}
-.caosdb-f-parent-list {
- margin: 0 0.5em 0 auto;
+.caosdb-parent-item a {
+ color: black;
+ text-decoration: none;
}
.caosdb-unit {
@@ -486,44 +463,10 @@ h5 {
margin-left: 0.3em;
}
-.navbar-brand {
- display: flex;
- align-items: center;
-}
-
-.navbar-brand>img {
- padding: 0px 0px;
- height: 100%
-}
-
.caosdb-fs-cwd::before {
content: " > ";
}
-.caosdb-fs-dir>.glyphicon::before {
- content: "\e117";
-}
-
-.caosdb-fs-dir>.glyphicon {
- margin-right: 8px;
-}
-
-.caosdb-fs-dir:hover>.glyphicon::before {
- content: "\e118";
-}
-
-.caosdb-fs-file>.glyphicon::before {
- content: "\e022";
-}
-
-.caosdb-fs-file>.glyphicon {
- margin-right: 8px;
-}
-
-.caosdb-fs-file:hover>.glyphicon::before {
- content: "\e025";
-}
-
.caosdb-fs-btn-file {
padding: 0px;
background-color: transparent;
@@ -548,7 +491,10 @@ h5 {
}
.caosdb-logo {
+ margin-top: auto;
+ margin-bottom: auto;
margin-right: 8px;
+ max-height: 30px;
}
.caosdb-comment-action-item {
@@ -561,36 +507,6 @@ h5 {
border-left: 0px solid #7c7c7c;
}
-.caosdb-paging-panel {
- padding-left: 0px;
- padding-right: 0px;
-}
-
-.caosdb-pagination {
- margin: 5px 15px;
-}
-
-.caosdb-pagination-navbar {
- padding-bottom: 5px;
- position: fixed;
- bottom: 0px;
- width: 100%;
- border: 0px;
- border-top: 1px solid #e7e7e7;
- z-index: 1000;
- position: fixed;
-}
-
-.caosdb-heading {
- color: #5e5e5e;
- background-color: #f8f8f8;
- border-bottom: 1px solid #e7e7e7;
-}
-
-.caosdb-heading>.container {
- padding: 20px 0px;
-}
-
.spinning {
animation: spin 2s linear infinite;
}
@@ -602,7 +518,14 @@ h5 {
.caosdb-v-property-row {
animation: appear 0.5s 1;
- padding: 0.3ex 1em;
+ padding-left: 2.4rem;
+ padding-right: 1rem;
+ padding-top: 0.3ex;
+ padding-bottom: 0.3ex;
+ border-radius: none;
+ border-left: none;
+ border-right: none;
+
}
@keyframes appear {
@@ -649,8 +572,10 @@ input[type="file"] {
text-align: center;
color: #69c2df;
border: 2px dashed #69c2df;
- padding: 25px 0px;
- margin: 25px 0px;
+ padding: 25px 0;
+ margin: 1rem;
+ margin-top: 20px;
+ margin-bottom: 0px;
}
.caosdb-v-edit-mode-property-dropzone:hover {
@@ -700,25 +625,27 @@ input[type="file"] {
}
.caosdb-v-property-other-inputs {
- margin-top: 10px;
- margin-bottom: 10px;
+ margin-top: 6px;
+ margin-bottom: 6px;
}
-footer {
- background-color: lightgrey;
- padding: 0.5em;
+.caosdb-bulletsep {
+ margin-left: 2ch;
+ margin-right: 2ch;
}
-.caosdb-footer-element {
- margin: 1em;
+details summary .dropdown {
+ display:none;
+}
+details[open] summary .dropdown {
+ display:block;
}
-.caosdb-bulletsep {
- margin-left: 2ch;
- margin-right: 2ch;
+.modal-dialog {
+ top:80px;
}
-details summary {
+details summary {
cursor: pointer;
display: list-item;
}
@@ -726,3 +653,121 @@ details summary {
details summary > * {
display: inline;
}
+
+details p {
+ margin-bottom: 0.2rem;
+}
+
+.caosdb-v-tour-overview-entry-page a {
+ text-decoration: none;
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.25rem;
+}
+
+.caosdb-next-button,
+.caosdb-prev-button {
+ visibility: hidden;
+}
+
+.caosdb-next-button[href],
+.caosdb-prev-button[href] {
+ visibility: visible;
+}
+
+.caosdb-f-paging-panel {
+ display: none;
+ height: 31px;
+}
+
+.caosdb-f-show-paging-panel .caosdb-f-paging-panel {
+ display: flex;
+ justify-content: space-between;
+}
+
+.caosdb-properties {
+ margin-left: -1rem;
+ margin-right: -1rem;
+}
+
+.caosdb-v-state-label {
+ background-color: #333;
+}
+
+.caosdb-v-state-model-label {
+ background-color: #666;
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-right: 0;
+ font-size: inherit;
+}
+
+.caosdb-v-tour-popover-close-button {
+ padding: 0;
+ position: absolute;
+ top: 0.6rem;
+ right: 0.6rem;
+ font-size: 1rem;
+}
+
+.caosdb-f-property-value {
+ position: relative;
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+.caosdb-f-reference-value {
+ background-color: white;
+ padding: 0.2rem 0.5rem;
+}
+
+.caosdb-f-edit {
+ display: none;
+ position: relative;
+ width: 240px;
+ flex-shrink: 0;
+}
+
+.caosdb-v-edit-panel {
+ padding: 0px;
+ height: min-content;
+ position: fixed;
+ width: 240px;
+}
+
+.caosdb-f-show-paging-panel .caosdb-v-edit-panel {
+ margin-top: 39px;
+}
+
+.caosdb-query-response.card .card-header {
+ border: none;
+}
+
+.caosdb-f-entity-state-transition-button:hover {
+ filter: brightness(110%);
+}
+
+.caosdb-f-entity-state-transition-button {
+ border: none;
+}
+
+.caosdb-f-map-panel .leaflet-container {
+ height: 500px;
+}
+
+.caosdb-v-field .bootstrap-select button {
+ border: 1px solid #ced4da;
+ background-color: #FFF;
+}
+
+.caosdb-v-field > div {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+.caosdb-v-property-href-value {
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 0.875rem;
+ color: #5E6762;
+}
diff --git a/src/core/css/webcaosdb.less b/src/core/css/webcaosdb.less
deleted file mode 100644
index 5ecb7fdf28a4cf3e5f93c78863faaef40e34e385..0000000000000000000000000000000000000000
--- a/src/core/css/webcaosdb.less
+++ /dev/null
@@ -1,401 +0,0 @@
-/*
- * ** header v3.0
- * This file is a part of the CaosDB Project.
- *
- * Copyright (C) 2018 Research Group Biomedical Physics,
- * Max-Planck-Institute for Dynamics and Self-Organization Göttingen
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
- *
- * ** end header
- */
-
-@radius_normal: 4px;
-@margin_normal: 8px;
-@border1: 1px solid #e7e7e7;
-
-.caosdb-v-show-only-child {
- display: none;
-}
-
-.caosdb-v-show-only-child:only-child {
- display: initial;
-}
-
-.caosdb-comment-annotation-text h1 {
- font-size: 24px;
-}
-
-.caosdb-comment-annotation-text h2 {
- font-size: 20px;
-}
-
-.caosdb-comment-annotation-text h3 {
- font-size: 18px;
-}
-
-.caosdb-comment-annotation-text h4 {
- font-size: 16px;
-}
-
-.caosdb-show-preview-button, .caosdb-hide-preview-button {
- position: absolute;
- top: 5px;
- left: -5px;
-}
-
-.caosdb-entity-heading-attr {
- overflow-x: auto;
-}
-
-a.label.caosdb-id-button:hover {
- background-color: #5E6762;
-}
-
-.caosdb-entity-preview .caosdb-entity-panel-body {
- overflow-y: auto;
- max-height: 250px;
-}
-
-.caosdb-preview-carousel-nav > .caosdb-value-list > .btn-group > .btn:first-child {
- margin-left: 34px;
-}
-.caosdb-preview-carousel-nav > .caosdb-value-list > .btn-group > .btn:last-child {
- margin-right: 34px;
-}
-
-.caosdb-preview-carousel-nav {
- position: relative;
-}
-.caosdb-query-panel {
- padding-top: 20px;
- padding-bottom: 20px;
-}
-
-.navbar-default .btn-link:hover {
- text-decoration: none;
-}
-
-.navbar-default .btn-link:focus {
- text-decoration: none;
-}
-
-.caosdb-property-name {
- font-weight: bold;
- margin-left: @margin-normal;
-}
-
-.caosdb-square {
- position: relative;
- overflow: hidden;
-}
-
-.caosdb-square::before {
- content: "";
- display: block;
- padding-top: 100%;
-}
-
-.caosdb-square-content {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
-}
-
-.caosdb-parent-name {
- font-weight: bold;
- margin-right: 4px;
-}
-
-/* lists of values */
-/* INLINE (with default scroll-bar) */
-.caosdb-value-list {
- overflow-x: auto;
-}
-
-.caosdb-value-list > .btn-group > .btn {
- float: none;
-}
-.caosdb-value-list > .btn-group,
-.caosdb-value-list > ol {
- display: inline-block;
- float: none;
- white-space: nowrap;
- margin-bottom: 0px;
- margin-left: 0px;
-}
-
-.caosdb-value-list > .list-inline > li {
- border-left-width: 0px;
-}
-
-.caosdb-value-list > .list-inline > li:first-child {
- border-radius: @radius_normal 0px 0px @radius_normal;
- border-left-width: 1px;
-}
-
-.caosdb-value-list > .list-inline > li:last-child {
- border-radius: 0px @radius_normal @radius_normal 0px;
-}
-
-/* single boolean values */
-.caosdb-boolean-true {
- font-weight: bold;
- font-size: 90%;
- border: 1px solid #bbb;
- padding: 2px 8px;
- border-radius: 8px;
-}
-
-.caosdb-boolean-false {
- .caosdb-boolean-true();
-}
-
-.caosdb-entity-panel-heading {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
-}
-
-.caosdb-entity-panel-body {
- padding: 0px 15px;
-}
-
-.caosdb-entity-panel-body > :first-child {
- margin-top: 15px;
-}
-
-.caosdb-entity-heading-attr-name {
- color: #6c6c6c;
- font-size: 90%;
- margin-right: 0.3em;
-}
-
-.caosdb-subproperty-divider {
- margin: 4px 0px;
- border-top: 1px solid #dddddd
-}
-
-.caosdb-prop-label {
- background-color: #f5f5f5;
- font-weight: bold;
- padding: 8px 15px;
-}
-
-.caosdb-prop-value {
- background-color: #ffffff;
- padding: 8px 15px;
-}
-
-.caosdb-prop-list-group .row {
- margin-left: 0px;
- margin-right: 0px;
-}
-
-.caosdb-prop-list-group>.list-group-item {
- padding: 0px
-}
-
-.caosdb-prop-list-group>.list-group-item:first-child .caosdb-prop-label
- {
- border-top-left-radius: @radius_normal;
- border-top-right-radius: @radius_normal;
-}
-
-.caosdb-prop-list-group>.list-group-item:first-child .caosdb-prop-value
- {
- border-top-right-radius: @radius_normal;
-}
-
-.caosdb-prop-list-group>.list-group-item:last-child .caosdb-prop-label {
- border-bottom-left-radius: @radius_normal;
-}
-
-.caosdb-prop-list-group>.list-group-item:last-child .caosdb-prop-value {
- border-bottom-left-radius: @radius_normal;
- border-bottom-right-radius: @radius_normal;
-}
-
-.caosdb-label-record {
- background-color: #F92108;
- margin-right: @margin-normal;
-}
-
-.caosdb-label-recordtype {
- background-color: #00A32E;
- margin-right: @margin-normal;
-}
-
-.caosdb-label-property {
- background-color: #496DAB;
- margin-right: @margin-normal;
-}
-
-.caosdb-label-file {
- background-color: #C92E86;
- margin-right: @margin-normal;
-}
-
-.label.caosdb-id-button {
- background-color: #4E5752;
-}
-
-
-.caosdb-properties-heading {
- padding-top: 2px;
- padding-bottom: 2px;
- background-color: #f5f5f5;
- color: #7c7c7c
-}
-
-.caosdb-parents-heading {
- .caosdb-properties-heading();
-}
-
-.caosdb-comments-heading {
- .caosdb-properties-heading();
-}
-
-.caosdb-parent-item {
- padding-left: 40px;
- text-indent: -40px
-}
-
-.caosdb-unit {
- color: #8c8c8c;
- font-size: 80%;
- margin-left: 0.3em;
-}
-
-.navbar-brand {
- display: flex;
- align-items: center;
-}
-
-.navbar-brand>img {
- padding: 0px 0px;
- height: 100%
-}
-
-.caosdb-fs-cwd::before {
- content: " > ";
-}
-
-.caosdb-fs-dir>.glyphicon::before {
- content: "\e117";
-}
-
-.caosdb-fs-dir>.glyphicon {
- margin-right: @margin-normal;
-}
-
-.caosdb-fs-dir:hover>.glyphicon::before {
- content: "\e118";
-}
-
-.caosdb-fs-file>.glyphicon::before {
- content: "\e022";
-}
-
-.caosdb-fs-file>.glyphicon {
- margin-right: @margin-normal;
-}
-
-.caosdb-fs-file:hover>.glyphicon::before {
- content: "\e025";
-}
-
-.caosdb-fs-btn-file {
- padding: 0px;
- background-color: transparent;
- border: 0px;
-}
-
-.caosdb-fs-btn-file:hover .caosdb-label-file {
- background-color: #F96EB6;
-}
-
-.caosdb-fs-btn-file:hover .caosdb-label-id {
- background-color: #6E8782;
-}
-
-.back-to-top {
- cursor: pointer;
- position: fixed;
- bottom: 10px;
- right: 15px;
- display: none;
- z-index: 1050;
-}
-
-.caosdb-logo {
- margin-right: @margin-normal;
-}
-
-.caosdb-comment-action-item {
- padding-left: 4px;
- padding-right: 4px;
- border-left: 1px solid #7c7c7c;
-}
-
-.caosdb-comment-action>.caosdb-comment-action-item:first-child {
- border-left: 0px solid #7c7c7c;
-}
-
-.caosdb-pagination {
- margin: 5px 15px;
-}
-
-.caosdb-pagination-navbar {
- padding-bottom: 5px;
- position: fixed;
- bottom: 0px;
- width: 100%;
- border: 0px;
- border-top: @border1;
- z-index: 1000;
- position: fixed;
-}
-
-.caosdb-heading {
- color: #5e5e5e;
- background-color: #f8f8f8;
- border-bottom: @border1;
-}
-
-.caosdb-heading>.container {
- padding: 20px 0px;
-}
-
-.spinning {
- animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-.flipped-horiz-icon {
- transform: scaleX(-1);
-}
-
-.spacer {
- margin-left: 12px;
-}
-
-input[type="file"] {
- display: none;
-}
diff --git a/src/core/js/annotation.js b/src/core/js/annotation.js
index 685930da76d73980985210484a60f51690e45a46..42b4217cf2a7c2cd1214d0384ba09a23e2cddaf3 100644
--- a/src/core/js/annotation.js
+++ b/src/core/js/annotation.js
@@ -36,12 +36,12 @@ this.annotation = new function() {
this.createNewCommentForm = function(entityId) {
var form = $('<form class="caosdb-new-comment-form">' +
'<input type="hidden" name="annotationOf" value="' + entityId + '"> ' +
- '<div class="form-group">' +
+ '<div class="form-control">' +
'<label for="comment">Your new comment:</label>' +
'<textarea class="form-control" rows="5" name="newComment" title="Your comment with 5 or more characters." pattern=".{5,}"></textarea>' +
'</div>' +
- '<button class="btn btn-default" title="Submit this comment." type="submit" name="submit" value="Submit">Submit</button>' +
- '<button class="btn btn-default" title="Cancel this comment." type="reset" name="cancel" value="Cancel">Cancel</button>' +
+ '<button class="btn btn-secondary" title="Submit this comment." type="submit" name="submit" value="Submit">Submit</button>' +
+ '<button class="btn btn-secondary" title="Cancel this comment." type="reset" name="cancel" value="Cancel">Cancel</button>' +
'</form>');
return form[0];
}
@@ -117,7 +117,7 @@ this.annotation = new function() {
this.createError = function(error) {
var ret = $('<div class="alert alert-danger caosdb-new-comment-error alert-dismissable">' +
- '<button class="close" data-dismiss="alert" aria-label="close">×</button>' +
+ '<button class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>' +
'<strong>' + error.name + '!</strong> ' + error.message + '<p class="small"><pre><code>' +
(error.stack ? error.stack : "") + '</code></pre></p></div>')[0];
return ret;
@@ -390,9 +390,15 @@ this.annotation = new function() {
}
this.loadComments = async function(annotationSection) {
- var entityId = annotation.getEntityId(annotationSection);
- var annotations = await annotation.getAnnotationsForEntity(entityId, annotation.queryAnnotation, annotation.loadAnnotationXsl(connection.getBasePath()));
+ const entityId = annotation.getEntityId(annotationSection);
+ const annotations = await annotation.getAnnotationsForEntity(entityId, annotation.queryAnnotation, annotation.loadAnnotationXsl(connection.getBasePath()));
+ const len = annotations.length;
$(annotationSection).append(annotations);
+ if (len > 0) {
+ const button = $(`#${entityId} .caosdb-v-entity-header-buttons-list .caosdb-v-entity-comment-badge`);
+ button.empty();
+ button.append(`<span class="badge bg-dark caosdb-v-entity-number-of-comments">${len}<i class="bi-chat-left-fill ms-1"></i></span>`);
+ }
}
/**
@@ -427,4 +433,8 @@ this.annotation = new function() {
}
};
-$(document).ready(annotation.init);
+$(document).ready(function() {
+ if ("${BUILD_MODULE_EXT_ANNOTATION}" == "ENABLED") {
+ caosdb_modules.register(annotation);
+ }
+});
diff --git a/src/core/js/caosdb.js b/src/core/js/caosdb.js
index cb10201556af4eca6fd3105397eda1a3f5552c0b..90d6bfd23b989bbff133a63d65e1e68d99f4b3bb 100644
--- a/src/core/js/caosdb.js
+++ b/src/core/js/caosdb.js
@@ -632,7 +632,7 @@ function getPropertyFromElement(propertyelement, names = undefined) {
}
} else {
// list of anything but references
- listel = findElementByConditions(valel, x => x.classList.contains("list-group-item"),
+ listel = findElementByConditions(valel, x => x.classList.contains("list-inline-item"),
x => x.classList.contains("caosdb-preview-container"));
for (var j = 0; j < listel.length; j++) {
property.value.push(listel[j].textContent);
@@ -805,7 +805,7 @@ function setPropertySafe(valueelement, property, propold) {
} else {
finalstring = '';
for (var i = 0; i < property.value.length; i++) {
- finalstring += '<a class="btn btn-default btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value[i] + '"><span class="caosdb-id">' + property.value[i] + '</span><span class="caosdb-resolve-reference-target" /></a>';
+ finalstring += '<a class="btn btn-secondary btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value[i] + '"><span class="caosdb-id">' + property.value[i] + '</span><span class="caosdb-resolve-reference-target" /></a>';
}
}
valueelement.getElementsByClassName("caosdb-value-list")[0].getElementsByClassName("caosdb-overflow-content")[0].innerHTML = finalstring;
@@ -819,15 +819,12 @@ function setPropertySafe(valueelement, property, propold) {
ael.setAttribute("href", serverstring + property.value);
ael.innerHTML = '<span class="caosdb-id">' + property.value + '</span><span class="caosdb-resolve-reference-target" />';
} else {
- finalstring = '<a class="btn btn-default btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value + '"><span class="caosdb-id">' + property.value + '</span><span class="caosdb-resolve-reference-target" /></a>';
+ finalstring = '<a class="btn btn-secondary btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value + '"><span class="caosdb-id">' + property.value + '</span><span class="caosdb-resolve-reference-target" /></a>';
valueelement.innerHTML = finalstring;
preview.init();
}
} else {
- /* DEPRECATED css class .caosdb-property-text-value - Use
- * .caosdb-f-property-single-raw-value or introduce new
- * .caosdb-v-property-text-value */
- valueelement.innerHTML = "<span class='caosdb-property-text-value'>" + property.value + "</span>";
+ valueelement.innerHTML = "<span class='caosdb-f-property-single-raw-value caosdb-f-property-text-value caosdb-v-property-text-value'>" + property.value + "</span>";
}
}
@@ -1158,22 +1155,6 @@ async function retrieve_dragged_property(id) {
return transformation.transformProperty(entities);
}
-/**
- * Retrieve all properties and record types and convert them into
- * a web page using a specialized XSLT named entity palette.
- * @return An array of entities.
- */
-async function retrieve_data_model() {
- // TODO possibly allow single query
- let props = await connection.get("Entity/?query=FIND Property");
- let rts = await connection.get("Entity/?query=FIND RecordType");
- for (var p of props.children[0].children) {
- rts.children[0].appendChild(p.cloneNode());
- }
- return transformation.transformEntityPalette(rts);
-}
-
-
/**
* Update an entity using its xml representation.
* @param xml The xml of the entity which will be automatically wrapped with an Update.
diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js
index aad96fca3e2d391352c582167975d163f6d1c2ac..85645aabaf7d05cb7abe928b4792b5de6ef9e352 100644
--- a/src/core/js/edit_mode.js
+++ b/src/core/js/edit_mode.js
@@ -5,6 +5,8 @@
* Copyright (C) 2018 Research Group Biomedical Physics,
* Max-Planck-Institute for Dynamics and Self-Organization Göttingen
* Copyright (C) 2019 Henrik tom Wörden
+ * Copyright (C) 2019-2021 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2019-2021 Timm Fitschen <t.fitschen@indiscale.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
@@ -27,7 +29,7 @@
/**
* Edit mode module
*/
-var edit_mode = new function() {
+var edit_mode = new function () {
var logger = log.getLogger("edit_mode");
@@ -63,30 +65,41 @@ var edit_mode = new function() {
*/
this.property_data_type_changed = new Event("caosdb.edit_mode.property_data_type_changed");
- this.init = function() {
+ /**
+ * Initialize this module
+ */
+ this.init = function () {
if (isAuthenticated()) {
- var target = $("#top-navbar").find("ul").first();
- this.add_edit_mode_button(target, edit_mode.toggle_edit_mode);
- if (this.is_edit_mode()) {
- edit_mode.enter_edit_mode();
- edit_mode.toggle_edit_panel();
- }
- $('.caosdb-f-edit').css("transition", "top 1s");
+ this._init();
} else {
window.localStorage.removeItem("edit_mode");
}
}
+ this._init = function () {
+ var target = $("#top-navbar").find("ul").first();
+ this.add_edit_mode_button(target, edit_mode.toggle_edit_mode);
+ if (this.is_edit_mode()) {
+ edit_mode.enter_edit_mode();
+ edit_mode.toggle_edit_panel();
+ // This is for the very specific case of reloading the
+ // page while the edit mode is active on small screens
+ $(".caosdb-edit-min-width-warning").removeClass("d-none");
+ $(".caosdb-edit-min-width-warning").addClass("d-block");
+ }
+ $('.caosdb-f-edit').css("transition", "top 1s");
+ }
+
- this.dragstart = function(e) {
+ this.dragstart = function (e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
- this.dragleave = function(e) {
+ this.dragleave = function (e) {
edit_mode.unhighlight();
}
- this.dragover = function(e) {
+ this.dragover = function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = "copy";
edit_mode.highlight(this);
@@ -99,7 +112,7 @@ var edit_mode = new function() {
* @param new_prop
* @param make_property_editable_cb
*/
- this.add_new_property = function(entity, new_prop, make_property_editable_cb = edit_mode.make_property_editable) {
+ this.add_new_property = function (entity, new_prop, make_property_editable_cb = edit_mode.make_property_editable) {
if (typeof entity === "undefined" || !(entity instanceof HTMLElement)) {
throw new TypeError("entity must instantiate HTMLElement");
}
@@ -119,7 +132,7 @@ var edit_mode = new function() {
* @param {Event} e - the drop event.
* @param {HTMLElement} entity - the entity.
*/
- this.add_dropped_property = function(e, entity) {
+ this.add_dropped_property = function (e, entity) {
var propsrcid = e.dataTransfer.getData("text/plain");
var tmp_id = propsrcid.split("-");
var prop_id = tmp_id[tmp_id.length - 1];
@@ -144,7 +157,7 @@ var edit_mode = new function() {
* @param {Event} e - the drop event.
* @param {HTMLElement} entity - the entity.
*/
- this.add_dropped_parent = function(e, entity) {
+ this.add_dropped_parent = function (e, entity) {
var propsrcid = e.dataTransfer.getData("text/plain");
var parent_list = entity.getElementsByClassName("caosdb-f-parent-list")[0]
var tmp_id = propsrcid.split("-");
@@ -157,34 +170,28 @@ var edit_mode = new function() {
var dragged_rt = str2xml('<Response><RecordType id="' + prop_id + '" name="' + name + '"></RecordType></Response>');
transformation.transformParent(dragged_rt).then(new_prop => {
parent_list.appendChild(new_prop);
- /*
- edit_mode.add_one_delete_button(
- parent_list.children[parent_list.children.length-1],
- is_parent=true
- );
- */
edit_mode.add_parent_delete_buttons(entity);
}, edit_mode.handle_error);
}
}
- this.property_drop_listener = function(e) {
+ this.property_drop_listener = function (e) {
edit_mode._drop_listener.call(this, e, edit_mode.add_dropped_property);
}
- this.parent_drop_listener = function(e) {
+ this.parent_drop_listener = function (e) {
edit_mode._drop_listener.call(this, e, edit_mode.add_dropped_parent);
}
- this._drop_listener = function(e, add_cb) {
+ this._drop_listener = function (e, add_cb) {
e.preventDefault();
edit_mode.unhighlight();
const app = edit_mode.app;
const state = app.state;
- if(state === "initial"){
+ if (state === "initial") {
var entity = $(this).parent();
app.startEdit(entity[0]);
} else if (state !== "changed") {
@@ -197,7 +204,7 @@ var edit_mode = new function() {
// Dropping a RecordType in the heading will add it as a parent.
// This is done by this function.
- this.parent_drop = function(e) {
+ this.parent_drop = function (e) {
logger.assert(edit_mode.app.state === "changed", "state should be changed. Current state: ", edit_mode.app.state, edit_mode.app, e);
e.preventDefault();
edit_mode.unhighlight();
@@ -205,7 +212,7 @@ var edit_mode = new function() {
}
- this.set_entity_dropable = function(entity, dragover, dragleave, parent_drop, property_drop) {
+ this.set_entity_dropable = function (entity, dragover, dragleave, parent_drop, property_drop) {
if (getEntityRole(entity) === "Property") {
// currently no parents and subproperties for properties.
return;
@@ -225,7 +232,7 @@ var edit_mode = new function() {
}
- this.unset_entity_dropable = function(entity, dragover, dragleave, parent_drop, property_drop) {
+ this.unset_entity_dropable = function (entity, dragover, dragleave, parent_drop, property_drop) {
var rts = entity.getElementsByClassName("caosdb-entity-panel-body");
for (var rel of rts) {
rel.removeEventListener("dragleave", dragleave);
@@ -240,11 +247,11 @@ var edit_mode = new function() {
}
}
- this.remove_save_button = function(ent) {
+ this.remove_save_button = function (ent) {
$(ent).find('.caosdb-f-entity-save-button').remove();
}
- this.add_save_button = function(ent, callback) {
+ this.add_save_button = function (ent, callback) {
var save_btn = $('<button class="btn btn-link caosdb-update-entity-button caosdb-f-entity-save-button">Save</button>');
$(ent).find(".caosdb-f-edit-mode-entity-actions-panel").append(save_btn);
@@ -279,7 +286,7 @@ var edit_mode = new function() {
* last trash button for the last parent if the header belongs to a
* record).
*/
- this.add_parent_delete_buttons = function(header) {
+ this.add_parent_delete_buttons = function (header) {
$(header).find(".caosdb-f-parent-trash-button").remove();
var parents = $(header).find(".caosdb-parent-item");
if ((parents.length > 1) || getEntityRole(header) != "Record") {
@@ -295,7 +302,7 @@ var edit_mode = new function() {
* Append a trash button with class "caosdb-f-parent-trash-button", bind a
* remove on the deletable, and bind a callback function to click.
*/
- this.add_parent_trash_button = function(appendable, deletable, callback = undefined) {
+ this.add_parent_trash_button = function (appendable, deletable, callback = undefined) {
edit_mode.add_trash_button(appendable, deletable, "caosdb-f-parent-trash-button", callback);
}
@@ -303,7 +310,7 @@ var edit_mode = new function() {
* Append a trash button with class "caosdb-f-property-trash-button" and
* bind a remove on the deletable.
*/
- this.add_property_trash_button = function(appendable, deletable) {
+ this.add_property_trash_button = function (appendable, deletable) {
edit_mode.add_trash_button(appendable, deletable, "caosdb-f-property-trash-button", undefined, "Remove this property");
}
@@ -319,9 +326,9 @@ var edit_mode = new function() {
* @param {string} [title] - optional title for the button element.
* @return {undefined}
*/
- this.add_trash_button = function(appendable, deletable, className, callback = undefined, title = undefined) {
- var button = $('<button class="btn btn-link ' + className + ' caosdb-f-entity-trash-button"><span class="glyphicon glyphicon-trash"></span></button>');
- if(title) {
+ this.add_trash_button = function (appendable, deletable, className, callback = undefined, title = undefined) {
+ var button = $('<button class="btn btn-link p-0 ' + className + ' caosdb-f-entity-trash-button"><i class="bi-trash"></i></button>');
+ if (title) {
button.attr("title", title);
}
$(appendable).append(button);
@@ -366,7 +373,11 @@ var edit_mode = new function() {
atomic = "REFERENCE";
}
- return { "atomic_datatype": atomic, "reference_scope": ref, "is_list": is_list};
+ return {
+ "atomic_datatype": atomic,
+ "reference_scope": ref,
+ "is_list": is_list
+ };
}
/**
@@ -407,10 +418,10 @@ var edit_mode = new function() {
* of entities in HTML representation.
* @returns {XMLDocument} the unprocessed server response.
*/
- this.insert_entity = async function(ent_elements) {
+ this.insert_entity = async function (ent_elements) {
ent_elements = caosdb_utils.assert_array(ent_elements, "param `ent_elements`", true);
var xmls = [];
- for ( const ent_element of ent_elements ) {
+ for (const ent_element of ent_elements) {
xmls.push(edit_mode.form_to_xml(ent_element));
}
return await insert(xmls);
@@ -423,7 +434,7 @@ var edit_mode = new function() {
* @returns {Document|DocumentFragment} - An xml document containing the
* entity in XML representation.
*/
- this.form_to_xml = function(entity_form) {
+ this.form_to_xml = function (entity_form) {
const obj = form_elements.form_to_object($(entity_form).find("form")[0])[0];
var entityRole = getEntityRole(entity_form);
var file_path = undefined;
@@ -454,11 +465,11 @@ var edit_mode = new function() {
/**
* TODO merge with getPropertyFromElement in caosdb.js
*/
- this.getPropertyFromElement = function(element) {
+ this.getPropertyFromElement = function (element) {
var editfield = $(element).find(".caosdb-f-property-value");
var property = getPropertyFromElement(element);
- var _parse_single_datetime = function(field) {
+ var _parse_single_datetime = function (field) {
let time = $(field).find(":input[type='time']").val()
let date = $(field).find(":input[type='date']").val();
if (time) {
@@ -471,7 +482,7 @@ var edit_mode = new function() {
// LISTs need to be handled here
if (property.list == true) {
property.value = [];
- if (["TEXT","DOUBLE","INTEGER"].includes(property.listDatatype)) {
+ if (["TEXT", "DOUBLE", "INTEGER"].includes(property.listDatatype)) {
// LOOP over elements of editfield.find(":input")
for (var singleelement of $(editfield).find(":not(.caosdb-f-list-item-button):input:not(.caosdb-unit)")) {
property.value.push($(singleelement).val());
@@ -489,7 +500,7 @@ var edit_mode = new function() {
throw ("This property's data type is not supported by the webui. Please issue a feature request for support for `" + property.datatype + "`.");
}
} else {
- if (["TEXT","DOUBLE","INTEGER"].includes(property.datatype)) {
+ if (["TEXT", "DOUBLE", "INTEGER"].includes(property.datatype)) {
property.value = editfield.find(":input:not(.caosdb-unit)").val();
} else if (property.datatype == "DATETIME") {
property.value = _parse_single_datetime(editfield);
@@ -511,7 +522,7 @@ var edit_mode = new function() {
*
* ent_element : {HTMLElement} entity in view mode
*/
- this.getProperties = function(ent_element) {
+ this.getProperties = function (ent_element) {
const properties = [];
if (ent_element) {
const prop_elements = getPropertyElements(ent_element);
@@ -525,22 +536,25 @@ var edit_mode = new function() {
}
- this.update_entity = async function(ent_element) {
+ this.update_entity = async function (ent_element) {
var xml = edit_mode.form_to_xml(ent_element);
return await edit_mode.update(xml);
}
this.update = update;
- this.add_edit_mode_button = function(target, toggle_function) {
- var edit_mode_li = $('<li><button class="navbar-btn btn btn-link caosdb-f-btn-toggle-edit-mode">Edit Mode</button></li>');
+ this.add_edit_mode_button = function (target, toggle_function) {
+ var edit_mode_li = $('<li class="nav-item"><a class="nav-link caosdb-f-btn-toggle-edit-mode" role="button">Edit Mode</a></li>');
$(target).append(edit_mode_li);
$(".caosdb-f-btn-toggle-edit-mode").click(toggle_function);
+ var min_width_warning = $('<div class="alert alert-warning caosdb-edit-min-width-warning d-lg-none d-none" role="alert"><strong>Warning</strong> The edit mode is optimized for screens wider than 992px. If you have trouble using it, please try accessing it on a larger screen.</div>');
+ $(".navbar").append(min_width_warning);
+
return edit_mode_li[0];
}
- this.toggle_edit_mode = async function() {
+ this.toggle_edit_mode = async function () {
edit_mode.toggle_edit_panel();
if (edit_mode.is_edit_mode()) {
await edit_mode.leave_edit_mode();
@@ -553,21 +567,20 @@ var edit_mode = new function() {
* To be overridden by an instance of `leave_edit_mode_template` during the
* `enter_edit_mode()` execution.
*/
- this.leave_edit_mode = function() {}
+ this.leave_edit_mode = function () {}
- this.enter_edit_mode = async function(editApp = undefined) {
+ /**
+ * Initializes the edit mode and loads the tool box.
+ */
+ this.enter_edit_mode = async function (editApp = undefined) {
window.localStorage.edit_mode = "true";
- var editPanel = edit_mode.get_edit_panel();
- removeAllWaitingNotifications(editPanel);
- this.add_wait_datamodel_info();
-
try {
- const model = await edit_mode.retrieve_data_model();
$(".caosdb-f-btn-toggle-edit-mode").text("Leave Edit Mode");
- edit_mode.init_tool_box(model);
+ edit_mode.init_tool_box();
+ edit_mode.init_dragable();
var nextEditApp = editApp;
if (typeof nextEditApp == "undefined") {
@@ -575,7 +588,7 @@ var edit_mode = new function() {
}
edit_mode.init_new_buttons(nextEditApp);
- edit_mode.leave_edit_mode = function() {
+ edit_mode.leave_edit_mode = function () {
edit_mode.leave_edit_mode_template(nextEditApp);
};
@@ -585,18 +598,57 @@ var edit_mode = new function() {
}
}
+ /**
+ * (Re-)load the toolbox, i.e. retrieve Properties and RecordTypes
+ */
+ this.load_edit_mode_toolbox = async function () {}
+
+ /**
+ * Retrieve all properties and record types and convert them into
+ * a web page using a specialized XSLT named entity palette.
+ *
+ * @return {Promise<XMLDocument>} An array of entities in xml representation.
+ */
+ this.retrieve_data_model = async function () {
+ const props_prom = connection.get("Entity/?query=FIND Property");
+ const rts_prom = connection.get("Entity/?query=FIND RecordType");
+
+ const [props, rts] = await Promise.all([props_prom, rts_prom]);
- this.retrieve_data_model = retrieve_data_model;
+ // add all properties to rts
+ for (var p of props.children[0].children) {
+ rts.documentElement.appendChild(p.cloneNode());
+ }
+ return rts;
+ }
+ /**
+ * @param {Promise<XMLElement[]>} xml - an array of XMLElements.
+ * @return {Promise<HTMLDocument>} an HTMLElements.
+ */
+ this.transform_entity_palette = async function _tME(xml) {
+ var xsl = transformation.retrieveXsltScript("entity_palette.xsl");
+ let html = await asyncXslt(xml, xsl);
+ return html;
+ }
- this.init_tool_box = function(model) {
- var editPanel = edit_mode.get_edit_panel();
- removeAllWaitingNotifications(editPanel);
- editPanel.innerHTML = xml2str(model);
- edit_mode.init_dragable();
+ /**
+ * Remove all warnings and set the HTML of the toolbox panel to
+ * the model given by model.
+ */
+ this.init_tool_box = async function () {
+ // remove previously added model
+ $(".caosdb-f-edit-mode-existing").remove()
+ const editPanel = $(edit_mode.get_edit_panel());
+ removeAllWaitingNotifications(editPanel[0]);
+ editPanel.append(createWaitingNotification("Please wait."));
+ const model = await edit_mode.transform_entity_palette(edit_mode.retrieve_data_model());
+
+ removeAllWaitingNotifications(editPanel[0]);
+ editPanel.children()[0].appendChild(model);
}
@@ -607,9 +659,9 @@ var edit_mode = new function() {
*
* @param {HTMLElement} entity
*/
- this.init_actions_panels = function(entity) {
+ this.init_actions_panels = function (entity) {
this.reset_actions_panels([entity]);
- $(entity).find(".caosdb-entity-actions-panel").each(function(index) {
+ $(entity).find(".caosdb-entity-actions-panel").each(function (index) {
var clone = $(this).clone(true)[0];
$(clone).removeClass("caosdb-entity-actions-panel").addClass("caosdb-f-edit-mode-entity-actions-panel").insertBefore(this);
$(clone).children().remove();
@@ -622,19 +674,27 @@ var edit_mode = new function() {
*
* @param {HTMLElements[]} array of entities in HTML representation.
*/
- this.reset_actions_panels = function(entities) {
+ this.reset_actions_panels = function (entities) {
$(entities).find(".caosdb-f-edit-mode-entity-actions-panel").remove();
$(entities).find(".caosdb-entity-actions-panel").show();
}
- this.make_header_editable = function(entity) {
+ this.make_header_editable = function (entity) {
var header = $(entity).find('.caosdb-entity-panel-heading');
var roleElem = $(header).find('.caosdb-f-entity-role');
roleElem.detach();
var parentsElem = $(header).find('.caosdb-f-parent-list');
parentsElem.detach();
- const parentsSection = $('<div class="form-group"><label class="col-sm-2 control-label">parents</label><div class="col-sm-10"></div></div>');
- parentsSection.find("div.col-sm-10").append(parentsElem);
+ const parentsSection = $(`
+ <div class="row">
+ <div class="col-2 text-end">
+ <label class="col-form-label">parents</label>
+ </div>
+ <div class="col caosdb-f-parents-form-element">
+ </div>
+ </div>
+ `);
+ parentsSection.find("div.caosdb-f-parents-form-element").append(parentsElem);
header.attr("title", "Drop parents from the right panel here.");
header.data("toggle", "tooltip");
@@ -671,11 +731,11 @@ var edit_mode = new function() {
edit_mode.add_parent_delete_buttons(header[0]);
}
- this.isListDatatype = function(datatype) {
+ this.isListDatatype = function (datatype) {
return (typeof datatype !== 'undefined' && datatype.substring(0, 5) == "LIST<");
}
- this.unListDatatype = function(datatype) {
+ this.unListDatatype = function (datatype) {
return datatype.substring(5, datatype.length - 1);
}
@@ -694,7 +754,7 @@ var edit_mode = new function() {
*
* @param {HTMLElement} form - The form containing the input fields.
*/
- this.make_datatype_input_logic = function(form) {
+ this.make_datatype_input_logic = function (form) {
const datatype = form_elements.get_fields(form, "atomic_datatype");
$(datatype).find("select").change(function () {
@@ -738,38 +798,38 @@ var edit_mode = new function() {
* @param {string} unit - the initial value of the input element.
* @returns {HTMLElement} - a labeled form field.
*/
- this.make_unit_input = function(unit) {
+ this.make_unit_input = function (unit) {
const unit_input = $(form_elements
- .make_text_input({
- name: "unit",
- label: "unit",
- value: unit,
- }));
- unit_input.toggleClass("form-group", true);
+ .make_text_input({
+ name: "unit",
+ label: "unit",
+ value: unit,
+ }));
+ unit_input.toggleClass("form-control", true);
unit_input.find(".col-sm-3").toggleClass("col-sm-2", true).toggleClass("col-sm-3", false);
unit_input.find(".col-sm-9").toggleClass("col-sm-2", true).toggleClass("col-sm-9", false);
return unit_input[0];
}
this._known_atomic_datatypes = [
- "TEXT",
- "DOUBLE",
- "INTEGER",
- "DATETIME",
- "BOOLEAN",
- "FILE",
- "REFERENCE",
- ];
+ "TEXT",
+ "DOUBLE",
+ "INTEGER",
+ "DATETIME",
+ "BOOLEAN",
+ "FILE",
+ "REFERENCE",
+ ];
/**
* Make three input elements which contain all necessary parts of a datatype.
*
- * The three input elements are wrapped in a single DIV.form-group.
+ * The three input elements are wrapped in a single DIV.form-control.
*
* @param {string} [datatype] - defaults to TEXT if undefined.
* @returns {HTMLElement}
*/
- this.make_datatype_input = function(datatype) {
+ this.make_datatype_input = function (datatype) {
var _datatype = datatype || "TEXT";
// split/convert datatype string into more practical variables.
@@ -806,7 +866,7 @@ var edit_mode = new function() {
make_value: getEntityName,
};
const ref_selector = form_elements
- .make_reference_drop_down(reference_config);
+ .make_reference_drop_down(reference_config);
// generate the checkbox ([ ] list)
@@ -816,25 +876,24 @@ var edit_mode = new function() {
checked: is_list,
}
const list_checkbox = form_elements
- .make_checkbox_input(list_checkbox_config);
+ .make_checkbox_input(list_checkbox_config);
// styling
- $(list_checkbox).children().toggleClass("col-sm-3",false).toggleClass("col-sm-9", false).toggleClass("col-sm-1", true);
-
- const form_group = $('<div class="form-group">').append([datatype_selector, ref_selector, list_checkbox]);
- form_group.find(".form-group").toggleClass("form-group", false);
- form_group.find(".col-sm-3").toggleClass("col-sm-2", true).toggleClass("col-sm-3", false);
+ //$(list_checkbox).children().toggleClass("col-sm-3",false).toggleClass("col-sm-9", false).toggleClass("col-sm-1", true);
+ $(list_checkbox).find(".caosdb-f-property-value").toggleClass("my-auto", true)
+ const form_group = $('<div class="">').append([datatype_selector, ref_selector, list_checkbox]);
+ form_group.find(".col-sm-3").toggleClass("text-end", true).toggleClass("col-sm-2", true).toggleClass("col-sm-3", false);
form_group.find(".col-sm-9").toggleClass("col-sm-3", true).toggleClass("col-sm-9", false);
return form_group[0];
}
- this.make_input = function(label, value) {
- return $('<div class="form-group"><label class="col-sm-2 control-label">' + label + '</label><div class="col-sm-10"><input type="text" class="form-control caosdb-f-entity-' + label + '" value="' + (typeof value == 'undefined' ? "" : value) + '"></input></div></div>')[0];
+ this.make_input = function (label, value) {
+ return $('<div class="row"> <div class="col-2 text-end"> <label class="col-form-label">' + label + ' </label> </div> <div class="col caosdb-f-parents-form-element"> <input type="text" class="form-control caosdb-f-entity-' + label + '" value="' + (typeof value == 'undefined' ? "" : value) + '"></input> </div> </div>')[0];
}
- this.smooth_replace = function(from, to) {
+ this.smooth_replace = function (from, to) {
$(to).hide();
$(from).fadeOut();
$(from).after(to);
@@ -843,22 +902,22 @@ var edit_mode = new function() {
}
/**
- * Create an input element for a single property's value.
- *
- * @param {object} property - entity property object.
- * @param {HTMLElements[]} [options] - an array of OPTION elements
- * which represent possible candidates for reference values. The
- * options will be appended to the SELECT input. This parameter is
- * optional and only used for reference properties. This parameter
- * might as well be a Promise for such an array.
- */
- this.createElementForProperty = function(property, options) {
+ * Create an input element for a single property's value.
+ *
+ * @param {object} property - entity property object.
+ * @param {HTMLElements[]} [options] - an array of OPTION elements
+ * which represent possible candidates for reference values. The
+ * options will be appended to the SELECT input. This parameter is
+ * optional and only used for reference properties. This parameter
+ * might as well be a Promise for such an array.
+ */
+ this.createElementForProperty = function (property, options) {
var result;
if (property.datatype == "TEXT") {
result = `<textarea>${property.value || ""}</textarea>`;
} else if (property.datatype == "DATETIME") {
var dateandtime = [""];
- if(property.value) {
+ if (property.value) {
dateandtime = caosdb2InputDate(property.value);
}
let date = dateandtime[0];
@@ -895,10 +954,10 @@ var edit_mode = new function() {
* @param {object} property - a property object.
* @returns {HTMLElement} a SPAN element.
*/
- this.generate_list_item_control_panel = function(property, options) {
+ this.generate_list_item_control_panel = function (property, options) {
// Add list delete buttons:
- var deleteButton = $('<button title="Delete this list element." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><span class="glyphicon glyphicon-trash"></span></button>');
- $(deleteButton).click(function() {
+ var deleteButton = $('<button title="Delete this list element." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><i class="bi-trash"></i></button>');
+ $(deleteButton).click(function () {
var ol = this.parentElement.parentElement.parentElement;
$(this.parentElement.parentElement).remove();
@@ -907,8 +966,8 @@ var edit_mode = new function() {
// Add list insert buttons:
- var insertButton = $('<button title="Insert a new list element before this element." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><span class="glyphicon glyphicon-plus"></span></button>');
- $(insertButton).click(function() {
+ var insertButton = $('<button title="Insert a new list element before this element." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><i class="bi-plus"></i></button>');
+ $(insertButton).click(function () {
// TODO MERGE WITH OTHER PLACES WHERE THIS STRING APPEARS
var proptemp = {
list: false,
@@ -937,7 +996,7 @@ var edit_mode = new function() {
/**
*
*/
- this.create_unit_field = function(unit) {
+ this.create_unit_field = function (unit) {
return $(`<input class='caosdb-unit' title='unit' style='width: 60px;' placeholder='unit' value='${unit||""}' type='text'></input>`)[0];
}
@@ -952,10 +1011,10 @@ var edit_mode = new function() {
* @param {object} property - a property object.
* @return {HTMLElement[]}
*/
- this.create_value_inputs = function(property) {
+ this.create_value_inputs = function (property) {
logger.trace("enter create_value_inputs", arguments);
- var result = [ ];
+ var result = [];
if (!property.list) {
var options = property.reference ? edit_mode.retrieve_datatype_list(property.datatype) : undefined;
result.push(edit_mode.createElementForProperty(property, options));
@@ -971,7 +1030,7 @@ var edit_mode = new function() {
result.push(edit_mode.create_unit_field(property.unit));
}
- for (var i=0; i<property.value.length; i++) {
+ for (var i = 0; i < property.value.length; i++) {
// TODO MERGE WITH OTHER PLACES WHERE THIS STRING APPEARS
var proptemp = {
list: false,
@@ -989,8 +1048,8 @@ var edit_mode = new function() {
}
// PLUS-button for appending inputs to the list.
- var insertButton = $('<button title="Append a new field at the end." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><span class="glyphicon glyphicon-plus"></span></button>');
- $(insertButton).click(function() {
+ var insertButton = $('<button title="Append a new field at the end." class="btn btn-link caosdb-update-entity-button caosdb-f-list-item-button"><i class="bi-plus"></i></button>');
+ $(insertButton).click(function () {
// TODO MERGE WITH OTHER PLACES WHERE THIS STRING APPEARS
var proptemp = {
list: false,
@@ -1012,7 +1071,8 @@ var edit_mode = new function() {
result = result.concat([inputs[0],
$("<span>Insert element at the end of the list: </span>")
- .append(insertButton)[0]]);
+ .append(insertButton)[0]
+ ]);
}
return result;
@@ -1038,11 +1098,11 @@ var edit_mode = new function() {
*
* @see {@link _toggle_list_property} which is the most prominent callee.
*/
- this._toggle_list_property_object = function(element, toList) {
+ this._toggle_list_property_object = function (element, toList) {
const property = edit_mode.getPropertyFromElement(element);
// property.list XAND toList
- if(property.list ? toList : !toList) {
+ if (property.list ? toList : !toList) {
// already in desired state.
return undefined;
}
@@ -1055,7 +1115,7 @@ var edit_mode = new function() {
if (!toList && $.isArray(property.value) && property.value.length < 2) {
property.value = property.value[0] || "";
} else if (toList && !$.isArray(property.value)) {
- property.value = [ property.value ]
+ property.value = [property.value]
} else {
throw new Error(`Could not toggle to list=${toList} with value=${property.value}.`);
}
@@ -1075,12 +1135,12 @@ var edit_mode = new function() {
* @see {@link _toggle_list_property_object} which does the actual
* conversion work.
*/
- this._toggle_list_property = function(element, toList) {
+ this._toggle_list_property = function (element, toList) {
logger.trace("enter _toggle_list_property", arguments);
let property = edit_mode._toggle_list_property_object(element, toList);
- if(!property) {
+ if (!property) {
// already in desired state.
return;
}
@@ -1099,7 +1159,7 @@ var edit_mode = new function() {
}
- this.change_property_data_type = function(element, datatype) {
+ this.change_property_data_type = function (element, datatype) {
$(element).find(".caosdb-property-datatype").text(datatype);
element.dispatchEvent(edit_mode.property_data_type_changed);
}
@@ -1114,7 +1174,7 @@ var edit_mode = new function() {
this.add_toggle_list_checkbox = function (element, list, datatype) {
var editfield = $(element).find(".caosdb-f-property-value");
var label = $('<label>List</label>');
- var checkbox = $('<input type="checkbox" class="caosdb-f-entity-is-list"/>');
+ var checkbox = $('<input type="checkbox" class="form-check-input caosdb-f-entity-is-list"/>');
$(element).find(".caosdb-property-edit").prepend(label.append(checkbox));
checkbox.prop("checked", list);
@@ -1131,7 +1191,7 @@ var edit_mode = new function() {
// disable checkbox when list has more than 1 element
let disabled = editfield.find("li").length > 1;
checkbox.prop("disabled", disabled);
- const listDatatype = list ? datatype.substring(5, datatype.length-1) : datatype;
+ const listDatatype = list ? datatype.substring(5, datatype.length - 1) : datatype;
if (disabled) {
checkbox.attr("title", `You must remove all elements of the list but one by clicking the trash buttons (to the left) before you can toggle the LIST<${listDatatype}>`);
} else {
@@ -1142,23 +1202,23 @@ var edit_mode = new function() {
// list has more than one element.
editfield[0].addEventListener(
edit_mode.list_value_input_added.type, (e) => {
- let disabled = editfield.find("li").length > 1;
- checkbox.prop("disabled", disabled);
- if (disabled) {
- checkbox.attr("title", `You must remove all elements of the list but one by clicking the trash buttons (to the left) before you can toggle the LIST<${listDatatype}>`);
- }
- }, true);
+ let disabled = editfield.find("li").length > 1;
+ checkbox.prop("disabled", disabled);
+ if (disabled) {
+ checkbox.attr("title", `You must remove all elements of the list but one by clicking the trash buttons (to the left) before you can toggle the LIST<${listDatatype}>`);
+ }
+ }, true);
// enable the checkbox when elements removed to the list and the number
// of elements is smaller than 2.
editfield[0].addEventListener(
edit_mode.list_value_input_removed.type, (e) => {
- let disabled = editfield.find("li").length > 1;
- checkbox.prop("disabled", disabled);
- if (!disabled) {
- checkbox.attr("title", `Toggle LIST<${listDatatype}> data type of this property.`);
- }
- }, true);
+ let disabled = editfield.find("li").length > 1;
+ checkbox.prop("disabled", disabled);
+ if (!disabled) {
+ checkbox.attr("title", `Toggle LIST<${listDatatype}> data type of this property.`);
+ }
+ }, true);
}
/**
@@ -1177,20 +1237,21 @@ var edit_mode = new function() {
*
* @param {HTMLElement} element - entity property in HTML representation.
*/
- this.make_property_editable = function(element) {
+ this.make_property_editable = function (element) {
caosdb_utils.assert_html_element(element, "param 'element'");
var editfield = $(element).find(".caosdb-f-property-value")
- .removeClass("col-sm-8")
- .addClass("col-sm-6")
+ .removeClass("col-sm-6")
+ .removeClass("col-md-8")
+ .addClass("col-sm-4")
+ .addClass("col-md-6")
.addClass("caosdb-v-property-value-inputs")
- .after(`<div class="col-sm-2 caosdb-v-property-other-inputs caosdb-property-edit" style="text-align: right;"/>`);
+ .after(`<div class="col-sm-2 col-sm-2 caosdb-v-property-other-inputs caosdb-property-edit" style="text-align: right;"/>`);
var property = getPropertyFromElement(element);
// create inputs
- var inputs = edit_mode
- .create_value_inputs(property);
+ var inputs = edit_mode.create_value_inputs(property);
editfield.children().remove();
editfield.append(inputs);
@@ -1198,10 +1259,17 @@ var edit_mode = new function() {
edit_mode.add_toggle_list_checkbox(element, property.list, property.datatype);
// TRASH BUTTON
- edit_mode.add_property_trash_button($(element).find(".caosdb-property-edit")[0],element);
+ edit_mode.add_property_trash_button($(element).find(".caosdb-property-edit")[0], element);
}
- this.create_new_record = async function(recordtype_id, name = undefined) {
+
+ /**
+ * Create a new Record using an existing RecordType.
+ * The RecordType can be specified using recordtype_id.
+ *
+ * Currently name is ignored. TODO: check whether that behavior is intended.
+ */
+ this.create_new_record = async function (recordtype_id, name = undefined) {
var rt = await retrieve(recordtype_id);
var newrecord = createEntityXML("Record", undefined, undefined,
getProperties(rt[0]),
@@ -1215,20 +1283,26 @@ var edit_mode = new function() {
return x[0];
}
-
- this.init_dragable = function() {
- var props = document.getElementsByClassName("caosdb-f-edit-drag");
- for (var pel of props) {
- pel.addEventListener("dragstart", edit_mode.dragstart);
- pel.setAttribute("draggable", true);
- }
+ /**
+ * All draggable elements (that are those which have a css class
+ * caosdb-f-edit-drag are added the correct drag listener and the attribute draggable.
+ *
+ * This is now done using bubbling so that the listeners are also dynamically updated.
+ */
+ this.init_dragable = function () {
+ // Bubbling: Add the listener to the document and check whether the class is present.
+ document.addEventListener("dragstart", function (event) {
+ if (event.target.classList.contains("caosdb-f-edit-drag")) {
+ edit_mode.dragstart(event);
+ }
+ });
}
- /*
+ /**
* This function treats the deletion of entities, i.e. when the "delete"
* button is clicked.
*/
- this.delete_action = async function(entity) {
+ this.delete_action = async function (entity) {
var app = edit_mode.app;
// show waiting notification
@@ -1272,33 +1346,19 @@ var edit_mode = new function() {
}
- this.disable_new_buttons = function() {
+ this.disable_new_buttons = function () {
var new_buttons = $('.caosdb-f-edit-panel-new-button');
new_buttons.attr("disabled", true);
}
- this.enable_new_buttons = function() {
+ this.enable_new_buttons = function () {
var new_buttons = $('.caosdb-f-edit-panel-new-button');
new_buttons.attr("disabled", false);
}
- this.init_new_buttons = function(app) {
+ this.init_new_buttons = function (app) {
var new_buttons = $('.caosdb-f-edit-panel-new-button');
- // Show a button "+" to create a new property when filter results in empty list.
- new_buttons.filter('.caosdb-f-hide-on-empty-input').parent().each(function(index) {
- var button = $(this);
- button.hide();
- var input = button.parent().find("input");
- input.on("input", function(e) {
- if (input.val() == '') {
- button.fadeOut();
- } else {
- button.fadeIn();
- }
- });
- });
-
// handler for new property button
// calls newEntity transition of state machine
new_buttons.filter('.new-property').click(() => {
@@ -1349,7 +1409,7 @@ var edit_mode = new function() {
*
* `finish` is triggered automatically when leaving the edit mode and does a little cleanup.
*/
- this.init_edit_app = function() {
+ this.init_edit_app = function () {
var app = new StateMachine({
@@ -1389,9 +1449,9 @@ var edit_mode = new function() {
});
- var init_drag_n_drop = function() {
+ var init_drag_n_drop = function () {
const state = app.state;
- $('.caosdb-entity-panel').each(function(index) {
+ $('.caosdb-entity-panel').each(function (index) {
let entity = this;
if ($(entity).is("[data-version-successor]")) {
// not the latest version -> ignore
@@ -1414,22 +1474,24 @@ var edit_mode = new function() {
}
// Define the error handler for the state machine.
- app.errorHandler = function(fn) {
+ app.errorHandler = function (fn) {
try {
fn();
} catch (e) {
edit_mode.handle_error(e);
}
};
- app.onAfterTransition = function(e) {
+ app.onAfterTransition = function (e) {
init_drag_n_drop();
}
- app.onEnterInitial = async function(e) {
+ app.onEnterInitial = async function (e) {
+ $(".caosdb-f-edit-mode-existing").toggleClass("d-none", true);
+ $(".caosdb-f-edit-mode-create-buttons").toggleClass("d-none", false);
app.old = undefined;
app.errorHandler(() => {
// make entities dropable and freezable
edit_mode.enable_new_buttons();
- $('.caosdb-entity-panel').each(function(index) {
+ $('.caosdb-entity-panel').each(function (index) {
let entity = this;
if ($(entity).is("[data-version-successor]")) {
// not the latest version -> ignore
@@ -1459,9 +1521,9 @@ var edit_mode = new function() {
});
});
};
- app.onLeaveInitial = function(e) {
+ app.onLeaveInitial = function (e) {
app.errorHandler(() => {
- $('.caosdb-entity-panel').each(function(index) {
+ $('.caosdb-entity-panel').each(function (index) {
// add the save button an so on
edit_mode.remove_start_edit_button(this);
edit_mode.remove_new_record_button(this);
@@ -1470,7 +1532,7 @@ var edit_mode = new function() {
});
edit_mode.disable_new_buttons();
};
- app.onBeforeStartEdit = function(e, entity) {
+ app.onBeforeStartEdit = function (e, entity) {
edit_mode.unhighlight();
app.old = entity;
app.entity = $(entity).clone(true)[0];
@@ -1483,11 +1545,11 @@ var edit_mode = new function() {
edit_mode.freeze_but(app.entity);
};
- app.onBeforeCancel = function(e) {
+ app.onBeforeCancel = function (e) {
edit_mode.smooth_replace(app.entity, app.old);
edit_mode.unfreeze();
};
- app.onUpdate = function(e, entity) {
+ app.onUpdate = function (e, entity) {
edit_mode.update_entity(entity).then(response => {
return transformation.transformEntities(response);
}, edit_mode.handle_error).then(entities => {
@@ -1496,7 +1558,11 @@ var edit_mode = new function() {
app.showResults();
}, edit_mode.handle_error);
};
- app.onEnterChanged = function(e) {
+ app.onEnterChanged = function (e) {
+ // show existing entities in toolbox
+ $(".caosdb-f-edit-mode-existing").toggleClass("d-none", false);
+ $(".caosdb-f-edit-mode-create-buttons").toggleClass("d-none", true);
+
edit_mode.unhighlight();
hintMessages.removeMessages(app.old);
edit_mode.make_header_editable(app.entity);
@@ -1509,18 +1575,18 @@ var edit_mode = new function() {
for (var element of prop_elements) {
edit_mode.make_property_editable(element);
}
- if(getEntityRole(app.entity) != "Property") {
- edit_mode.add_property_dropzone(app.entity);
+ if (getEntityRole(app.entity) != "Property") {
+ edit_mode.add_property_dropzone(app.entity);
}
app.entity.dispatchEvent(edit_mode.start_edit);
}
- app.onEnterWait = function(e) {
+ app.onEnterWait = function (e) {
edit_mode.smooth_replace(app.entity, app.waiting);
}
- app.onLeaveWait = function(e) {
+ app.onLeaveWait = function (e) {
edit_mode.smooth_replace(app.waiting, app.entity);
}
- app.onBeforeNewEntity = function(e, entity) {
+ app.onBeforeNewEntity = function (e, entity) {
if (typeof entity == "undefined") {
throw new TypeError("entity is undefined");
}
@@ -1548,7 +1614,7 @@ var edit_mode = new function() {
app.old = $('<div/>')[0];
}
- app.onInsert = function(e, entity) {
+ app.onInsert = function (e, entity) {
edit_mode.insert_entity(entity).then(response => {
return transformation.transformEntities(response);
}, edit_mode.handle_error).then(entities => {
@@ -1561,7 +1627,7 @@ var edit_mode = new function() {
app.showResults();
}, edit_mode.handle_error);
}
- app.onFinish = function(e) {
+ app.onFinish = function (e) {
// this transition is triggerd on leaving the edit mode.
edit_mode.unhighlight();
if (app.old) {
@@ -1569,7 +1635,7 @@ var edit_mode = new function() {
}
edit_mode.unfreeze();
}
- app.onShowResults = function(e) {
+ app.onShowResults = function (e) {
// this transition is triggered by the response of the server on a
// previous insert/update request.
@@ -1581,6 +1647,7 @@ var edit_mode = new function() {
app.entity.dispatchEvent(edit_mode.end_edit);
resolve_references.init();
preview.init();
+ edit_mode.init_tool_box();
}
app.waiting = createWaitingNotification("Please wait.");
$(app.waiting).hide();
@@ -1593,12 +1660,12 @@ var edit_mode = new function() {
return app;
}
- this.has_errors = function(entity) {
+ this.has_errors = function (entity) {
return $(entity).find(".alert.alert-danger").length > 0;
}
- this.freeze_but = function(element) {
- $('.caosdb-f-main-entities').children().each(function(index) {
+ this.freeze_but = function (element) {
+ $('.caosdb-f-main-entities').children().each(function (index) {
if (element != this) {
edit_mode.freeze_entity(this);
}
@@ -1617,14 +1684,14 @@ var edit_mode = new function() {
.prepend('<div>Drag and drop RecordTypes from the Edit Mode Toolbox here.</div>');
}
- this.unfreeze = function() {
- $('.caosdb-f-main-entities').children().each(function(index) {
+ this.unfreeze = function () {
+ $('.caosdb-f-main-entities').children().each(function (index) {
edit_mode.unfreeze_entity(this);
});
}
- this._create_reference_options = function(entities) {
+ this._create_reference_options = function (entities) {
var results = [];
for (var i = 0; i < entities.length; i++) {
@@ -1660,7 +1727,7 @@ var edit_mode = new function() {
this.fill_reference_drop_down = async function (drop_down, options) {
var resolved_options = await options;
var old = $(drop_down).find("option.caosdb-f-option-default");
- if(old.length == 0) {
+ if (old.length == 0) {
// no option selected, append all
$(drop_down).append($(resolved_options).clone());
return;
@@ -1687,7 +1754,7 @@ var edit_mode = new function() {
* @returns {HTMLElement[]} array of OPTION element, representing an entity
* which can be referenced by the property.
*/
- this.retrieve_datatype_list = async function(datatype) {
+ this.retrieve_datatype_list = async function (datatype) {
var find_entity = ["FILE", "REFERENCE"].includes(datatype) ? "" : datatype;
var entities = datatype !== "FILE" ? await edit_mode.query(`FIND Record ${find_entity}`) : [];
var files = await edit_mode.query(`FIND File ${find_entity}`);
@@ -1701,46 +1768,51 @@ var edit_mode = new function() {
}
- this.highlight = function(entity) {
+ this.highlight = function (entity) {
$(entity).find(".caosdb-v-edit-mode-dropzone")
.addClass("caosdb-v-edit-mode-highlight");
}
- this.unhighlight = function() {
+ this.unhighlight = function () {
$('.caosdb-v-edit-mode-highlight')
.removeClass("caosdb-v-edit-mode-highlight");
}
- this.handle_error = function(err) {
+ this.handle_error = function (err) {
globalError(err);
}
- this.get_edit_panel = function() {
+ this.get_edit_panel = function () {
return $('.caosdb-f-edit-panel-body')[0];
}
- this.add_wait_datamodel_info = function() {
- $(this.get_edit_panel()).append(createWaitingNotification("Please wait."));
+ this.toggle_edit_panel = function () {
+ //$(".caosdb-f-main").toggleClass("container-fluid").toggleClass("container");
+ $(".caosdb-f-main-entities").toggleClass("caosdb-f-main-entities-edit");
+ $(".caosdb-f-edit").toggle(); //.toggleClass("col-xs-4");
+ this._toggle_min_width_warning();
}
- this.toggle_edit_panel = function() {
- $(".caosdb-f-main").toggleClass("container-fluid").toggleClass("container");
- $(".caosdb-f-main-entities").toggleClass("col-xs-8");
- $(".caosdb-f-edit").toggleClass("hidden").toggleClass("col-xs-4");
+ this._toggle_min_width_warning = function () {
+ // Somewhat counter-intuitive, but when we're not in edit mode
+ // and toggle the panel, we're entering and the warning should
+ // be shown on small screens and vice-versa.
+ $(".caosdb-edit-min-width-warning").toggleClass("d-none", edit_mode.is_edit_mode());
+ $(".caosdb-edit-min-width-warning").toggleClass("d-block", !(edit_mode.is_edit_mode()));
}
- this.leave_edit_mode_template = function(app) {
+ this.leave_edit_mode_template = function (app) {
app.finish();
$(".caosdb-f-btn-toggle-edit-mode").text("Edit Mode");
edit_mode.reset_actions_panels($(".caosdb-f-main").toArray());
window.localStorage.removeItem("edit_mode");
}
- this.is_edit_mode = function() {
+ this.is_edit_mode = function () {
return window.localStorage.edit_mode !== undefined;
}
- this.add_cancel_button = function(ent, callback) {
+ this.add_cancel_button = function (ent, callback) {
var cancel_btn = $('<button class="btn btn-link caosdb-update-entity-button caosdb-f-entity-cancel-button">Cancel</button>');
$(ent).find(".caosdb-f-edit-mode-entity-actions-panel").append(cancel_btn);
@@ -1748,33 +1820,33 @@ var edit_mode = new function() {
$(cancel_btn).click(callback);
}
- this.create_new_entity = async function(role) {
+ this.create_new_entity = async function (role) {
var empty_entity = str2xml('<Response><' + role + '/></Response>');
return (await transformation.transformEntities(empty_entity))[0];
}
- this.remove_cancel_button = function(entity) {
+ this.remove_cancel_button = function (entity) {
$(entity).find('.caosdb-f-entity-cancel-button').remove()
}
/**
* entity : HTMLElement
*/
- this.freeze_entity = function(entity) {
+ this.freeze_entity = function (entity) {
$(entity).css("pointer-events", "none").css("filter", "blur(10px)");
}
/**
* entity : HTMLElement
*/
- this.unfreeze_entity = function(entity) {
+ this.unfreeze_entity = function (entity) {
$(entity).css("pointer-events", "").css("filter", "");
}
/**
* this function is called in entity_palette.xsl
*/
- this.filter = function(ent_type) {
+ this.filter = function (ent_type) {
var text = $("#caosdb-f-filter-" + ent_type).val();
if (ent_type == "properties") {
var short_type = "p";
@@ -1815,14 +1887,14 @@ var edit_mode = new function() {
* @return {HTMLElement} the entity form
*/
this.edit = function (entity) {
- if (!this.is_edit_mode()) {
- throw Error("edit_mode is not active");
- }
- if (!edit_mode.app.can("startEdit")) {
- throw Error("edit_mode.app does not allow to start the edit");
- }
- edit_mode.app.startEdit(entity);
- return edit_mode.app.entity;
+ if (!this.is_edit_mode()) {
+ throw Error("edit_mode is not active");
+ }
+ if (!edit_mode.app.can("startEdit")) {
+ throw Error("edit_mode.app does not allow to start the edit");
+ }
+ edit_mode.app.startEdit(entity);
+ return edit_mode.app.entity;
}
/**
@@ -1830,19 +1902,19 @@ var edit_mode = new function() {
* visible.
*/
const UPDATE_PERMISSIONS = [
- "UPDATE:DESCRIPTION",
- "UPDATE:VALUE",
- "UPDATE:ROLE",
- "UPDATE:PARENT:REMOVE",
- "UPDATE:PARENT:ADD",
- "UPDATE:PROPERTY:REMOVE",
- "UPDATE:PROPERTY:ADD",
- "UPDATE:NAME",
- "UPDATE:DATA_TYPE",
- "UPDATE:FILE:REMOVE",
- "UPDATE:FILE:ADD",
- "UPDATE:FILE:MOVE",
- "UPDATE:QUERY_TEMPLATE_DEFINITION",
+ "UPDATE:DESCRIPTION",
+ "UPDATE:VALUE",
+ "UPDATE:ROLE",
+ "UPDATE:PARENT:REMOVE",
+ "UPDATE:PARENT:ADD",
+ "UPDATE:PROPERTY:REMOVE",
+ "UPDATE:PROPERTY:ADD",
+ "UPDATE:NAME",
+ "UPDATE:DATA_TYPE",
+ "UPDATE:FILE:REMOVE",
+ "UPDATE:FILE:ADD",
+ "UPDATE:FILE:MOVE",
+ "UPDATE:QUERY_TEMPLATE_DEFINITION",
];
/**
@@ -1856,7 +1928,7 @@ var edit_mode = new function() {
* @parma {function} callback - the function which initializes and opens
* the edit form.
*/
- this.add_start_edit_button = function(entity, callback) {
+ this.add_start_edit_button = function (entity, callback) {
var has_any_update_permission = false;
for (let permission of UPDATE_PERMISSIONS) {
if (hasEntityPermission(entity, permission)) {
@@ -1875,14 +1947,14 @@ var edit_mode = new function() {
$(button).click(callback);
}
- this.remove_start_edit_button = function(entity) {
+ this.remove_start_edit_button = function (entity) {
$(entity).find(".caosdb-f-entity-start-edit-button").remove();
}
- this.add_new_record_button = function(entity, callback) {
+ this.add_new_record_button = function (entity, callback) {
if (!hasEntityPermission(entity, "USE:AS_PARENT")) {
- return;
+ return;
}
edit_mode.remove_new_record_button(entity);
var button = $('<button title="Create a new Record from this RecordType." class="btn btn-link caosdb-update-entity-button caosdb-f-entity-new-record-button">+Record</button>');
@@ -1892,13 +1964,13 @@ var edit_mode = new function() {
$(button).click(callback);
}
- this.remove_new_record_button = function(entity) {
+ this.remove_new_record_button = function (entity) {
$(entity).find(".caosdb-f-entity-new-record-button").remove();
}
- this.add_delete_button = function(entity, callback) {
+ this.add_delete_button = function (entity, callback) {
if (!hasEntityPermission(entity, "DELETE")) {
- return;
+ return;
}
edit_mode.remove_delete_button(entity);
var button = $('<button title="Delete this ' + getEntityRole(entity) + '." class="btn btn-link caosdb-update-entity-button caosdb-f-entity-delete-button">Delete</button>');
@@ -1908,26 +1980,26 @@ var edit_mode = new function() {
$(button).click(() => {
// hide other elements
const _alert = form_elements.make_alert({
- title: "Warning",
- message: "You are going to delete this entity permanently. This cannot be undone.",
- proceed_callback: () => {
- edit_mode.delete_action(entity)
- },
- cancel_callback: () => {
- $(_alert).remove();
- $(entity).find(".caosdb-f-edit-mode-entity-actions-panel").show();
- },
- proceed_text: "Yes, delete!",
- remember_my_decision_id : "delete_entity",
+ title: "Warning",
+ message: "You are going to delete this entity permanently. This cannot be undone.",
+ proceed_callback: () => {
+ edit_mode.delete_action(entity)
+ },
+ cancel_callback: () => {
+ $(_alert).remove();
+ $(entity).find(".caosdb-f-edit-mode-entity-actions-panel").show();
+ },
+ proceed_text: "Yes, delete!",
+ remember_my_decision_id: "delete_entity",
});
- $(_alert).addClass("text-right");
+ $(_alert).addClass("text-end");
$(entity).find(".caosdb-f-edit-mode-entity-actions-panel").after(_alert).hide();
});
}
- this.remove_delete_button = function(entity) {
+ this.remove_delete_button = function (entity) {
$(entity).find(".caosdb-f-entity-delete-button").remove();
}
@@ -1939,6 +2011,6 @@ var edit_mode = new function() {
/**
* Add the extensions to the webui.
*/
-$(document).ready(function() {
+$(document).ready(function () {
edit_mode.init();
});
diff --git a/src/core/js/ext_applicable.js b/src/core/js/ext_applicable.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e4ae94f742e00e46f6cff609f4217100c9f4292
--- /dev/null
+++ b/src/core/js/ext_applicable.js
@@ -0,0 +1,342 @@
+/*
+ * ** header v3.0
+ * This file is a part of the CaosDB Project.
+ *
+ * Copyright (C) 2020 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2020 Timm Fitschen <t.fitschen@indiscale.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * ** end header
+ */
+
+'use strict';
+
+/**
+ * Useful helpers for is_applicable functionality.
+ */
+var _helpers = function(getEntityPath) {
+
+ /**
+ * Check if an entity has a path attribute and one of a set of extensions.
+ *
+ * Note: the array of extensions must contain only lower-case strings.
+ *
+ * @param {HTMLElement} entity
+ * @param {string[]} extensions - an array of file extesions, e.g. `jpg`.
+ * @return {boolean} true iff the entity has a path with one of the
+ * extensionss.
+ */
+ const path_has_file_extension = function(entity, extensions) {
+ const path = getEntityPath(entity);
+ if (path) {
+ for (var ext of extensions) {
+ if (path.toLowerCase().endsWith(ext)) {
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+
+ return {
+ path_has_file_extension: path_has_file_extension
+ };
+}(getEntityPath)
+
+var ext_applicable = function($, logger, is_in_view_port, load_config, getEntityPath, connection, helpers, createWaitingNotification) {
+
+ const version = "0.1";
+
+ /**
+ * Run through all creators and call the "create" function of the first
+ * creator which returns true from is_applicable(entity).
+ *
+ * @param {HTMLElement} entity
+ * @param {Creator[]} creators - list of creators
+ * @return {HTMLElement|String} content - the result of the first matching
+ * creator.
+ */
+ const root_creator = async function (entity, creators) {
+ for (let c of creators) {
+ var is_applicable = false;
+ try {
+ is_applicable = await c.is_applicable(entity);
+ } catch (err) {
+ logger.error(`error in is_applicable function of creator`, c, err);
+ continue;
+ }
+ if (is_applicable) {
+ const content = await c.create(entity);
+ return content;
+ }
+ }
+ return undefined;
+ }
+
+ var _set_content = function (container, content) {
+ const _container = $(container);
+ _container.empty();
+
+ if (content) {
+ _container.append(content);
+ }
+ }
+
+ /**
+ * Replace the old content (if any) of the container by the new the content
+ * (created by the creators).
+ *
+ * Dispatch contentReadyEvent or noContentEvent if given.
+ *
+ * @param {HTMLElement} container
+ * @param {HTMLElement|string} [content]
+ * @param {Event} [contentReadyEvent]
+ * @param {Event} [noContentEvent]
+ */
+ const set_content = async function (container, content, contentReadyEvent, noContentEvent) {
+ try {
+ const wait = createWaitingNotification("Please wait...");
+ _set_content(container, wait);
+ const result = await content;
+ _set_content(container, result);
+ if (result && contentReadyEvent) {
+ container.dispatchEvent(contentReadyEvent);
+ } else if (!result && noContentEvent) {
+ container.dispatchEvent(noContentEvent);
+ }
+
+ } catch (err) {
+ logger.error(err);
+ const err_msg = "An error occured while loading this content.";
+ _set_content(container, err_msg);
+ }
+ }
+
+
+ /**
+ * @param {HTMLElement} entity
+ * @param {get_container_cb} get_container_cb
+ * @param {Creator[]} creators
+ * @param {Event} [contentReadyEvent]
+ * @param {Event} [noContentEvent]
+ */
+ const _root_handler = function (entity, get_container_cb, creators, contentReadyEvent, noContentEvent) {
+ const _container = get_container_cb(entity);
+ if (_container) {
+ const content = root_creator(entity, creators);
+ set_content(_container, content, contentReadyEvent, noContentEvent);
+ }
+ }
+
+
+ /**
+ * The root handler trigger call the root_handler callback on every
+ * .caosdb-entity-panel and every .caosdb-entity-preview in the viewport.
+ *
+ * @param {function} root_handler - the root handler callback.
+ */
+ var root_handler_trigger = function(root_handler) {
+ var entities = $(".caosdb-entity-panel,.caosdb-entity-preview");
+ for (let entity of entities) {
+
+ // TODO viewport + 1000 px for earlier loading
+ if (is_in_view_port(entity)) {
+ root_handler(entity);
+ }
+ }
+ }
+
+
+ /**
+ * Initialize the scroll watcher which listens on the scroll event of the
+ * window and triggers the root handler with a delay after the last
+ * scroll event.
+ *
+ * @param {integer} delay - timeout in milliseconds after the last scroll
+ * event. After this timeout the trigger is called.
+ * @param {function} trigger - the root handler callback which is called.
+ */
+ var init_watcher = function(delay, trigger) {
+ var scroll_timeout = undefined;
+ $(window).scroll(() => {
+ if (scroll_timeout) {
+ clearTimeout(scroll_timeout);
+ }
+ scroll_timeout = setTimeout(trigger, delay);
+ });
+
+ var preview_timeout = undefined;
+
+ // init watcher on newly loaded entity previews.
+ window.addEventListener(
+ preview.previewReadyEvent.type,
+ () => {
+ if (preview_timeout) {
+ clearTimeout(preview_timeout);
+ }
+ preview_timeout = setTimeout(trigger, delay);
+ },
+ true);
+
+ // trigger for the first time
+ trigger();
+ };
+
+ /**
+ * @callback get_container_cb
+ * @param {HTMLElement} entity - the entity for which this callback shall
+ * return the is_applicable container.
+ * @returns {HTMLElement} child of entity which is a container for the
+ * is_applicable_app
+ */
+
+ /**
+ * @type {IsApplicableApp}
+ * @property {IsApplicableConfig} config
+ * @property {Creator[]} creators
+ * @property {function} root_handler
+ */
+
+ /**
+ * @type {IsApplicableConfig}
+ * @property {string|HTMLElement|function} fallback - Fallback content or
+ * callback if none of the creators are applicable.
+ * @property {string} version - the version of the configuration which must
+ * match this module's version.
+ * @property {CreatorConfig[]} creators - an array of creators.
+ */
+
+ /**
+ * make a fallback creator
+ *
+ * @return {Creator}
+ */
+ const _make_fallback_creator = function(fallback) {
+ if (fallback) {
+ return {
+ id: "_generated_fallback_creator",
+ is_applicable: (entity) => true, // always applicable
+ create: typeof fallback === "function" ? fallback : (entity) => fallback,
+ };
+ }
+ return undefined;
+ }
+
+ const _make_creator = function (c) {
+ return {
+ id: c.id,
+ is_applicable: typeof c.is_applicable === "function" ?
+ c.is_applicable : eval(c.is_applicable),
+ create: typeof c.create === "function" ? c.create : eval(c.create)
+ };
+ }
+
+
+ /**
+ * @param {IsApplicableConfig}
+ * @return {Creator[]} creators
+ */
+ const _make_creators = function(config) {
+ const creators = [];
+ for (let c of config.creators) {
+ creators.push(_make_creator(c));
+ }
+ const fallback_creator = _make_fallback_creator(config.fallback);
+ if (fallback_creator) {
+ creators.push(fallback_creator);
+ }
+ return creators;
+ }
+
+ /**
+ * @type {CreatorConfig}
+ * @property {string} [id] - a unique id for the creator. optional, for
+ * debuggin purposes.
+ * @property {function|string} is_applicable - If this is a string this has
+ * to be valid javascript! An asynchronous function which accepts one
+ * parameter, an entity in html representation, and which returns true
+ * iff this creator is applicable for the given entity.
+ * @property {string} create - This has to be valid javascript! An
+ * asynchronous function which accepts one parameter, an entity in html
+ * representation. It returns a HTMLElement or text node which will be
+ * shown in the bottom line container iff the creator is applicable.
+ */
+
+ /**
+ * @param {string} app_name - the name of this app.
+ * @param {get_container_cb} get_container_cb
+ * @return {get_container_cb} wrapped function which also checks if the
+ * container has already been filled with the created content.
+ */
+ const _make_get_container_wrapper = function (get_container_cb, app_name) {
+ const _wrapper = function (entity) {
+ const container = get_container_cb(entity);
+ const app_done = $(container).data(app_name);
+ if(!app_done) {
+ // mark container as used
+ $(container).data(app_name, "done");
+ return container
+ }
+ // don't return the container if already used by this app
+ return undefined;
+ }
+ return _wrapper;
+ }
+
+ /**
+ * @param {string} that_version - a version string.
+ * @throws {Error} if that_version doesn't match this modules version.
+ */
+ const _check_version = function(that_version) {
+ if(that_version != version) {
+ throw new Error(`Wrong version in config. Was '${that_version}', should be '${version}'.`);
+ }
+ }
+
+ /**
+ * @param {string} app_name
+ * @param {IsApplicableConfig} config
+ * @param {get_container_cb} get_container
+ * @param {Event} [contentReadyEvent]
+ * @param {Event} [noContentEvent]
+ * returns {IsApplicableApp}
+ */
+ const create_is_applicable_app = function(app_name, config, get_container, contentReadyEvent, noContentEvent) {
+ logger.debug("create_is_applicable_app", config, get_container);
+ _check_version(config["version"])
+ const creators = _make_creators(config)
+ const get_container_wrapper = _make_get_container_wrapper(get_container, app_name);
+
+ const root_handler = (entity) => _root_handler(entity, get_container_wrapper, creators, contentReadyEvent, noContentEvent);
+
+ if (config.init_watcher) {
+ init_watcher(config.delay || 500, () => {root_handler_trigger(root_handler);});
+ }
+ return {
+ config: config,
+ creators: creators,
+ root_handler: root_handler,
+ }
+ }
+
+ return {
+ create_is_applicable_app: create_is_applicable_app,
+ root_handler_trigger: root_handler_trigger,
+ init_watcher: init_watcher,
+ helpers: helpers,
+ version: version,
+ };
+
+}($, log.getLogger("ext_applicable"), resolve_references.is_in_viewport_vertically, load_config, getEntityPath, connection, _helpers, createWaitingNotification);
diff --git a/src/core/js/ext_autocomplete.js b/src/core/js/ext_autocomplete.js
index 9d99241485245ca6232a7626c04f7998579174e8..9a639fb4387a32bad128406bb7bd1f036bed5fda 100644
--- a/src/core/js/ext_autocomplete.js
+++ b/src/core/js/ext_autocomplete.js
@@ -42,12 +42,47 @@ var ext_autocomplete = new function () {
"WHICH",
"WITH",
"CREATED BY",
+ "CREATED BY ME",
+ "CREATED AT",
"CREATED ON",
+ "CREATED IN",
+ "CREATED BEFORE",
+ "CREATED UNTIL",
+ "CREATED AFTER",
+ "CREATED SINCE",
"SOMEONE",
"STORED AT",
"HAS A PROPERTY",
"HAS BEEN",
"ANY VERSION OF",
+ "FROM",
+ "INSERTED AT",
+ "INSERTED ON",
+ "INSERTED IN",
+ "INSERTED BY",
+ "INSERTED BY ME",
+ "INSERTED BEFORE",
+ "INSERTED UNTIL",
+ "INSERTED AFTER",
+ "INSERTED SINCE",
+ "UPDATED AT",
+ "UPDATED ON",
+ "UPDATED IN",
+ "UPDATED BY",
+ "UPDATED BY ME",
+ "UPDATED BEFORE",
+ "UPDATED UNTIL",
+ "UPDATED AFTER",
+ "UPDATED SINCE",
+ "SINCE",
+ "BEFORE",
+ "ON",
+ "IN",
+ "AFTER",
+ "UNTIL",
+ "AT",
+ "BY",
+ "BY ME",
];
this.version = "0.1";
@@ -145,7 +180,10 @@ var ext_autocomplete = new function () {
searchPost: this.searchPost,
},
noResultsText: 'No autocompletion suggestions',
- bootstrapVersion: "3",
+ bootstrapVersion: "4",
+ /* this should be updated to 5 when
+ bootstrap-autocomplete releases official support for bootstrap 5.
+ Until then: let's hope the best.*/
});
@@ -158,4 +196,4 @@ $(document).ready(function () {
if ("${BUILD_MODULE_EXT_AUTOCOMPLETE}" == "ENABLED") {
caosdb_modules.register(ext_autocomplete);
}
-});
+});
\ No newline at end of file
diff --git a/src/core/js/ext_bottom_line.js b/src/core/js/ext_bottom_line.js
index 51ca8ac976314bcbe45d338e11cd2c6321f8afe2..2f40cd5c822c7153ef9fe8c40e7b06ffe70a3996 100644
--- a/src/core/js/ext_bottom_line.js
+++ b/src/core/js/ext_bottom_line.js
@@ -257,6 +257,7 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
const previewShownEvent = new Event("ext_bottom_line.preview.shown");
const previewReadyEvent = new Event("ext_bottom_line.preview.ready");
+ const previewHiddenEvent = new Event("ext_bottom_line.preview.hidden");
const _css_class_preview_container = "caosdb-f-ext_bottom_line-container";
const _css_class_preview_container_resolvable = "caosdb-f-ext_bottom_line-container-resolvable";
@@ -303,14 +304,10 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
preview_container.empty();
var buttons = preview_container.siblings(`.${_css_class_preview_container_button}`);
if (element) {
- buttons.css({
- "visibility": "initial"
- });
+ buttons.toggleClass("d-none", false);
preview_container.append(element);
} else {
- buttons.css({
- "visibility": "hidden"
- });
+ buttons.toggleClass("d-none", true);
}
} else {
logger.error(new Error("Could not find the preview container."));
@@ -399,14 +396,16 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
* @return {HTMLElement} the newly created container.
*/
var add_preview_container = function(entity) {
- const button_show = $('<button class="btn btn-xs"><span class="glyphicon glyphicon-menu-down"/> Show Preview</button>')
+ const button_show = $('<button class="btn btn-sm card-footer"><i class="bi bi-chevron-down"></i> Show Preview</button>')
.css({
- width: "100%"
+ width: "100%",
+ padding: "0",
})
- .addClass(_css_class_preview_container_button);
- const button_hide = $('<button class="btn btn-xs"><span class="glyphicon glyphicon-menu-up"/> Hide Preview</button>')
+ .addClass(_css_class_preview_container_button)
+ const button_hide = $('<button class="btn btn-sm card-footer"><i class="bi bi-chevron-up"></i> Hide Preview</button>')
.css({
- width: "100%"
+ width: "100%",
+ padding: "0",
})
.addClass(_css_class_preview_container_button)
.hide();
@@ -432,6 +431,9 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
container.on("shown.bs.collapse", () => {
container[0].dispatchEvent(previewShownEvent);
});
+ container.on("hidden.bs.collapse", () => {
+ container[0].dispatchEvent(previewHiddenEvent);
+ });
$(entity).append(container);
$(entity).append(button_show);
$(entity).append(button_hide);
diff --git a/src/core/js/ext_cosmetics.js b/src/core/js/ext_cosmetics.js
index 3913a37b6645e88d3a357b9c4c124cf296ccfcad..4d935a2a5afecd699fee1a24416c06b30d1adc46 100644
--- a/src/core/js/ext_cosmetics.js
+++ b/src/core/js/ext_cosmetics.js
@@ -1,26 +1,70 @@
-var cosmetics = new function() {
- this.init = function() {
- this.linkify();
- }
+/*
+ * This file is a part of the CaosDB Project.
+ *
+ * Copyright (C) 2021 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+/**
+ * Cosmetics module is a collection of small look-and-feel tweaks for the
+ * caosdb webui.
+ *
+ * @author Timm Fitschen
+ */
+var cosmetics = new function () {
- this.linkify = function() {
- /* DEPRECATED css class .caosdb-property-text-value - Use
- * .caosdb-f-property-single-raw-value or introduce new
- * .caosdb-v-property-text-value */
- $('.caosdb-property-text-value').each(function(index) {
+ var _linkify = function () {
+ $('.caosdb-f-property-text-value').each(function (index) {
+ // TODO also extract and convert links surrounded by other text
if (/^https?:\/\//.test(this.innerText)) {
var uri = this.innerText;
var text = uri
$(this).parent().css("overflow", "hidden");
$(this).parent().css("text-overflow", "ellipsis");
- $(this).html('<a href="' + uri + '"><span class="glyphicon glyphicon-new-window"></span> ' + text + '</a>');
+ $(this).html(`<a class="caosdb-v-property-href-value" href="${uri}">${text} <i class="bi bi-box-arrow-up-right"></i></a>`);
}
});
}
+
+ /**
+ * Convert any text-value beginning with 'http(s)://' into a link.
+ *
+ * A listener detects edit-mode changes and previews
+ */
+ var linkify = function () {
+ _linkify();
+
+ // edit-mode-listener
+ document.body.addEventListener(edit_mode.end_edit.type, _linkify, true);
+ // preview listener
+ document.body.addEventListener(preview.previewReadyEvent.type, _linkify, true);
+ }
+
+ this.init = function () {
+ if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") {
+ linkify();
+ }
+ }
+
}
-$(document).ready(function() {
- cosmetics.init();
-});
+$(document).ready(function () {
+ caosdb_modules.register(cosmetics);
+});
\ No newline at end of file
diff --git a/src/core/js/ext_entity_state.js b/src/core/js/ext_entity_state.js
index b4f2e04eb1702636ebe45042e4e3f382efbdd1c4..101c3800fc16632f2e36778a9e0468feae43f677 100644
--- a/src/core/js/ext_entity_state.js
+++ b/src/core/js/ext_entity_state.js
@@ -158,6 +158,8 @@ const ext_entity_state = function ($, logger, edit_mode, update_state, getEntity
$(updated_entity).find(".alert-warning, .alert-info").remove();
edit_mode.smooth_replace(entity, updated_entity[0]);
updated_entity[0].dispatchEvent(entity_state_transition_ready_event);
+ resolve_references.init();
+ preview.init();
}
}
diff --git a/src/core/js/ext_map.js b/src/core/js/ext_map.js
index 091cf54caf9abac2dc9d914c9c68291b3ab4a93f..719d4f77943fdfca562961838dc02d95d5fd5cb1 100644
--- a/src/core/js/ext_map.js
+++ b/src/core/js/ext_map.js
@@ -49,6 +49,13 @@ var caosdb_map = new function () {
}, "navbar", "caosdb_utils"];
this.logger = logger;
+ /**
+ * Map is initialized, map button is visible in the menu.
+ *
+ * @event caosdb_map#map_ready
+ */
+ this.map_ready = new Event("caosdb.caosdb_map.map_ready");
+
/**
* The MapConfig object is used to define all relevant parameters for the
* map including the tiling servers, different views and CRSs of the map,
@@ -628,7 +635,7 @@ var caosdb_map = new function () {
"name": "Entities on the current page.",
"description": "Show all entities on the current page.",
"icon": {
- html: '<span style="color: #00F; font-size: 20px" class="glyphicon glyphicon-map-marker"></span>',
+ html: '<i class="bi-geo-alt-fill" style="font-size: 20px; color: #00F;"></i>',
iconAnchor: [10, 19],
className: "",
},
@@ -650,7 +657,7 @@ var caosdb_map = new function () {
"name": "All entities",
"description": "Show all entities with coordinates.",
"icon": {
- html: '<span style="color: #F00; font-size: 20px" class="glyphicon glyphicon-map-marker"></span>',
+ html: '<i class="bi-geo-alt-fill" style="font-size: 20px; color: #F00;"></i>',
iconAnchor: [10, 19],
className: "",
},
@@ -727,7 +734,7 @@ var caosdb_map = new function () {
this.create_toggle_map_button = function (content = "Map") {
logger.trace("enter create_toggle_map_button");
let button = $(
- `<button class="navbar-btn btn btn-link"/>`);
+ `<a class="nav-link" role="button"></a>`);
button.toggleClass("caosdb-f-toggle-map-button", true);
button.text(content);
logger.trace("leave create_toggle_map_button");
@@ -742,13 +749,7 @@ var caosdb_map = new function () {
panel.toggleClass("caosdb-f-map-panel", true);
// for centered and responsive display
- panel.toggleClass("container", true);
-
- // TODO move to css file
- $(panel).css({
- "height": "500px"
- });
-
+ panel.toggleClass(["container", "mb-2"], true);
return panel[0];
}
@@ -797,7 +798,9 @@ var caosdb_map = new function () {
config.tileLayer.type);
}
- var map = L.map(container, config);
+ const wrapped = $("<div/>");
+ $(container).append(wrapped);
+ var map = L.map(wrapped[0], config);
map._crs = config.crs;
tileLayer.addTo(map);
@@ -867,6 +870,13 @@ var caosdb_map = new function () {
}
+ this.show_map = function () {
+ logger.trace("enter show_map");
+ $(".caosdb-f-map-panel").show(900, () => this
+ ._toggle_cb());
+ }
+
+
/**
* To be called after the map panel has been toggled.
*/
@@ -956,6 +966,8 @@ var caosdb_map = new function () {
* 3) initialize the container panel
* 4) inttialize the map itself
* 5) add the map toggle button to the navbar
+ *
+ * @fires caosdb_map#map_ready
*/
this.init = async function () {
logger.trace("enter init");
@@ -978,6 +990,7 @@ var caosdb_map = new function () {
// TODO split in smaller pieces and move callback to separate function
this.change_map_view = (view) => {
if (this._map) {
+ this._map._container.remove();
this._map.remove();
}
@@ -1065,6 +1078,12 @@ var caosdb_map = new function () {
this.change_map_view();
toggle_button = this.init_toggle_map_button();
+
+ // indicate that the map is ready: map button is present and
+ // map is hidden or shown but initialized in either case.
+ this._map.whenReady(()=>{
+ document.body.dispatchEvent(caosdb_map.map_ready);
+ });
} catch (err) {
logger.error("Could not initialize the map.",
err);
@@ -1243,7 +1262,7 @@ var caosdb_map = new function () {
".caosdb-f-shortcuts-panel-toggle-button:not('.caosdb-f-shortcuts-panel-hidden')"
).click();
- query_panel
+ $("#caosdb-query-panel-collapsible")
.collapse("show");
// fill query into text field
@@ -1426,7 +1445,7 @@ var caosdb_map = new function () {
var parents = getParents(entity);
var ret = [];
for (const par of parents) {
- var label = $('<span class="label">' + par.name +
+ var label = $('<span class="badge">' + par.name +
'</span>')
// TODO move to global css
.css({
@@ -1458,7 +1477,7 @@ var caosdb_map = new function () {
const link_title = entity_on_page ? "Jump to this entity." : "Browse to this entity.";
const link = $(`<a title="${link_title}" href="${href}"/>`)
.addClass("pull-right")
- .append(`<span class="glyphicon glyphicon-share-alt"/></a>`);
+ .append(`<i class="bi bi-box-arrow-up-right"></i></a>`);
const name_label = $('<div/>')
// TODO move to global css
@@ -1665,7 +1684,7 @@ var caosdb_map = new function () {
// TODO refactor and extract function for map controls and
// merge with similar code from the select_handler.
var button = L.DomUtil.create("div",
- "leaflet-bar leaflet-control leaflet-control-custom"
+ "leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
);
button.title = "Change the view";
// TODO move to css
@@ -1675,7 +1694,7 @@ var caosdb_map = new function () {
button.style.textAlign = "center";
button.style.marginTop = "2px";
button.innerHTML =
- '<span style="margin-top: 5px; font-size: 15px" class="glyphicon glyphicon-option-vertical"></span>';
+ '<i style="font-size: 20px" class="bi-three-dots-vertical"></i>';
button.addEventListener("click", click);
$(button).prepend(view_menu);
@@ -1981,7 +2000,7 @@ entity.`;
button.style.marginTop =
"2px";
button.innerHTML =
- '<span style="margin-top: 5px; font-size: 15px" class="glyphicon glyphicon-search"></span>';
+ '<i style="margin-top: 5px; font-size: 15px" class="bi-search"></i>';
button.onclick = callback;
$(button).on("mousedown", (
diff --git a/src/core/js/ext_table_preview.js b/src/core/js/ext_table_preview.js
index 1d9da6fa9334a52de5eb39a66b585c7eb67cd120..708d4da4b69602b4824b46e2aac082e4037b3102 100644
--- a/src/core/js/ext_table_preview.js
+++ b/src/core/js/ext_table_preview.js
@@ -55,8 +55,8 @@ var ext_table_preview = function ($, logger, connection, getEntityPath, getEnti
} else {
const tablecontent = script_result.getElementsByTagName("stdout")[0];
const unformatted = markdown.textToHtml(tablecontent.textContent)
- const formatted = $('<div class="table-responsive"/>').append(unformatted);
- formatted.find("table").addClass("table table-bordered table-condensed").removeAttr("border");
+ const formatted = $('<div/>').append(unformatted);
+ formatted.find("table").addClass("table table-responsive table-bordered table-sm").removeAttr("border");
return formatted[0];
}
} catch (err) {
diff --git a/src/core/js/ext_trigger_crawler_form.js b/src/core/js/ext_trigger_crawler_form.js
index 94ea6feb672cc3a2be8c87cb6bd6f5c8a5087d3f..0796ef77da36e730b05d70dbbd2e8728c6e65c79 100644
--- a/src/core/js/ext_trigger_crawler_form.js
+++ b/src/core/js/ext_trigger_crawler_form.js
@@ -74,8 +74,8 @@ var ext_trigger_crawler_form = function () {
<div class="modal-content">
<div class="modal-header">
<button type="button"
- class="close"
- data-dismiss="modal"
+ class="btn-close"
+ data-bs-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
@@ -108,7 +108,7 @@ var ext_trigger_crawler_form = function () {
<form method="POST" action="/scripting">
<input type="hidden" name="call" value="${script}"/>
<input type="hidden" name="-p0" value=""/>
- <div class="form-group">
+ <div class="form-control">
<input type="submit"
class="form-control btn btn-primary" value="${button_name}"/>
</div>
diff --git a/src/core/js/ext_xls_download.js b/src/core/js/ext_xls_download.js
index f3eac54dde17bb7d385c31e5189806facc1948e2..5ea29ba38698b7c14ad4329201b2f3104dfe57ab 100644
--- a/src/core/js/ext_xls_download.js
+++ b/src/core/js/ext_xls_download.js
@@ -62,7 +62,7 @@ var caosdb_table_export = new function () {
}
/**
- * In order to create a valid tsv table, characters that have a special
+ * In order to create a valid tsv table, characters that have a special
* meaning (line break and tab) need to be removed.
*
* Both characters will be replaced by a single white space
diff --git a/src/core/js/footer.js b/src/core/js/footer.js
deleted file mode 100644
index c48c5cf19c405aea326b36aba2868008466a8329..0000000000000000000000000000000000000000
--- a/src/core/js/footer.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * ** header v3.0
- * This file is a part of the CaosDB Project.
- *
- * Copyright (C) 2019 IndiScale GmbH (info@indiscale.com)
- * Copyright (C) 2019 Daniel Hornung (d.hornung@indiscale.com)
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
- *
- * ** end header
- */
-'use strict';
-
-/**
- * Call initially.
- *
- * TODO refactor to async function for better readability.
- * @return something
- */
-function footer_initOnDocumentReady() {
-
- var xhr = new XMLHttpRequest()
-
- // TODO Refactor and use transformation.retrieveXsltScript,
- //
- // Event better use the transformation module for injecting an entry point,
- // because this implementation does not allow for non-HTML content in the
- // caosdb-footer template.
- xhr.open("GET", "/webinterface/${BUILD_NUMBER}/xsl/footer.xsl");
- xhr.addEventListener('load', function() {
- if (this.status != 200) {
- // TODO use proper logging framework (log.getLogger("footer.js");)
- console.log(this.status);
- return;
- }
- var footer_xsl = this.responseXML;
-
- var foot_content = $('[name = "caosdb-footer"]', footer_xsl)[0];
- var fragment = document.createRange().createContextualFragment(
- foot_content.innerHTML);
- var footer = $("footer")[0];
- footer.appendChild(fragment);
-
- });
- xhr.send();
-
-}
-
-$(document).ready(footer_initOnDocumentReady);
diff --git a/src/core/js/form_elements.js b/src/core/js/form_elements.js
index 8fe0af4ba633aaf257c48dd3e40ee22f4a8fc3c5..d01b45ee9148febc592d615a8fa947d0d53656d3 100644
--- a/src/core/js/form_elements.js
+++ b/src/core/js/form_elements.js
@@ -98,7 +98,7 @@ var form_elements = new function () {
*/
this.version = "0.1";
- this.dependencies = ["log", "caosdb_utils", "markdown"];
+ this.dependencies = ["log", "caosdb_utils", "markdown", "bootstrap"];
this.logger = log.getLogger("form_elements");
this.cancel_form_event = new Event("caosdb.form.cancel");
this.submit_form_event = new Event("caosdb.form.submit");
@@ -233,7 +233,7 @@ var form_elements = new function () {
// create the alert
const _alert = $(`<div class="alert alert-${severity}
- alert-dismissible fade in caosdb-f-form-elements-alert" role="alert">${title}
+ alert-dismissible caosdb-f-form-elements-alert" role="alert">${title}
<p>${config.message}</p>
</div>`);
@@ -242,21 +242,22 @@ var form_elements = new function () {
if (remember) {
const remember_my_decision_text = config.remember_my_decision_text ||
"Don't ask me again.";
- checkbox = $(`<p class="checkbox"><label>
+ checkbox = $(`<p class="form-check"><label>
<input type="checkbox"/> ${remember_my_decision_text}</label></p>`);
_alert.append(checkbox);
}
// create buttons ...
- const cancel_button = config.cancel_button || $(`<button type="button" class="btn btn-default caosdb-f-btn-alert-cancel">${cancel_text}</button>`);
+ const cancel_button = config.cancel_button || $(`<button type="button" class="btn btn-secondary caosdb-f-btn-alert-cancel">${cancel_text}</button>`);
const proceed_button = config.proceed_button || $(`<button type="button" class="btn btn-${severity} caosdb-f-btn-alert-proceed">${proceed_text}</button>`);
_alert.append($("<p/>").append([proceed_button, cancel_button]));
// ... and bind callbacks to the buttons.
cancel_button.click(() => {
- $(_alert).alert('close');
+ var alert = bootstrap.Alert.getInstance(_alert[0]);
+ alert.close()
if (typeof config.cancel_callback == "function") {
config.cancel_callback();
}
@@ -267,10 +268,13 @@ var form_elements = new function () {
form_elements._set_alert_decision(config.remember_my_decision_id,
"proceed");
}
- $(_alert).alert('close');
+ var alert = bootstrap.Alert.getInstance(_alert[0]);
+ alert.close()
config.proceed_callback();
});
+ new bootstrap.Alert(_alert[0]);
+
return _alert[0];
}
@@ -486,7 +490,6 @@ var form_elements = new function () {
* @return {ScriptingResult}
*/
this.parse_script_result = function (result) {
- console.log(result);
const scriptNode = result.evaluate("/Response/script", result, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
const code = result.evaluate("@code", scriptNode, null, XPathResult.STRING_TYPE, null).stringValue;
@@ -516,7 +519,7 @@ var form_elements = new function () {
let label = this._make_input_label_str(config);
let loading = $(createWaitingNotification("loading..."))
.addClass("caosdb-f-field-not-ready");
- let input_col = $('<div class="col-sm-9"/>');
+ let input_col = $('<div class="caosdb-f-property-value col-sm-9"/>');
input_col.append(loading);
this._query(config.query).then(async function (entities) {
@@ -572,8 +575,8 @@ var form_elements = new function () {
var actions_box = select.siblings().find(".bs-actionsbox");
if (actions_box.length === 0) {
actions_box = $(`<div class="bs-actionsbox">
- <div class="btn-group btn-group-sm btn-block">
- <button type="button" class="actions-btn btn-default bs-deselect-all btn btn-light">None</button>
+ <div class="btn-group btn-group-sm d-grid">
+ <button type="button" class="actions-btn bs-deselect-all btn btn-light">None</button>
</div>
</div>`)
.hide();
@@ -595,9 +598,11 @@ var form_elements = new function () {
actions_box
.find(".bs-deselect-all")
.click((e) => {
- select.val(null)
- .selectpicker("render")
- .parent().toggleClass("open", false);
+ select
+ .selectpicker("val", null);
+ select
+ .selectpicker("render");
+ select.dropdown("hide");
select[0].dispatchEvent(form_elements.field_changed_event);
});
}
@@ -798,13 +803,13 @@ var form_elements = new function () {
this.add_help = function (field, config) {
- var help_button = $('<span data-trigger="click focus" data-toggle="popover" class="caosdb-f-form-help pull-right glyphicon glyphicon-info-sign"/>')
+ var help_button = $('<a tabindex="0" role="button" data-bs-trigger="focus" data-bs-toggle="popover"><i class="caosdb-f-form-help pull-right bi-info-circle-fill"></i></a>')
.css({
"cursor": "pointer"
});
if (typeof config === "string" || config instanceof String) {
- help_button.attr("data-content", config);
+ help_button.attr("data-bs-content", config);
help_button.popover();
} else {
help_button.popover(config);
@@ -1196,7 +1201,7 @@ var form_elements = new function () {
}
this.make_footer = function () {
- return $('<div class="text-right caosdb-f-form-elements-footer"/>')
+ return $('<div class="text-end caosdb-f-form-elements-footer"/>')
.css({
"margin": "20px",
}).append(this.make_required_marker())
@@ -1272,10 +1277,10 @@ var form_elements = new function () {
ret.append(to_input);
// styling
- $(from_input).toggleClass("form-group", false);
+ $(from_input).toggleClass("form-control", false);
$(from_input).find(".col-sm-3").toggleClass("col-sm-3", false).toggleClass("col-sm-1");
$(from_input).find(".col-sm-9").toggleClass("col-sm-9", false).toggleClass("col-sm-3");
- $(to_input).toggleClass("form-group", false);
+ $(to_input).toggleClass("form-control", false);
$(to_input).find(".col-sm-3").toggleClass("col-sm-3", false).toggleClass("col-sm-1").toggleClass("col-sm-offset-1");
$(to_input).find(".col-sm-9").toggleClass("col-sm-9", false).toggleClass("col-sm-3");
@@ -1293,10 +1298,7 @@ var form_elements = new function () {
*/
this._make_field_wrapper = function (name) {
caosdb_utils.assert_string(name, "param `name`");
- return $('<div class="form-group caosdb-f-field" data-field-name="' + name + '" />')
- .css({
- "padding": "0"
- })[0];
+ return $('<div class="row caosdb-f-field caosdb-v-field" data-field-name="' + name + '" />')[0];
}
/**
@@ -1592,7 +1594,7 @@ var form_elements = new function () {
let label = config.label;
return label ? '<label for="' + name +
'" data-property-name="' + name +
- '" class="control-label col-sm-3">' + label +
+ '" class="col-form-label col-sm-3">' + label +
'</label>' : "";
}
diff --git a/src/core/js/preview.js b/src/core/js/preview.js
index b85f7b56dc13ff94aa2c3de90eb1b464d7f1e9d6..c5b7752b5070796ab01fb3d007065d2a4fc6b425 100644
--- a/src/core/js/preview.js
+++ b/src/core/js/preview.js
@@ -245,7 +245,7 @@ var preview = new function() {
* @return {HTMLElement} A button for showing the preview carousel.
*/
this.createShowPreviewButton = function() {
- return $('<button class="' + preview.classNameShowPreviewButton + ' btn btn-link btn-xs" title="Show preview of the referenced entities."><span class="glyphicon glyphicon-eye-open"></button>')[0];
+ return $('<button class="' + preview.classNameShowPreviewButton + ' align-self-start btn btn-link btn-sm" title="Show preview of the referenced entities."><i class="bi-eye-fill"></i></button>')[0];
}
/**
@@ -253,7 +253,7 @@ var preview = new function() {
* @return {HTMLElement} A button for hiding the preview carousel.
*/
this.createHidePreviewButton = function() {
- return $('<button class="' + preview.classNameHidePreviewButton + ' btn btn-link btn-xs" title="Hide preview and show links."><span class="glyphicon glyphicon-eye-close"></button>')[0];
+ return $('<button class="' + preview.classNameHidePreviewButton + ' align-self-start btn btn-link btn-sm" title="Hide preview and show links."><i class="bi-eye-slash-fill"></i></button>')[0];
}
/**
@@ -274,7 +274,8 @@ var preview = new function() {
* @return {HTMLElement} parameter `ref_property_elem`
*/
this.addShowPreviewButton = function(ref_property_elem, button_elem) {
- ref_property_elem.getElementsByClassName("caosdb-f-property-value")[0].appendChild(button_elem);
+ caosdb_utils.assert_html_element(button_elem, "param `button_elem`");
+ $(ref_property_elem.getElementsByClassName("caosdb-f-property-value")[0]).prepend(button_elem);
return ref_property_elem;
}
@@ -381,15 +382,16 @@ var preview = new function() {
/**
* Create a preview carousel from an array of entity elements.
*
- * A carousel consists of the main div with class `carousel slide` and a unique ID which will
- * be generated here. Inside there are the navigation bar with class
- * `caosdb-preview-carousel-nav`, and the inner div which contains and show the several slides
- * with class `carousel-inner`.
+ * A carousel consists of the main div with class `carousel slide` and a
+ * unique ID which will be generated here. Inside there are the navigation
+ * bar with class `caosdb-preview-carousel-nav`, and the inner div which
+ * contains and show the several slides with class `carousel-inner`.
*
* The refLinksContainer are cloned and modified such that they trigger the
- * sliding and added to the navigation bar. Then a set of empty slides is added to the inner
- * div. The entities are put into the correct slide using the data-slide-to attributes and the
- * entity id of each selector button.
+ * sliding and added to the navigation bar. Then a set of empty slides is
+ * added to the inner div. The entities are put into the correct slide
+ * using the data-bs-slide-to attributes and the entity id of each selector
+ * button.
*
* @param {HTMLElement[]} entities - The array of entity elements.
* @param {HTMLElement} refLinksContainer - The original reference links.
@@ -401,19 +403,19 @@ var preview = new function() {
}
let carouselId = ("previewCarousel" + preview.carouselId++);
let nav = preview.createCarouselNav(refLinksContainer, carouselId); //preserves order, first is active
- let N = $(nav).find('[data-slide-to]').length;
+ let N = $(nav).find('[data-bs-slide-to]').length;
let inner = preview.createEmptyInner(N) //no content, first is active
let selectorButtons = preview.getSelectorButtons(nav);
selectorButtons.each((index, button) => {
- let slide_id = button.getAttribute("data-slide-to");
+ let slide_id = button.getAttribute("data-bs-slide-to");
let entity_id_version = preview.getEntityRef(button);
let entity = preview.getEntityByIdVersion(entities, entity_id_version);
if (entity == null) throw new Error("Entity with ID " + entity_id_version + " could not be found!");
inner.children[slide_id].appendChild(preview.preparePreviewEntity(entity));
});
- let mainDiv = $('<div class="carousel slide" data-interval="false"></div>')[0];
+ let mainDiv = $('<div data-bs-interval="false" class="carousel slide"></div>')[0];
mainDiv.appendChild(nav);
mainDiv.appendChild(inner);
mainDiv.id = carouselId;
@@ -424,14 +426,15 @@ var preview = new function() {
}
/**
- * Get the selector buttons from a div which contains them or return the single selector button
- * if the `refLinksContainer` parameter is itself the selector button.
+ * Get the selector buttons from a div which contains them or return the
+ * single selector button if the `refLinksContainer` parameter is itself
+ * the selector button.
*
* @param {HTMLElement} refLinksContainer
* @return {jQuery} A collection of selector buttons.
*/
this.getSelectorButtons = function(refLinksContainer) {
- return $(refLinksContainer).find('[data-slide-to]').addBack('[data-slide-to]');
+ return $(refLinksContainer).find('[data-bs-slide-to]');
}
/**
@@ -472,26 +475,16 @@ var preview = new function() {
* @return {HTMLElement} The prepared entity.
*/
this.preparePreviewEntity = function(entity) {
- // move version modal into body because otherwise it would be displayed
- // inside the caroussel. That would make sense but there is simply not
- // enough space.
- $(entity).find(".caosdb-f-entity-version-info").appendTo(document.body);
-
+ const preparedEntity = entity.cloneNode(true);
- // make backref button smaller
- $(entity).find(".caosdb-backref-link > .hidden-xs").hide();
+ const href = connection.getBasePath() + transaction.generateEntitiesUri([preview.getEntityRef(entity)]);
- var preparedEntity = entity.cloneNode(true);
+ const link = $('<a title="Load this entity in a new window." href="' + href + '" class="btn" target="_blank"></a>');
+ link.append('<i class="bi bi-box-arrow-up-right"></i>');
- // header is clickable:
- let href = connection.getBasePath() + transaction.generateEntitiesUri([preview.getEntityRef(entity)]);
- let link = $('<a title="Load this entity in a new window." href="' + href + '" class="label caosdb-id caosdb-id-button" target="_blank"></a>');
- let entityIdElem = $(preparedEntity).find('.label.caosdb-id');
- link.insertAfter(entityIdElem);
- link.append(entityIdElem.text() + " ");
- link.append('<span class="glyphicon glyphicon-new-window"/>');
- // TODO this link is not visible due to webcaosdb.css (caosdb-id)
- entityIdElem.remove();
+ const buttonsList = $(preparedEntity).find(".caosdb-v-entity-header-buttons-list");
+ buttonsList.children().hide();
+ buttonsList.append(link);
return preparedEntity;
}
@@ -509,9 +502,9 @@ var preview = new function() {
if (carouselId == null) {
throw new Error("carouselId must not be null.");
}
- let prevButton = $('<a role="button" style="z-index: 5;position:absolute; top: 0;left:0px" class="btn btn-default btn-sm" href="#' + carouselId + '" data-slide="prev"></a>')[0];
+ let prevButton = $('<a role="button" style="z-index: 5;position:absolute; top: 0;left:0px" class="btn btn-secondary btn-sm" href="#' + carouselId + '" data-bs-slide="prev"></a>')[0];
prevButton.innerHTML = preview.carouselPrevButtonInnerHTML;
- let nextButton = $('<a role="button" style="z-index: 5;position:absolute; top: 0;right:0px" class="btn btn-default btn-sm" href="#' + carouselId + '" data-slide="next"></a>')[0];
+ let nextButton = $('<a role="button" style="z-index: 5;position:absolute; top: 0;right:0px" class="btn btn-secondary btn-sm" href="#' + carouselId + '" data-bs-slide="next"></a>')[0];
nextButton.innerHTML = preview.carouselNextButtonInnerHTML;
let nav = $('<div class="' + preview.classNamePreviewCarouselNav + '"></div>')[0];
let selectors = refLinksContainer.cloneNode(true);
@@ -519,11 +512,11 @@ var preview = new function() {
// resolvable-reference class but did not resolve it yet.
$(selectors).show();
- $(selectors).find('a,button,.btn').each((index, button) => {
+ $(selectors).find('a.caosdb-f-reference-value').each((index, button) => {
$(button).toggleClass("active", index === 0);
button.removeAttribute("href");
- button.setAttribute("data-slide-to", index);
- button.setAttribute("data-target", "#" + carouselId);
+ button.setAttribute("data-bs-slide-to", index);
+ button.setAttribute("data-bs-target", "#" + carouselId);
});
nav.appendChild(prevButton);
nav.appendChild(nextButton);
@@ -532,12 +525,13 @@ var preview = new function() {
return nav;
};
- this.carouselPrevButtonInnerHTML = '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></span><span class="sr-only">Previous</span>';
- this.carouselNextButtonInnerHTML = '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span><span class="sr-only">Next</span>';
+ this.carouselPrevButtonInnerHTML = '<i class="bi-chevron-left" aria-hidden="true"></i><span class="visually-hidden">Previous</span>';
+ this.carouselNextButtonInnerHTML = '<i class="bi-chevron-right" aria-hidden="true"></i><span class="visually-hidden">Next</span>';
/**
- * Create a div with class `carousel-inner` which contains N divs with class `item` while
- * the first also has class `active`. These item divs are empty.
+ * Create a div with class `carousel-inner` which contains N divs with
+ * class `carousel-item` while the first also has class `active`. These
+ * item divs are empty.
*
* @param {Number} N - An integer > 0.
* @return {HTMLElement} A Div with class `carousel-inner`.
@@ -546,8 +540,8 @@ var preview = new function() {
if (N == null || isNaN(N) || N < 1) {
throw new Error("N is to be an integer > 0");
}
- let innerDiv = $('<div class="carousel-inner"><div class="item active"></div></div>')[0];
- let item = $('<div class="item"></div>')[0];
+ let innerDiv = $('<div class="carousel-inner"><div class="carousel-item active"></div></div>')[0];
+ let item = $('<div class="carousel-item"></div>')[0];
for (let i = 1; i < N; i++) {
innerDiv.appendChild(item.cloneNode());
}
@@ -654,7 +648,7 @@ var preview = new function() {
* @returns {HTMLElement} The ith slide item selector.
*/
this.getSlideItemSelector = function(carousel, i) {
- let items = $(carousel).find('.' + preview.classNamePreviewCarouselNav).find('[data-slide-to]');
+ let items = $(carousel).find('.' + preview.classNamePreviewCarouselNav).find('[data-bs-slide-to]');
if (items.length <= i) {
throw new Error("Index out of bounds.");
}
@@ -751,8 +745,11 @@ var preview = new function() {
* @return {HTMLElement[]} A collection of links.
*/
this.getReferenceLinks = function(refLinksContainer) {
- return $(refLinksContainer)
- .find('a').addBack('a').has('.caosdb-id').toArray();
+ var cont = $(refLinksContainer);
+ if (cont.is("a.caosdb-f-reference-value")) {
+ return cont.toArray();
+ }
+ return cont.find('a.caosdb-f-reference-value').toArray();
}
};
diff --git a/src/core/js/query_shortcuts.js b/src/core/js/query_shortcuts.js
index 426a6db4ea3b25d10e0bb6c0289caa664b34e71f..a0a7f877555dc6e2c2617892540c900be12a6a19 100644
--- a/src/core/js/query_shortcuts.js
+++ b/src/core/js/query_shortcuts.js
@@ -70,14 +70,14 @@ var query_shortcuts = new function() {
*/
this.make_toolbox_button = function() {
var ret = $(
- `<div class="col-md-2 dropdown text-right caosdb-f-shortcuts-toolbox-button">
- <button title="Shortcuts Toolbox" class="btn dropdown-toggle" type="button"
- data-toggle="dropdown"><span class="glyphicon glyphicon-wrench"></span></button>
+ `<div class="dropdown text-end caosdb-f-shortcuts-toolbox-button">
+ <button title="Shortcuts Toolbox" class="btn dropdown-bs-toggle" type="button"
+ data-bs-toggle="dropdown"><i class="bi-wrench"></i></button>
<ul class="dropdown-menu">
- <li class="dropdown-header">Shortcuts Tools</li>
- <li><button class="btn" type="button" data-tool="create">Create</button></li>
- <li><button class="btn" type="button" data-tool="edit">Edit</button></li>
- <li><button class="btn" type="button" data-tool="delete">Delete</button></li>
+ <li class="dropdown-header dropdown-item">Shortcuts Tools</li>
+ <li><button class="btn dropdown-item" type="button" data-tool="create">Create</button></li>
+ <li><button class="btn dropdown-item" type="button" data-tool="edit">Edit</button></li>
+ <li><button class="btn dropdown-item" type="button" data-tool="delete">Delete</button></li>
</ul>
</div>`);
@@ -144,12 +144,12 @@ var query_shortcuts = new function() {
this.init = async function() {
this.init_datamodel();
- var header = $('<div class="caosdb-f-shortcuts-panel-header row h3"><span class="caosdb-f-shortcuts-panel-header-title col-md-10">Shortcuts</span></div>')
- .append(this.make_toolbox_button());
+ var header = $('<details class="caosdb-f-shortcuts-panel-header"><summary class="caosdb-f-shortcuts-panel-header-title">Shortcuts</summary></details>')
+ header.find("summary").append(this.make_toolbox_button());
var body = $('<div class="caosdb-f-shortcuts-panel-body"/>');
+ header.append(body)
var shortcuts_panel = $('<div class="container caosdb-shortcuts-container"></div>')
.append(header)
- .append(body);
body.append(await this.retrieve_global_shortcuts());
@@ -162,28 +162,11 @@ var query_shortcuts = new function() {
$("#caosdb-query-panel").append(shortcuts_panel);
}
- // make toggle button
- var toggle_button = this
- .make_shortcuts_panel_toggle_button(shortcuts_panel);
-
- header.find("span.caosdb-f-shortcuts-panel-header-title")
- .prepend(toggle_button);
-
- // initially hide panel or restore old visibility
- if(sessionStorage[this._cache_visibility_key] !== "true") {
- toggle_button.click();
- }
-
return shortcuts_panel[0];
}
- this.make_shortcuts_panel_toggle_button = function(panel) {
- var button = $('<span title="Toggle Shortcuts Panel" class="caosdb-f-shortcuts-panel-toggle-button glyphicon glyphicon-menu-down"/>');
- button.click((e) => this.toggle_shortcuts_panel(panel));
- return button[0];
- }
/**
@@ -296,7 +279,7 @@ var query_shortcuts = new function() {
<div class="col-md-10">
<span class="caosdb-f-query-shortcut-form">` + preparedstr + `</span>
</div>
- <div class="caosdb-f-query-shortcut-right-col col-md-2 text-right">
+ <div class="position-relative caosdb-f-query-shortcut-right-col col-md-2 text-end">
</div>
</div>`
);
@@ -495,7 +478,7 @@ var query_shortcuts = new function() {
cloned.children().show();
cloned.find(".caosdb-f-query-shortcut").each((idx, item) => {
- var wrapper = $(item).find(".col-md-2.text-right");
+ var wrapper = $(item).find(".col-md-2.text-end");
// disable the inputs of the query shortcut
$(item).find(":input").prop("disabled", true);
@@ -506,7 +489,7 @@ var query_shortcuts = new function() {
// user shortcut
// insert "UPDATE" button
var entity_id = $(item).attr("data-entity-id");
- var input = $('<button type="button" class="btn btn-default" name="update-' + entity_id + '">Edit</button>')
+ var input = $('<button type="button" class="btn btn-secondary" name="update-' + entity_id + '">Edit</button>')
.attr("title", "Edit this shortcut.")
.click(() => init_update_form(panel, entity_id));
wrapper.append(input);
@@ -528,7 +511,7 @@ var query_shortcuts = new function() {
this.init_cud_shortcut_form = function(panel, form) {
// hide content
$(panel).children().hide();
- var query_panel = $(".caosdb-query-panel").hide();
+ var query_panel = $(".caosdb-query-form").hide();
// show original again on cancel
form.addEventListener("caosdb.form.cancel", function(e) {
@@ -538,12 +521,7 @@ var query_shortcuts = new function() {
// show results in query panel
form.addEventListener("caosdb.form.success", function(e) {
- form.addEventListener("caosdb.form.cancel", function(e) {
- // reset shortcuts
- query_panel.show();
- query_shortcuts.reset();
- }, true);
-
+ query_panel.show();
}, true);
form.addEventListener("caosdb.form.submit", function(e) {
@@ -630,8 +608,7 @@ var query_shortcuts = new function() {
this.make_dismissible_alert = function(type, content) {
var ret = $(
`<div class="alert alert-` + type + ` alert-dismissible" role="alert">
- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>`);
ret.append(content);
@@ -669,10 +646,10 @@ var query_shortcuts = new function() {
this.make_shortcut_buttons = function(execute, customize) {
- const execute_button = $('<button class="btn btn-primary" type="button" title="Execute query."><span class="glyphicon glyphicon-search"></span></button>')
+ const execute_button = $('<button class="btn btn-primary" type="button" title="Execute query."><i class="bi-search"></i></button>')
.css({"font-size": "12px"})
.click(execute);
- const customize_button = $('<button class="btn btn-primary" type="button" title="Write to the Query Panel for customization."><span class="glyphicon glyphicon-pencil"></span></button>')
+ const customize_button = $('<button class="btn btn-primary" type="button" title="Write to the Query Panel for customization."><i class="bi-pencil"></i></button>')
.css({"font-size": "12px"})
.click(customize)
.mouseenter(function(e) {
@@ -688,26 +665,21 @@ var query_shortcuts = new function() {
$('#caosdb-query-textarea').attr("style", "");
});
const button_group = $('<div class="btn-group"/>')
- .css({"font-size": "12px", position: "absolute", top: 0, right: "15px"})
+ .css({"font-size": "12px", position: "absolute", top: 0, right: "12px"})
.append(customize_button, execute_button)
.hide()
.mouseleave(function(e) {
$(this).hide();
});
- const hover = $('<button class="btn btn-default caosdb-button-search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>')
+ const hover = $('<button class="btn btn-secondary caosdb-button-search"><i class="bi-search" aria-hidden="true"></i></button>')
.css({"font-size": "12px"})
.click(execute)
.mouseenter(() => {
button_group.fadeIn(150);
});
- const ret = $('<span/>')
- .css({"text-align": "right"})
- .append(hover, button_group);
-
- //return [hover[0], button_group[0]];
- return ret[0];
+ return [hover[0], button_group[0]];
}
/**
@@ -734,7 +706,7 @@ var query_shortcuts = new function() {
// make form fields manually, only use the form_elements to wrap it.
cloned.find(".caosdb-f-query-shortcut").each((idx, item) => {
- var wrapper = $(item).find(".col-md-2.text-right");
+ var wrapper = $(item).find(".col-md-2.text-end");
// disable the inputs of the query shortcut
$(item).find(":input").prop("disabled", true);
@@ -774,7 +746,7 @@ var query_shortcuts = new function() {
this.make_form_entity = function(entity_id) {
var entity = $(`
- <div class="hidden" data-entity-role="Record">
+ <div class="invisible" data-entity-role="Record">
</div>`);
if(typeof entity_id === "string" || entity instanceof String) {
entity.attr("data-entity-id", entity_id);
@@ -959,22 +931,6 @@ var query_shortcuts = new function() {
this._cache_visibility_key = "caosdb.query-shortcuts-panel.visible";
- this.toggle_shortcuts_panel = function(panel) {
- var toggle_button = $(panel).find(".caosdb-f-shortcuts-panel-toggle-button")
- .toggleClass("caosdb-f-shortcuts-panel-hidden")
- .toggleClass("glyphicon-menu-right")
- .toggleClass("glyphicon-menu-down");
-
-
- // remember visibility for page reloads
- sessionStorage[this._cache_visibility_key] = !toggle_button
- .hasClass("caosdb-f-shortcuts-panel-hidden");
-
- $(panel).find(".caosdb-f-shortcuts-toolbox-button").toggle();
- $(panel).find(".caosdb-f-shortcuts-panel-body").toggle()
- }
-
-
// deps
this._updateEntities = update;
this._insertEntities = insert;
@@ -1103,12 +1059,12 @@ var query_shortcuts = new function() {
text-align: left;
}
+ .caosdb-f-query-shortcut button,
.caosdb-f-query-shortcut div {
min-height: 32px;
- vertical-align: middle;
}
- div.text-right ul.dropdown-menu {
+ div.text-end ul.dropdown-menu {
left: unset;
right: 0;
}
diff --git a/src/core/js/tour.js b/src/core/js/tour.js
index 398c9901393e8470ee0f31c0cfcfd2e86febbe45..b8ee39732eb0542e74ca4bced38a9203469b5aea 100644
--- a/src/core/js/tour.js
+++ b/src/core/js/tour.js
@@ -30,9 +30,10 @@
* defines chapters, sections and pages. Each page corresponds to a popover
* window with some content, which can be activated by hint buttons.
*
- * Because it is easier to write for humans, this documentation will talk about
- * a corresponding yaml file instead, which needs to be converted to a json file
- * before usage. The `tour.yaml` shall be placed in `conf/ext/json`
+ * For the sake of simplicity, in this documentation we will talk about
+ * a corresponding yaml file (instead of json), which needs to be converted to
+ * a json file before usage.
+ * The `tour.yaml` shall be placed in `conf/ext/json`
* Please also consult `tour.example.yaml` stored in the `doc` folder.
*
* # Structure of the tour.yaml file #
@@ -73,6 +74,7 @@
* One of `top`, `bottom`, `left`, `right` or a combination thereof.
* - button_size :: One of `small`, `medium`, `large`. If not given, the button
* will have an automatic, not necessarily circular, size.
+ * Currently deactivated!
* - title :: Title of the tour page.
* - content :: The content of the page. Rendered as Markdown.
* - highlighters :: Makes HTML elements of the content highlight other
@@ -92,35 +94,42 @@ var INFO = 3
var DEBUG = 4
var TRACE = 5
-var tour = new function() {
+var tour = new function () {
///////////////////////////////////////////////////////////////////////////
// Improving a bit on jquery //
///////////////////////////////////////////////////////////////////////////
// :Contains is case insensitive
- jQuery.expr[':'].Contains = function(a, i, m) {
+ jQuery.expr[':'].Contains = function (a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
+ var logger = log.getLogger("tour");
+
this.PageSet = class {
- constructor(parent_set, config) {
- if(typeof parent_set === "undefined") {
+ constructor(parent_set, config, idx) {
+ if (typeof parent_set === "undefined") {
throw new Error("param `parent_set` must not be undefined");
}
- if(typeof config === "undefined") {
+ if (typeof config === "undefined") {
throw new Error("param `config` must not be undefined");
}
+ this.isPageSet = true;
this.parent_set = parent_set;
this.config = config;
this._elements = new Array();
this.active = false;
- for (const element of config.elements) {
- const next = tour.add_tour_element(element, this);
- this._elements.push(next);
+ this.id = config.id || parent_set.id + "-psid-" + idx;
+
+ if (config.elements) {
+ for (const element of config.elements) {
+ const next = tour.add_tour_element(element, this, this._elements.length);
+ this._elements.push(next);
+ }
}
// set some defaults
@@ -138,12 +147,16 @@ var tour = new function() {
}
}
+ _tour_active () {
+ return this.parent_set._tour_active();
+ }
+
_activate_by_id(id) {
this.parent_set._activate_by_id(id);
}
set old_state_active(value) {
- if(this.config.old_state_active != value) {
+ if (this.config.old_state_active != value) {
this.config.old_state_active = value;
this.update();
}
@@ -169,20 +182,23 @@ var tour = new function() {
return this._elements;
}
+ /**
+ * Create menu entry for a PageSet
+ */
create_menu_entry() {
- var page_set_entry = $("<li class='list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'/>");
- var link = $("<a class='btn btn-link'>" + this.name + "</a>")[0];
- this.menu_entry = link;
- link.addEventListener("click", () => {this.activate();});
+ var menuid = 'tour-submenu-' + this.name.replace(/ /g, "");
+ var page_set_entry = $("<li class='mb-1 caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'/><button class='caosdb-v-tour-toc-pageset btn' data-bs-toggle='collapse' data-bs-target='#" + menuid + "' aria-expanded='false'>" + this.name + "</button><div id='" + menuid + "'class='collapse'><ul class='btn-toggle-nav list-unstyled fw-normal pb-1'></ul></div></li>");
+ var elements_list = page_set_entry.find("ul")[0];
+
+ // store menu_entry for highlightng opened pages/chapters.
+ this.menu_entry = page_set_entry[0];
- var elements_list = $('<ul class="list-group"/>');
for (const element of this.elements) {
const next = element.create_menu_entry();
- elements_list.append(next);
+ if (next) {
+ elements_list.append(next);
+ }
}
-
- page_set_entry.append(link);
- page_set_entry.append(elements_list);
return page_set_entry;
}
@@ -191,7 +207,7 @@ var tour = new function() {
*/
activate() {
if (!this.active) {
- tour.info("PageSet.activate: tour element '" + this.full_name + "'.");
+ logger.info("PageSet.activate: tour element '" + this.full_name + "'.");
this._activate();
@@ -207,15 +223,20 @@ var tour = new function() {
highlight_menu_entry() {
$(this.menu_entry).toggleClass("caosdb-v-tour-menu-entry-highlight", true);
+ $(this.menu_entry).find(".collapse").toggleClass("show", true);
}
unhighlight_menu_entry() {
$(this.menu_entry).toggleClass("caosdb-v-tour-menu-entry-highlight", false);
+ $(this.menu_entry).find(".collapse").toggleClass("show", false);
}
+ /**
+ * _activate PageSet
+ */
_activate() {
if (!this.active) {
- tour.debug("PageSet._activate tour element '" + this.full_name + "'.");
+ logger.debug("PageSet._activate tour element '" + this.full_name + "'.");
this.active = true;
this.old_state_active = true;
this.highlight_menu_entry();
@@ -226,22 +247,25 @@ var tour = new function() {
}
}
+ /**
+ * _on_activation PageSet
+ */
_on_activation() {
let hiding = this.config.on_activation_hide;
if (hiding) {
- console.log("Tour page set hiding:");
+ logger.debug("Tour page set hiding:");
hiding = tour.assert_array(hiding);
hiding.forEach((selector) => {
- console.log(selector);
$(selector).addClass("caosdb-f-tour-hidden");
});
}
}
deactivate_other(trigger) {
- if(this.config.deactivate_other) {
- for (const element of this.elements) {
- if(element instanceof tour.PageSet && element !== trigger) {
+ logger.debug("Close pages other than '" + trigger.id + "'.");
+ if (this.config.deactivate_other) {
+ for (const element of this._elements) {
+ if (element.isPage && element !== trigger) {
element.deactivate();
}
}
@@ -251,8 +275,8 @@ var tour = new function() {
/**
* Initialize activation of PageSet.
*/
- init_activation(restore_old_state=false) {
- tour.debug("PageSet.init_activation tour element '" + this.full_name + "'.");
+ init_activation(restore_old_state = false) {
+ logger.debug("PageSet.init_activation tour element '" + this.full_name + "'.");
if (restore_old_state) {
if (this.old_state_active) {
this.activate();
@@ -264,7 +288,7 @@ var tour = new function() {
deactivate() {
if (this.active) {
- tour.info("PageSet.deactivate tour element '" + this.full_name + "'.");
+ logger.info("PageSet.deactivate tour element '" + this.full_name + "'.");
this.old_state_active = false;
this._deactivate();
}
@@ -272,7 +296,7 @@ var tour = new function() {
_deactivate() {
if (this.active) {
- tour.debug("PageSet._deactivate tour element '" + this.full_name + "'.");
+ logger.debug("PageSet._deactivate tour element '" + this.full_name + "'.");
this.active = false;
this.unhighlight_menu_entry();
@@ -286,57 +310,288 @@ var tour = new function() {
}
}
+ get_previous_tour_page(id) {
+ return this.parent_set.get_previous_tour_page(id);
+ }
+
+ get_next_tour_page(id) {
+ return this.parent_set.get_next_tour_page(id);
+ }
+
+ get_tour_page_by_id(id) {
+ return this.parent_set.get_tour_page_by_id(id)
+ }
+
}
this.Page = class {
- constructor(parent_set, config) {
- if(typeof parent_set === "undefined") {
+ constructor(parent_set, config, idx) {
+ if (typeof parent_set === "undefined") {
throw new Error("param `parent_set` must not be undefined");
}
- if(typeof config === "undefined") {
+ if (typeof config === "undefined") {
throw new Error("param `config` must not be undefined");
}
- this.active = false;
- this.parent_set = parent_set;
this.config = config;
- this.button = this._create_tour_button(config.page, config.content, config.title, config.id, config.button_size, config.css);
+ this.isPage = true;
+ this.initialized = false;
- this._activate_button(this.button, config.activation, config.deactivation);
- this._position_button(this.button, config.target, config.button_position);
- if (config.button_css) {
- for (let key in config.button_css) {
- this.button.style.setProperty(key, config.button_css[key]);
- }
+ this.parent_set = parent_set;
+ this.active = false;
+ if (typeof this.config.href === "undefined") {
+ this.config.href = "/";
+ }
+ if (typeof this.config.id === "undefined") {
+ this.config.id = (this.parent_set.id + "-p" + idx).replace(/ /g, "");
+ }
+ if (typeof this.config.show_button === "undefined") {
+ this.config.show_button = false;
+ }
+ this.id = config.id
+
+ // the argument button_size currently deactivated
+ this.button = this._create_tour_button(config.page, config.content, config.title, config.id, config.button_size, this, config.css);
+ if (! this.config.show_button){
+ $(this.button).hide()
}
- this._apply_highlighters(this.button, config.highlighters);
- this._apply_activation_links(this.button);
- this._apply_hiding(this.button);
+ this._init_on_trigger(this.button, config);
+ this._deinit_on_trigger(this.button, config);
+
+ this._setup_activation_listeners(this.button, this.config.activation, this.config.deactivation);
// set some defaults
if (typeof this.config.active === "undefined") {
- this.config.active = true;
+ this.config.active = false;
}
if (typeof this.config.old_state_active === "undefined") {
this.config.old_state_active = this.config.active;
}
}
+ _on_popover_open() {
+ caosdb_utils.assert_not_undefined(this.popover, "this.popover");
+ caosdb_utils.assert_not_undefined(this.popover.tip, "this.popover.tip");
+ this._scroll_into_view(this.popover.tip);
+
+ // initialize close button
+ const cb = $(this.popover.tip).find(".caosdb-f-tour-popover-close-button")
+ .on("click", (e) => {
+ this.get_page_popover().hide();
+ });
+
+ // TODO move to styling/popover_template
+ if (this.config.detour){
+ const head = $(this.popover.tip).find(".popover-header")
+ head.toggleClass("bg-warning", true);
+ }
+
+ // initialize detour button
+ $(this.popover.tip).find('a[data-detour]').each((idx, element) => {
+ const detour_start_page_id = $(element).data("detour");
+ const detour_page = this.get_tour_page_by_id(
+ detour_start_page_id);
+ $(element)
+ .attr("href", detour_page.config.href+`#${detour_start_page_id}`)
+ .toggleClass(
+ ["btn", "btn-sm", "btn-warning", "fw-bold"], true);
+ $(element).click((e) =>{
+ this._activate_by_id(detour_start_page_id);
+ const id_anchor = `#${detour_start_page_id}`;
+ if ($(id_anchor).length > 0) {
+ detour_page._open();
+ return false;
+ } else {
+ sessionStorage["tour-page-open-next"] = detour_start_page_id;
+ // follow link
+ }
+ });
+ });
+
+ // initialize next/prev buttons
+ var nb = $(this.popover.tip).find("button[data-role=next]")
+ if (this.get_next()) {
+ if (this.config.force_manual_action){
+ nb.toggleClass("disabled", true);
+ nb.parent().attr("title","Manual action required!")
+ } else {
+ nb.on("click", (e) => {
+ const pn = this.get_next()
+ pn.activate(true);
+ if ($("#" + pn.config.id).length == 0) {
+ sessionStorage["tour-page-open-next"] = pn.config.id;
+ window.location = pn.config.href
+ } else {
+ pn._open();
+ }
+ });
+ }
+ } else {
+ nb.toggleClass("invisible", true);
+ }
+ var pb = $(this.popover.tip).find("button[data-role=prev]")
+ if (this.get_previous()) {
+ pb.on("click", (e) => {
+ const pp = this.get_previous()
+ pp.activate(true);
+ if ($("#" + pp.config.id).length == 0) {
+ sessionStorage["tour-page-open-next"] = pp.config.id;
+ window.location = pp.config.href
+ } else {
+ pp._open();
+ }
+ });
+ } else {
+ pb.toggleClass("invisible", true);
+ }
+ }
+
+ _init_on_trigger(button, config) {
+ const id = this.config.id;
+ // Place in the dom tree at a temporary position.
+ // This is necessary because otherwise any referencing tour
+ // page would not find this button during the initialization of
+ // the listeners.
+ $(document.body).append(button);
+ $(button).hide();
+
+ if (config.init) {
+
+ // now set up the triggering of the initialization
+ const ev = config.init["event"];
+ const always = config.init["always"]
+
+ var final_target = this._get_body_or_target(config.init["target"])
+ var call_init = () => {
+ if (!always) {
+ logger.debug("remove init event handler", ev, final_target);
+ final_target.removeEventListener(ev, call_init, true);
+ }
+ this._init(button, config);
+ if (this.config.init["open"]) {
+ // open immediately
+ sessionStorage["tour-page-open-next"] = this.config.id;
+ }
+ if (this.active && sessionStorage["tour-page-open-next"] == this.config.id) {
+ if (this.config.show_button){
+ $(this.button).show();
+ }
+ this._open();
+ };
+ };
+
+ logger.debug("add init event handler", ev, call_init, final_target);
+ final_target.addEventListener(ev, call_init, true);
+
+ } else { // trigger immediately
+ this._init(button, config);
+ }
+ }
+
+ _deinit_on_trigger(button, config){
+ if (config.deinit) {
+ // now set up the triggering of the deinitialization
+ const ev = config.deinit["event"];
+
+ const final_target = this._get_body_or_target(config.deinit["target"])
+ const call_init = () => {
+ this._deinit(button, config);
+ $(this.button).hide();
+ if (this.popover){
+ this.popover.hide();
+ }
+ };
+
+ logger.debug("add init event handler", ev, call_init, final_target);
+ final_target.addEventListener(ev, call_init, true);
+ }
+ }
+
+ /*
+ * returns the document body if target is undefined, HTMLElement of
+ * target otherwise
+ */
+ _get_body_or_target(target){
+ if (typeof target == "undefined") {
+ return document.body;
+ }
+
+ const final_target = $(target);
+ if (final_target.length < 1) {
+ throw new Error("could not find the target");
+ }
+ return final_target[0];
+ }
+
+ /**
+ * Close popover and set page to initialized=false
+ */
+ _deinit(button, config) {
+ this.initialized = false;
+ }
+
+ /**
+ * Intialize the button and the popover of this page.
+ *
+ * This means positioning it on the page, adding all necessary event
+ * listeners, and more.
+ **/
+ _init(button, config) {
+ logger.trace("enter Page._init", this.id, button, config);
+ this._position_button(button, config.target, config.button_position);
+ if (config.button_css) {
+ for (let key in config.button_css) {
+ button.style.setProperty(key,
+ config.button_css[key]);
+ }
+ }
+ this._apply_highlighters(button, config.highlighters);
+ this._apply_hiding(button);
+ this.initialized = true;
+ }
+
_activate_by_id(id) {
this.parent_set._activate_by_id(id);
}
+ /** create_menu_enrty for a Page */
create_menu_entry() {
- var entry = $("<li class='list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page' />");
- var link = $("<a class='btn btn-link'>" + this.name + "</a>")[0];
- link.addEventListener("click", () => {this.activate();});
+ const id_anchor = `#${this.config.id}`;
+
+ if (this.config.do_not_show_in_toc) {
+ return;
+ }
+ var classes = ""
+ if (this.config.detour){
+ classes = " caosdb-v-tour-toc-detour"
+ }
+ if (sessionStorage["tour-page-open-cur"] == this.config.id) {
+ classes = classes + " caosdb-v-tour-toc-cur";
+ }
+ var entry = $("<li class='caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page" + classes + "' />");
+ var link = $("<a href='" + this.config.href + id_anchor + "'>" + this.name + "</a>")[0];
+
+ $(link).click((e) => {
+ this.activate(true);
+
+ if ($(id_anchor).length > 0) {
+ this._open();
+ return false;
+ } else {
+ sessionStorage["tour-page-open-next"] = this.config.id;
+ // follow link
+ }
+
+ });
entry.append(link);
+
+ this.menu_entry = entry[0];
return entry[0];
}
set old_state_active(value) {
- if(this.config.old_state_active != value) {
+ if (this.config.old_state_active != value) {
this.config.old_state_active = value;
this.update();
}
@@ -358,33 +613,194 @@ var tour = new function() {
return this.parent_set.full_name + ":" + this.name;
}
- init_activation(restore_old_state=false) {
- tour.debug("Page.init_activation button '" + this.full_name + "'.");
+ /*
+ * Page init_activation
+ */
+ init_activation(restore_old_state = false) {
+ logger.debug("Page.init_activation button '" + this.full_name + "'.");
if (restore_old_state) {
if (this.old_state_active) {
- this.activate();
+ this.activate(false);
}
} else if (this.config.active) {
- this.activate();
+ this.activate(false);
}
}
- activate() {
+ _highlight_menu() {
+ $(".caosdb-v-tour-toc-active-item").toggleClass("caosdb-v-tour-toc-active-item", false);
+ $(".caosdb-v-tour-toc-cur").toggleClass("caosdb-v-tour-toc-cur", false);
+ $(this.menu_entry).toggleClass("caosdb-v-tour-toc-active-item", true);
+ }
+
+ _unhighlight_menu() {
+ $(this.menu_entry).toggleClass("caosdb-v-tour-toc-active-item", false);
+ }
+
+ _close_other() {
+ // hide all other popover, close all other tour pages.
+ const tour_inst = this.parent_set.parent_set
+ for (var index in tour_inst._elements_by_id ){
+ const page = tour_inst._elements_by_id[index]
+ if (page.popover){
+ page.popover.hide();
+ }
+ if (page.button){
+ // TODO close only when f-tour-open-page class is there?
+ $(page.button).toggleClass("caosdb-f-tour-open-page", false)
+ page.button.dispatchEvent(tour.close_page_event);
+ }
+ }
+ }
+
+ get_page_popover() {
+ const target = $(this.config["target"])[0]
+ if (!this.popover) {
+ // not initialized yet.
+ this.popover = new bootstrap.Popover(target, this.popover_options);
+
+ const events = [
+ "ext_bottom_line.preview.ready",
+ "caosdb.preview.ready",
+ "caosdb.preview.show",
+ "caosdb.preview.hide",
+ "shown.bs.collapse",
+ "hidden.bs.collapse",
+ ];
+ for (let ev of events) {
+ document.body.addEventListener(ev, () => {
+ this.popover.update();
+ }, true);
+ }
+ target.addEventListener("shown.bs.popover", (e) => {
+ if (this.active){
+ this._on_popover_open();
+ this.button.dispatchEvent(tour.open_page_event);
+ }
+
+ });
+ target.addEventListener("hidden.bs.popover", (e) => {
+ $(this.button).toggleClass("caosdb-f-tour-open-page", false)
+ });
+
+ }
+ return this.popover;
+ }
+
+ _before_open() {
+ if (this.config["before_open"]) {
+ const f = new Function(this.config["before_open"]);
+ f();
+ }
+ }
+
+ _open() {
+ this._before_open();
+ const button = $(this.button);
+ const target = $(this.config["target"])
+ sessionStorage["tour-page-open-cur"] = this.config.id;
+ if (button.is(".caosdb-f-tour-open-page")) {
+ return; // already open
+ }
+ if (! target[0]) {
+ return; // element to attach to not available; can't open
+ }
+ if (this.get_next()) {
+ if ($(`#${this.get_next().config.id}`).length == 0) {
+ logger.debug(`Set next page in session store to `, this.get_next().config.id);
+ sessionStorage["tour-page-open-next"] = this.get_next().config.id
+ }
+ }
+ target.on('hidden.bs.popover', (e) => {
+ button[0].dispatchEvent(tour.close_page_event);
+ });
+ this._close_other();
+
+ // open this one
+ const popover = this.get_page_popover();
+ button.toggleClass("caosdb-f-tour-open-page", true);
+ popover.show();
+
+ this._highlight_menu();
+ }
+
+ _scroll_into_view(popover) {
+ if (typeof popover == "undefined") {
+ return;
+ }
+ const box = popover.getBoundingClientRect();
+ const viewport_height = window.innerHeight || document.documentElement.clientHeight;
+ var yscroll = 0;
+
+ if (box.bottom > viewport_height) {
+ // element's bottom is hidden down there
+ // align top of popover with top of viewport or bottom of
+ // popover with bottom of viewport, whichever involves the
+ // least scrolling.
+ yscroll = box.bottom - viewport_height;
+ }
+
+ if (box.top < yscroll) {
+ // element's top is hidden up there
+ // align top of popover with top of viewport
+ yscroll += box.top
+ }
+
+ window.scrollBy(0, yscroll);
+ }
+
+ _close() {
+ logger.debug(`Page.close ${this.config.id}`);
+ $(this.button)
+ .toggleClass("caosdb-f-tour-open-page", false)
+ if (this.popover) {
+ this.popover.hide();
+ }
+ this._unhighlight_menu();
+ }
+
+ /*
+ * Page activate
+ */
+ activate(deactivate_others) {
+ if (deactivate_others) {
+ this.parent_set.deactivate_other(this)
+ }
if (!this.active) {
- tour.info("Page.activate button '" + this.full_name + "'.");
+ logger.info("Page.activate button '" + this.full_name + "'.");
this.old_state_active = true;
this.active = true;
+ // TODO Why is the following line necessary? "References"
+ // Chapter of files does not open without it (when the
+ // "References" is used to get to the correct page)
+ if (this.config.show_button){
+ $(this.button).show();
+ }
+
// activation propagates to the parents
this.parent_set._activate()
+ if (this.initialized && sessionStorage["tour-page-open-next"] == this.config.id) {
+ if ($(this.config["target"])[0]) {
+ this._open();
+ } else {
+ tour._post_init_cb.push(() => {
+ this._open();
+ });
+ }
+ }
+ // Set the natural "next" as next tour page in session store as
+ // default. This value will be overwritten by navigation.
+ }
+ if (this.config.show_button){
$(this.button).show();
}
}
deactivate() {
if (this.active) {
- tour.info("Page.deactivate button '" + this.full_name + "'.");
+ logger.info("Page.deactivate button '" + this.full_name + "'.");
this.old_state_active = false;
this._deactivate();
@@ -394,47 +810,63 @@ var tour = new function() {
_deactivate() {
if (this.active) {
- tour.debug("Page._deactivate button '" + this.full_name + "'.");
+ logger.debug("Page._deactivate button '" + this.full_name + "'.");
this.active = false;
+ this._close();
$(this.button).hide();
- $(this.button).popover("hide");
$(this.button).toggleClass("caosdb-f-tour-open-page", false);
}
}
+ _tour_active () {
+ return this.parent_set._tour_active();
+ }
+
/**
* Hook the button to (de)activation events.
*/
- _activate_button(button, activation, deactivation) {
- $(button).hide();
+ _setup_activation_listeners(button, activation, deactivation) {
+ //$(button).hide();
if (typeof activation !== "undefined") {
activation = tour.assert_array(activation);
activation.forEach(
(act) => {
- if (act === null) { return; }
+ if (act === null) {
+ return;
+ }
tour._post_init_cb.push(() => {
var target = $(act.target)[0];
if (target) {
+ logger.debug("Added listener:", target, act.event)
target.addEventListener(
act.event,
- (e) => {this.activate();}
+ (e) => {
+ if (this._tour_active()) {
+ logger.debug("Activate", this.config.id, "due to ", act.event)
+ this.activate();
+ }
+ }
);
}
});
}
)
}
- if (typeof deactivation !== "undefined" ) {
+ if (typeof deactivation !== "undefined") {
deactivation = tour.assert_array(deactivation);
deactivation.forEach(
(deact) => {
- if (deact === null) { return; }
+ if (deact === null) {
+ return;
+ }
tour._post_init_cb.push(() => {
var target = $(deact.target)[0];
if (target) {
target.addEventListener(
deact.event,
- (e) => {this.deactivate();}
+ (e) => {
+ this.deactivate();
+ }
);
}
});
@@ -446,8 +878,9 @@ var tour = new function() {
_position_button(button, target, position) {
var sel = $(target).first()
- if (typeof sel.css("position") === "undefined"
- || sel.css("position") === "static") {
+ logger.debug("positioning button", button, target, sel, position);
+ if (typeof sel.css("position") === "undefined" ||
+ sel.css("position") === "static") {
sel.css("position", "relative");
}
@@ -457,111 +890,118 @@ var tour = new function() {
$(button).css("position", "absolute");
switch (position) {
- case "top":
- sel.prepend(wrapper);
- $(button).css("top", - Math.abs($(button).outerHeight()) / 2);
- //$(button).css("left", "50%");
- break;
- case "top-right":
- sel.prepend(wrapper);
- $(button).css("top", - Math.abs($(button).outerHeight()) / 2);
- $(button).css("right", - Math.abs($(button).outerWidth()) / 2);
- break;
- case "right":
- wrapper.css("top", "50%");
- wrapper.css("right", sel.css("padding-right"));
- wrapper.css("position", "absolute");
- sel.prepend(wrapper);
- $(button).css("right", - Math.abs($(button).outerWidth()) / 2);
- $(button).css("top", - Math.abs($(button).outerHeight()) / 2);
- break;
- case "bottom-right":
- sel.append(wrapper);
- $(button).css("bottom", - Math.abs($(button).outerHeight()) / 2);
- $(button).css("right", - Math.abs($(button).outerWidth()) / 2);
- break;
- case "bottom":
- wrapper.css("top", "100%");
- wrapper.css("left", "50%");
- wrapper.css("position", "absolute");
- sel.append(wrapper);
- $(button).css("margin-top", "5px");
- $(button).css("top", 0);
- $(button).css("left", 0);
- $(button).css("transform", "translate(-50%, 0)");
- break;
- case "bottom-left":
- sel.append(wrapper);
- $(button).css("bottom", - Math.abs($(button).outerHeight()) / 2);
- $(button).css("left", - Math.abs($(button).outerWidth()) / 2);
- break;
- case "left":
- wrapper.css("top", "50%");
- wrapper.css("position", "absolute");
- sel.prepend(wrapper);
- $(button).css("margin-right", "5px");
- $(button).css("top", 0);
- $(button).css("right", 0);
- $(button).css("transform", "translate(0, -50%)");
- break;
- default:
- // top-left
- sel.prepend(wrapper);
- $(button).css("top", - Math.abs($(button).outerHeight()) / 2);
- $(button).css("left", - Math.abs($(button).outerWidth()) / 2);
- break;
+ case "top":
+ sel.prepend(wrapper);
+ $(button).css("top", -Math.abs($(button).outerHeight()) / 2);
+ //$(button).css("left", "50%");
+ break;
+ case "top-right":
+ sel.prepend(wrapper);
+ $(button).css("top", -Math.abs($(button).outerHeight()) / 2);
+ $(button).css("right", -Math.abs($(button).outerWidth()) / 2);
+ break;
+ case "right":
+ wrapper.css("top", "50%");
+ wrapper.css("right", sel.css("padding-right"));
+ wrapper.css("position", "absolute");
+ sel.prepend(wrapper);
+ $(button).css("right", -Math.abs($(button).outerWidth()) / 2);
+ $(button).css("top", -Math.abs($(button).outerHeight()) / 2);
+ break;
+ case "bottom-right":
+ sel.append(wrapper);
+ $(button).css("bottom", -Math.abs($(button).outerHeight()) / 2);
+ $(button).css("right", -Math.abs($(button).outerWidth()) / 2);
+ break;
+ case "bottom":
+ wrapper.css("top", "100%");
+ wrapper.css("left", "50%");
+ wrapper.css("position", "absolute");
+ sel.append(wrapper);
+ $(button).css("margin-top", "5px");
+ $(button).css("top", 0);
+ $(button).css("left", 0);
+ $(button).css("transform", "translate(-50%, 0)");
+ break;
+ case "bottom-left":
+ sel.append(wrapper);
+ $(button).css("bottom", -Math.abs($(button).outerHeight()) / 2);
+ $(button).css("left", -Math.abs($(button).outerWidth()) / 2);
+ break;
+ case "left":
+ wrapper.css("top", "50%");
+ wrapper.css("position", "absolute");
+ sel.prepend(wrapper);
+ $(button).css("margin-right", "5px");
+ $(button).css("top", 0);
+ $(button).css("right", 0);
+ $(button).css("transform", "translate(0, -50%)");
+ break;
+ default:
+ // top-left
+ sel.prepend(wrapper);
+ $(button).css("top", -Math.abs($(button).outerHeight()) / 2);
+ $(button).css("left", -Math.abs($(button).outerWidth()) / 2);
+ break;
}
+ // initially hide the button
+ $(button).hide();
}
_apply_highlighter(highlighter, highlightable) {
$(highlighter).hover(
- ()=>{
+ () => {
highlightable.toggleClass("caosdb-v-tour-highlight", true);
},
- ()=>{
+ () => {
highlightable.toggleClass("caosdb-v-tour-highlight", false);
}
);
}
- /**
- * Hook click events for `data-tour-activate` <a> elements.
- */
- _apply_activation_links(button) {
- $(button).on('shown.bs.popover', (e) => {
- $('a[data-tour-activate]').each((idx, element) => {
- element.addEventListener("click", () => {
- this._activate_by_id($(element).data("tour-activate"));
- });
- });
- });
- }
-
_apply_hiding(button) {
$(button).on('shown.bs.popover', (e) => {
let hiding = this.config.on_activation_hide;
if (hiding) {
- console.log("Tour page hiding:");
+ logger.debug("Tour page hiding:");
hiding = tour.assert_array(hiding);
hiding.forEach((selector) => {
- console.log(selector);
$(selector).addClass("caosdb-f-tour-hidden");
});
}
let unhiding = this.config.on_activation_unhide;
if (unhiding) {
- console.log("Tour page unhiding:");
+ logger.debug("Tour page unhiding:");
unhiding = tour.assert_array(unhiding);
unhiding.forEach((selector) => {
- console.log(selector);
$(selector).removeClass("caosdb-f-tour-hidden");
});
}
})
}
+ get_previous() {
+ if (this.config.previous){
+ return this.parent_set.parent_set._elements_by_id[this.config.previous];
+ } else {
+ return this.parent_set.get_previous_tour_page(this.id);
+ }
+ }
+
+ get_next() {
+ if (this.config.next){
+ return this.parent_set.parent_set._elements_by_id[this.config.next];
+ } else {
+ return this.parent_set.get_next_tour_page(this.id);
+ }
+ }
+
+ get_tour_page_by_id(id) {
+ return this.parent_set.get_tour_page_by_id(id)
+ }
+
_apply_highlighters(button, highlighters) {
if (typeof button === "undefined") {
throw new Error("button was undefined");
@@ -581,17 +1021,18 @@ var tour = new function() {
this._apply_highlighter(button, highlightable[id]);
} else {
$(button).on('shown.bs.popover', (e) => {
- console.log("Highlighting:")
- console.log(highlighters[id]);
- console.log(highlightable[id]);
+ // TODO check if this popover is already initialized
+ logger.debug("Highlighting:",
+ highlighters[id], highlightable[id]);
this._apply_highlighter("#" + id, highlightable[id]);
});
}
}
}
- _create_tour_button(name, content, title, id, size, css={},
- placement="auto") {
+ // currently deactivated
+ _create_tour_button(name, content, title, id, size, page, css = {},
+ placement = "auto") {
if (typeof name === "undefined") {
throw new Error("name was undefined");
}
@@ -599,10 +1040,10 @@ var tour = new function() {
throw new Error("content was undefined");
}
- var button = $('<button class="caosdb-v-tour-button">' + name + '</button>');
+ var button = $('<button class="caosdb-v-tour-button"></button>');
var markdown_content = tour.markdown_to_html(content);
- tour.debug(markdown_content);
+ //logger.debug("Page's markdown content: ", markdown_content);
// Apply custom style immediately at popover creation.
// Alternatively, we could create a custom style element which sets
@@ -612,76 +1053,75 @@ var tour = new function() {
css["max-width"] = "120em";
}
if (!("width" in css)) {
- css["width"] = "50em";
+ css["width"] = "30em";
}
- // console.log(css)
let popover_style = "";
for (let key in css) {
popover_style += key + ": " + css[key] + "; ";
}
- // Bootstrap 3.x: .popover-content, 4.x: .popover-body
- let popover_template = '<div class="popover" role="tooltip" style="'
- + popover_style
- + '"><div class="arrow"></div><h3 class="popover-header"></h3>'
- + '<div class="popover-body popover-content"></div></div>';
+ let popover_template = '<div class="popover" role="tooltip" style="z-index:20000; ' +
+ popover_style +
+ '"><div class="popover-arrow"></div><button class="btn btn-close caosdb-f-tour-popover-close-button caosdb-v-tour-popover-close-button"></button><h3 class="popover-header"></h3><div class="popover-body popover-content"></div><div class="p-3 pt-0 d-flex justify-content-between" ><span><button class="btn btn-sm btn-secondary caosdb-v-tour-pn-btn me-auto" data-role="prev">Previous</button></span><span><button class="btn btn-sm btn-secondary caosdb-v-tour-pn-btn" data-role="next">Next</button></span></div></div>';
- button.popover({
+ button.attr("title", title);
+
+ if (typeof title === "undefined") {
+ title = ""
+ };
+ this.popover_options = {
title: title,
content: markdown_content,
+ container: "body",
placement: placement,
html: true,
sanitize: false,
trigger: 'manual',
template: popover_template,
- });
+ };
- button.on("click", function(e) {
- if($(this).hasClass("caosdb-f-tour-open-page")) {
- this.dispatchEvent(tour.close_page_event);
+ button.on("click", (e) => {
+ if (button.hasClass("caosdb-f-tour-open-page")) {
+ this._close();
} else {
- this.dispatchEvent(tour.open_page_event);
+ this._open();
}
- $(this).toggleClass("caosdb-f-tour-open-page");
// clicks on the tour button should not trigger any other action
e.preventDefault();
e.stopPropagation();
});
- button[0].addEventListener("close.tour.page", function() {
- button.popover("hide");
- });
-
- button[0].addEventListener("open.tour.page", function() {
- var p_id = button.popover("show")[0].getAttribute("aria-describedby");
- var popover = $("#" + p_id);
-
- // hide all other popovers
- $(".caosdb-v-tour-button").each(function(index) {
- if (this != button[0]) {
- $(this).popover("hide");
- }
- });
- });
- if(id) {
+ if (id) {
button.attr("id", id);
}
+ /* currently deactivated
if(size)
$(button).toggleClass(size, true);
+ */
return button[0];
}
}
this.config = undefined;
+ this.popover_options = {};
this.close_page_event = new Event("close.tour.page");
this.open_page_event = new Event("open.tour.page");
this._post_init_cb = []
- this.post_init = function() {
+ /**
+ * Post init is called after the initialization.
+ *
+ * It is mainly used to initialize event listeners which needed to wait
+ * until all the tour buttons are actually present in the DOC tree.
+ *
+ * All functions which need to be called after the intialization of the
+ * tour may be appended to the {@link tour#_post_init_cb} array.
+ */
+ this.post_init = function () {
for (const fn of this._post_init_cb) {
fn();
}
@@ -700,13 +1140,14 @@ var tour = new function() {
/**
* Initialize the tour.
*
- * The `refresh` argument is currently only used interactively on the debugging console.
+ * The `refresh` argument is currently only used interactively on the
+ * debugging console.
*/
this.init = async function _in(refresh) {
try {
- tour.debug("initializing tour module, refresh: " + refresh);
+ logger.debug("initializing tour module, refresh: " + refresh);
if (refresh === true) {
- tour.info("Refreshing tour state.");
+ logger.info("Refreshing tour state.");
localStorage.removeItem("tour_state");
}
await tour.load_tour();
@@ -721,61 +1162,80 @@ var tour = new function() {
try {
var old_state = JSON.parse(localStorage.getItem("tour_state"));
if (old_state) {
- config = {tour: old_state}
+ config = {
+ tour: old_state
+ }
};
} catch (error) {
if (error instanceof SyntaxError) {
- tour.warning("Parsing old tour state failed with SyntaxError. Old tour state: '" + localStorage.getItem("tour_state") + "'.");
+ logger.warning("Parsing old tour state failed with SyntaxError. Old tour state: '" + localStorage.getItem("tour_state") + "'.");
} else {
globalError(error);
}
}
- if(!config || config.length == 0 || config.tour.length == 0) {
- tour.info("No old tour state in the localStorage.");
+
+ // reset if build number changed
+ if (config && config.tour && config.tour._build_number != "${BUILD_NUMBER}") {
+ config = undefined;
+ }
+ if (!config || config.length == 0 || config.tour.length == 0) {
+ logger.info("No old tour state in the localStorage.");
// try to fetch
config = await load_config("tour.json");
- console.log("Loaded tour.json:");
- console.log(config);
+ logger.debug("Loaded tour.json", config);
}
if (!config || config.length == 0 || config.tour.length == 0) {
localStorage.setItem("tour_state", "[]");
- tour.info("Tour config is empty.");
+ logger.info("Tour config is empty.");
return;
}
+ // store build number in tour config
+ config.tour._build_number = "${BUILD_NUMBER}";
tour.configure(config.tour);
}
-
-
-
- this.add_tour_element = function(element, parent_set) {
+ this.add_tour_element = function (element, parent_set, idx) {
if (element.page_set) {
// it's a page_set
- return tour.add_tour_page_set(element, parent_set);
+ return tour.add_tour_page_set(element, parent_set, idx);
+ } else if (typeof element.separator != "undefined") {
+ // it's a separator
+ return tour.add_tour_menu_separator();
} else {
// it's a page
- return tour.add_tour_page(element, parent_set);
+ return tour.add_tour_page(element, parent_set, idx);
}
}
+ this.add_tour_page_set = function (config, parent_set, idx) {
+ return new tour.PageSet(parent_set, config, idx);
+ }
- this.add_tour_page_set = function(config, parent_set) {
- return new tour.PageSet(parent_set, config);
+ this.add_tour_menu_separator = function (element) {
+ return {
+ create_menu_entry: () => $("<hr>")[0],
+ init_activation: function() {},
+ _deactivate: function() {},
+ }
}
this.Tour = class {
constructor(config) {
this.full_name = "Tour";
+ this.id = config.id || "tour0";
this.config = config;
this.elements = new Array();
- this.leave_tour_button = $('<a class="btn btn-link">Leave Tour</a>');
- this.leave_tour_button.hide();
- this.reset_tour_button = $('<a class="btn btn-link">Reset Tour</a>');
- this.reset_tour_button.hide();
this.active = false;
+
+ var menuitem = $('<li class="nav-item" id="caosdb-navbar-tour"><a href="#" class="d-none nav-link caosdb-f-start-tour-btn" title="Start a Tour">Tour</a><a href="#" title="Leave the Tour" class="d-none caosdb-f-leave-tour-btn nav-link">Tour</a></li>')
+ $(".caosdb-navbar").append(menuitem);
+
+ var min_width_warning = $('<div class="alert alert-warning caosdb-tour-min-width-warning d-lg-none" role="alert"><strong>Warning</strong> This tour is optimized for screens wider than 992px. If you have trouble displaying elements of this tour, please try accessing it on a larger screen.</div>');
+ $(".navbar").append(min_width_warning);
+
for (const element of this.config.elements) {
- const next = tour.add_tour_element(element, this);
+ const next = tour.add_tour_element(element, this, this.elements.length);
this.elements.push(next);
}
@@ -791,37 +1251,96 @@ var tour = new function() {
this.config.deactivate_other = true;
}
+ $(".caosdb-f-leave-tour-btn").click((e) => {
+ this.deactivate();
+ });
+ $(".caosdb-f-start-tour-btn").click((e) => {
+ this.activate();
+ });
+
this.update();
- this.panel = this.create_tour_overview_panel();
- this.init_activation(this.config.persistent_state);
+ this.create_tour_overview_panel();
this._elements_by_id = {};
- this._index_elements(this._elements_by_id, this);
+ this._tour_pages = [];
+ this._index_elements(this._elements_by_id, this._tour_pages, this);
+ this._toggle_tour_buttons();
+ this._toggle_width_warning();
+ }
+
+ _toggle_tour_buttons() {
+ $(".caosdb-f-leave-tour-btn").toggleClass("d-none", !this.active);
+ $(".caosdb-f-start-tour-btn").toggleClass("d-none", this.active);
+ }
+
+ _toggle_width_warning() {
+ $(".caosdb-tour-min-width-warning").toggleClass("d-block", this.active);
+ $(".caosdb-tour-min-width-warning").toggleClass("d-none", !this.active);
+ }
+
+ _tour_active () {
+ return this.active;
+ }
+
+ /**
+ * @param {string} id
+ * @return {tour.Page}
+ */
+ get_next_tour_page(id) {
+ const index_old = this._tour_pages.indexOf(id);
+ if (index_old < 0) {
+ throw new Error("Tour page not in _tour_pages list");
+ }
+ const index_new = index_old + 1;
+ if (index_new >= this._tour_pages.length) {
+ return null;
+ }
+ return this._elements_by_id[this._tour_pages[index_new]];
+ }
+ get_tour_page_by_id(id) {
+ return this._elements_by_id[id];
}
+ /**
+ * @param {string} id
+ * @return {tour.Page}
+ */
+ get_previous_tour_page(id) {
+ const index_old = this._tour_pages.indexOf(id);
+ if (index_old < 0) {
+ throw new Error("Tour page not in _tour_pages list");
+ }
+ const index_new = index_old - 1;
+ if (index_new < 0) {
+ return null;
+ }
+ return this._elements_by_id[this._tour_pages[index_new]];
+ }
- _index_elements(index, element) {
- if(element.elements) {
+ _index_elements(index, pages, element) {
+ if (element.elements) {
for (const sub of element.elements) {
- this._index_elements(index, sub);
- if (sub.config.id) {
- index[sub.config.id] = sub;
+ this._index_elements(index, pages, sub);
+ if (sub.id) {
+ index[sub.id] = sub;
+ }
+ if (sub.isPage) {
+ pages.push(sub.id);
}
}
}
}
-
_activate_by_id(id) {
var element = this._elements_by_id[id];
if (element) {
- element.activate();
+ element.activate(true);
}
}
set old_state_active(value) {
- if(this.config.old_state_active != value) {
+ if (this.config.old_state_active != value) {
this.config.old_state_active = value;
this.update();
}
@@ -834,8 +1353,8 @@ var tour = new function() {
/**
* Start tour activation.
*/
- init_activation(restore_old_state=false) {
- tour.debug("Tour.init_activation '" + this.full_name + "'.");
+ init_activation(restore_old_state = false) {
+ logger.debug("Tour.init_activation '" + this.full_name + "'.");
if (restore_old_state) {
if (this.old_state_active) {
this.activate();
@@ -846,55 +1365,63 @@ var tour = new function() {
}
deactivate() {
- tour.info("Tour.deactivate tour");
+ logger.info("Tour.deactivate tour");
this._deactivate();
// deactivation propagates to the children
for (const element of this.elements) {
element._deactivate();
}
+
+ sessionStorage.removeItem("tour-page-open-next")
}
/**
* Reset the tour state. Mainly useful for development and debugging.
*/
async reset_tour() {
- // console.log("Resetting the tour");
+ logger.info("Resetting the tour");
+ sessionStorage.removeItem("tour-page-open-next")
this.deactivate();
localStorage.removeItem("tour_state");
var config = await load_config("tour.json")
if (!config || config.length == 0 || config.tour.length == 0) {
localStorage.setItem("tour_state", "[]");
- tour.info("Tour config is empty.");
+ logger.info("Tour config is empty.");
} else {
tour.configure(config.tour);
}
- // A bit ugly, but the reset button will be removed or completely
- // changed for production anyways.
location.reload();
}
_deactivate() {
- if(this.active) {
- this.set_tour_button_text("Start A Tour");
- tour.debug("Tour._deactivate tour");
+ if (this.active) {
+ logger.debug("Tour._deactivate tour");
this.old_state_active = false;
this.active = false;
- this.leave_tour_button.hide();
- this.reset_tour_button.hide();
+ this._hide_tour_sidebar();
+ this._toggle_tour_buttons();
+ this._toggle_width_warning();
this.update();
}
}
+ _hide_tour_sidebar() {
+ $("body").toggleClass("tour-sidebar-visible", false);
+ }
+
+ _show_tour_sidebar() {
+ $("body").toggleClass("tour-sidebar-visible", true);
+ }
_activate() {
- if(!this.active) {
- this.set_tour_button_text("Tour");
- tour.debug("Tour._activate tour");
+ if (!this.active) {
+ logger.debug("Tour._activate tour");
this.old_state_active = true;
this.active = true;
- this.leave_tour_button.show();
- this.reset_tour_button.show();
+ this._show_tour_sidebar();
+ this._toggle_tour_buttons();
+ this._toggle_width_warning();
this.update();
}
}
@@ -903,7 +1430,7 @@ var tour = new function() {
* Activate tour: initialize activation of elements.
*/
activate() {
- tour.info("Tour.activate tour");
+ logger.info("Tour.activate tour");
this._activate();
for (const element of this.elements) {
@@ -913,36 +1440,25 @@ var tour = new function() {
}
deactivate_other(trigger) {
- if(this.config.deactivate_other) {
+ if (this.config.deactivate_other) {
+ logger.debug("Close pagesets other than '" + trigger.id + "'.");
for (const element of this.elements) {
- if(element instanceof tour.PageSet && element !== trigger) {
+ if (element.isPageSet && element !== trigger) {
element.deactivate();
}
}
}
}
- set_tour_button_text(text) {
- $("button.caosdb-f-tour-button").text(text);
- }
-
-
create_tour_overview_panel() {
- var panel = $('<div class="collapse" id="caosdb-f-tour-overview-panel" /></div>');
- var tour_overview = $('<ul class="list-inline caosdb-v-tour-overview"/>');
+ var tour_overview = $('<ul class="list-unstyled caosdb-v-tour-overview"/>');
for (const element of this.elements) {
const next = element.create_menu_entry();
- tour_overview.append(next);
+ if (next) {
+ tour_overview.append(next);
+ }
}
-
- panel.append(tour_overview);
-
- this.leave_tour_button.on("click", () => {this.deactivate();});
- this.reset_tour_button.on("click", () => {this.reset_tour();});
- panel.append(this.leave_tour_button);
- panel.append(this.reset_tour_button);
- return panel[0];
-
+ $("#tour-toc .caosdb-f-tour-toc-body").empty().append(tour_overview);
}
update() {
@@ -952,90 +1468,55 @@ var tour = new function() {
}
- this.configure = function(config) {
- tour.info({"configure tour": config});
+ this.configure = function (config) {
+ logger.info({
+ "configure tour": config
+ });
// clean up old tour elements (after reload)
$("#caosdb-f-tour-overview-panel").remove();
$("#caosdb-navbar-tour").remove();
$(".caosdb-f-tour-button-wrapper").remove();
- // new stuff following
- var tour_button = $(`
-<li id="caosdb-navbar-tour">
- <button class="navbar-btn btn btn-link caosdb-f-tour-button" data-toggle="collapse" data-target="#caosdb-f-tour-overview-panel">
- Start A Tour
- </button>
-</li>`);
- $('.caosdb-navbar').append(tour_button[0]);
- tour._instance = new tour.Tour(config);
+ // TODO how can this be done better?
+ $("#caosdb-navbar-tour>a").each(function (index) {
+ this.addEventListener("click", () => {
+ $(".caosdb-v-left-panel").toggleClass("invisible");
+ });
+ })
+ const instance = new tour.Tour(config);
if (config.reload) {
- $(config.reload.target).each(function(index) {
- this.addEventListener(config.reload.event, (e) => {tour.configure(tour._instance.config);}, true);
+ $(config.reload.target).each(function (index) {
+ this.addEventListener(config.reload.event, (e) => {
+ tour.configure(instance.config);
+ }, true);
});
}
- if(tour._instance.active) {
- tour._instance.set_tour_button_text("Tour");
+ if (typeof sessionStorage["tour-page-open-next"] === "undefined") {
+ const next = sessionStorage["tour-page-open-cur"] || instance._tour_pages[0];
+ sessionStorage["tour-page-open-next"] = next
}
- $('#caosdb-query-panel').before(tour._instance.panel);
- // hide, when the mouse leaves the navbar
- $('nav.navbar').hover(undefined, ()=>{$(tour._instance.panel).collapse('hide');});
+ instance.init_activation(config.persistent_state);
}
-
- /**
- * Send a message of a certain level to the logger.
- *
- * @param {string} message - The message which is to be send to the logger.
- * @param {integer} [level=TRACE] - The level from 1 (Error) to 5 (Trace).
- */
- this.log = function(message, level=TRACE) {
- if (level <= this.verbosity_level) {
- var names = ["Error","Warning", "Info", "Debug", "Trace"];
- if (typeof message === "string" || message instanceof String) {
- console.log({level: names[level-1], logger: "tour", message: message});
- } else {
- console.log({level: names[level-1], logger: "tour", object: message});
- }
- }
+ this.add_tour_page = function (config, parent_set, idx) {
+ return new tour.Page(parent_set, config, idx);
}
/**
- * Send a debug message to the logger.
- *
- * @param {string} message - The message which is to be send to the logger.
+ * TODO replace with function of the markdown module.
*/
- this.debug = function(message) {
- this.log(message, DEBUG);
- }
-
- this.warning = function(message) {
- this.log(message, WARNING);
- }
-
- this.error = function(message) {
- this.log(message, ERROR);
- }
-
- this.info = function(message) {
- this.log(message, INFO);
- }
-
- this.add_tour_page = function(config, parent_set) {
- return new tour.Page(parent_set, config);
- }
-
- this.markdown_to_html = function(content) {
+ this.markdown_to_html = function (content) {
let converter = new showdown.Converter();
return converter.makeHtml(content.trim());
}
- this.assert_array = function(content) {
- if (! Array.isArray(content)) {
- return [content];
+ this.assert_array = function (content) {
+ if (!Array.isArray(content)) {
+ return [content];
}
return content;
}
@@ -1043,13 +1524,13 @@ var tour = new function() {
/**
* Calls server-side script `scriptname`.
*/
- this.run_script = async function(scriptname) {
+ this.run_script = async function (scriptname) {
try {
const script_result = await connection.runScript(scriptname);
const retcode = script_result.getElementsByTagName("script")[0].getAttribute("code");
if (parseInt(retcode) > 0) {
- throw ("An error occurred during execution of the server-side script:\n"
- + script_result.getElementsByTagName("script")[0].outerHTML);
+ throw ("An error occurred during execution of the server-side script:\n" +
+ script_result.getElementsByTagName("script")[0].outerHTML);
}
} catch (e) {
globalError(e);
diff --git a/src/core/js/webcaosdb.js b/src/core/js/webcaosdb.js
index f5f65b93ca3722f58914ae4fee86f73ce5d83fc1..74dc62be15551f987707253ca201777f7c3929ac 100644
--- a/src/core/js/webcaosdb.js
+++ b/src/core/js/webcaosdb.js
@@ -116,21 +116,12 @@ this.navbar = new function () {
}
// wrapp button
- let wrapper = $("<li></li>").append(button_elem);
+ let wrapper = $("<li class='nav-item'></li>").append(button_elem);
// menu defaults to the navbar
const menu = _options["menu"] || this.get_navbar();
- if ($(menu).is("ul.caosdb-navbar")) {
- // special styling for buttons which are added directly to the
- // navbar
- $(button_elem)
- .toggleClass("navbar-btn", true)
- .toggleClass("btn", true)
- .toggleClass("btn-link", true);
- }
-
logger.debug("add", wrapper, "to", menu);
$(menu).append(wrapper);
@@ -143,7 +134,7 @@ this.navbar = new function () {
.on("shown.bs.collapse", function (e) {
logger.trace("navbar expands", e);
})
- .on("hidden.bs.collapse", function (e) {
+ .on("invisible.bs.collapse", function (e) {
logger.trace("navbar shrinks", e);
});
this.init_login_show_button();
@@ -151,7 +142,7 @@ this.navbar = new function () {
/**
- * Initialize the hiding/showing of the input form.
+ * Initialize the hiding/showing of the login form.
*
* If the viewport is xs (width <= 768px) the login form is hidden in the
* a menu anyways.
@@ -173,15 +164,19 @@ this.navbar = new function () {
// show form and hide the show_button
const _in = () => {
- // xs means viewport <= 768px
- form.removeClass("visible-xs-inline-block");
- show_button.addClass("hidden");
+ // xs means viewport <= 768px
+ form.removeClass("d-none");
+ form.addClass("d-xs-inline-block");
+ show_button.removeClass("d-inline-block");
+ show_button.addClass("d-none");
}
// hide form and show the show_button
const _out = () => {
- // xs means viewport <= 768px
- form.addClass("visible-xs-inline-block");
- show_button.removeClass("hidden");
+ // xs means viewport <= 768px
+ form.removeClass("d-xs-inline-block");
+ form.addClass("d-none");
+ show_button.removeClass("d-none");
+ show_button.addClass("d-inline-block");
}
show_button.on("click", () => {
// show form...
@@ -217,9 +212,9 @@ this.navbar = new function () {
* @return {HTMLElement} the dropdown-menu.
*/
this.init_toolbox = function (name) {
- var button = $(`<a class="dropdown-toggle"
- data-toggle="dropdown" href="#">${name}
- <span class="caret"></span></a>`)[0];
+ var button = $(`<a class="nav-link dropdown-bs-toggle"
+ data-bs-toggle="dropdown" href="#">${name}
+ </a>`)[0];
var menu = $(`<ul
class="caosdb-v-navbar-toolbox
@@ -312,6 +307,13 @@ this.caosdb_utils = new function () {
return obj;
}
+ this.assert_not_undefined = function (obj, name) {
+ if (typeof obj == "undefined" || obj == null) {
+ throw new TypeError(name + " must not be undefined")
+ }
+ return obj;
+ }
+
this.assert_html_element = function (obj, name) {
if (typeof obj === "undefined" || !(obj instanceof HTMLElement)) {
throw new TypeError(name + " is expected to be an HTMLElement, was " + typeof obj);
@@ -586,7 +588,6 @@ this.transformation = new function () {
var xsl = await transformation.retrieveXsltScript("property.xsl");
insertParam(xsl, "filesystempath", connection.getBasePath() + "FileSystem/");
insertParam(xsl, "entitypath", connection.getBasePath() + "Entity/");
- insertParam(xsl, "close-char", '×');
var entityXsl = await transformation.retrieveXsltScript('entity.xsl');
var messageXsl = await transformation.retrieveXsltScript('messages.xsl');
var commonXsl = await transformation.retrieveXsltScript('common.xsl');
@@ -594,15 +595,6 @@ this.transformation = new function () {
let html = await asyncXslt(xml, xslt);
return html;
}
- /**
- * @param {XMLDocument} xml
- * @return {HTMLElement[]} an array of HTMLElements.
- */
- this.transformEntityPalette = async function _tME(xml) {
- var xsl = await transformation.retrieveXsltScript("entity_palette.xsl");
- let html = await asyncXslt(xml, xsl);
- return html;
- }
/**
* Retrieve the entity.xsl script and modify it such that we can use it
@@ -622,7 +614,6 @@ this.transformation = new function () {
var xslt = transformation.mergeXsltScripts(entityXsl, [errorXsl, commonXsl]);
insertParam(xslt, "filesystempath", connection.getBasePath() + "FileSystem/");
insertParam(xslt, "entitypath", connection.getBasePath() + "Entity/");
- insertParam(xslt, "close-char", '×');
xslt = injectTemplate(xslt, _root);
return xslt;
}
@@ -746,11 +737,11 @@ this.transaction = new function () {
}
// create the form element by element
- let textarea = $('<div class="form-group"><textarea rows="8" style="width: 100%;" name="updateXml"/></div>');
+ let textarea = $('<div class="form-control"><textarea rows="8" style="width: 100%;" name="updateXml"/></div>');
textarea.find('textarea').val(entityXmlStr);
- let submitButton = $('<button class="btn btn-default" type="submit">Update</button>');
- let resetButton = $('<button class="btn btn-default" type="reset">Reset</button>');
- let form = $('<form class="panel-body"></form>');
+ let submitButton = $('<button class="btn btn-secondary" type="submit">Update</button>');
+ let resetButton = $('<button class="btn btn-secondary" type="reset">Reset</button>');
+ let form = $('<form class="card-body"></form>');
form.toggleClass(transaction.classNameUpdateForm, true);
form.append(textarea);
form.append(submitButton);
@@ -868,7 +859,7 @@ this.transaction = new function () {
// if there is an <Error> tag in the response, show
// the response in a new form.
app.openForm(xml2str(xml));
- transaction.update.addErrorNotification($(updatePanel).find('.panel-heading'), transaction.update.createErrorInUpdatedEntityNotification());
+ transaction.update.addErrorNotification($(updatePanel).find('.card-header'), transaction.update.createErrorInUpdatedEntityNotification());
} else {
// if there are no errors show the XSL-transformed
// updated entity.
@@ -895,10 +886,10 @@ this.transaction = new function () {
app.init(entity);
app.updatePanel = updatePanel;
- let closeButton = transaction.update.createCloseButton('.panel', () => {
+ let closeButton = transaction.update.createCloseButton('.card', () => {
app.resetApp();
});
- $(updatePanel).find('.panel-heading').prepend(closeButton);
+ $(updatePanel).find('.card-header').prepend(closeButton);
return app;
}
@@ -938,7 +929,7 @@ this.transaction = new function () {
* @return {HTMLElement} A div.
*/
this.createUpdateEntityPanel = function (heading) {
- let panel = $('<div class="panel panel-default" style="border-color: blue;"/>');
+ let panel = $('<div class="card" style="border-color: blue;"/>');
panel.append(heading);
return panel[0];
};
@@ -978,7 +969,7 @@ this.transaction = new function () {
}
this.createCloseButton = function (close, callback) {
- let button = $('<button title="Cancel update" class="btn btn-link close" aria-label="Cancel update">×</button>');
+ let button = $('<button title="Cancel update" class="btn btn-link btn-close" aria-label="Cancel update">×</button>');
button.bind('click', function () {
$(this).closest(close).hide();
callback();
@@ -1134,27 +1125,22 @@ var paging = new function () {
if (nextHref != null) {
// set href and show next button
$('.caosdb-next-button').attr("href", nextHref);
- $('.caosdb-next-button').show();
- $('.caosdb-paging-panel').show();
- } else {
- $('.caosdb-next-button').hide();
}
if (prevHref != null) {
// set href and show prev button
$('.caosdb-prev-button').attr("href", prevHref);
- $('.caosdb-prev-button').show();
- $('.caosdb-paging-panel').show();
- } else {
- if (prevHref == nextHref) {
- $('.caosdb-paging-panel').hide();
- }
- $('.caosdb-prev-button').hide();
}
+ paging.toggle_paging_panel(!!prevHref || !!nextHref);
+
return true;
}
+ this.toggle_paging_panel = function (on) {
+ $(".caosdb-f-main").toggleClass("caosdb-f-show-paging-panel", on);
+ }
+
/**
* Replace the old page string in the given uri or concat it if there was no
* page string. If page is null return null.
@@ -1275,6 +1261,13 @@ var paging = new function () {
}
return index + "L" + length;
}
+
+ this.init = function () {
+ var response_count = document.body.getAttribute("data-response-count");
+ if (parseInt(response_count) >= 0) {
+ paging.initPaging(window.location.href, response_count);
+ }
+ }
};
var queryForm = new function () {
@@ -1491,9 +1484,9 @@ var hintMessages = new function () {
});
}
- // moves all badges into one div with text-right
+ // moves all badges into one div with text-end
if ($(entity).find(".caosdb-messages > .caosdb-f-message-badge").length > 0) {
- var div = $('<div class="text-right" style="padding: 5px 16px;"/>');
+ var div = $('<div class="text-end" style="padding: 5px 16px;"/>');
div.prependTo($(entity).find(".caosdb-messages"));
var messageBadges = $(entity).find(".caosdb-messages > .caosdb-f-message-badge");
messageBadges.detach();
@@ -1853,18 +1846,12 @@ this.user_management = function ($, connection, createWaitingNotification, creat
};
}($, connection, createWaitingNotification, createErrorNotification);
-/**
- * When the page is scrolled down 100 pixels, the scroll-back button appears.
- *
- * @return FIXME
- */
/**
- * Every initial function calling is done here.
- *
- * @return TODO
+ * Initialize all the submodules.
*/
function initOnDocumentReady() {
+ paging.init();
hintMessages.init();
// init query form
@@ -1875,15 +1862,16 @@ function initOnDocumentReady() {
// show image 100% width
$(".entity-image-preview").click(function () {
- $(this).css('width', '100%');
- $(this).css('max-width', "");
+ $(this).css('max-width', '100%');
$(this).css('max-height', "");
});
- if (typeof caosdb_modules.auto_init === "undefined") {
+ if (typeof _caosdb_modules_auto_init === "undefined") {
// the test index.html sets this to false,
// unset -> no tests
caosdb_modules.auto_init = true;
+ } else {
+ caosdb_modules.auto_init = _caosdb_modules_auto_init;
}
caosdb_modules.init();
navbar.init();
@@ -1950,4 +1938,4 @@ class _CaosDBModules {
var caosdb_modules = new _CaosDBModules()
-$(document).ready(initOnDocumentReady);
\ No newline at end of file
+$(document).ready(initOnDocumentReady);
diff --git a/src/core/webcaosdb.xsl b/src/core/webcaosdb.xsl
index cb1ad2966cb2006767309da96151196102c3af57..9a0d6769f1901e860c7a2318fce28957d6461496 100644
--- a/src/core/webcaosdb.xsl
+++ b/src/core/webcaosdb.xsl
@@ -27,6 +27,7 @@
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
+ <xsl:include href="xsl/jsheader.xsl" />
<xsl:include href="xsl/main.xsl" />
<xsl:include href="xsl/navbar.xsl" />
<xsl:include href="xsl/messages.xsl" />
@@ -37,6 +38,17 @@
<xsl:include href="xsl/common.xsl"/>
<xsl:include href="xsl/welcome.xsl"/>
+ <xsl:template name="caosdb-tour-toc">
+ <div class="caosdb-v-tour-toc-sidebar" id="tour-toc">
+ <div class="caosdb-v-tour-toc-show"></div>
+ <button class="caosdb-v-tour-toc-show caosdb-f-tour-toc-toggle btn"></button>
+ <div class="caosdb-v-tour-toc-header">
+ <h3>Tour</h3>
+ </div>
+ <div class="caosdb-f-tour-toc-body"></div>
+ </div>
+ </xsl:template>
+
<xsl:template match="/">
<html lang="en">
<head>
@@ -54,9 +66,21 @@
<xsl:call-template name="caosdb-head-js" />
</head>
<body>
- <xsl:call-template name="caosdb-top-navbar" />
- <xsl:call-template name="caosdb-data-container" />
- <footer>
+ <xsl:attribute name="data-response-count">
+ <xsl:value-of select="/Response/@count"/>
+ </xsl:attribute>
+ <xsl:if test="count(/Response/*)<3 and not(/Response/Error|/Response/Info|/Response/Warning)">
+ <xsl:attribute name="class">caosdb-welcome</xsl:attribute>
+ </xsl:if>
+ <div class="background d-flex flex-column">
+ <xsl:call-template name="caosdb-tour-toc" />
+ <xsl:call-template name="caosdb-top-navbar" />
+ <xsl:call-template name="caosdb-data-container" />
+ <xsl:if test="count(/Response/*)<3 and not(/Response/Error|/Response/Info|/Response/Warning)">
+ <xsl:call-template name="welcome"/>
+ </xsl:if>
+ </div>
+ <footer class="py-5">
<xsl:call-template name="caosdb-footer"/>
</footer>
</body>
diff --git a/src/core/xsl/annotation.xsl b/src/core/xsl/annotation.xsl
index f41f6cbb47680bc9825300de645ae39c67c809cb..1ed1d28fe00cffaa2bde79cd7fef070b49771b38 100644
--- a/src/core/xsl/annotation.xsl
+++ b/src/core/xsl/annotation.xsl
@@ -23,31 +23,33 @@
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
- <xsl:template match="History" mode="comment-annotation-header">
- <h4 class="media-heading">
+ <xsl:template match="Version" mode="comment-annotation-header">
+ <div class="caosdb-f-comment-header">
<xsl:value-of select="@username"/>
<small>
<i>
<xsl:text> posted on </xsl:text>
- <xsl:value-of select="@datetime"/>
+ <xsl:value-of select="@date"/>
</i>
</small>
- </h4>
+ </div>
</xsl:template>
<xsl:template match="Property" mode="comment-annotation-text">
- <p class="caosdb-comment-annotation-text">
- <xsl:value-of select="text()"/>
- </p>
+ <div class="caosdb-f-comment-body">
+ <small>
+ <p class="caosdb-comment-annotation-text">
+ <xsl:value-of select="text()"/>
+ </p>
+ </small>
+ </div>
</xsl:template>
<xsl:template match="Record" mode="comment-annotation">
- <div class="media">
- <div class="media-left">
- <h3>
- <xsl:text>»</xsl:text>
- </h3>
+ <div class="d-flex">
+ <div class="d-shrink-0">
+ <xsl:text>»</xsl:text>
</div>
- <div class="media-body">
- <xsl:apply-templates mode="comment-annotation-header" select="History[translate(@transaction,'insert','INSERT')='INSERT']"/>
+ <div class="flex-grow-1 ms-3">
+ <xsl:apply-templates mode="comment-annotation-header" select="Version[@head='true']"/>
<xsl:apply-templates mode="comment-annotation-text" select="Property[@name='comment']"/>
</div>
</div>
@@ -59,7 +61,7 @@
</xsl:template>
<xsl:template match="Record" mode="error">
<div class="alert alert-danger caosdb-new-comment-error alert-dismissable">
- <button class="close" data-dismiss="alert" aria-label="close">×</button>
+ <button class="btn-close" data-bs-dismiss="alert" aria-label="close">×</button>
<strong>Error!</strong>
This comment has not been inserted.
<p class="small"><pre><code><xsl:copy-of select="."/></code></pre></p></div>
diff --git a/src/core/xsl/common.xsl b/src/core/xsl/common.xsl
index 395c22063b8e2cdb6725ee2bd4cc859f9fb7be2c..abaa86e34f54e7e59b1df517c177018e4100dea5 100644
--- a/src/core/xsl/common.xsl
+++ b/src/core/xsl/common.xsl
@@ -26,12 +26,10 @@
<xsl:template name="make-filesystem-link">
<xsl:param name="href"/>
<xsl:param name="display" select="$href"/>
- <a>
<xsl:attribute name="href">
<xsl:value-of select="concat($filesystempath,$href)"/>
</xsl:attribute>
<xsl:value-of select="$display"/>
- </a>
</xsl:template>
<xsl:template name="trim">
diff --git a/src/core/xsl/entity.xsl b/src/core/xsl/entity.xsl
index 02979a2bea5c057a848e64de9e1ac3c09114177c..d562bf99f7611b976e10d5349d0c99972d6d8fdd 100644
--- a/src/core/xsl/entity.xsl
+++ b/src/core/xsl/entity.xsl
@@ -26,39 +26,41 @@
<!-- These little colored Rs, RTs, Ps, and Fs which hilite the beginning
of a new entity. -->
<xsl:template match="Property" mode="entity-heading-label">
- <span class="label caosdb-f-entity-role caosdb-label-property"
+ <span class="badge caosdb-f-entity-role caosdb-label-property me-1"
data-entity-role="Property" title="This entity is a Property.">P</span>
</xsl:template>
<xsl:template match="Record" mode="entity-heading-label">
- <span class="label caosdb-f-entity-role caosdb-label-record"
+ <span class="badge caosdb-f-entity-role caosdb-label-record me-1"
data-entity-role="Record" title="This entity is a Record.">R</span>
</xsl:template>
<xsl:template match="RecordType" mode="entity-heading-label">
- <span class="label caosdb-f-entity-role caosdb-label-recordtype"
+ <span class="badge caosdb-f-entity-role caosdb-label-recordtype me-1"
data-entity-role="RecordType" title="This entity is a Record Type.">RT</span>
</xsl:template>
<xsl:template match="File" mode="entity-heading-label">
- <span class="label caosdb-f-entity-role caosdb-label-file"
+ <span class="badge caosdb-f-entity-role caosdb-label-file me-1"
data-entity-role="File" title="This entity is a File.">F</span>
</xsl:template>
<xsl:template match="@id" mode="backreference-link">
- <a class="caosdb-backref-link label caosdb-id-button" title="Find all entities which reference this one.">
+ <a class="caosdb-backref-link btn caosdb-id-button" title="Find all entities which reference this one.">
<xsl:attribute name="href">
<xsl:value-of select="concat($entitypath, '?P=0L10&query=FIND+Entity+which+references+', current())"/>
</xsl:attribute>
- <span class="glyphicon glyphicon-share-alt flipped-horiz-icon"/>
- <span class="hidden-xs"> References</span>
+ <span class="bg-dark badge d-none d-sm-inline">
+ <i class="bi-link"></i> References
+ </span>
+ <i class="bi-link d-inline d-sm-none"></i>
</a>
</xsl:template>
<!-- special entity properties like type, checksum, path... -->
<xsl:template match="@datatype" mode="entity-heading-attributes-datatype">
- <p class="caosdb-entity-heading-attr small text-justify">
+ <p class="caosdb-entity-heading-attr small">
<em class="caosdb-entity-heading-attr-name">data type:</em>
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="@checksum" mode="entity-heading-attributes-checksum">
- <p class="caosdb-entity-heading-attr caosdb-overflow-box small text-justify">
+ <p class="caosdb-entity-heading-attr caosdb-overflow-box small">
<em class="caosdb-entity-heading-attr-name">
<xsl:value-of select="concat(name(),':')"/>
</em>
@@ -68,18 +70,20 @@
</p>
</xsl:template>
<xsl:template match="@path" mode="entity-heading-attributes-path">
- <p class="caosdb-entity-heading-attr small text-justify">
+ <p class="caosdb-entity-heading-attr small">
<em class="caosdb-entity-heading-attr-name">
<xsl:value-of select="concat(name(),':')"/>
</em>
- <xsl:call-template name="make-filesystem-link">
- <xsl:with-param name="href" select="."/>
- </xsl:call-template>
+ <a>
+ <xsl:call-template name="make-filesystem-link">
+ <xsl:with-param name="href" select="."/>
+ </xsl:call-template>
+ </a>
</p>
</xsl:template>
<!-- Any further entity attributes -->
<xsl:template match="@*" mode="entity-heading-attributes">
- <p class="caosdb-entity-heading-attr small text-justify">
+ <p class="caosdb-entity-heading-attr small">
<em class="caosdb-entity-heading-attr-name">
<xsl:value-of select="concat(name(),':')"/>
</em>
@@ -87,7 +91,7 @@
</p>
</xsl:template>
<xsl:template match="*" mode="entity-action-panel">
- <div class="caosdb-entity-actions-panel text-right btn-group-xs">
+ <div class="caosdb-entity-actions-panel text-end btn-group-sm">
<xsl:apply-templates select="Version/Successor" mode="entity-action-panel-version">
<xsl:with-param name="entityId" select="@id"/>
</xsl:apply-templates>
@@ -95,7 +99,7 @@
</xsl:template>
<!-- Main entry for ENTITIES -->
<xsl:template match="Property|Record|RecordType|File" mode="entities">
- <div class="panel panel-default caosdb-entity-panel">
+ <div class="card caosdb-entity-panel mb-2">
<xsl:apply-templates select="Version" mode="entity-version-marker"/>
<xsl:attribute name="id">
<xsl:value-of select="@id"/>
@@ -111,20 +115,18 @@
<xsl:apply-templates mode="entity-permissions" select="Permissions"/>
<!-- A page-unique ID for this entity -->
<xsl:variable name="entityid" select="concat('entity_',generate-id())"/>
- <div class="panel-heading caosdb-entity-panel-heading">
+ <div class="card-header caosdb-entity-panel-heading">
<xsl:attribute name="data-entity-datatype">
<xsl:value-of select="@datatype"/>
</xsl:attribute>
- <div class="row">
- <div class="col-sm-8">
- <h5>
+ <div class="d-flex flex-wrap align-items-baseline">
<xsl:apply-templates mode="entity-heading-label" select="."/>
<!-- Parents -->
<span class="caosdb-f-parent-list">
<xsl:if test="Parent">
<!-- <xsl:apply-templates select="Parent" mode="entity-body" /> -->
<xsl:for-each select="Parent">
- <span class="caosdb-parent-item small">
+ <span class="badge caosdb-parent-item me-1">
<!-- TODO lots of code duplication with parent.xsl -->
<xsl:attribute name="id">
<xsl:value-of select="generate-id()"/>
@@ -146,27 +148,23 @@
</xsl:attribute>
<xsl:value-of select="@name"/>
</a>
- </h5>
- </div>
- <div class="col-sm-4 text-right">
- <h5 class="caosdb-v-entity-header-buttons-list">
+ <div class="caosdb-v-entity-header-buttons-list ms-auto">
<xsl:apply-templates mode="entity-heading-attributes-state" select="State">
<xsl:with-param name="entityId" select="@id"/>
<xsl:with-param name="hasSuccessor" select="Version/Successor"/>
</xsl:apply-templates>
+ <xsl:apply-templates mode="backreference-link" select="@id"/>
<!-- Button for expanding/collapsing the comments section-->
- <span class="caosdb-clickable glyphicon glyphicon-comment" data-toggle="collapse" title="Toggle the comments section at the bottom of this entity.">
- <xsl:attribute name="data-target">
+ <button class="btn caosdb-v-entity-comment-badge" data-bs-toggle="collapse" title="Toggle the comments section at the bottom of this entity.">
+ <xsl:attribute name="data-bs-target">
<xsl:value-of select="concat('#', 'comment_', $entityid)"/>
</xsl:attribute>
- </span>
- <span>
- <xsl:apply-templates mode="backreference-link" select="@id"/>
- </span>
- <span class="label caosdb-id caosdb-id-button hidden">
+ <i class="bi-chat-left-fill"/>
+ </button>
+ <span class="badge bg-dark caosdb-id caosdb-id-button d-none">
<xsl:value-of select="@id"/>
</span>
- <button class="btn btn-link caosdb-v-bookmark-button">
+ <button class="btn caosdb-v-bookmark-button">
<xsl:attribute name="data-bmval">
<xsl:value-of select="@id"/>
<xsl:if test="Version/Successor">
@@ -174,13 +172,12 @@
<xsl:value-of select="concat('@', Version/@id)"/>
</xsl:if>
</xsl:attribute>
- <span class="glyphicon glyphicon-bookmark"/>
+ <i class="bi-bookmark-fill"></i>
</button>
<xsl:apply-templates mode="entity-heading-attributes-version" select="Version">
<xsl:with-param name="entityId" select="@id"/>
</xsl:apply-templates>
- </h5>
- </div>
+ </div>
</div>
<xsl:apply-templates mode="entity-heading-attributes" select="@description"/>
<xsl:apply-templates mode="entity-heading-attributes-datatype" select="@datatype"/>
@@ -195,7 +192,7 @@
</xsl:if>
</div>
<xsl:apply-templates mode="entity-action-panel" select="."/>
- <div class="panel-body caosdb-entity-panel-body">
+ <div class="card-body caosdb-entity-panel-body">
<!-- Messages -->
<div class="caosdb-messages">
<xsl:apply-templates select="Error">
@@ -211,9 +208,6 @@
<!-- Properties -->
<ul class="list-group caosdb-properties">
<xsl:if test="Property">
- <li class="list-group-item caosdb-properties-heading">
- <strong class="small">Properties</strong>
- </li>
<xsl:apply-templates mode="entity-body" select="Property"/>
</xsl:if>
</ul>
@@ -246,44 +240,36 @@
<xsl:apply-templates select="Info">
<xsl:with-param name="class" select="'alert-info'"/>
</xsl:apply-templates>
- <!-- collapsed data -->
- <div class="collapse">
- <xsl:attribute name="id">
- <xsl:value-of select="$collapseid"/>
- </xsl:attribute>
- <hr class="caosdb-subproperty-divider"/>
- <!-- <li> -->
- <!-- <a class="caosdb-property-name"> -->
- <!-- <xsl:attribute name="href"> -->
- <!-- <xsl:value-of select="concat($entitypath,@id)" /></xsl:attribute> -->
- <!-- </a> -->
- <!-- </li> -->
-
- <!-- property attributes -->
- <xsl:apply-templates mode="property-attributes" select="@description"/>
- <xsl:apply-templates mode="property-attributes-id" select="@id"/>
- <xsl:apply-templates mode="property-attributes-type" select="@datatype"/>
- <xsl:apply-templates mode="property-attributes" select="@*[not(contains('+cuid+id+name+description+datatype+',concat('+',name(),'+')))]"/>
- </div>
</li>
</xsl:template>
<xsl:template match="Property" mode="property-collapsed">
<xsl:param name="collapseid"/>
<div class="row">
- <div class="col-sm-4">
- <h5>
+ <div class="col-sm-6 col-md-4 caosdb-v-property-left-col">
<xsl:if test="@*[not(contains('+cuid+id+name+',concat('+',name(),'+')))]">
- <span class="glyphicon glyphicon-collapse-down caosdb-clickable" data-toggle="collapse" style="margin-right: 10px;">
- <xsl:attribute name="data-target">
+ <i data-bs-toggle="collapse" style="position: absolute; left: 1rem;" class="bi-caret-down-square fs-6 caosdb-clickable">
+ <xsl:attribute name="data-bs-target">
<xsl:value-of select="concat('#',$collapseid)"/>
</xsl:attribute>
- </span>
+ </i>
</xsl:if>
- <strong class="caosdb-property-name"> <xsl:value-of select="@name"/></strong>
- </h5>
+ <span class="caosdb-property-name"> <xsl:value-of select="@name"/></span>
+ </div>
+ <!-- collapsed data -->
+ <div class="collapse order-sm-last">
+ <xsl:attribute name="id">
+ <xsl:value-of select="$collapseid"/>
+ </xsl:attribute>
+ <hr class="caosdb-subproperty-divider"/>
+ <dl class="row caosdb-v-entity-property-attributes">
+ <xsl:apply-templates mode="property-attributes" select="@description"/>
+ <xsl:apply-templates mode="property-attributes-id" select="@id"/>
+ <xsl:apply-templates mode="property-attributes-type" select="@datatype"/>
+ <xsl:apply-templates mode="property-attributes" select="@*[not(contains('+cuid+id+name+description+datatype+',concat('+',name(),'+')))]"/>
+ </dl>
</div>
<!-- property value -->
- <div class="col-sm-8 caosdb-f-property-value">
+ <div class="col-sm-6 col-md-8 caosdb-f-property-value">
<xsl:apply-templates mode="property-value" select="."/>
</div>
</div>
@@ -297,7 +283,7 @@
<xsl:choose>
<xsl:when test="$reference='true' and normalize-space($value)!=''">
<!-- this is a reference -->
- <a class="btn btn-default btn-sm caosdb-f-reference-value caosdb-resolvable-reference">
+ <a class="btn btn-outline-dark btn-sm caosdb-f-reference-value caosdb-resolvable-reference">
<xsl:attribute name="href">
<xsl:value-of select="concat($entitypath,normalize-space($value))"/>
</xsl:attribute>
@@ -323,7 +309,7 @@
<!-- DEPRECATED css class .caosdb-property-text-value - Use
.caosdb-f-property-single-raw-value or introduce new
.caosdb-v-property-text-value -->
- <xsl:value-of select="'caosdb-f-property-single-raw-value caosdb-property-text-value'"/>
+ <xsl:value-of select="'caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value'"/>
</xsl:attribute>
<xsl:call-template name="trim">
<xsl:with-param name="str">
@@ -338,7 +324,7 @@
<!-- DEPRECATED css class .caosdb-property-text-value - Use
.caosdb-f-property-single-raw-value or introduce new
.caosdb-v-property-text-value -->
- <span class="caosdb-f-property-single-raw-value caosdb-property-text-value"/>
+ <span class="caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
@@ -382,7 +368,7 @@
<xsl:attribute name="class">list-group list-inline</xsl:attribute>
<xsl:for-each select="Value">
<xsl:element name="li">
- <xsl:attribute name="class">list-group-item</xsl:attribute>
+ <xsl:attribute name="class">list-inline-item</xsl:attribute>
<xsl:call-template name="single-value">
<xsl:with-param name="reference">
<xsl:value-of select="'false'"/>
@@ -469,43 +455,27 @@
</xsl:choose>
</xsl:template>
<xsl:template match="@*" mode="property-attributes">
- <div class="row">
- <div class="col-sm-3 col-sm-offset-1">
- <strong>
- <xsl:value-of select="name()"/>
- </strong>
- </div>
- <div class="col-sm-8">
- <xsl:value-of select="."/>
- </div>
- </div>
+ <dt class="col-6 col-md-4 mb-0"><xsl:value-of select="name()"/></dt>
+ <dd class="col-6 col-md-8 mb-0">
+ <xsl:value-of select="."/>
+ </dd>
</xsl:template>
<xsl:template match="@datatype" mode="property-attributes-type">
- <div class="row">
- <div class="col-sm-3 col-sm-offset-1">
- <strong>data type</strong>
- </div>
- <div class="col-sm-8 caosdb-property-datatype">
- <xsl:value-of select="."/>
- </div>
- </div>
+ <dt class="col-6 col-md-4 mb-0">data type</dt>
+ <dd class="col-6 col-md-8 mb-0 caosdb-property-datatype">
+ <xsl:value-of select="."/>
+ </dd>
</xsl:template>
<xsl:template match="@id" mode="property-attributes-id">
- <div class="row">
- <div class="col-sm-3 col-sm-offset-1">
- <strong>
- <xsl:value-of select="name()"/>
- </strong>
- </div>
- <div class="col-sm-8">
- <a class="caosdb-property-id">
- <xsl:attribute name="href">
- <xsl:value-of select="concat($entitypath,.)"/>
- </xsl:attribute>
- <xsl:value-of select="."/>
- </a>
- </div>
- </div>
+ <dt class="col-6 col-md-4 mb-0">id</dt>
+ <dd class="col-6 col-md-8 mb-0">
+ <a class="caosdb-property-id">
+ <xsl:attribute name="href">
+ <xsl:value-of select="concat($entitypath,.)"/>
+ </xsl:attribute>
+ <xsl:value-of select="."/>
+ </a>
+ </dd>
</xsl:template>
<!-- ANNOTATIONS -->
<xsl:template name="annotation-section">
@@ -518,10 +488,10 @@
<xsl:attribute name="id">
<xsl:value-of select="$collapseId"/>
</xsl:attribute>
- <li class="list-group-item caosdb-comments-heading">
- <span class="glyphicon glyphicon-comment" style="margin-right: 1em;"/>
+ <li class="list-group-item caosdb-comments-heading d-flex">
+ <i class="bi-chat-left-fill" style="margin-right: 1em;"/>
<strong class="small">Comments</strong>
- <button class="btn btn-link btn-xs pull-right caosdb-new-comment-button">
+ <button class="btn btn-sm pull-right caosdb-new-comment-button ms-auto">
<strong>add new comment</strong>
</button>
</li>
@@ -534,26 +504,25 @@
<xsl:param name="entityId"/>
<xsl:param name="hasSuccessor"/>
<xsl:param name="stateModalId">state-modal-<xsl:value-of select="generate-id()"/></xsl:param>
- <span title="State Info">
- <a data-toggle="modal" class="btn btn-link label label-info caosdb-v-state-label">
+ <button title="State Info" class="btn" data-bs-toggle="modal">
+ <xsl:attribute name="data-bs-target">#<xsl:value-of select="$stateModalId"/></xsl:attribute>
+ <span class="badge label-info caosdb-v-state-label">
<xsl:if test="@color">
<xsl:attribute name="style">background-color: <xsl:value-of select="@color"/>;</xsl:attribute>
</xsl:if>
- <xsl:attribute name="data-target">#<xsl:value-of select="$stateModalId"/></xsl:attribute>
<xsl:value-of select="./@name"/>
- </a>
- </span>
+ </span>
+ </button>
<!-- here comes the modal -->
<div class="caosdb-f-entity-state-info modal fade" tabindex="-1" role="dialog">
<xsl:attribute name="id"><xsl:value-of select="$stateModalId"/></xsl:attribute>
<div class="modal-dialog" role="document">
<div class="modal-content text-left">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close" title="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title">
- <span class="label label-default caosdb-v-state-model-label" style="padding-right: 0"><xsl:value-of select="@model"/>
- <span title="State Info" class="label label-info caosdb-v-state-label">
+ <div class="modal-header flex-wrap">
+ <span class="modal-title">
+ <span class="badge caosdb-v-state-model-label"><xsl:value-of select="@model"/>
+ <span title="State Info" class="badge badge-info caosdb-v-state-label">
<xsl:attribute name="style">
<xsl:if test="@color">
background-color: <xsl:value-of select="@color"/>;
@@ -561,7 +530,8 @@
</xsl:attribute>
<xsl:value-of select="@name"/></span>
</span>
- </h4>
+ </span>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" title="Close"></button>
<div style="margin-top: 8px"><em><xsl:value-of select="@description"/></em></div>
</div>
<div class="modal-body">
@@ -578,20 +548,19 @@
<xsl:if test="not(Transition)">
You cannot perform any transitions. Maybe this is due to lack of permissions.
</xsl:if>
- <dl class="dl-horizontal caosdb-f-transition">
+ <dl class="row caosdb-f-transition">
<xsl:for-each select="Transition">
- <dt><button class="btn label label-info caosdb-f-entity-state-transition-button" type="button">
+ <dt class="col-sm-4 mb-2"><button class="btn btn-secondary badge caosdb-f-entity-state-transition-button fs-6" type="button">
<xsl:attribute name="data-to-state"><xsl:value-of select="ToState/@name"/></xsl:attribute>
<xsl:attribute name="data-transition-name"><xsl:value-of select="@name"/></xsl:attribute>
<xsl:attribute name="title">Transition to state '<xsl:value-of select="ToState/@name"/>'. <xsl:if test="ToState/@description"><xsl:value-of select="ToState/@description"/></xsl:if></xsl:attribute>
- <xsl:attribute name="style">
- font-size: 110%;
- <xsl:if test="@color">
+ <xsl:if test="@color">
+ <xsl:attribute name="style">
background-color: <xsl:value-of select="@color"/>;
- </xsl:if>
- </xsl:attribute>
+ </xsl:attribute>
+ </xsl:if>
<xsl:value-of select="@name"/></button></dt>
- <dd><xsl:value-of select="@description"/></dd>
+ <dd class="col-sm-8"><xsl:value-of select="@description"/></dd>
</xsl:for-each>
</dl>
</xsl:otherwise>
@@ -612,8 +581,8 @@
<xsl:param name="entityId"/>
<xsl:param name="versionModalId">version-modal-<xsl:value-of select="generate-id()"/></xsl:param>
<!-- the clock button which opens the window with the versioning info -->
- <button title="Versioning Info" type="button" data-toggle="modal">
- <xsl:attribute name="data-target">#<xsl:value-of select="$versionModalId"/></xsl:attribute>
+ <button title="Versioning Info" type="button" data-bs-toggle="modal">
+ <xsl:attribute name="data-bs-target">#<xsl:value-of select="$versionModalId"/></xsl:attribute>
<xsl:attribute name="class">
caosdb-f-entity-version-button caosdb-v-entity-version-button btn
<xsl:if test="Successor">
@@ -621,7 +590,7 @@
<xsl:value-of select="' text-danger'"/>
</xsl:if>
</xsl:attribute>
- <span class="glyphicon glyphicon-time"/>
+ <i class="bi-clock-history"/>
</button>
<!-- the following div.modal is the window that pops up when the user clicks on the clock button -->
@@ -634,23 +603,24 @@
<div>
<xsl:attribute name="class">
modal-header
+ text-start
<xsl:if test="not(@head='true')">
<!-- indicate old version by color -->
<xsl:value-of select="' bg-danger'"/>
</xsl:if>
</xsl:attribute>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close" title="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title">Version Info</h4>
- <p class="caosdb-entity-heading-attr">
- <em class="caosdb-entity-heading-attr-name">
- This is
- <xsl:if test="not(@head='true')"><b>not</b></xsl:if>
- the latest version of this entity.
- <xsl:apply-templates mode="entity-version-modal-head" select="Successor">
- <xsl:with-param name="entityId" select="$entityId"/>
- </xsl:apply-templates>
- </em>
- </p>
+ <p class="caosdb-entity-version-attr">
+ <h4 class="modal-title">Version Info</h4>
+ <em class="caosdb-entity-version-attr-name">
+ This is
+ <xsl:if test="not(@head='true')"><b>not</b></xsl:if>
+ the latest version of this entity.
+ <xsl:apply-templates mode="entity-version-modal-head" select="Successor">
+ <xsl:with-param name="entityId" select="$entityId"/>
+ </xsl:apply-templates>
+ </em>
+ </p>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" title="Close"></button>
</div>
<!-- modal-header end -->
<div class="caosdb-f-entity-version-history">
@@ -674,14 +644,14 @@
<th class="export-data">Version ID</th>
<th class="export-data">Date</th>
<th class="export-data">User</th>
- <th class="hidden"><div class="export-data">URI</div></th>
+ <th class="invisible"><div class="export-data">URI</div></th>
</tr></thead>
<tbody>
<xsl:apply-templates mode="entity-version-modal-successor" select="Successor">
<xsl:with-param name="entityId" select="$entityId"/>
</xsl:apply-templates>
<tr>
- <td class="hidden"><div class="export-data"><xsl:value-of select="$entityId"/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="$entityId"/></div></td>
<td class="caosdb-v-entity-version-hint caosdb-v-entity-version-hint-cur">This Version</td>
<td><xsl:apply-templates select="@id" mode="entity-version-id"/>
</td><td>
@@ -689,7 +659,7 @@
</td><td class="export-data">
<xsl:value-of select="@username"/>@<xsl:value-of select="@realm"/>
</td>
- <td class="hidden"><div class="export-data"><xsl:value-of select="concat($entitypath, $entityId, '@', @id)"/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="concat($entitypath, $entityId, '@', @id)"/></div></td>
</tr>
<xsl:apply-templates mode="entity-version-modal-predecessor" select="Predecessor">
<xsl:with-param name="entityId" select="$entityId"/>
@@ -698,7 +668,7 @@
</table>
</div>
<div class="modal-footer">
- <button type="button" class="caosdb-f-entity-version-export-history-btn btn btn-default">Export history</button>
+ <button type="button" class="caosdb-f-entity-version-export-history-btn btn btn-secondary">Export history</button>
</div>
</xsl:template>
@@ -734,7 +704,7 @@
</table>
</div>
<div class="modal-footer">
- <button type="button" style="display: none" class="caosdb-f-entity-version-load-history-btn btn btn-default">Load full history</button>
+ <button type="button" style="display: none" class="caosdb-f-entity-version-load-history-btn btn btn-secondary">Load full history</button>
</div>
</xsl:template>
@@ -742,7 +712,7 @@
<!-- a versions'id (abbreviated) -->
<xsl:attribute name="title">Full Version ID: <xsl:value-of select="."/></xsl:attribute>
<xsl:value-of select="substring(.,1,8)"/>
- <td class="hidden"><div class="export-data"><xsl:value-of select="."/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="."/></div></td>
</xsl:template>
<xsl:template match="@date" mode="entity-version-date">
@@ -751,7 +721,7 @@
<xsl:value-of select="substring(.,0,11)"/>
<xsl:value-of select="' '"/>
<xsl:value-of select="substring(.,12,8)"/>
- <td class="hidden"><div class="export-data"><xsl:value-of select="."/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="."/></div></td>
</xsl:template>
<xsl:template match="Predecessor|Successor" mode="entity-version-modal-single-history-item">
@@ -759,7 +729,7 @@
<xsl:param name="entityId"/>
<xsl:param name="hint"/>
<tr>
- <td class="hidden"><div class="export-data"><xsl:value-of select="$entityId"/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="$entityId"/></div></td>
<td class="caosdb-v-entity-version-hint"><xsl:value-of select="$hint"/></td>
<td>
<xsl:apply-templates select="@id" mode="entity-version-link-to-other-version">
@@ -770,7 +740,7 @@
</td><td class="export-data">
<xsl:value-of select="@username"/>@<xsl:value-of select="@realm"/>
</td>
- <td class="hidden"><div class="export-data"><xsl:value-of select="concat($entitypath, $entityId, '@', @id)"/></div></td>
+ <td class="invisible"><div class="export-data"><xsl:value-of select="concat($entitypath, $entityId, '@', @id)"/></div></td>
</tr>
</xsl:template>
@@ -817,7 +787,7 @@
<xsl:template match="Version/Successor" mode="entity-action-panel-version">
<!-- clickable warning message in the entity actions panel when there exists a newer version -->
<xsl:param name="entityId"/>
- <a class="caosdb-f-entity-version-old-warning alert-warning btn btn-link" title="Go to the latest version of this entity.">
+ <a class="caosdb-f-entity-version-old-warning alert-warning btn" title="Go to the latest version of this entity.">
<xsl:attribute name="href"><xsl:value-of select="$entityId"/>@HEAD</xsl:attribute>
<strong>Warning</strong> A newer version exists!
</a>
diff --git a/src/core/xsl/entity_palette.xsl b/src/core/xsl/entity_palette.xsl
index 961a51dc51584c3fe87496e54f9837fcec9de0b0..9d3a13f1c96a7ce864554b78b9d9e0dbebfb3c5f 100644
--- a/src/core/xsl/entity_palette.xsl
+++ b/src/core/xsl/entity_palette.xsl
@@ -3,47 +3,37 @@
<xsl:output method="html"/>
<xsl:template match="/Response">
- <div class="btn-group-vertical caosdb-v-editmode-btngroup">
- <button type="button" class="btn btn-default caosdb-f-edit-panel-new-button new-property">Create new Property</button>
- <button type="button" class="btn btn-default caosdb-f-edit-panel-new-button new-recordtype">Create new RecordType</button>
- </div>
- <div title="Drag and drop Properties from this panel to the Entities on the left." class="panel panel-default caosdb-v-editmode-existing">
- <div class="panel-heading">
- <h5>Existing Properties</h5>
+ <div title="Drag and drop Properties from this panel to the Entities on the left." class="caosdb-v-editmode-existing caosdb-f-edit-mode-existing d-none">
+ <div class="card-header">
+ <span class="card-title">Existing Properties</span>
</div>
- <div class="panel-body">
+ <div class="card">
<div class="input-group" style="width: 100%;">
<input class="form-control" placeholder="filter..." title="Type a name (full or partial)." oninput="edit_mode.filter('properties');" id="caosdb-f-filter-properties" type="text"/>
- <span class="input-group-btn">
- <button class="btn btn-default caosdb-f-edit-panel-new-button new-property caosdb-f-hide-on-empty-input" title="Create this Property." ><span class="glyphicon glyphicon-plus"></span></button>
- </span>
</div>
- <ul class="caosdb-v-edit-list">
+ <ul class="caosdb-v-edit-list list-group">
<xsl:apply-templates select="./Property"/>
</ul>
</div>
</div>
- <div title="Drag and drop RecordTypes from this panel to the Entities on the left." class="panel panel-default caosdb-v-editmode-existing">
- <div class="panel-heading">
- <h5>Existing RecordTypes</h5>
+ <div title="Drag and drop RecordTypes from this panel to the Entities on the left." class="caosdb-v-editmode-existing caosdb-f-edit-mode-existing d-none">
+ <div class="card-header">
+ <span class="card-title">Existing RecordTypes</span>
</div>
- <div class="panel-body">
+ <div class="card">
<div class="input-group" style="width: 100%;">
<input class="form-control" placeholder="filter..." title="Type a name (full or partial)." oninput="edit_mode.filter('recordtypes');" id="caosdb-f-filter-recordtypes" type="text"/>
- <span class="input-group-btn">
- <button class="btn btn-default caosdb-f-edit-panel-new-button new-recordtype caosdb-f-hide-on-empty-input" title="Create this RecordType"><span class="glyphicon glyphicon-plus"></span></button>
- </span>
</div>
- <ul class="caosdb-v-edit-list">
+ <ul class="caosdb-v-edit-list list-group">
<xsl:apply-templates select="./RecordType"/>
</ul>
- </div>
</div>
+ </div>
</xsl:template>
<xsl:template match="RecordType">
<xsl:if test="string-length(@name)>0">
- <li class="caosdb-f-edit-drag list-group-item caosdb-v-edit-drag">
+ <li draggable="true" class="caosdb-f-edit-drag list-group-item caosdb-v-edit-drag">
<xsl:attribute name="id">caosdb-f-edit-rt-<xsl:value-of select="@id"/></xsl:attribute>
<xsl:value-of select="@name"/>
</li>
@@ -62,7 +52,7 @@
<!-- ignore unit property -->
</xsl:when>
<xsl:otherwise>
- <li class="caosdb-f-edit-drag list-group-item caosdb-v-edit-drag">
+ <li draggable="true" class="caosdb-f-edit-drag list-group-item caosdb-v-edit-drag">
<xsl:attribute name="id">caosdb-f-edit-p-<xsl:value-of select="@id"/></xsl:attribute>
<xsl:value-of select="@name"/>
</li>
diff --git a/src/core/xsl/filesystem.xsl b/src/core/xsl/filesystem.xsl
index 38a772209fb1e199cee8a81a3f02ac1cf7a5da44..a924900091ca2f2c2b00ed698e144c62d27511d6 100644
--- a/src/core/xsl/filesystem.xsl
+++ b/src/core/xsl/filesystem.xsl
@@ -69,7 +69,7 @@
<xsl:attribute name="href">
<xsl:value-of select="concat(/Response/dir/@url, @name)"/>
</xsl:attribute>
- <span class="glyphicon"></span>
+ <i class="bi-folder2 me-1"></i>
<xsl:value-of select="@name"/>
</a>
</li>
@@ -83,17 +83,17 @@
<xsl:attribute name="href">
<xsl:value-of select="$file-uri"/>
</xsl:attribute>
- <span class="glyphicon"></span>
+ <i class="bi-file-arrow-down me-1"></i>
<xsl:value-of select="@name"/>
</a>
</div>
- <div class="col-sm-6 text-right">
+ <div class="col-sm-6 text-end">
<a class="btn caosdb-fs-btn-file">
<xsl:attribute name="href">
<xsl:value-of select="concat($entitypath, @id)"/>
</xsl:attribute>
- <span class="label caosdb-label-file">F</span>
- <span class="label caosdb-id hidden">
+ <span class="badge caosdb-label-file">F</span>
+ <span class="badge caosdb-id invisible">
<xsl:value-of select="@id"/>
</span>
</a>
@@ -106,9 +106,9 @@
</xsl:template>
<xsl:template match="/Response/dir" mode="top-level-data">
<div class="container">
- <div class="panel-group">
- <div class="panel panel-default">
- <div class="panel-heading">
+ <div>
+ <div class="card" id="caosdb-f-filesystem">
+ <div class="card-header">
<div class="row">
<div class="col-sm-8">
<a title="Go back to the root of the file system.">
@@ -119,13 +119,13 @@
</a>
<xsl:call-template name="filesystem-cwd"/>
</div>
- <div class="col-sm-4 text-right">
+ <div class="col-sm-4 text-end">
<xsl:value-of select="count(dir)"/> Directories and
<xsl:value-of select="count(file)"/> Files
</div>
</div>
</div>
- <div class="panel-body">
+ <div class="card-body">
<ul class="list-group">
<xsl:apply-templates mode="filesystem-item" select="dir"/>
<xsl:apply-templates mode="filesystem-item" select="file"/>
diff --git a/src/core/xsl/footer.xsl b/src/core/xsl/footer.xsl
index 0b034e9d5a3b170305b85567f34732ac04755f91..0231649d4ff4deda68822eecf25576175a5eed00 100644
--- a/src/core/xsl/footer.xsl
+++ b/src/core/xsl/footer.xsl
@@ -26,20 +26,24 @@
<xsl:output method="html"/>
<xsl:template name="caosdb-footer">
- <div class="caosdb-footer-element" id="caosdb-footer-element-custom-1">
- ${BUILD_FOOTER_CUSTOM_ELEMENT_ONE}
+ <div class="container d-flex flex-lg-row flex-column justify-content-around">
+ <div class="caosdb-footer-element" id="caosdb-footer-element-custom-1">
+ ${BUILD_FOOTER_CUSTOM_ELEMENT_ONE}
+ </div>
+ <div class="caosdb-footer-element" id="caosdb-footer-element-custom-2">
+ ${BUILD_FOOTER_CUSTOM_ELEMENT_TWO}
+ </div>
</div>
- <div class="caosdb-footer-element" id="AGPL-notice">
- This server runs free software licensed under the <a
- href="https://www.gnu.org/licenses/agpl-3.0.en.html"
- target="_blank">AGPL-v3</a>, you can obtain the sources <a
- href="https://gitlab.com/caosdb" target="_blank">here</a>.
- </div>
- <div class="caosdb-footer-element" id="caosdb-footer-element-custom-2">
- ${BUILD_FOOTER_CUSTOM_ELEMENT_TWO}
- </div>
- <div class="caosdb-footer-element">
- <a href="${BUILD_FOOTER_DATA_POLICY_HREF}">Data Policy</a><span class="caosdb-bulletsep">•</span><a href="/webinterface/${BUILD_NUMBER}/html/imprint.html">Imprint/Impressum</a>
+ <div class="container d-flex flex-md-row flex-column justify-content-center">
+ <a href="mailto:info@indiscale.com">Contact</a>
+ <span class="caosdb-bulletsep d-none d-md-inline">•</span>
+ <a href="https://www.indiscale.com/imprint/">Imprint/Impressum</a>
+ <span class="caosdb-bulletsep d-none d-md-inline">•</span>
+ <a href="${BUILD_FOOTER_DATA_POLICY_HREF}">Data Policy</a>
+ <span class="caosdb-bulletsep d-none d-md-inline">•</span>
+ <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">License (AGPL-v3)</a>
+ <span class="caosdb-bulletsep d-none d-md-inline">•</span>
+ <a href="https://gitlab.com/caosdb" target="_blank">Sources</a>
</div>
</xsl:template>
</xsl:stylesheet>
diff --git a/src/core/xsl/main.xsl b/src/core/xsl/main.xsl
index 69a2d83e2e4111beb457daf1a37dce21e3e4d0ef..1a0bdb812afb18ad6ab291acb975de994c5d3e47 100644
--- a/src/core/xsl/main.xsl
+++ b/src/core/xsl/main.xsl
@@ -85,207 +85,17 @@
<xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/css/bootstrap-select.css')"/>
</xsl:attribute>
</xsl:element>
- <!--CSS_EXTENSIONS-->
- </xsl:template>
- <xsl:template name="caosdb-head-js">
- <script>
- var caosdb_webui_build_number = "${BUILD_NUMBER}";
- window.sessionStorage.caosdbBasePath = "<xsl:value-of select="$basepath"/>";
- </script>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/jquery.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/bootstrap.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/bootstrap-autocomplete.min.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/bootstrap-select.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/state-machine.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/showdown.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/dropzone.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/loglevel.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/plotly.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/webcaosdb.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/pako.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/utif.js')"/>
- </xsl:attribute>
- </xsl:element>
- <script>
- $(document).ready(() => paging.initPaging(window.location.href, <xsl:value-of select="/Response/@count"/> ));
- </script>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/caosdb.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/form_elements.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_autocomplete.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/preview.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_references.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_table_preview.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_xls_download.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/query_shortcuts.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_jupyterdrag.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/annotation.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/edit_mode.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_entity_state.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_file_download.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/leaflet.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/leaflet-graticule.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/leaflet-latlng-graticule.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/leaflet-coordinates.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/proj4.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/proj4leaflet.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_map.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/tour.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_bottom_line.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_sss_markdown.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_trigger_crawler_form.js')"/>
- </xsl:attribute>
- </xsl:element>
- <xsl:element name="script">
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_bookmarks.js')"/>
+ <xsl:element name="link">
+ <xsl:attribute name="rel">stylesheet</xsl:attribute>
+ <xsl:attribute name="href">
+ <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/css/bootstrap-icons.css')"/>
</xsl:attribute>
</xsl:element>
- <!--JS_EXTENSIONS-->
+ <!--CSS_EXTENSIONS-->
</xsl:template>
<xsl:template name="caosdb-data-container">
- <div class="container caosdb-f-main">
- <div class="row caosdb-v-main-col">
- <div class="panel-group caosdb-f-main-entities">
+ <div class="container d-flex flex-column-reverse flex-lg-row caosdb-f-main">
+ <div class="flex-grow-1 caosdb-f-main-entities">
<xsl:call-template name="paging-panel"/>
<xsl:apply-templates select="/Response/UserInfo"/>
<xsl:apply-templates mode="top-level-data" select="/Response/*"/>
@@ -293,23 +103,27 @@
<xsl:if test="not(/Response/Query/Selection)">
<xsl:apply-templates mode="entities" select="/Response/*"/>
</xsl:if>
- <xsl:if test="count(/Response/*)<3 and not(/Response/Error|/Response/Info|/Response/Warning)">
- <xsl:call-template name="welcome"/>
- </xsl:if>
<xsl:call-template name="paging-panel"/>
</div>
- </div>
- <div class="panel panel-warning caosdb-f-edit caosdb-v-edit-panel caosdb-v-edit-panel hidden">
- <div class="panel-heading">
- <h3 class="panel-title">Edit Mode Toolbox</h3>
+ <div class="caosdb-f-edit ms-2">
+ <div class="card caosdb-v-edit-panel">
+ <div class="card-header">
+ <span class="card-title">Edit Mode Toolbox</span>
+ </div>
+ <div class="caosdb-f-edit-panel-body">
+ <div class="list-group list-group-flush">
+ <div class="list-group-item btn-group-vertical caosdb-v-editmode-btngroup caosdb-f-edit-mode-create-buttons">
+ <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-property">Create Property</button>
+ <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype">Create RecordType</button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <div class="caosdb-f-edit-panel-body panel-body"></div>
- </div>
</div>
</xsl:template>
<xsl:template match="*" mode="entities"/>
<xsl:template match="*" mode="top-level-data"/>
- <xsl:variable name="close-char" select="'×'"/>
<!-- assure that this uri ends with a '/' -->
<xsl:template name="uri_ends_with_slash">
<xsl:param name="uri"/>
diff --git a/src/core/xsl/messages.xsl b/src/core/xsl/messages.xsl
index 1ac2e7b63c16bd389e9a6e0fe0c2f9541be34683..42035c9942652c78714b46e0d99b2b8138b0eb3c 100644
--- a/src/core/xsl/messages.xsl
+++ b/src/core/xsl/messages.xsl
@@ -27,9 +27,8 @@
<xsl:param name="class"/>
<div>
<xsl:attribute name="class">alert caosdb-v-server-message
- <xsl:value-of select="$class"/> alert-dismissable fade in</xsl:attribute>
- <a class="close" data-dismiss="alert" href="#">
- <xsl:value-of select="$close-char"/>
+ <xsl:value-of select="$class"/> alert-dismissable</xsl:attribute>
+ <a class="btn-close me-3" data-bs-dismiss="alert" href="#">
</a>
<strong>
<xsl:value-of select="name()"/>
@@ -42,13 +41,13 @@
</xsl:template>
<xsl:template match="script" mode="entities">
<div class="container" id="caosdb-container-script">
- <div class="panel panel-default">
- <div class="panel-heading">
+ <div class="card">
+ <div class="card-header">
<div class="row">
<div class="col-sm-8" id="caosdb-caption-script">
Output of the Script
</div>
- <div class="col-sm-4 text-right">
+ <div class="col-sm-4 text-end">
Code: <span id="caosdb-return-code"><xsl:value-of select="@code"/></span></div>
</div>
</div>
@@ -58,16 +57,16 @@
</div>
</xsl:template>
<xsl:template match="stderr">
- <div class="panel panel-default" id="caosdb-container-stderr">
- <div class="panel-heading" id="caosdb-caption-stderr">Errors:</div>
+ <div class="card" id="caosdb-container-stderr">
+ <div class="card-header" id="caosdb-caption-stderr">Errors:</div>
<div class="alert" id="caosdb-stderr">
<xsl:value-of select="text()"/>
</div>
</div>
</xsl:template>
<xsl:template match="stdout">
- <div class="panel panel-default" id="caosdb-container-stdout">
- <div class="panel-heading" id="caosdb-caption-stdout">Standard Messages:</div>
+ <div class="card" id="caosdb-container-stdout">
+ <div class="card-header" id="caosdb-caption-stdout">Standard Messages:</div>
<div id="caosdb-stdout">
<xsl:value-of select="text()"/>
</div>
diff --git a/src/core/xsl/navbar.xsl b/src/core/xsl/navbar.xsl
index 61bc6041ac804488635d087ff426392cbc339668..ee4df81be60558e6b6aa2e558096d7420636349f 100644
--- a/src/core/xsl/navbar.xsl
+++ b/src/core/xsl/navbar.xsl
@@ -30,7 +30,7 @@
<xsl:param name="display"/>
<xsl:param name="paging" select="'0L10'"/>
<li>
- <a>
+ <a class="dropdown-item">
<xsl:attribute name="href">
<xsl:value-of select="concat($entitypath, '?all=', normalize-space($entity))"/>
<xsl:if test="$paging">
@@ -42,128 +42,116 @@
</li>
</xsl:template>
<xsl:template name="caosdb-top-navbar">
- <!-- Some general settings first, current context should be the <body> node. -->
- <xsl:if test="count(/Response/*)<2 and not(/Response/Error|/Response/Info|/Response/Warning)">
- <xsl:attribute name="class">caosdb-welcome</xsl:attribute>
- </xsl:if>
<xsl:if test="/Response/@realm='${BUILD_MODULE_USER_MANAGEMENT_CHANGE_OWN_PASSWORD_REALM}'">
<xsl:call-template name="change-password-modal">
<xsl:with-param name="realm"><xsl:value-of select="/Response/@realm"/></xsl:with-param>
<xsl:with-param name="username"><xsl:value-of select="/Response/@username"/></xsl:with-param>
</xsl:call-template>
</xsl:if>
- <!-- Now the header follows. -->
- <nav class="navbar navbar-default navbar-fixed-top">
+ <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top mb-2 flex-column">
<noscript>Please enable JavaScript!</noscript>
<div class="container-fluid">
- <div class="navbar-header">
- <button class="navbar-toggle" data-target="#top-navbar" data-toggle="collapse" type="button">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="/">
- <xsl:element name="img">
- <xsl:if test="'${BUILD_NAVBAR_BRAND_NAME}' != ''">
- <xsl:attribute name="class">caosdb-logo</xsl:attribute>
- </xsl:if>
- <xsl:attribute name="src">
- <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/${BUILD_NAVBAR_LOGO}')"/>
- </xsl:attribute>
- </xsl:element>
- ${BUILD_NAVBAR_BRAND_NAME}
- </a>
- </div>
+ <a class="navbar-brand" href="/">
+ <xsl:element name="img">
+ <xsl:if test="'${BUILD_NAVBAR_BRAND_NAME}' != ''">
+ <xsl:attribute name="class">caosdb-logo</xsl:attribute>
+ </xsl:if>
+ <xsl:attribute name="src">
+ <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/${BUILD_NAVBAR_LOGO}')"/>
+ </xsl:attribute>
+ </xsl:element>
+ ${BUILD_NAVBAR_BRAND_NAME}
+ </a>
+ <button class="navbar-toggler" data-bs-target="#top-navbar" data-bs-toggle="collapse" type="button" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-collapse" id="top-navbar">
- <xsl:if test="/Response/UserInfo">
- <ul class="nav navbar-nav caosdb-navbar">
- <li class="dropdown" id="caosdb-navbar-entities">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
- Entities
- <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li class="dropdown-header">Retrieve all:</li>
- <xsl:call-template name="make-retrieve-all-link">
- <xsl:with-param name="entity">
- Entity
- </xsl:with-param>
- <xsl:with-param name="display">
- Entities
- </xsl:with-param>
- </xsl:call-template>
- <xsl:call-template name="make-retrieve-all-link">
- <xsl:with-param name="entity">
- Record
- </xsl:with-param>
- <xsl:with-param name="display">
- Records
- </xsl:with-param>
- </xsl:call-template>
- <xsl:call-template name="make-retrieve-all-link">
- <xsl:with-param name="entity">
- RecordType
- </xsl:with-param>
- <xsl:with-param name="display">
- RecordTypes
- </xsl:with-param>
- </xsl:call-template>
- <xsl:call-template name="make-retrieve-all-link">
- <xsl:with-param name="entity">
- Property
- </xsl:with-param>
- <xsl:with-param name="display">
- Properties
- </xsl:with-param>
- </xsl:call-template>
- <xsl:call-template name="make-retrieve-all-link">
- <xsl:with-param name="entity">
- File
- </xsl:with-param>
- <xsl:with-param name="display">
- Files
- </xsl:with-param>
- </xsl:call-template>
- </ul>
- </li>
- <li id="caosdb-navbar-filesystem">
+ <ul class="navbar-nav caosdb-navbar me-auto">
+ <li class="nav-item dropdown" id="caosdb-navbar-entities">
+ <a class="nav-link dropdown-toggle" role="button" id="navbarEntitiesMenuLink" data-bs-toggle="dropdown" aria-expanded="false" href="#">
+ Entities
+ </a>
+ <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarEntitiesMenuLink">
+ <li class="dropdown-header">Retrieve all:</li>
+ <xsl:call-template name="make-retrieve-all-link">
+ <xsl:with-param name="entity">
+ Entity
+ </xsl:with-param>
+ <xsl:with-param name="display">
+ Entities
+ </xsl:with-param>
+ </xsl:call-template>
+ <xsl:call-template name="make-retrieve-all-link">
+ <xsl:with-param name="entity">
+ Record
+ </xsl:with-param>
+ <xsl:with-param name="display">
+ Records
+ </xsl:with-param>
+ </xsl:call-template>
+ <xsl:call-template name="make-retrieve-all-link">
+ <xsl:with-param name="entity">
+ RecordType
+ </xsl:with-param>
+ <xsl:with-param name="display">
+ RecordTypes
+ </xsl:with-param>
+ </xsl:call-template>
+ <xsl:call-template name="make-retrieve-all-link">
+ <xsl:with-param name="entity">
+ Property
+ </xsl:with-param>
+ <xsl:with-param name="display">
+ Properties
+ </xsl:with-param>
+ </xsl:call-template>
+ <xsl:call-template name="make-retrieve-all-link">
+ <xsl:with-param name="entity">
+ File
+ </xsl:with-param>
+ <xsl:with-param name="display">
+ Files
+ </xsl:with-param>
+ </xsl:call-template>
+ </ul>
+ </li>
+ <li id="caosdb-navbar-filesystem" class="nav-item">
+ <a class="nav-link" role="button">
<xsl:call-template name="make-filesystem-link">
<xsl:with-param name="href" select="'/'"/>
<xsl:with-param name="display" select="'File System'"/>
</xsl:call-template>
- </li>
- <li id="caosdb-navbar-query">
- <button class="navbar-btn btn btn-link" data-target="#caosdb-query-panel" data-toggle="collapse">
- Query
- </button>
- </li>
- </ul>
- </xsl:if>
- <ul class="nav navbar-nav navbar-right">
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
- <span id="caosdb-f-bookmarks-collection-counter" class="badge">0</span>
+ </a>
+ </li>
+ <li id="caosdb-navbar-query" class="nav-item">
+ <a class="nav-link" role="button" data-bs-target="#caosdb-query-panel-collapsible" data-bs-toggle="collapse">
+ Query
+ </a>
+ </li>
+ </ul>
+ <ul class="navbar-nav">
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" role="button" id="navbarBookmarkMenuLink" data-bs-toggle="dropdown" aria-expanded="false" href="#">
+ <span id="caosdb-f-bookmarks-collection-counter" class="badge bg-secondary">0</span>
Bookmarks
- <span class="caret"></span></a>
- <ul class="dropdown-menu">
+ </a>
+ <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarBookmarkMenuLink">
<li class="disabled" id="caosdb-f-bookmarks-collection-link"
title="Show all bookmarked entities.">
- <a>Show all</a></li>
+ <a class="dropdown-item">Show all</a></li>
<li class="disabled" id="caosdb-f-bookmarks-export-link"
title="Export all bookmarks to a file. The exported file is a spread sheet with columns for the id, the version, the complete URI of the bookmarked entities and the path, if the entity is a file.">
- <a>Export to file</a></li>
+ <a class="dropdown-item">Export to file</a></li>
<li class="disabled" id="caosdb-f-bookmarks-clear"
title="Empty the list of bookmarks.">
- <a>Clear</a></li>
+ <a class="dropdown-item">Clear</a></li>
</ul>
</li>
- <xsl:call-template name="caosdb-user-menu"/>
+ <xsl:call-template name="caosdb-user-menu"/>
</ul>
- </div>
- <!-- query panel -->
- <div class="collapse" id="caosdb-query-panel">
- <xsl:call-template name="caosdb-query-panel"/>
- </div>
</div>
+ </div>
+ <!-- global messages -->
<xsl:apply-templates select="/Response/Error">
<xsl:with-param name="class" select="'alert-danger'"/>
</xsl:apply-templates>
@@ -173,8 +161,13 @@
<xsl:apply-templates select="/Response/Info">
<xsl:with-param name="class" select="'alert-info'"/>
</xsl:apply-templates>
+ <!-- query panel -->
+ <div class="collapse" id="caosdb-query-panel-collapsible" style="width: 100%">
+ <div class="container py-2 py-sm-3 py-lg-4 py-xl-5 flex-column caosdb-query-panel" id="caosdb-query-panel">
+ <xsl:call-template name="caosdb-query-panel"/>
+ </div>
+ </div>
</nav>
- <div class="container" id="subnav"/>
</xsl:template>
<xsl:template match="Role" name="caosdb-user-roles">
<div class="caosdb-user-role">
@@ -235,54 +228,57 @@
<xsl:template name="caosdb-user-menu">
<xsl:choose>
<xsl:when test="/Response/@username">
- <li class="dropdown" id="user-menu">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <li class="nav-item dropdown my-auto" id="user-menu">
+ <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">
<xsl:value-of select="concat(/Response/@username,' ')"/>
- <span class="glyphicon glyphicon-user"/>
+ <i class="bi-person-fill"></i>
<span class="caret"></span>
</a>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu dropdown-menu-light">
<xsl:if test="/Response/@realm='${BUILD_MODULE_USER_MANAGEMENT_CHANGE_OWN_PASSWORD_REALM}'">
<li>
<a title="Change your password." href="#" data-toggle="modal" data-target="#caosdb-f-change-password-form">Change Password</a>
</li>
</xsl:if>
<li>
- <a title="Click to logout.">
+ <a class="dropdown-item" title="Click to logout.">
<xsl:attribute name="href">
<xsl:value-of select="concat($basepath, 'logout')"/>
</xsl:attribute>
- Logout
- <span class="glyphicon glyphicon-log-out"/></a>
+ Logout <i class="bi-box-arrow-right"></i></a>
</li>
</ul>
</li>
</xsl:when>
<xsl:otherwise>
- <li id="user-menu">
- <form id="caosdb-f-login-form" class="navbar-form visible-xs-inline-block" method="POST">
+ <li id="user-menu" class="nav-item my-auto">
+ <form id="caosdb-f-login-form" class="d-none" method="POST">
<xsl:attribute name="action">
<xsl:value-of select="concat($basepath, 'login')"/>
</xsl:attribute>
+ <div class="row">
+ <div class="col">
<input class="form-control" id="username" name="username" placeholder="username" type="text"/>
+ </div>
+ <div class="col">
<input class="form-control" id="password" name="password" placeholder="password" type="password"/>
+ </div>
+ <div class="col-auto">
<button class="btn btn-primary" type="submit">Login</button>
+ </div>
+ </div>
+ </form>
+ <form class="my-auto">
+ <button style="margin-right: 15px" class="btn btn-secondary navbar-btn d-inline-block" id="caosdb-f-login-show-button" type="button">Login</button>
</form>
- <button style="margin-right: 15px" class="btn btn-default navbar-btn hidden-xs" id="caosdb-f-login-show-button" type="button">Login</button>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="paging-panel">
- <div class="container caosdb-paging-panel" style="display: none">
- <ul class="pager">
- <li class="previous">
- <a class="caosdb-prev-button">Previous Page</a>
- </li>
- <li class="next">
- <a class="caosdb-next-button">Next Page</a>
- </li>
- </ul>
+ <div class="caosdb-f-paging-panel mb-2">
+ <a type="button" class="caosdb-prev-button btn btn-light">Previous Page</a>
+ <a type="button" class="caosdb-next-button btn btn-light">Next Page</a>
</div>
</xsl:template>
</xsl:stylesheet>
diff --git a/src/core/xsl/parent.xsl b/src/core/xsl/parent.xsl
index 12345d584248333a373f7150a19b44a8b542be29..9dd032b3a9d238e943f3be5e4f0e81a7c6b0d6e7 100644
--- a/src/core/xsl/parent.xsl
+++ b/src/core/xsl/parent.xsl
@@ -27,18 +27,18 @@
<xsl:apply-templates select="./RecordType"/>
</xsl:template>
<xsl:template match="RecordType">
- <span class="caosdb-parent-item small">
- <xsl:attribute name="id">
- <xsl:value-of select="generate-id()"/>
- </xsl:attribute>
- <span class="caosdb-f-parent-actions-panel">
- </span>
- <a class="caosdb-parent-name">
- <xsl:attribute name="href">
- <xsl:value-of select="concat($entitypath, @id)"/>
- </xsl:attribute>
- <xsl:value-of select="@name"/>
- </a>
+ <span class="badge caosdb-parent-item me-1">
+ <xsl:attribute name="id">
+ <xsl:value-of select="generate-id()"/>
+ </xsl:attribute>
+ <span class="caosdb-f-parent-actions-panel">
+ </span>
+ <a class="caosdb-parent-name">
+ <xsl:attribute name="href">
+ <xsl:value-of select="concat($entitypath, @id)"/>
+ </xsl:attribute>
+ <xsl:value-of select="@name"/>
+ </a>
</span>
</xsl:template>
</xsl:stylesheet>
diff --git a/src/core/xsl/query.xsl b/src/core/xsl/query.xsl
index 44d1c1bd6cff8f4b22138c1287af15713069ed79..2b647c07bebe7f7cd72198baf27e45318e25a18e 100644
--- a/src/core/xsl/query.xsl
+++ b/src/core/xsl/query.xsl
@@ -29,7 +29,7 @@
<xsl:apply-templates select="ParsingError"/>
</xsl:template>
<xsl:template match="ParseTree/ParsingError" mode="query-results">
- <div class="panel-body">
+ <div class="card-body">
<div class="caosdb-overflow-box">
<div class="caosdb-overflow-content">
<span>ParseTree:</span>
@@ -50,8 +50,8 @@
</div>
</xsl:template>
<xsl:template match="Query" mode="query-results">
- <div class="panel panel-default caosdb-query-response">
- <div class="panel-heading caosdb-query-response-heading">
+ <div class="card caosdb-query-response mb-2">
+ <div class="card-header caosdb-query-response-heading">
<div class="row">
<div class="col-sm-10 caosdb-overflow-box">
<div class="caosdb-overflow-content">
@@ -59,7 +59,7 @@
<xsl:value-of select="@string"/>
</div>
</div>
- <div class="col-sm-2 text-right">
+ <div class="col-sm-2 text-end">
<span>Results: </span>
<span class="caosdb-query-response-results">
<xsl:value-of select="@results"/>
@@ -68,7 +68,7 @@
</div>
</div>
<xsl:if test="@results=0">
- <div class="panel panel-default caosdb-no-results">
+ <div class="card caosdb-no-results">
<div class="alert alert-warning" role="alert">
There were no results for this query.
</div>
@@ -81,36 +81,36 @@
</xsl:if>
</xsl:template>
<xsl:template match="Selection" mode="select-table">
- <div class="panel panel-default caosdb-select-table">
- <div class="panel-heading">
+ <div class="card caosdb-select-table">
+ <div class="card-header">
<div class="container-fluid panel-container">
<div class="col-xs-6">
<h5>Table of selected fields</h5>
</div>
- <div class="col-xs-6 text-right">
+ <div class="col-xs-6 text-end">
<!-- Trigger the modal with a button -->
- <button class="btn btn-info btn-sm caosdb-v-btn-select" data-target="#downloadModal" data-toggle="modal" type="button">Export</button>
+ <button class="btn btn-info btn-sm caosdb-v-btn-select" data-bs-target="#downloadModal" data-bs-toggle="modal" type="button">Export</button>
<!-- Modal -->
<div class="modal fade text-left" id="downloadModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
- <div class="modal-header">
- <button class="close" data-dismiss="modal" type="button">×</button>
- <h4 class="modal-title">Download this table</h4>
+ <div class="modal-header align-middle">
+ <h4 class="modal-title">Download this table</h4>
+ <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
</div>
- <div class="modal-body">
+ <div class="modal-body text-start">
<p>
<a id="caosdb-f-query-select-data-tsv" onclick="downloadTSV(this)" href="#selected_data.tsv" download="selected_data.tsv">
Download table as TSV File
</a>
- <span class="checkbox" style="margin-top: 0; display: inline; position: absolute; right: 10px"><label><input type="checkbox" name="raw" id="caosdb-table-export-raw-flag-tsv" title="Export raw entity ids instead of the visible page content."/>raw</label></span>
+ <span class="form-check" style="margin-top: 0; display: inline; position: absolute; right: 1rem"><label><input type="checkbox" class="me-1" name="raw" id="caosdb-table-export-raw-flag-tsv" title="Export raw entity ids instead of the visible page content."/>raw</label></span>
</p>
<p>
<a class="caosdb-v-query-select-data-xsl" onclick="downloadXLS(this)" href="#selected_data.xsl" download="">
Download table as XLS File
</a>
- <span class="checkbox" style="margin-top: 0; display: inline; position: absolute; right: 10px"><label><input type="checkbox" name="raw" id="caosdb-table-export-raw-flag-xls" title="Export raw entity ids instead of the visible page content."/>raw</label></span>
+ <span class="form-check" style="margin-top: 0; display: inline; position: absolute; right: 1rem"><label><input type="checkbox" class="me-1" name="raw" id="caosdb-table-export-raw-flag-xls" title="Export raw entity ids instead of the visible page content."/>raw</label></span>
</p>
<p>
<a id="caosdb-f-query-select-files" onclick="ext_file_download.download_files(this)" href="#selected_data.tsv" download="files.zip" title="Collects file entities listed in the table in a zip file. If the entity belonging to a row is a file entity, it will be included.">
@@ -132,7 +132,7 @@
<div class="col-xs-6 caosdb-f-modal-footer-left">
</div>
<div class="col-xs-6">
- <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
+ <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
@@ -142,31 +142,29 @@
</div>
</div>
</div>
- <div class="caosdb-select-table-actions-panel text-right btn-group-xs"></div>
- <div class="panel-body">
- <div class="table-responsive">
- <table class="table table-hover">
- <thead>
- <tr>
- <th></th>
- <xsl:for-each select="Selector">
- <th>
- <xsl:value-of select="@name"/>
- </th>
- </xsl:for-each>
- </tr>
- </thead>
- <tbody>
- <xsl:for-each select="/Response/*[@id]">
- <xsl:call-template name="select-table-row">
- <xsl:with-param name="entity-id" select="@id"/>
- <xsl:with-param name="version-id" select="Version/@id"/>
- <xsl:with-param name="ishead" select="Version/@head"/>
- </xsl:call-template>
+ <div class="caosdb-select-table-actions-panel text-end btn-group-sm"></div>
+ <div class="card-body">
+ <table class="table ttable-responsive able-hover">
+ <thead>
+ <tr>
+ <th></th>
+ <xsl:for-each select="Selector">
+ <th>
+ <xsl:value-of select="@name"/>
+ </th>
</xsl:for-each>
- </tbody>
- </table>
- </div>
+ </tr>
+ </thead>
+ <tbody>
+ <xsl:for-each select="/Response/*[@id]">
+ <xsl:call-template name="select-table-row">
+ <xsl:with-param name="entity-id" select="@id"/>
+ <xsl:with-param name="version-id" select="Version/@id"/>
+ <xsl:with-param name="ishead" select="Version/@head"/>
+ </xsl:call-template>
+ </xsl:for-each>
+ </tbody>
+ </table>
</div>
</div>
</xsl:template>
@@ -174,7 +172,7 @@
<xsl:param name="entity-id"/>
<xsl:param name="version-id"/>
<xsl:param name="ishead"/>
- <a class="btn btn-default btn-sm caosdb-select-id">
+ <a class="btn btn-secondary btn-sm caosdb-select-id" title="Go to this entity.">
<xsl:attribute name="href">
<xsl:value-of select="concat($entitypath, $entity-id)"/>
<xsl:if test="$version-id and not($ishead)">
@@ -183,7 +181,7 @@
</xsl:attribute>
<!-- <xsl:value-of select="$entity-id" /> -->
<span class="caosdb-select-id-target">
- <span class="glyphicon glyphicon-new-window"/>
+ <i class="bi bi-box-arrow-up-right"></i>
</span>
</a>
</xsl:template>
@@ -250,15 +248,17 @@
<xsl:with-param name="value">
<xsl:value-of select="@*[translate(name(), $uppercase, $lowercase)=$first-segment]"/>
</xsl:with-param>
+ <xsl:with-param name="reference" select="'false'"/>
+ <xsl:with-param name="boolean" select="'false'"/>
</xsl:call-template>
</xsl:when>
<xsl:when test="translate($first-segment, $uppercase, $lowercase)='version'">
<!--handle version-->
<xsl:call-template name="single-value">
- <xsl:with-param name="value">
- <xsl:value-of select="Version/@id"/>
- </xsl:with-param>
+ <xsl:with-param name="value" select="Version/@id"/>
+ <xsl:with-param name="reference" select="'false'"/>
+ <xsl:with-param name="boolean" select="'false'"/>
</xsl:call-template>
</xsl:when>
@@ -270,9 +270,9 @@
<xsl:when test="translate($next-segments, $uppercase, $lowercase)='unit'">
<!--handle unit-->
<xsl:call-template name="single-value">
- <xsl:with-param name="value">
- <xsl:value-of select="@unit"/>
- </xsl:with-param>
+ <xsl:with-param name="value" select="@unit"/>
+ <xsl:with-param name="reference" select="'false'"/>
+ <xsl:with-param name="boolean" select="'false'"/>
</xsl:call-template>
</xsl:when>
@@ -307,24 +307,24 @@
<xsl:with-param name="value">
<xsl:value-of select="@*[translate(name(), $uppercase, $lowercase)=$first-segment]"/>
</xsl:with-param>
+ <xsl:with-param name="reference" select="'false'"/>
+ <xsl:with-param name="boolean" select="'false'"/>
</xsl:call-template>
</xsl:when>
<xsl:when test="translate($first-segment, $uppercase, $lowercase)='version'">
<!--handle version-->
<xsl:call-template name="single-value">
- <xsl:with-param name="value">
- <xsl:value-of select="Version/@id"/>
- </xsl:with-param>
+ <xsl:with-param name="value" select="Version/@id"/>
+ <xsl:with-param name="reference" select="'false'"/>
+ <xsl:with-param name="boolean" select="'false'"/>
</xsl:call-template>
</xsl:when>
<xsl:when test="$next-segments">
<!-- when there is a next-segmenst -->
<xsl:apply-templates select="Property[translate(@name, $uppercase, $lowercase)=$first-segment]" mode="walk-select-segments">
- <xsl:with-param name="next-segments">
- <xsl:value-of select="$next-segments"/>
- </xsl:with-param>
+ <xsl:with-param name="next-segments" select="$next-segments"/>
</xsl:apply-templates>
</xsl:when>
@@ -338,21 +338,17 @@
<xsl:template name="caosdb-query-panel">
<!-- query panel, this is the area which contains the query form and other related stuff (e.g. query short cuts). -->
- <div class="container caosdb-query-panel">
- <form class="panel" id="caosdb-query-form" method="GET">
+ <form class="card caosdb-query-form" id="caosdb-query-form" method="GET">
<xsl:attribute name="action">
<xsl:value-of select="$entitypath"/>
</xsl:attribute>
<input id="caosdb-query-paging-input" name="P" type="hidden" value="0L10"/>
<div class="input-group">
<input class="form-control" id="caosdb-query-textarea" name="query" placeholder="E.g. 'FIND Experiment'" rows="1" style="resize: vertical;" type="text"></input>
- <span class="input-group-addon btn btn-default caosdb-search-btn">
- <a href="#" title="Click to execute the query.">
- <span class="glyphicon glyphicon-search"></span>
+ <a class="btn btn-secondary caosdb-search-btn" href="#" title="Click to execute the query.">
+ <i class="bi-search"></i>
</a>
- </span>
</div>
</form>
- </div>
</xsl:template>
</xsl:stylesheet>
diff --git a/src/core/xsl/welcome.xsl b/src/core/xsl/welcome.xsl
index 88b2a6e733b6f0726cae02a83c6e88579fdd1918..c3c80222492abaf243cbf227b143a9c13546a3f1 100644
--- a/src/core/xsl/welcome.xsl
+++ b/src/core/xsl/welcome.xsl
@@ -25,7 +25,7 @@
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template name="welcome">
- <div class="jumbotron caosdb-f-welcome-panel">
+ <div class="caosdb-v-welcome-panel bg-light container">
<h1>Welcome</h1>
<p>This is CaosDB.</p>
<p>This is the default welcome message. If you are an administrator you can override it. Just copy <code>src/core/xsl/welcome.xsl</code> to <code>src/ext/xsl/welcome.xsl</code> and change this content. Then run <code>make</code> again in CaosdDB's web interface's root directory.</p>
diff --git a/src/doc/tutorials/change-entity.png b/src/doc/tutorials/change-entity.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddae63fa841976709b2dcf98389e578d79998f03
Binary files /dev/null and b/src/doc/tutorials/change-entity.png differ
diff --git a/src/doc/tutorials/delete-entity-button.png b/src/doc/tutorials/delete-entity-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..c118b8217a63d00eeee6469731d8561810a8d7d4
Binary files /dev/null and b/src/doc/tutorials/delete-entity-button.png differ
diff --git a/src/doc/tutorials/edit-entity-button.png b/src/doc/tutorials/edit-entity-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..79003121df69cc615890589941079e766f970775
Binary files /dev/null and b/src/doc/tutorials/edit-entity-button.png differ
diff --git a/src/doc/tutorials/edit-mode-button.png b/src/doc/tutorials/edit-mode-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..28dd167a5887be45d6c41581a4645e796c3b6328
Binary files /dev/null and b/src/doc/tutorials/edit-mode-button.png differ
diff --git a/src/doc/tutorials/edit-mode-toolbox.png b/src/doc/tutorials/edit-mode-toolbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..e291c43a77e41adfa9f2b821d90f9982449c5f9f
Binary files /dev/null and b/src/doc/tutorials/edit-mode-toolbox.png differ
diff --git a/src/doc/tutorials/edit_mode.rst b/src/doc/tutorials/edit_mode.rst
new file mode 100644
index 0000000000000000000000000000000000000000..3e7d9ffb4472ab8ff0ec9a4539ab9ab11563ffd2
--- /dev/null
+++ b/src/doc/tutorials/edit_mode.rst
@@ -0,0 +1,185 @@
+The Edit Mode
+=============
+
+Entities in CaosDB can be changed, created, and deleted using the
+``Edit Mode``. In the following chapter, you'll learn how. You should
+be fairly familiar with the concepts of Records, RecordTypes and
+Properties in CaosDB. If you have doubts, please have a look at the
+`data model documentation
+<https://docs.indiscale.com/caosdb-server/Data-Model.html>`_.
+
+In usual setups of CaosDB, you have to log in to use the edit
+mode. Afterwards, you can access it by clicking on the button in the
+to panel as shown below:
+
+.. image:: edit-mode-button.png
+ :width: 480
+ :alt: Edit mode button
+
+After entering the edit mode, the button changes its text to ``Leave
+Edit Mode``. Unsurprisingly, clicking here terminates the edit mode.
+
+.. note::
+
+ The edit mode is only available if you have sufficient
+ privileges. You can only create/edit/delete entities if your user
+ is allowed to do that. User and group permissions can be configured
+ in detail as explained in the `server documentation
+ <https://docs.indiscale.com/caosdb-server/Permissions.html>`_.
+
+When you have entered the edit mode, you'll see the edit mode toolbox
+appearing on the right hand side of your screen:
+
+.. image:: edit-mode-toolbox.png
+ :width: 240
+ :alt: Edit mode toolbox
+
+You'll learn more about its contents in the following sections. Right
+now it only contains the options for creating a new RecordType or
+Property which we'll explain in :ref:`new_recordtypes_properties`.
+
+.. _change_existing:
+
+Changing an existing Entity
+---------------------------
+
+We'll start by changing and updating existing entities. First, find
+the entity you want to change and enter the edit mode. You'll see an
+edit button in the top right of the entity card:
+
+.. image:: edit-entity-button.png
+ :width: 240
+ :alt: Edit entity button
+
+After clicking on this button, the edit menu for this entity is opened
+as shown below for a guitar Record from the `demo
+<https://demo.indiscale.com>`_. You'll also note that the edit mode
+toolbox changes its contents: It now harbours two lists of the
+existing Properties and RecordTypes.
+
+.. image:: change-entity.png
+ :width: 720
+ :alt: Changing an existing Record
+
+Property values can be changed in the entity card directly; additional
+parents can be added by dragging them from the list of RecordTypes to
+the corresponding area at the top of the Record. Similarly, Properties
+can be added by dragging Properties (or RecordTypes) from the list in the edit mode toolbox
+to the corresponding area at the bottom of the Record. Properties and
+parents can be removed from the entity by clicking on the trash-can
+symbol. Not that a Record must always have at least one parent.
+
+Changes will be applied after clicking on ``Save`` or can be discarded
+entirely by clicking ``Cancel``. Existing Properties and RecordTypes
+can be edited in the same way. Note that when changing a RecordType,
+the properties don't have values.
+
+
+Creating a new Record
+---------------------
+
+If you want to create a new Record of a given RecordType, visit that
+RecordType and enter the edit mode (if your new Record will have more
+than one parent, visit any one of them - you can add the others
+later). A new Record is then created by clicking on the ``+Record``
+button in the top right of the RecordType:
+
+.. image:: new-record.png
+ :width: 240
+ :alt: New record button
+
+Clicking here opens an entity card with an edit menu for the new
+Record similar to the one discussed in :ref:`change_existing`. In
+here, you can enter the name and the description of your new Record,
+assign values to its properties, and add further parents or properties
+from the corresponding lists in the edit mode toolbox. The new Record
+is inserted by clicking ``Save``.
+
+.. _new_recordtypes_properties:
+
+Creating new RecordTypes and Properties
+---------------------------------------
+
+You can extend the data model of your CaosDB by creating new
+RecordTypes and Properties directly from the WebUI. This is done by
+clicking on the corresponding buttons in the edit mode toolbox:
+
+.. image:: edit-mode-toolbox.png
+ :width: 240
+ :alt: Edit mode toolbox
+
+When creating a new RecordType, a RecordType card is added to the
+entity panel, similar to the new Record explained above:
+
+.. image:: new-recordtype.png
+ :width: 720
+ :alt: Create a new RecordType
+
+As above, you can enter a name and a description. You can add parents
+and properties by selecting them from the lists in the edit mode
+toolbox and dragging them to the respective areas in the new
+RecordType. Note that in contrast to Records, the properties of
+RecordTypes do not have values.
+
+When creating a new property name and description can be entered as
+above. In addition, the `datatype` can be selected from the CaosDB
+datatypes ``TEXT``, ``DOUBLE``, ``INTEGER``, ``DATETIME``,
+``BOOLEAN``, ``FILE``, and ``REFERENCE``. See `here
+<https://docs.indiscale.com/caosdb-server/specification/Datatype.html>`_
+for more information on the datatypes. You can also choose whether the
+new property should have a single value or a list of values.
+
+.. image:: new-property.png
+ :width: 720
+ :alt: Create a new Property
+
+When creating a property with datatype ``INTEGER`` or ``DOUBLE``,
+i.e., a number, you may enter a unit in an additional input field if
+applicable. In case of a ``REFERENCE`` property, you may specify the
+RecordType that all referenced Records must have. In the above example
+a ``REFERENCE`` property is created which may only have violins as
+values. Again, the new entity is created by clicking on ``save``.
+
+.. note::
+
+ After having created a new RecordType or Property, you may have to
+ leave and re-enter the edit mode for the new entity to appear in
+ the lists of Properties or RecordTypes in the edit mode toolbox.
+
+Deleting an Entity
+------------------
+
+Entities can also be deleted by clicking on the delete button in the
+top right of the entity:
+
+.. image:: delete-entity-button.png
+ :width: 240
+ :alt: Delete entity button
+
+After clicking on ``delete`` you'll be asked for confirmation. Note that
+entities cannot be deleted if they are needed by other entities, e.g.,
+as a reference.
+
+
+Uploading files
+---------------
+
+In case of properties with data type ``FILE``, you can use the edit
+mode to upload a corresponding file directly. When editing the Record
+which will have the file to be uploaded as the value of the
+corresponding property (named ``SourceFile`` in the example below),
+add the property as described above if it isn't present already. Next
+to the dropdown menu, in which you can choose from existing files, you
+find an uploaded button:
+
+.. image:: file-upload.png
+ :width: 720
+ :alt: File upload button
+
+Click on it to open an upload dialogue in which you can choose the
+file that you want to upload. The files uploaded this way will be
+stored within ``/uploaded.by/<REALM>/<USER>/``.
+
+The same is true for properties with data type ``REFERENCE``, too. In
+that case, the Record of the file that is uploaded will be assigned the
+RecordType of value of the original reference property.
diff --git a/src/doc/tutorials/file-upload.png b/src/doc/tutorials/file-upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..85c9224a6453cc219e7510b13fb1c5869f7c01c6
Binary files /dev/null and b/src/doc/tutorials/file-upload.png differ
diff --git a/src/doc/tutorials/index.rst b/src/doc/tutorials/index.rst
index dbfeafed2a09d587ebd538a62ed9002943b52aa0..b01e45e3d574cd675b8410da1dbd1d79cb8e20c0 100644
--- a/src/doc/tutorials/index.rst
+++ b/src/doc/tutorials/index.rst
@@ -8,4 +8,7 @@ This chapter contains the following tutorials:
:maxdepth: 2
:glob:
+ first_steps
+ query
+ edit_mode
*
diff --git a/src/doc/tutorials/new-property.png b/src/doc/tutorials/new-property.png
new file mode 100644
index 0000000000000000000000000000000000000000..af438007278b2ddf30fae4f56fb803bfda06577f
Binary files /dev/null and b/src/doc/tutorials/new-property.png differ
diff --git a/src/doc/tutorials/new-record.png b/src/doc/tutorials/new-record.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b2ac31afa78ca2aa20ee8f5f83f9a04ce39be30
Binary files /dev/null and b/src/doc/tutorials/new-record.png differ
diff --git a/src/doc/tutorials/new-recordtype.png b/src/doc/tutorials/new-recordtype.png
new file mode 100644
index 0000000000000000000000000000000000000000..9519a9ada3b034c01308ac4a4c350954d9d32d65
Binary files /dev/null and b/src/doc/tutorials/new-recordtype.png differ
diff --git a/src/ext/js/fileupload.js b/src/ext/js/fileupload.js
index 395da76adf977e5b534d6923e107f4261494a4c2..31d86589286f1761f481cc9d9bb6a557a63cbce1 100644
--- a/src/ext/js/fileupload.js
+++ b/src/ext/js/fileupload.js
@@ -25,18 +25,31 @@ var fileupload = new function() {
// TODO * action to config * upload-path id -> class * message configurable
// * style path input
- const _modal_str = ` <div class="modal fade" tabindex="-1" role="dialog">
- <div class="modal-dialog modal-lg" role="document"> <div
- class="modal-content"> <div class="modal-header"> <button type="button"
- class="close" data-dismiss="modal">×</button> <h4
- class="modal-title">File Upload</h4> </div> <div class="modal-body"> <form
- action="/Entity/" class="dropzone dz-clickable" > <label>path</label><input
- id="upload-path" type="text" value="/"/> <div class="dz-message">
- Drag'n'drop files to this area or click to upload. </div> </form> </div>
- <div class="modal-footer"> <button type="button" class="btn btn-default
- caosdb-f-file-upload-submit-button">Ok</button> <button type="button"
- class="btn btn-default" data-dismiss="modal">Close</button> </div> </div>
- </div> </div>`;
+ const _modal_str = `
+<div class="modal fade" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-lg" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title">File Upload</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal">
+ </button>
+ </div>
+ <div class="modal-body">
+ <form action="/Entity/" class="dropzone dz-clickable" >
+ <label>path</label>
+ <input id="upload-path" type="text" value="/"/>
+ <div class="dz-message">
+ Drag'n'drop files to this area or click to upload.
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary caosdb-f-file-upload-submit-button">Ok</button>
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+</div>`;
/** Create a dropzone.js form for the file upload.
*/
@@ -121,8 +134,8 @@ var fileupload = new function() {
// add error message
input.after(`<div class="alert alert-danger alert-dismissible"
role="alert">
- <button type="button" class="close" data-dismiss="alert"
- aria-label="Close"><span aria-hidden="true">×</span></button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert"
+ aria-label="Close"></button>
<strong>Error!</strong> You are not logged in!.</div>`);
} else {
globalError(event, error, xhr);
@@ -187,13 +200,13 @@ var fileupload = new function() {
// add success message
input.after(`<div class="alert alert-success alert-dismissible"
role="alert">
- <button type="button" class="close" data-dismiss="alert"
- aria-label="Close"><span aria-hidden="true">×</span></button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert"
+ aria-label="Close"></button>
<strong>Success!</strong>
The file <code class="caosdb-f-file-upload-file-name">` +
getEntityName(entity) + `</code> has been uploaded.</div>`);
- input.after(`<a class="btn btn-default btn-sm"
+ input.after(`<a class="btn btn-secondary btn-sm"
href="` + connection.getEntityUri([getEntityId(entity)]) + `" target= "_blank">` +
getEntityName(entity) + `</a>`);
@@ -206,7 +219,7 @@ var fileupload = new function() {
* @return {HTMLElement} a button element.
*/
this.create_small_icon_button = function() {
- var button = $('<button class="caosdb-f-file-upload-button btn btn-link navbar-btn" ><span class="glyphicon glyphicon-upload" aria-hidden="true"></span></button>');
+ var button = $('<button class="caosdb-f-file-upload-button btn btn-link navbar-btn" ><i aria-hidden="true" class="bi-upload"></button>');
return button[0];
};
@@ -308,7 +321,7 @@ var fileupload = new function() {
error_handler,
atom_par);
var toggle_function = function() {
- $(modal).modal()
+ $(modal).modal("toggle");
};
this.add_file_upload_button(edit_menu, button, toggle_function);
diff --git a/src/linkahead_icon_512.png b/src/linkahead_icon_512.png
new file mode 100644
index 0000000000000000000000000000000000000000..84d1b5ebd715b55418444787c82689b28d917e24
Binary files /dev/null and b/src/linkahead_icon_512.png differ
diff --git a/test/core/html/form_elements_example_1.html b/test/core/html/form_elements_example_1.html
index 9977e5d91c02cc0e4dd08e9f0939c85f98c6c1be..27da98afdaffd44ac6560d72724e5e40d50655f0 100644
--- a/test/core/html/form_elements_example_1.html
+++ b/test/core/html/form_elements_example_1.html
@@ -3,8 +3,8 @@
.caosdb-f-property-single-raw-value or introduce new
.caosdb-v-property-text-value -->
<form action="#" class="form-horizontal" method="post" name="sample_creation.py">
- <div class="form-group caosdb-f-field caosdb-f-entity-property caosdb-f-form-field-required caosdb-f-form-field-cached" data-field-name="ice_core" data-groups="(part1)">
- <label class="control-label col-sm-3" data-property-name="ice_core" for="ice_core">Ice Core</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property caosdb-f-form-field-required caosdb-f-form-field-cached" data-field-name="ice_core" data-groups="(part1)">
+ <label class="col-form-label col-sm-3" data-property-name="ice_core" for="ice_core">Ice Core</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select form-control bs3">
<select class="selectpicker form-control" name="ice_core" tabindex="-98" title="Nothing selected">
@@ -16,7 +16,7 @@
<option value="6347">EGRIP18</option>
<option value="6348">EGRIP19</option>
</select>
- <button aria-expanded="false" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="EGRIP15" type="button">
+ <button aria-expanded="false" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" role="button" title="EGRIP15" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">EGRIP15</div>
@@ -64,8 +64,8 @@
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="orig_sample_type" data-groups="(part1)">
- <label class="control-label col-sm-3" data-property-name="orig_sample_type" for="orig_sample_type">Original Sample Type</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="orig_sample_type" data-groups="(part1)">
+ <label class="col-form-label col-sm-3" data-property-name="orig_sample_type" for="orig_sample_type">Original Sample Type</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select form-control bs3">
<select class="selectpicker form-control" name="orig_sample_type" tabindex="-98" title="Nothing selected">
@@ -78,7 +78,7 @@
<option value="6338">PP_Sample</option>
<option value="6340">LASM_Sample</option>
</select>
- <button aria-expanded="false" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="IceSample" type="button">
+ <button aria-expanded="false" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" role="button" title="IceSample" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">IceSample</div>
@@ -131,8 +131,8 @@
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property caosdb-f-field-disabled" data-field-name="logging_protocol" data-groups="(part2)" style="display: none;">
- <label class="control-label col-sm-3" data-property-name="logging_protocol" for="logging_protocol">Logging Protocol</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property caosdb-f-field-disabled" data-field-name="logging_protocol" data-groups="(part2)" style="display: none;">
+ <label class="col-form-label col-sm-3" data-property-name="logging_protocol" for="logging_protocol">Logging Protocol</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select form-control bs3">
<select class="selectpicker form-control" name="logging_protocol" tabindex="-98" title="Nothing selected">
@@ -140,7 +140,7 @@
<option disabled="disabled" selected="selected" style="display: none" value=""></option>
<option value="6350">/logging_protocol_2019-06-15.pdf</option>
</select>
- <button class="btn dropdown-toggle btn-default bs-placeholder" data-toggle="dropdown" role="button" title="Nothing selected" type="button">
+ <button class="btn dropdown-toggle btn-secondary bs-placeholder" data-toggle="dropdown" role="button" title="Nothing selected" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">Nothing selected</div>
@@ -157,8 +157,8 @@
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="cutting_protocol" data-groups="(part3)" style="">
- <label class="control-label col-sm-3" data-property-name="cutting_protocol" for="cutting_protocol">Cutting Protocol</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="cutting_protocol" data-groups="(part3)" style="">
+ <label class="col-form-label col-sm-3" data-property-name="cutting_protocol" for="cutting_protocol">Cutting Protocol</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select form-control bs3">
<select class="selectpicker form-control" name="cutting_protocol" tabindex="-98" title="Nothing selected">
@@ -166,7 +166,7 @@
<option disabled="disabled" selected="selected" style="display: none" value=""></option>
<option value="6349">/cutting_protocol_2019-08-15.pdf</option>
</select>
- <button aria-expanded="false" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="/cutting_protocol_2019-08-15.pdf" type="button">
+ <button aria-expanded="false" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" role="button" title="/cutting_protocol_2019-08-15.pdf" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">/cutting_protocol_2019-08-15.pdf</div>
@@ -194,29 +194,29 @@
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property caosdb-f-form-field-required" data-field-name="cutting_date" data-groups="(part2)(part3)" style="">
- <label class="control-label col-sm-3" data-property-name="cutting_date" for="cutting_date">Cutting Date</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property caosdb-f-form-field-required" data-field-name="cutting_date" data-groups="(part2)(part3)" style="">
+ <label class="col-form-label col-sm-3" data-property-name="cutting_date" for="cutting_date">Cutting Date</label>
<div class="caosdb-f-property-value col-sm-9">
<input class="form-control caosdb-property-text-value" name="cutting_date" type="date"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="bag_numbers" data-groups="(part2)(part3)" style="">
- <label class="control-label col-sm-3" data-property-name="bag_numbers" for="bag_numbers">Bag Numbers</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="bag_numbers" data-groups="(part2)(part3)" style="">
+ <label class="col-form-label col-sm-3" data-property-name="bag_numbers" for="bag_numbers">Bag Numbers</label>
<div class="caosdb-f-field caosdb-f-entity-property" data-field-name="bag_numbers_from">
- <label class="control-label col-sm-1" data-property-name="bag_numbers_from" for="bag_numbers_from">from</label>
+ <label class="col-form-label col-sm-1" data-property-name="bag_numbers_from" for="bag_numbers_from">from</label>
<div class="caosdb-f-property-value col-sm-3">
<input class="form-control caosdb-property-text-value" name="bag_numbers_from" step="1" type="number"/>
</div>
</div>
<div class="caosdb-f-field caosdb-f-entity-property" data-field-name="bag_numbers_to">
- <label class="control-label col-sm-1 col-sm-offset-1" data-property-name="bag_numbers_to" for="bag_numbers_to">to</label>
+ <label class="col-form-label col-sm-1 col-sm-offset-1" data-property-name="bag_numbers_to" for="bag_numbers_to">to</label>
<div class="caosdb-f-property-value col-sm-3">
<input class="form-control caosdb-property-text-value" name="bag_numbers_to" step="1" type="number"/>
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="box_of_new_samples" data-groups="(part2)(part3)" style="">
- <label class="control-label col-sm-3" data-property-name="box_of_new_samples" for="box_of_new_samples">Box of New Samples</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="box_of_new_samples" data-groups="(part2)(part3)" style="">
+ <label class="col-form-label col-sm-3" data-property-name="box_of_new_samples" for="box_of_new_samples">Box of New Samples</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select form-control bs3">
<select class="selectpicker form-control" name="box_of_new_samples" tabindex="-98" title="Nothing selected">
@@ -230,7 +230,7 @@
<option value="2123">1112</option>
<option value="4434">6053</option>
</select>
- <button aria-expanded="false" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="0062" type="button">
+ <button aria-expanded="false" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" role="button" title="0062" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">0062</div>
@@ -288,8 +288,8 @@
</div>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="new_subsamples_selector" data-groups="(part3)" style="">
- <label class="control-label col-sm-3" data-property-name="new_subsamples_selector" for="new_subsamples_selector">New Subsamples</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="new_subsamples_selector" data-groups="(part3)" style="">
+ <label class="col-form-label col-sm-3" data-property-name="new_subsamples_selector" for="new_subsamples_selector">New Subsamples</label>
<div class="col-sm-9">
<div class="dropdown bootstrap-select show-tick form-control bs3">
<select class="selectpicker form-control" multiple="multiple" name="new_subsamples_selector" tabindex="-98" title="Nothing selected">
@@ -297,7 +297,7 @@
<option value="6338">PP_Sample</option>
<option value="6340">LASM_Sample</option>
</select>
- <button aria-expanded="false" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Subsample, PP_Sample" type="button">
+ <button aria-expanded="false" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" role="button" title="Subsample, PP_Sample" type="button">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">Subsample, PP_Sample</div>
@@ -336,25 +336,25 @@
<div class="col-sm-9 col-sm-offset-3 row" style="background-color: rgb(255, 255, 255);">
<fieldset class="form-inline caosdb-f-form-elements-subform" data-subform-name="new_subsamples" id="new_subsamples_6335" style="padding-left: 15px; padding-right: 15px;">
<legend>Subsample</legend>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="type">
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="type">
<div class="caosdb-f-property-value col-sm-9">
<input class="form-control caosdb-property-text-value" name="type" type="hidden" value="6335"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="width" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="width" for="width">width (cm)</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="width" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="width" for="width">width (cm)</label>
<div class="caosdb-f-property-value">
<input class="form-control caosdb-property-text-value" name="width" step="any" type="number"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="height" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="height" for="height">height (cm)</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="height" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="height" for="height">height (cm)</label>
<div class="caosdb-f-property-value">
<input class="form-control caosdb-property-text-value" name="height" step="any" type="number"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="rectangular" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="rectangular" for="rectangular">rectangular</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="rectangular" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="rectangular" for="rectangular">rectangular</label>
<div class="caosdb-f-property-value">
<input class="caosdb-property-text-value" name="rectangular" type="checkbox"/>
</div>
@@ -362,25 +362,25 @@
</fieldset>
<fieldset class="form-inline caosdb-f-form-elements-subform" data-subform-name="new_subsamples" id="new_subsamples_6338" style="padding-left: 15px; padding-right: 15px;">
<legend>PP_Sample</legend>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="type">
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="type">
<div class="caosdb-f-property-value col-sm-9">
<input class="form-control caosdb-property-text-value" name="type" type="hidden" value="6338"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="width" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="width" for="width">width (cm)</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="width" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="width" for="width">width (cm)</label>
<div class="caosdb-f-property-value">
<input class="form-control caosdb-property-text-value" name="width" step="any" type="number"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="height" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="height" for="height">height (cm)</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="height" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="height" for="height">height (cm)</label>
<div class="caosdb-f-property-value">
<input class="form-control caosdb-property-text-value" name="height" step="any" type="number"/>
</div>
</div>
- <div class="form-group caosdb-f-field caosdb-f-entity-property" data-field-name="rectangular" style="margin-left: 15px; margin-right: 15px;">
- <label class="control-label" data-property-name="rectangular" for="rectangular">rectangular</label>
+ <div class="form-control caosdb-f-field caosdb-f-entity-property" data-field-name="rectangular" style="margin-left: 15px; margin-right: 15px;">
+ <label class="col-form-label" data-property-name="rectangular" for="rectangular">rectangular</label>
<div class="caosdb-f-property-value">
<input class="caosdb-property-text-value" name="rectangular" type="checkbox"/>
</div>
@@ -388,8 +388,8 @@
</fieldset>
</div>
<div class="text-right caosdb-f-form-elements-footer">
- <button class="caosdb-f-form-elements-submit-button btn btn-primary btn-default" type="submit">Submit</button>
- <button class="caosdb-f-form-elements-cancel-button btn btn-primary btn-default" type="button">Cancel</button>
+ <button class="caosdb-f-form-elements-submit-button btn btn-primary btn-secondary" type="submit">Submit</button>
+ <button class="caosdb-f-form-elements-cancel-button btn btn-primary btn-secondary" type="button">Cancel</button>
</div>
</form>
</div>
diff --git a/test/core/index.html b/test/core/index.html
index a725205ea767d38c29931a074a7671a2fbd22bc2..0dfea85580fe64d0f7a4676f1d919ec5662dee09 100644
--- a/test/core/index.html
+++ b/test/core/index.html
@@ -22,77 +22,19 @@
* ** end header
-->
<html>
-<head>
- <meta charset="utf-8"/>
- <title>WebCaosDB Unit Tests</title>
- <link rel="stylesheet" href="css/qunit.css"/>
- <link rel="stylesheet" href="css/webcaosdb.css"/>
- <link rel="stylesheet" href="css/leaflet.css"/>
-</head>
-<body>
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
- <script src="js/jquery.js"></script>
- <script src="js/loglevel.js"></script>
- <script src="js/bootstrap.js"></script>
- <script src="js/bootstrap-select.js"></script>
- <script src="js/bootstrap-autocomplete.min.js"></script>
- <script src="js/utif.js"></script>
- <script src="js/pako.js"></script>
- <script src="js/webcaosdb.js"></script>
- <script src="js/plotly.js"></script>
- <script>
- caosdb_modules.auto_init = false;
- log.setLevel("trace");
- </script>
- <script src="js/caosdb.js"></script>
- <script src="js/state-machine.js"></script>
- <script src="js/showdown.js"></script>
- <script src="js/qunit.js"></script>
- <script src="js/dropzone.js"></script>
- <script src="js/setup.js"></script>
- <script src="js/preview.js"></script>
- <script src="js/annotation.js"></script>
- <script src="js/edit_mode.js"></script>
- <script src="js/query_shortcuts.js"></script>
- <script src="js/ext_references.js"></script>
- <script src="js/ext_file_download.js"></script>
- <script src="js/ext_xls_download.js"></script>
- <script src="js/form_elements.js"></script>
- <script src="js/tour.js"></script>
- <script src="js/leaflet.js"></script>
- <script src="js/leaflet-graticule.js"></script>
- <script src="js/leaflet-latlng-graticule.js"></script>
- <script src="js/leaflet-coordinates.js"></script>
- <script src="js/proj4.js"></script>
- <script src="js/proj4leaflet.js"></script>
- <script src="js/ext_map.js"></script>
- <script src="js/ext_table_preview.js"></script>
- <script src="js/ext_bottom_line.js"></script>
- <script src="js/ext_autocomplete.js"></script>
- <script src="js/ext_sss_markdown.js"></script>
- <script src="js/ext_trigger_crawler_form.js"></script>
- <script src="js/ext_bookmarks.js"></script>
- <!--EXTENSIONS-->
- <script src="js/modules/webcaosdb.js.js"></script>
- <script src="js/modules/caosdb.js.js"></script>
- <script src="js/modules/common.xsl.js"></script>
- <script src="js/modules/entity.xsl.js"></script>
- <script src="js/modules/welcome.xsl.js"></script>
- <script src="js/modules/query.xsl.js"></script>
- <script src="js/modules/annotation.xsl.js"></script>
- <script src="js/modules/navbar.xsl.js"></script>
- <script src="js/modules/edit_mode.js.js"></script>
- <script src="js/modules/ext_xls_download.js.js"></script>
- <script src="js/modules/ext_file_download.js.js"></script>
- <script src="js/modules/query_shortcuts.js.js"></script>
- <script src="js/modules/form_elements.js.js"></script>
- <script src="js/modules/ext_references.js.js"></script>
- <script src="js/modules/ext_map.js.js"></script>
- <script src="js/modules/ext_bottom_line.js.js"></script>
- <script src="js/modules/ext_autocomplete.js.js"></script>
- <script src="js/modules/ext_sss_markdown.js.js"></script>
- <script src="js/modules/ext_trigger_crawler_form.js.js"></script>
- <script src="js/modules/ext_bookmarks.js.js"></script>
-</body>
+ <head>
+ <meta charset="utf-8" />
+ <title>WebCaosDB Unit Tests</title>
+ <link rel="stylesheet" href="css/qunit.css" />
+ <link rel="stylesheet" href="css/webcaosdb.css" />
+ <link rel="stylesheet" href="css/leaflet.css" />
+ </head>
+ <body>
+ <div id="qunit"></div>
+ <div id="qunit-fixture"></div>
+ <script>
+ var _caosdb_modules_auto_init = false;
+ </script>
+ <!--JS_INCLUDE-->
+ </body>
</html>
diff --git a/test/core/js/modules/annotation.xsl.js b/test/core/js/modules/annotation.xsl.js
index 20815816d5d1de75c4efeb11117f839bacd4ca1d..3640d93c0e1d33c638c92c9e2830c77c0e44ff40 100644
--- a/test/core/js/modules/annotation.xsl.js
+++ b/test/core/js/modules/annotation.xsl.js
@@ -35,7 +35,7 @@ QUnit.module("annotation.xsl", {
this.testCases = [];
- this.testCases[0] = '<Response><Record><Property name="annotationOf"/><History transaction="INSERT" datetime="2015-12-24T20:15:00" username="someuser"/><Property name="comment">This is a comment</Property></Record><Record><Property name="annotationOf"/></Record></Response>';
+ this.testCases[0] = '<Response><Record><Property name="annotationOf"/><Version head="true" date="2015-12-24T20:15:00" username="someuser"/><Property name="comment">This is a comment</Property></Record><Record><Property name="annotationOf"/></Record></Response>';
assert.ok(str2xml(this.testCases[0]));
}
});
@@ -63,10 +63,10 @@ QUnit.test("Record rule returns li elements", function(assert){
var media = annos[0].children[0];
assert.equal(media.tagName, "DIV", "is DIV");
- assert.equal(media.className, "media", "className is media");
+ assert.equal(media.className, "d-flex", "className is d-flex");
assert.equal(media.children.length, 2, "media has two children");
- assert.equal(media.children[0].className, "media-left");
- assert.equal(media.children[1].className, "media-body");
+ assert.equal(media.children[0].className, "d-shrink-0");
+ assert.equal(media.children[1].className, "flex-grow-1 ms-3");
});
@@ -75,12 +75,12 @@ QUnit.test("History element", function(assert){
var xml = str2xml(xml_str);
var html = xslt(xml, this.annotationXSL);
- var mediaBody = html.firstChild.getElementsByClassName("media-body")[0];
+ var mediaBody = html.firstChild.getElementsByClassName("caosdb-f-comment-body")[0];
assert.ok(mediaBody, "media-body is there");
assert.ok(mediaBody.children.length>0,"media-body has children");
- var mediaHeading = mediaBody.getElementsByClassName("media-heading")[0];
+
+ var mediaHeading = html.firstChild.getElementsByClassName("caosdb-f-comment-header")[0];
assert.ok(mediaHeading, "media-heading is there");
- assert.equal(mediaHeading.parentNode, mediaBody, "media-heading is child of media-body");
assert.ok(xml2str(mediaHeading).indexOf("someuser")!==-1, "username is there");
assert.ok(xml2str(mediaHeading).indexOf("2015-12-24T20:15:00")!==-1, "datetime is there");
@@ -92,7 +92,7 @@ QUnit.test("Comment text", function(assert){
var html = xslt(xml, this.annotationXSL);
- var mediaBody = html.firstChild.getElementsByClassName("media-body")[0];
+ var mediaBody = html.firstChild.getElementsByClassName("caosdb-f-comment-body")[0];
assert.ok(mediaBody, "media-body is there");
assert.ok(mediaBody.children.length>0,"media-body has children");
var commentText = mediaBody.getElementsByClassName("caosdb-comment-annotation-text")[0];
diff --git a/test/core/js/modules/edit_mode.js.js b/test/core/js/modules/edit_mode.js.js
index 8fde3bac9ce33742c5d79ca9e5ca03e2d0e0d094..3a87ee73d167d114d0b7db2b0abe50e4a643f8fa 100644
--- a/test/core/js/modules/edit_mode.js.js
+++ b/test/core/js/modules/edit_mode.js.js
@@ -420,10 +420,6 @@ QUnit.test("get_edit_panel", function (assert) {
assert.ok(edit_mode.get_edit_panel);
});
-QUnit.test("add_wait_datamodel_info", function (assert) {
- assert.ok(edit_mode.add_wait_datamodel_info);
-});
-
QUnit.test("toggle_edit_panel", function (assert) {
assert.ok(edit_mode.toggle_edit_panel);
});
@@ -485,97 +481,90 @@ QUnit.test("remove_delete_button", function (assert) {
});
-{
-
- const datamodel = `
-<div><div class=\"btn-group-vertical\"><button type=\"button\" class=\"btn btn-default caosdb-f-edit-panel-new-button new-property\">Create new Property</button><button type=\"button\" class=\"btn btn-default caosdb-f-edit-panel-new-button new-recordtype\">Create new RecordType</button></div><div title=\"Drag and drop Properties from this panel to the Entities on the left.\" class=\"panel panel-default\"><div class=\"panel-heading\"><h5>Existing Properties</h5></div><div class=\"panel-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('properties');\" id=\"caosdb-f-filter-properties\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-default caosdb-f-edit-panel-new-button new-property caosdb-f-hide-on-empty-input\" title=\"Create this Property.\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-20\">name</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-21\">unit</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-24\">description</li></ul></div></div><div title=\"Drag and drop RecordTypes from this panel to the Entities on the left.\" class=\"panel panel-default\"><div class=\"panel-heading\"><h5>Existing RecordTypes</h5></div><div class=\"panel-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('recordtypes');\" id=\"caosdb-f-filter-recordtypes\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-default caosdb-f-edit-panel-new-button new-recordtype caosdb-f-hide-on-empty-input\" title=\"Create this RecordType\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-30992\">Test</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-31015\">Test2</li></ul></div></div></div>`;
-
- edit_mode.query = async function(q) {
- return [];
- }
+edit_mode.query = async function(q) {
+ return [];
+}
- QUnit.test("test case 1 - insert property", async function (assert) {
+QUnit.test("test case 1 - insert property", async function (assert) {
- // here lives the test tool box
- const test_tool_box = $('<div class="caosdb-f-edit-panel-body" />');
+ // here lives the test tool box
+ const test_tool_box = $('<div class="caosdb-f-edit-panel-body" > <div class="list-group list-group-flush"> <div class="list-group-item btn-group-vertical caosdb-v-editmode-btngroup caosdb-f-edit-mode-create-buttons"> <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-property">Create Property</button> <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype">Create RecordType</button> </div> </div>');
- // here live the entities
- const main_panel = $('<div class="caosdb-f-main-entities"/>');
- assert.equal($(".caosdb-f-main-entities").length, 0);
+ // here live the entities
+ const main_panel = $('<div class="caosdb-f-main-entities"/>');
+ assert.equal($(".caosdb-f-main-entities").length, 0);
- $(document.body).append(test_tool_box).append(main_panel);
+ $(document.body).append(test_tool_box).append(main_panel);
- // ENTER EDIT MODE
- assert.equal(edit_mode.is_edit_mode(), false, "edit_mode should not be active");
- // fake server response
- edit_mode.retrieve_data_model = async function () {
- return str2xml(datamodel);
- }
- var app = await edit_mode.enter_edit_mode();
- assert.equal(edit_mode.is_edit_mode(), true, "now, edit_mode should be active");
+ // ENTER EDIT MODE
+ assert.equal(edit_mode.is_edit_mode(), false, "edit_mode should not be active");
+ // fake server response
+ edit_mode.retrieve_data_model = async function () {
+ return str2xml("<Response/>");
+ }
+ var app = await edit_mode.enter_edit_mode();
+ assert.equal(edit_mode.is_edit_mode(), true, "now, edit_mode should be active");
- // NEW PROPERTY
- assert.equal($(".caosdb-f-edit-panel-new-button.new-property").length, 2, "two new-property buttons should be present");
- assert.equal($(".caosdb-entity-panel").length, 0, "no entities");
- assert.equal(app.state, "initial", "initial state");
- // click on "new property"
- $(".caosdb-f-edit-panel-new-button.new-property").first().click();
+ // NEW PROPERTY
+ assert.equal($(".caosdb-f-edit-panel-new-button.new-property").length, 1, "one new-property button should be present");
+ assert.equal($(".caosdb-entity-panel").length, 0, "no entities");
+ assert.equal(app.state, "initial", "initial state");
+ // click on "new property"
+ $(".caosdb-f-edit-panel-new-button.new-property").first().click();
- while (app.state === "initial") {
- await sleep(500);
- }
-
- // EDIT PROPERTY
- assert.equal(app.state, "changed", "changed state");
- var entity = $(".caosdb-entity-panel");
- assert.equal(entity.length, 1, "entity added");
- // set name
- $(".caosdb-entity-panel .caosdb-f-entity-name").val("TestProperty");
-
- // SAVE
- var save_button = $(".caosdb-f-entity-save-button");
- assert.equal(save_button.length, 1, "save button available");
- // fake server response
- connection.post = async function (uri, data) {
- await sleep(500);
- assert.equal(xml2str(data), "<Request><Property name=\"TestProperty\" datatype=\"TEXT\"/></Request>");
- assert.equal(app.state, "wait", "in wait state");
- return str2xml("<Response><Property id=\"newId\" name=\"TestProperty\" datatype=\"TEXT\"/></Response>");
- }
- // click save button
- var updated_entity = main_panel.find(".caosdb-entity-panel .caosdb-id:contains('newId')");
- assert.equal(updated_entity.length, 0, "entity with id not yet in main panel");
- save_button.click();
+ while (app.state === "initial") {
+ await sleep(500);
+ }
- while (app.state === "changed" || app.state === "wait") {
- await sleep(500);
- }
+ // EDIT PROPERTY
+ assert.equal(app.state, "changed", "changed state");
+ var entity = $(".caosdb-entity-panel");
+ assert.equal(entity.length, 1, "entity added");
+ // set name
+ $(".caosdb-entity-panel .caosdb-f-entity-name").val("TestProperty");
+
+ // SAVE
+ var save_button = $(".caosdb-f-entity-save-button");
+ assert.equal(save_button.length, 1, "save button available");
+ // fake server response
+ connection.post = async function (uri, data) {
+ await sleep(500);
+ assert.equal(xml2str(data), "<Request><Property name=\"TestProperty\" datatype=\"TEXT\"/></Request>");
+ assert.equal(app.state, "wait", "in wait state");
+ return str2xml("<Response><Property id=\"newId\" name=\"TestProperty\" datatype=\"TEXT\"/></Response>");
+ }
+ // click save button
+ var updated_entity = main_panel.find(".caosdb-entity-panel .caosdb-id:contains('newId')");
+ assert.equal(updated_entity.length, 0, "entity with id not yet in main panel");
+ save_button.click();
- // SEE RESPONSE
- assert.equal(app.state, "initial", "initial state");
+ while (app.state === "changed" || app.state === "wait") {
+ await sleep(500);
+ }
- var response = $("#newId");
- assert.equal(response.length, 1, "entity added");
+ // SEE RESPONSE
+ assert.equal(app.state, "initial", "initial state");
- // entity has been added to main panel
- updated_entity = main_panel.find(".caosdb-entity-panel .caosdb-id:contains('newId')");
- assert.equal(updated_entity.length, 1, "entity with new id now in main panel");
+ var response = $("#newId");
+ assert.equal(response.length, 1, "entity added");
- // tests for closed issue https://gitlab.com/caosdb/caosdb-webui/issues/47
- assert.equal(main_panel.find(".caosdb-entity-panel .caosdb-entity-actions-panel").length, 1, "general actions panel there");
- assert.equal(main_panel.find(".caosdb-entity-panel .caosdb-f-edit-mode-entity-actions-panel").length, 1, "edit_mode actions panel there (BUG caosdb-webui#47)");
+ // entity has been added to main panel
+ updated_entity = main_panel.find(".caosdb-entity-panel .caosdb-id:contains('newId')");
+ assert.equal(updated_entity.length, 1, "entity with new id now in main panel");
- main_panel.remove();
- test_tool_box.remove();
+ // tests for closed issue https://gitlab.com/caosdb/caosdb-webui/issues/47
+ assert.equal(main_panel.find(".caosdb-entity-panel .caosdb-entity-actions-panel").length, 1, "general actions panel there");
+ assert.equal(main_panel.find(".caosdb-entity-panel .caosdb-f-edit-mode-entity-actions-panel").length, 1, "edit_mode actions panel there (BUG caosdb-webui#47)");
- edit_mode.leave_edit_mode();
- assert.equal(edit_mode.is_edit_mode(), false, "edit_mode should not be active");
+ main_panel.remove();
+ test_tool_box.remove();
- });
+ edit_mode.leave_edit_mode();
+ assert.equal(edit_mode.is_edit_mode(), false, "edit_mode should not be active");
-}
+});
var transformProperty = async function (xml_str) {
diff --git a/test/core/js/modules/entity.xsl.js b/test/core/js/modules/entity.xsl.js
index 9415a10dc6bdbd51f913e9bfe1ce8f48f187d081..bbc1cac0c7eff6bb06c6826c6efb7054827e82c3 100644
--- a/test/core/js/modules/entity.xsl.js
+++ b/test/core/js/modules/entity.xsl.js
@@ -55,7 +55,7 @@ QUnit.test("Property names are not links anymore", function(assert) {
var xml_str = '<Property name="pname" id="2345" datatype="TEXT">pvalue</Property>';
var xml = str2xml(xml_str);
var html = xslt(xml, xsl);
- assert.equal(html.firstElementChild.getElementsByClassName("caosdb-property-name")[0].outerHTML, '<strong class=\"caosdb-property-name\">pname</strong>', "link there");
+ assert.equal(html.firstElementChild.getElementsByClassName("caosdb-property-name")[0].outerHTML, '<span class=\"caosdb-property-name\">pname</span>', "link there");
});
QUnit.test("TestRecordType data type is recognized as a reference", function(assert) {
@@ -154,7 +154,7 @@ QUnit.test("single-value template with reference property.", function(assert) {
'value': '',
'reference': 'true',
'boolean': 'false'
- })), "<span xmlns=\"http://www.w3.org/1999/xhtml\" class=\"caosdb-f-property-single-raw-value caosdb-property-text-value\"></span>", "empty value produces empty span.");
+ })), "<span xmlns=\"http://www.w3.org/1999/xhtml\" class=\"caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value\"></span>", "empty value produces empty span.");
let link = callTemplate(this.entityXSL, 'single-value', {
'value': '1234',
'reference': 'true',
diff --git a/test/core/js/modules/ext_applicable.js.js b/test/core/js/modules/ext_applicable.js.js
new file mode 100644
index 0000000000000000000000000000000000000000..596f41c9c9a80e47f4a8ebd8268194af4eba1236
--- /dev/null
+++ b/test/core/js/modules/ext_applicable.js.js
@@ -0,0 +1,30 @@
+/*
+ * ** header v3.0
+ * This file is a part of the CaosDB Project.
+ *
+ * Copyright (C) 2020 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2020 Timm Fitschen <t.fitschen@indiscale.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * ** end header
+ */
+
+'use strict';
+
+QUnit.module("ext_applicable", {});
+
+QUnit.test("availability", function(assert) {
+ assert.equal(ext_applicable.version, "0.1");
+});
diff --git a/test/core/js/modules/ext_map.js.js b/test/core/js/modules/ext_map.js.js
index 5afe434e375b40e3f141141b120ed5497939211f..9b6b01022d8106153d50eaa906a0ce33803a8dc3 100644
--- a/test/core/js/modules/ext_map.js.js
+++ b/test/core/js/modules/ext_map.js.js
@@ -86,13 +86,13 @@ QUnit.test("check dependencies", function (assert) {
QUnit.test("create_toggle_map_button", function (assert) {
assert.ok(caosdb_map.create_toggle_map_button, "available");
var button = caosdb_map.create_toggle_map_button();
- assert.equal(button.tagName, "BUTTON", "is button");
+ assert.equal(button.tagName, "A", "is A");
assert.ok($(button).hasClass("caosdb-f-toggle-map-button"), "has caosdb-f-toggle-map-button class");
assert.equal($(button).text(), "Map", "button says 'Map'");
// set other content:
button = caosdb_map.create_toggle_map_button("Karte");
- assert.equal(button.tagName, "BUTTON", "is button");
+ assert.equal(button.tagName, "A", "is A");
assert.ok($(button).hasClass("caosdb-f-toggle-map-button"), "has caosdb-f-toggle-map-button class");
assert.equal($(button).text(), "Karte", "button says 'Karte'");
@@ -134,23 +134,23 @@ QUnit.test("create_map_view", function (assert) {
var map = caosdb_map.create_map_view(map_panel[0], view_config);
- console.log(map_panel[0]);
assert.ok(map instanceof L.Map, "map instance created");
- assert.ok(map_panel.hasClass("leaflet-container"), "map_panel has .leaflet-container child");
+ assert.equal($(map_panel).find(".leaflet-container").length, 1, "map_panel has .leaflet-container child");
assert.notOk(map._crs, "no special crs");
map.remove();
+ map_panel = $("<div/>");
// test with pre-defined crs
view_config["crs"] = "Simple";
map = caosdb_map.create_map_view(map_panel[0], view_config);
- console.log(map_panel[0]);
assert.ok(map instanceof L.Map, "map instance created");
- assert.ok(map_panel.hasClass("leaflet-container"), "map_panel has .leaflet-container child");
+ assert.equal($(map_panel).find(".leaflet-container").length, 1, "map_panel has .leaflet-container child");
assert.equal(map._crs, L.CRS.Simple, "map has SIMPLE crs");
map.remove();
+ map_panel = $("<div/>");
// test with special crs:
view_config["crs"] = {
@@ -165,7 +165,7 @@ QUnit.test("create_map_view", function (assert) {
console.log(map_panel[0]);
assert.ok(map instanceof L.Map, "map instance created");
- assert.ok(map_panel.hasClass("leaflet-container"), "map_panel has .leaflet-container child");
+ assert.equal($(map_panel).find(".leaflet-container").length, 1, "map_panel has .leaflet-container child");
assert.ok(map._crs instanceof L.Proj.CRS, "map has special crs");
map.remove();
diff --git a/test/core/js/modules/form_elements.js.js b/test/core/js/modules/form_elements.js.js
index aa2e281c7d25f03ce8ed109fb5728919635abec6..f93fde0db2d69156312b2a34c3748112619b68eb 100644
--- a/test/core/js/modules/form_elements.js.js
+++ b/test/core/js/modules/form_elements.js.js
@@ -785,4 +785,4 @@ QUnit.test("make_file_input", function (assert) {
assert.equal(file_input.find(":input").attr("name"), "some_file", "has file input with correct name");
assert.ok(file_input.find(":input").prop("multiple"), "is multiple");
assert.equal(file_input.find(":input").attr("accept"), ".tsv, .csv", "accept there");
-});
\ No newline at end of file
+});
diff --git a/test/core/js/modules/query.xsl.js b/test/core/js/modules/query.xsl.js
index 5c37ad4e39971130912a9169ab64189d20e5a591..371b51598918e2fd6bb5d94ca13a94337ccd322e 100644
--- a/test/core/js/modules/query.xsl.js
+++ b/test/core/js/modules/query.xsl.js
@@ -52,7 +52,7 @@ QUnit.test("basic properties of select-table feature", function(assert) {
var xml = str2xml("<Selection/>");
var html = xslt(xml, xsl);
assert.equal(html.firstElementChild.tagName, "DIV", "first child is div.");
- assert.equal(html.firstElementChild.className, "panel panel-default caosdb-select-table", "first child has class caosdb-select-table.");
+ assert.equal(html.firstElementChild.className, "card caosdb-select-table", "first child has class caosdb-select-table.");
});
/* Test table of empty result sets of queries */
@@ -122,7 +122,7 @@ QUnit.test("Query tag is transformed via xslt", function(assert) {
let html = applyTemplates(str2xml('<Query/>'), this.queryXSL, 'query-results');
//var html = xslt(xml, xsl);
assert.equal(html.firstElementChild.tagName, "DIV", "first child is div.");
- assert.equal(html.firstElementChild.className, "panel panel-default caosdb-query-response", "first child has class caosdb-query-reponse.");
+ assert.equal(html.firstElementChild.className, "card caosdb-query-response mb-2", "first child has class caosdb-query-reponse.");
});
QUnit.test("xsl defines id 'caosdb-query-form'", function(assert) {
@@ -141,14 +141,12 @@ QUnit.test("xsl script's 'caosdb-query-form' has a hidden input, with name=P and
});
-QUnit.test("Query is available, contained by a div.", function(assert) {
- var cont = getQueryFormContainer(this.queryXSL);
- assert.equal(cont.tagName, "DIV", "contained by a div");
- assert.equal(cont.className, "container caosdb-query-panel", "container has classname 'container caosdb-query-panel'");
- assert.equal(cont.firstElementChild.tagName, "FORM", "form element is available");
- assert.equal(cont.firstElementChild.className, "panel", "FORM has class 'panel'");
- assert.equal(cont.firstElementChild.id, "caosdb-query-form", "FORM has id 'caosdb-query-form'");
+QUnit.test("Query is available", function(assert) {
+ var cont = getQueryForm(this.queryXSL);
+ assert.equal(cont.tagName, "FORM", "contained by a div");
+ assert.equal(cont.className, "card caosdb-query-form", "container has classname 'card caosdb-query-form'");
});
+
QUnit.test("Query is send with a paging of 0L10 by default", function(assert) {
var form_e = getQueryForm(this.queryXSL);
@@ -187,11 +185,6 @@ QUnit.test("template select-table-row ", function(assert){
/* MISC FUNCTIONS */
function getQueryForm(queryXSL) {
- var cont = getQueryFormContainer(queryXSL);
- return cont.getElementsByTagName("form")[0];
-}
-
-function getQueryFormContainer(queryXSL) {
var html = callTemplate(queryXSL, "caosdb-query-panel", {});
return html.firstElementChild;
}
diff --git a/test/core/js/modules/webcaosdb.js.js b/test/core/js/modules/webcaosdb.js.js
index aca6c61067d931a41bd56b731cd1998b4d71835d..52bf4ada52d2ce59b59d8615c89ca5796343622b 100644
--- a/test/core/js/modules/webcaosdb.js.js
+++ b/test/core/js/modules/webcaosdb.js.js
@@ -346,7 +346,7 @@ QUnit.test("createUpdateForm", function (assert) {
QUnit.test("createUpdateEntityHeading", function (assert) {
let cueh = transaction.update.createUpdateEntityHeading;
assert.ok(cueh, "function available");
- let eh = $('<div class="panel-heading"><div class="1strow"></div><div class="2ndrow"></div></div>')[0];
+ let eh = $('<div class="card-header"><div class="1strow"></div><div class="2ndrow"></div></div>')[0];
assert.equal($(eh).children('.1strow').length, 1, "eh has 1st row");
assert.equal($(eh).children('.2ndrow').length, 1, "eh has 2nd row");
let uh = cueh(eh);
@@ -358,7 +358,7 @@ QUnit.test("createUpdateEntityPanel", function (assert) {
let cued = transaction.update.createUpdateEntityPanel;
assert.ok(cued, "function available");
let div = $(cued($('<div id="headingid">heading</div>')));
- assert.ok(div.hasClass("panel"), "panel has class panel.");
+ assert.ok(div.hasClass("card"), "card has class card.");
assert.equal(div.children(":first-child")[0].id, "headingid", "heading is first child element");
});
@@ -366,7 +366,7 @@ QUnit.test("updateSingleEntity - success", function (assert) {
let done = assert.async();
let use = transaction.update.updateSingleEntity;
assert.ok(use, "function available");
- let entityPanel = $('<div class="panel panel-default caosdb-entity-panel"><div class="panel-heading caosdb-entity-panel-heading"><div>heading<div class="caosdb-id">1234</div></div><div>other stuff in the heading</div></div>body</div>')[0];
+ let entityPanel = $('<div class="card caosdb-entity-panel"><div class="card-header caosdb-entity-panel-heading"><div>heading<div class="caosdb-id">1234</div></div><div>other stuff in the heading</div></div>body</div>')[0];
connection.get = function (uri) {
assert.equal(uri, 'Entity/1234', 'get was called with correct uri');
return new Promise((ok, fail) => {
@@ -412,7 +412,7 @@ QUnit.test("updateSingleEntity - success", function (assert) {
QUnit.test("updateSingleEntity - with errors in the server's response", function (assert) {
let done = assert.async();
let use = transaction.update.updateSingleEntity;
- let entityPanel = $('<div class="panel panel-default caosdb-entity-panel"><div class="panel-heading caosdb-entity-panel-heading"><div>heading<div class="caosdb-id">1234</div></div><div>other stuff in the heading</div></div>body</div>')[0];
+ let entityPanel = $('<div class="card caosdb-entity-panel"><div class="card-header caosdb-entity-panel-heading"><div>heading<div class="caosdb-id">1234</div></div><div>other stuff in the heading</div></div>body</div>')[0];
connection.get = function (uri) {
return new Promise((ok, fail) => {
setTimeout(() => {
@@ -437,10 +437,10 @@ QUnit.test("updateSingleEntity - with errors in the server's response", function
app.onLeaveWaitPutEntity = function (e) {
assert.equal(e.transition, "openForm", "app returns to form again due to errors.");
- assert.equal($(app.updatePanel).find('.panel-heading .' + preview.classNameErrorNotification).length, 0, "has no error notification before the response is processed.");
+ assert.equal($(app.updatePanel).find('.card-header .' + preview.classNameErrorNotification).length, 0, "has no error notification before the response is processed.");
setTimeout(() => {
- assert.equal($(app.updatePanel).find('.panel-heading .' + preview.classNameErrorNotification).length, 1, "has an error notification after the response is processed.");
+ assert.equal($(app.updatePanel).find('.card-header .' + preview.classNameErrorNotification).length, 1, "has an error notification after the response is processed.");
$(app.updatePanel).remove();
entityPanel.remove();
done();
@@ -582,9 +582,6 @@ QUnit.test("addShowPreviewButton", function (assert) {
assert.throws(() => {
preview.addShowPreviewButton(null, $('<div/>')[0]);
}, "null ref_property_elem parameter throws.");
- assert.throws(() => {
- preview.addShowPreviewButton(notOkTestElem, $('<div/>')[0]);
- }, "ref_property_elem w/o caosdb-value-list throws.");
assert.equal(okTestElem.firstChild.childNodes.length, 0, "before: test div has no children");
assert.equal(okTestElem, preview.addShowPreviewButton(okTestElem, preview.createShowPreviewButton()), "returns the first parameter");
assert.equal(okTestElem.firstChild.childNodes.length, 1, "after: test div has new child");
@@ -774,25 +771,25 @@ QUnit.test("removeAllWaitingNotifications", function (assert) {
QUnit.test("getActiveSlideItemIndex", function (assert) {
assert.ok(preview.getActiveSlideItemIndex, "function available");
let okElem0 = $('<div><div class="carousel-inner">' +
- '<div class="item active"></div>' // index 0
+ '<div class="carousel-item active"></div>' // index 0
+
- '<div class="item"></div>' +
- '<div class="item"></div>' +
+ '<div class="carousel-item"></div>' +
+ '<div class="carousel-item"></div>' +
'</div></div>')[0];
let okElem1 = $('<div><div class="carousel-inner">' +
- '<div class="item"></div>' +
- '<div class="item active"></div>' // index 1
+ '<div class="carousel-item"></div>' +
+ '<div class="carousel-item active"></div>' // index 1
+
- '<div class="item"></div>' +
+ '<div class="carousel-item"></div>' +
'</div></div>')[0];
let okElem2 = $('<div><div class="carousel-inner">' +
- '<div class="item"></div>' +
- '<div class="item"></div>' +
- '<div class="item active"></div>' // index 2
+ '<div class="carousel-item"></div>' +
+ '<div class="carousel-item"></div>' +
+ '<div class="carousel-item active"></div>' // index 2
+
'</div></div>')[0];
let noInner = $('<div></div>')[0];
- let noActive = $('<div><div class="carousel-inner"><div class="item"></div></div></div>')[0];
+ let noActive = $('<div><div class="carousel-inner"><div class="carousel-item"></div></div></div>')[0];
assert.throws(() => {
preview.getActiveSlideItemIndex()
@@ -855,14 +852,14 @@ QUnit.test("createEmptyInner", function (assert) {
let inner = preview.createEmptyInner(3);
assert.equal(inner.children.length, 3, "three items");
- assert.equal(inner.children[0].className, "item active", "first item is active");
- assert.equal(inner.children[1].className, "item", "second item is not active");
- assert.equal(inner.children[2].className, "item", "third item is not active");
+ assert.equal(inner.children[0].className, "carousel-item active", "first item is active");
+ assert.equal(inner.children[1].className, "carousel-item", "second item is not active");
+ assert.equal(inner.children[2].className, "carousel-item", "third item is not active");
});
QUnit.test("createCarouselNav", function (assert) {
assert.ok(preview.createCarouselNav, "function available");
- let refLinks = $('<div style="display: none;" class="caosdb-value-list"><a><span class="caosdb-id">1234</span></a><a><span class="caosdb-id">2345</span></a><a><span class="caosdb-id">3456</span></a><a><span class="caosdb-id">4567</span></a></div>')[0];
+ let refLinks = $('<div style="display: none;" class="caosdb-value-list"><a class="caosdb-f-reference-value"><span class="caosdb-id">1234</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">2345</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">3456</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">4567</span></a></div>')[0];
assert.throws(() => {
preview.createCarouselNav();
}, "no param throws");
@@ -875,16 +872,16 @@ QUnit.test("createCarouselNav", function (assert) {
let nav = preview.createCarouselNav(refLinks, "cid");
assert.equal(nav.className, "caosdb-preview-carousel-nav", "caosdb-carousel-nav");
- assert.ok($(nav).find('[data-slide="prev"][href="#cid"]')[0], "has prev button");
- assert.ok($(nav).find('[data-slide="next"][href="#cid"]')[0], "has next button");
+ assert.ok($(nav).find('[data-bs-slide="prev"][href="#cid"]')[0], "has prev button");
+ assert.ok($(nav).find('[data-bs-slide="next"][href="#cid"]')[0], "has next button");
let selectors = preview.getRefLinksContainer(nav);
assert.equal(selectors.children.length, 4, '4 selctor buttons');
$(document.body).append(nav);
assert.equal($(selectors).is(':hidden'), false, "selectors not hidden.");
$(nav).remove();
$(selectors).find('a').each((index, button) => {
- assert.equal(button.getAttribute("data-slide-to"), index, "buttons have correct data-slide-to attribute");
- assert.equal(button.getAttribute("data-target"), "#cid", "buttons have correct data-target attribute");
+ assert.equal(button.getAttribute("data-bs-slide-to"), index, "buttons have correct data-bs-slide-to attribute");
+ assert.equal(button.getAttribute("data-bs-target"), "#cid", "buttons have correct data-bs-target attribute");
assert.notOk(button.getAttribute("href"), "button dont have href");
});
assert.equal($(selectors).find('a:first').hasClass('active'), true, "first button is active");
@@ -892,11 +889,11 @@ QUnit.test("createCarouselNav", function (assert) {
});
{
- let refLinks = $('<div class="caosdb-value-list"><a><span class="caosdb-id">1234</span></a><a><span class="caosdb-id">2345</span></a><a><span class="caosdb-id">3456</span></a><a><span class="caosdb-id">4567</span></a></div>')[0];
- let e1 = $('<div><div class="caosdb-id">1234</div></div>')[0];
- let e2 = $('<div><div class="caosdb-id">2345</div></div>')[0];
- let e3 = $('<div><div class="caosdb-id">3456</div></div>')[0];
- let e4 = $('<div><div class="caosdb-id">4567</div></div>')[0];
+ let refLinks = $('<div class="caosdb-value-list"><a class="caosdb-f-reference-value"><span class="caosdb-id">1234</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">2345</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">3456</span></a><a class="caosdb-f-reference-value"><span class="caosdb-id">4567</span></a></div>')[0];
+ let e1 = $('<a class="caosdb-f-reference-value"><div class="caosdb-id">1234</div></a>')[0];
+ let e2 = $('<a class="caosdb-f-reference-value"><div class="caosdb-id">2345</div></a>')[0];
+ let e3 = $('<a class="caosdb-f-reference-value"><div class="caosdb-id">3456</div></a>')[0];
+ let e4 = $('<a class="caosdb-f-reference-value"><div class="caosdb-id">4567</div></a>')[0];
let entities = [e1, e3, e4, e2];
let carousel = preview.createPreviewCarousel(entities, refLinks);
let correct_order_id = ["1234", "2345", "3456", "4567"];
@@ -923,16 +920,16 @@ QUnit.test("createCarouselNav", function (assert) {
assert.equal($(carousel).find("." + preview.classNamePreviewCarouselNav).length, 1, "carousel has nav");
assert.equal($(carousel).find(".carousel-inner").length, 1, "carousel has inner");
for (let i = 0; i < correct_order_id.length; i++) {
- assert.equal(getEntityId($(carousel).find('.item')[i]), correct_order_id[i], "entities ids are in order")
+ assert.equal(getEntityId($(carousel).find('.carousel-item')[i]), correct_order_id[i], "entities ids are in order")
}
assert.ok(carousel.id, "has id");
- assert.equal($(carousel).attr("data-interval"), "false", "no auto-sliding");
+ assert.equal($(carousel).attr("data-bs-interval"), "false", "no auto-sliding");
});
QUnit.test("getSelectorButtons", function (assert) {
assert.ok(preview.getSelectorButtons, "function available");
- assert.equal(preview.getSelectorButtons($(carousel).find('.' + preview.classNamePreviewCarouselNav)[0])[0].getAttribute('data-slide-to'), "0", "found selector button");
+ assert.equal(preview.getSelectorButtons($(carousel).find('.' + preview.classNamePreviewCarouselNav)[0])[0].getAttribute('data-bs-slide-to'), "0", "found selector button");
});
QUnit.test("setActiveSlideItemSelector", function (assert) {
@@ -960,8 +957,8 @@ QUnit.test("createCarouselNav", function (assert) {
assert.equal(preview.setActiveSlideItemSelector(carousel, 1), carousel, "returns carousel");
for (let i = 0; i < correct_order_id.length; i++) {
preview.setActiveSlideItemSelector(carousel, i);
- assert.equal($($(carousel).find('[data-slide-to]')[i]).hasClass("active"), true, "button " + i + " is active");
- assert.equal($(carousel).find('.item.active').length, 1, "and none else");
+ assert.equal($($(carousel).find('[data-bs-slide-to]')[i]).hasClass("active"), true, "button " + i + " is active");
+ assert.equal($(carousel).find('.carousel-item.active').length, 1, "and none else");
}
});
@@ -970,11 +967,11 @@ QUnit.test("createCarouselNav", function (assert) {
preview.setActiveSlideItemSelector(carousel, 1);
assert.equal(preview.getActiveSlideItemIndex(carousel), 0, "before: active item is 0");
- assert.equal($(carousel).find('.' + preview.classNamePreviewCarouselNav).find('.active')[0].getAttribute('data-slide-to'), 1, 'before: active selector is 1.');
+ assert.equal($(carousel).find('.' + preview.classNamePreviewCarouselNav).find('.active')[0].getAttribute('data-bs-slide-to'), 1, 'before: active selector is 1.');
$(carousel).on('slid.bs.carousel', preview.triggerUpdateActiveSlideItemSelector);
$(carousel).trigger('slid.bs.carousel');
assert.equal(preview.getActiveSlideItemIndex(carousel), 0, "after: active item is 0");
- assert.equal($(carousel).find('.' + preview.classNamePreviewCarouselNav).find('.active')[0].getAttribute('data-slide-to'), 0, 'after: active selector is 0.');
+ assert.equal($(carousel).find('.' + preview.classNamePreviewCarouselNav).find('.active')[0].getAttribute('data-bs-slide-to'), 0, 'after: active selector is 0.');
});
QUnit.test("createPreview", function (assert) {
@@ -1056,21 +1053,21 @@ QUnit.test("createCarouselNav", function (assert) {
QUnit.test("preparePreviewEntity", function (assert) {
assert.ok(preview.preparePreviewEntity, "function available");
- let e = $('<div><div class="label caosdb-id">1234</div></div>')[0];
+ let e = $('<div><div class="caosdb-v-entity-header-buttons-list"><div class="caosdb-f-reference-value"><a class="caosdb-id">1234</a></div></div></div>')[0];
let prepared = preview.preparePreviewEntity(e);
- assert.equal($(prepared).find('a.caosdb-id')[0].href, connection.getBasePath() + "Entity/1234", "link is correct.");
+ assert.equal($(prepared).find("a[title='Load this entity in a new window.']")[0].href, connection.getBasePath() + "Entity/1234", "link is correct.");
});
QUnit.test("getEntityRef", function (assert) {
assert.ok(preview.getEntityRef, 'function available');
- var html = $('<div><div class="caosdb-id">sdfg</div></div>')[0];
+ var html = $('<div class="caosdb-f-reference-value"><div class="caosdb-id">sdfg</div></div>')[0];
assert.equal(preview.getEntityRef(html), "sdfg", "id extracted");
- html = $('<div><div class="caosdb-id"></div></div>')[0];
+ html = $('<div class="caosdb-f-reference-value"><div class="caosdb-id"></div></div>')[0];
assert.equal(preview.getEntityRef(html), "", "empty string extracted");
- html = $('<div></div>')[0];
+ html = $('<div class="caosdb-f-reference-value"></div>')[0];
assert.throws(() => {
preview.getEntityRef(html);
}, "missing .caosdb-id throws");
@@ -1264,133 +1261,6 @@ QUnit.test("initPaging", function (assert) {
assert.equal(initPaging(getPageHref(window.location.href, "0L10"), 1234), true, "1234 returns true.");
assert.equal(initPaging(getPageHref(window.location.href, "0L10"), '1234'), true, "'1234' returns true.");
- // test effectiveness
- let $pagingPanel = $('<div>', {
- "class": "caosdb-paging-panel"
- });
- let $prevButton = $('<a>', {
- "class": "caosdb-prev-button"
- });
- let $nextButton = $('<a>', {
- "class": "caosdb-next-button"
- });
-
- $pagingPanel.append($prevButton).append($nextButton);
- $(document.body).append($pagingPanel);
-
- $prevButton.hide();
- $nextButton.hide();
- $pagingPanel.hide();
-
-
- // no paging at all:
- let hidden_prev = $('.caosdb-prev-button').css("display") == "none";
- let hidden_next = $('.caosdb-next-button').css("display") == "none";
- let hidden_panel = $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(window.location.href);
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(window.location.href, null);
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(null, null);
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(window.location.href, "100");
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(window.location.href, 100);
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- initPaging(getPageHref(window.location.href, "0L100"), "100");
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- hidden_panel = hidden_panel && $('.caosdb-paging-panel').css("display") == "none";
-
- assert.equal(hidden_prev, true, "prev button has display=none");
- assert.equal(hidden_next, true, "next button has display=none");
- assert.equal(hidden_panel, true, "paging panel has display=none");
-
- // show next button
- initPaging(getPageHref(window.location.href, "0L10"), 100);
- hidden_prev = $('.caosdb-prev-button').css("display") == "none";
- hidden_panel = $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = $('.caosdb-next-button').css("display") != "inline";
- let nextHrefOk = $('.caosdb-next-button').attr('href') == getPageHref(window.location.href, "10L10");
-
- initPaging(getPageHref(window.location.href, "0L10"), "100");
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_panel = hidden_panel || $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = hidden_next || $('.caosdb-next-button').css("display") != "inline";
- nextHrefOk = nextHrefOk && $('.caosdb-next-button').attr('href') == getPageHref(window.location.href, "10L10");
-
- initPaging(getPageHref(window.location.href, "0L99"), "100");
- hidden_prev = hidden_prev && $('.caosdb-prev-button').css("display") == "none";
- hidden_panel = hidden_panel || $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = hidden_next || $('.caosdb-next-button').css("display") != "inline";
- nextHrefOk = nextHrefOk && $('.caosdb-next-button').attr('href') == getPageHref(window.location.href, "99L99");
-
- assert.equal(hidden_prev, true, "prev button has display=none");
- assert.equal(hidden_next, false, "next button has display=inline");
- assert.equal(hidden_panel, false, "paging panel has display=block");
- assert.equal(nextHrefOk, true, "next buttons href is ok");
-
- // show prev button
- initPaging(getPageHref(window.location.href, "10L100"), 100);
- hidden_prev = $('.caosdb-prev-button').css("display") != "inline";
- hidden_panel = $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = $('.caosdb-next-button').css("display") == "none";
- let prevHrefOk = $('.caosdb-prev-button').attr('href') == getPageHref(window.location.href, "0L100");
-
- initPaging(getPageHref(window.location.href, "1L100"), 100);
- hidden_prev = hidden_prev || $('.caosdb-prev-button').css("display") != "inline";
- hidden_panel = hidden_panel || $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = hidden_next && $('.caosdb-next-button').css("display") == "none";
- prevHrefOk = prevHrefOk && $('.caosdb-prev-button').attr('href') == getPageHref(window.location.href, "0L100");
-
- initPaging(getPageHref(window.location.href, "20L10"), 100);
- hidden_prev = hidden_prev || $('.caosdb-prev-button').css("display") != "inline";
- hidden_panel = hidden_panel || $('.caosdb-paging-panel').css("display") != "block";
- prevHrefOk = prevHrefOk && $('.caosdb-prev-button').attr('href') == getPageHref(window.location.href, "10L10");
-
- assert.equal(hidden_prev, false, "prev button has display=inline");
- assert.equal(hidden_next, true, "next button has display=none");
- assert.equal(hidden_panel, false, "paging panel has display=block");
- assert.equal(prevHrefOk, true, "prev buttons href is ok");
-
- // show both
- initPaging(getPageHref(window.location.href, "10L10"), 100);
- hidden_prev = $('.caosdb-prev-button').css("display") != "inline";
- hidden_panel = $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = $('.caosdb-next-button').css("display") != "inline";
- nextHrefOk = nextHrefOk && $('.caosdb-next-button').attr('href') == getPageHref(window.location.href, "20L10");
- prevHrefOk = prevHrefOk && $('.caosdb-prev-button').attr('href') == getPageHref(window.location.href, "0L10");
-
- initPaging(getPageHref(window.location.href, "1L100"), 200);
- hidden_prev = hidden_prev || $('.caosdb-prev-button').css("display") != "inline";
- hidden_panel = hidden_panel || $('.caosdb-paging-panel').css("display") != "block";
- hidden_next = hidden_next || $('.caosdb-next-button').css("display") != "inline";
- nextHrefOk = nextHrefOk && $('.caosdb-next-button').attr('href') == getPageHref(window.location.href, "101L100");
- prevHrefOk = prevHrefOk && $('.caosdb-prev-button').attr('href') == getPageHref(window.location.href, "0L100");
-
- assert.equal(hidden_prev, false, "prev button has display=inline");
- assert.equal(hidden_next, false, "next button has display=inline");
- assert.equal(hidden_panel, false, "paging panel has display=block");
- assert.equal(prevHrefOk, true, "prev buttons href is ok");
- assert.equal(nextHrefOk, true, "next buttons href is ok");
-
- document.body.removeChild($pagingPanel[0]);
});
@@ -1556,8 +1426,8 @@ QUnit.test("convertNewCommentResponse", function (assert) {
let convertNewAnnotationResponse = annotation.convertNewCommentResponse;
assert.ok(convertNewAnnotationResponse, "function exists.");
let done = assert.async();
- let testResponse = '<Response><Record><Property name="annotationOf"/><History transaction="INSERT" datetime="2015-12-24T20:15:00" username="someuser"/><Property name="comment">This is a comment</Property></Record></Response>';
- let expectedResult = "<li xmlns=\"http://www.w3.org/1999/xhtml\" class=\"list-group-item markdowned\"><div class=\"media\"><div class=\"media-left\"><h3>»</h3></div><div class=\"media-body\"><h4 class=\"media-heading\">someuser<small><i> posted on 2015-12-24T20:15:00</i></small></h4><p class=\"caosdb-comment-annotation-text\"><p>This is a comment</p></p></div></div></li>";
+ let testResponse = '<Response><Record><Property name="annotationOf"/><Version head="true" date="2015-12-24T20:15:00" username="someuser"/><Property name="comment">This is a comment</Property></Record></Response>';
+ let expectedResult = "<li xmlns=\"http://www.w3.org/1999/xhtml\" class=\"list-group-item markdowned\"><div class=\"d-flex\"><div class=\"d-shrink-0\">»</div><div class=\"flex-grow-1 ms-3\"><div class=\"caosdb-f-comment-header\">someuser<small><i> posted on 2015-12-24T20:15:00</i></small></div><div class=\"caosdb-f-comment-body\"><small><p class=\"caosdb-comment-annotation-text\"><p>This is a comment</p></p></small></div></div></div></li>";
convertNewAnnotationResponse(str2xml(testResponse), annotation.loadAnnotationXsl("../../")).then(function (result) {
assert.equal(result.length, 1, "one element returned.");
assert.equal(xml2str(result[0]).replace(/\n/g, ""), expectedResult, "result converted correctly");
@@ -1674,7 +1544,7 @@ QUnit.test("convertNewCommentResponse error", function (assert) {
</Response>';
let done = assert.async();
- let expectedResult = "<divxmlns=\"http://www.w3.org/1999/xhtml\"class=\"alertalert-dangercaosdb-new-comment-erroralert-dismissablemarkdowned\"><buttonclass=\"close\"data-dismiss=\"alert\"aria-label=\"close\">×</button><strong>Error!</strong>Thiscommenthasnotbeeninserted.<pclass=\"small\"><pre><code><record><errorcode=\"114\"description=\"Entityhasunqualifiedproperties.\"></error><warningcode=\"0\"description=\"Entityhasnoname.\"></warning><parentname=\"CommentAnnotation\"><errorcode=\"101\"description=\"Entitydoesnotexist.\"></error></parent><propertyname=\"comment\"importance=\"FIX\">sdfasdfasdf<errorcode=\"101\"description=\"Entitydoesnotexist.\"></error><errorcode=\"110\"description=\"Propertyhasnodatatype.\"></error></property><propertyname=\"annotationOf\"importance=\"FIX\">20<errorcode=\"101\"description=\"Entitydoesnotexist.\"></error><errorcode=\"110\"description=\"Propertyhasnodatatype.\"></error></property></record></code></pre></p></div>";
+ let expectedResult = "<divxmlns=\"http://www.w3.org/1999/xhtml\"class=\"alertalert-dangercaosdb-new-comment-erroralert-dismissablemarkdowned\"><buttonclass=\"btn-close\"data-bs-dismiss=\"alert\"aria-label=\"close\">×</button><strong>Error!</strong>Thiscommenthasnotbeeninserted.<pclass=\"small\"><pre><code><record><errorcode=\"114\"description=\"Entityhasunqualifiedproperties.\"></error><warningcode=\"0\"description=\"Entityhasnoname.\"></warning><parentname=\"CommentAnnotation\"><errorcode=\"101\"description=\"Entitydoesnotexist.\"></error></parent><propertyname=\"comment\"importance=\"FIX\">sdfasdfasdf<errorcode=\"101\"description=\"Entitydoesnotexist.\"></error><errorcode=\"110\"description=\"Propertyhasnodatatype.\"></error></property><propertyname=\"annotationOf\"importance=\"FIX\">20<errorcode=\"101\"description=\"Entitydoesnotexist.\"></error><errorcode=\"110\"description=\"Propertyhasnodatatype.\"></error></property></record></code></pre></p></div>";
annotation.convertNewCommentResponse(str2xml(errorStr), annotation.loadAnnotationXsl("../../")).then(function (result) {
assert.equal(xml2str(result[0]).replace(/[\t\n\ ]/g, ""), expectedResult.replace(/[\t\n\ ]/g, ""), "transformed into an error div.");
done();
@@ -1939,9 +1809,6 @@ QUnit.test("add_button wrong parameters", function (assert) {
QUnit.test("test button classes", function (assert) {
var result = $(navbar.add_button("TestButton")).children().first()
- assert.ok(result.hasClass("navbar-btn"), "has class navbar-btn");
- assert.ok(result.hasClass("btn"), "has class btn");
- assert.ok(result.hasClass("btn-link"), "has class btn-link");
assert.equal(result.text(), "TestButton", "text is correct");
});
@@ -2105,4 +1972,4 @@ QUnit.test("submit new password", async function (assert) {
form[0]["password2"].value = "newtestpassword1A!";
form.find(":submit").click();
-});
\ No newline at end of file
+});
diff --git a/test/core/js/modules/welcome.xsl.js b/test/core/js/modules/welcome.xsl.js
index 39fb9fd0edd9e4950e9bbad3189b2aeed4ed7a7c..de59eedca9bbacdbc4c797f9bfd51d11bb332132 100644
--- a/test/core/js/modules/welcome.xsl.js
+++ b/test/core/js/modules/welcome.xsl.js
@@ -46,10 +46,10 @@ QUnit.test("availability", function(assert) {
assert.ok(this.welcomeXSL);
})
-QUnit.test("welcome template produces .caosdb-f-welcome-panel", function(assert) {
+QUnit.test("welcome template produces .caosdb-v-welcome-panel", function(assert) {
var xsl = injectTemplate(this.welcomeXSL, '<xsl:template match="/"><xsl:call-template name="welcome"/></xsl:template>');
var xml_str = '<root>';
var xml = str2xml(xml_str);
var html = xslt(xml, xsl);
- assert.ok($(html.firstElementChild).hasClass("caosdb-f-welcome-panel"), "has class .caosdb-f-welcome-panel");
+ assert.ok($(html.firstElementChild).hasClass("caosdb-v-welcome-panel"), "has class .caosdb-v-welcome-panel");
});
diff --git a/test/docker/Dockerfile b/test/docker/Dockerfile
index 92889dc526229475463ddcdfe6a2080a669b9d25..f90db2f9b2b869e12f52de595b7a7677f52374b5 100644
--- a/test/docker/Dockerfile
+++ b/test/docker/Dockerfile
@@ -13,8 +13,8 @@ RUN apt-get update \
&& apt-get install -f
RUN pip3 install pylint pytest
-RUN pip3 install caosdb==0.5.1
-RUN pip3 install pandas xlrd==1.2.0
+RUN pip3 install caosdb>=0.5.2
+RUN pip3 install pandas
RUN pip3 install git+https://gitlab.com/caosdb/caosdb-advanced-user-tools.git@dev
# For automatic documentation
#RUN npm install -g jsdoc