aboutsummaryrefslogtreecommitdiff
path: root/resources
diff options
context:
space:
mode:
Diffstat (limited to 'resources')
-rw-r--r--resources/assets/javascripts/bootstrap/dialog.js15
-rw-r--r--resources/assets/javascripts/bootstrap/oer.js92
-rw-r--r--resources/assets/stylesheets/scss/quicksearch.scss44
-rw-r--r--resources/vue/components/OERMaterialEditor.vue62
-rw-r--r--resources/vue/components/Quicksearch.vue46
-rw-r--r--resources/vue/components/StudipLevelSlider.vue21
6 files changed, 103 insertions, 177 deletions
diff --git a/resources/assets/javascripts/bootstrap/dialog.js b/resources/assets/javascripts/bootstrap/dialog.js
index 58d01fd..58857cb 100644
--- a/resources/assets/javascripts/bootstrap/dialog.js
+++ b/resources/assets/javascripts/bootstrap/dialog.js
@@ -2,7 +2,14 @@ STUDIP.domReady(function () {
STUDIP.Dialog.initialize();
});
-$(document).on('click', '[data-vue-app] [data-dialog-button] .cancel.button', () => {
- STUDIP.Dialog.close();
- return false;
-});
+document.addEventListener(
+ 'click',
+ (event) => {
+ if (event.target.matches('.studip-dialog [data-vue-app] [data-dialog-button] .cancel.button')) {
+ STUDIP.Dialog.close();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ },
+ true
+);
diff --git a/resources/assets/javascripts/bootstrap/oer.js b/resources/assets/javascripts/bootstrap/oer.js
index 3adecbc..ed472b5 100644
--- a/resources/assets/javascripts/bootstrap/oer.js
+++ b/resources/assets/javascripts/bootstrap/oer.js
@@ -47,95 +47,3 @@ STUDIP.domReady(() => {
});
});
-
-STUDIP.ready(() => {
- if ($('.oercampus_editmaterial').length) {
-
- STUDIP.Vue.load().then(({createApp}) => {
- STUDIP.OER.EditApp = createApp({
- el: '.oercampus_editmaterial',
- data() {
- return {
- name: $('.oercampus_editmaterial input.oername').val(),
- logo_url: $('.oercampus_editmaterial .logo_file').data("oldurl"),
- customlogo: $('.oercampus_editmaterial .logo_file').data("customlogo"),
- filename: $('.oercampus_editmaterial .file.drag-and-drop').data("filename"),
- filesize: $('.oercampus_editmaterial .file.drag-and-drop').data("filesize"),
- tags: $('.oercampus_editmaterial .oer_tags').data("defaulttags"),
- minimumTags: 5
- };
- },
- mounted: function () {
- jQuery("#difficulty_slider_edit").slider({
- range: true,
- min: 1,
- max: 12,
- values: [jQuery("#difficulty_start").val(), jQuery("#difficulty_end").val()],
- change: function (event, ui) {
- jQuery("#difficulty_start").val(ui.values[0]);
- jQuery("#difficulty_end").val(ui.values[1]);
- }
- });
- jQuery('.oercampus_editmaterial').find(':focusable').first().focus();
- },
- methods: {
- editName: function () {
- this.name = $('.oername').val();
- },
- editImage: function (event) {
- let reader = new FileReader();
- let vue = this;
- reader.addEventListener("load", function () {
- vue.logo_url = reader.result;
- vue.customlogo = true;
- }, false);
- reader.readAsDataURL(
- event.target.files.length > 0
- ? event.target.files[0]
- : event.dataTransfer.files[0]
- );
- },
- dropImage: function (event) {
- window.document.getElementById("oer_logo_uploader").files = event.dataTransfer.files;
- this.editImage(event);
- },
- editFile: function (event) {
- this.filename = event.target.files[0].name;
- this.filesize = event.target.files[0].size;
- if (!this.name) {
- this.name = this.filename;
- $('.oername').val(this.name);
- }
- },
- dropFile: function (event) {
- window.document.getElementById("oer_file").files = event.dataTransfer.files;
- this.editFile(event);
- },
- addTag: function () {
- if (this.minimumTags < this.tags.length) {
- this.minimumTags = this.tags.length + 1;
- } else {
- this.minimumTags++;
- }
- },
- removeTag: function (i) {
- this.$delete(this.tags, i);
- if ((this.minimumTags > this.tags.length) && (this.minimumTags > 5)) {
- this.minimumTags--;
- }
- }
- },
- computed: {
- displayTags () {
- const result = this.tags.concat([]);
- while (result.length < this.minimumTags) {
- result.push('');
- }
- return result;
- }
- },
- components: { Quicksearch }
- });
- });
- }
-});
diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss
index ef6c372..6687450 100644
--- a/resources/assets/stylesheets/scss/quicksearch.scss
+++ b/resources/assets/stylesheets/scss/quicksearch.scss
@@ -89,47 +89,3 @@ div.quicksearch_frame {
background-position: center center;
}
}
-
-.quicksearch_container {
- display: inline-flex;
- flex-direction: row-reverse;
- width: 100%;
-
- .dropdownmenu {
- max-width: 0;
- max-height: 0;
- overflow: visible;
- position: relative;
- top: 31px;
- z-index: 99999;
-
- .autocomplete__results {
- list-style-type: none;
- padding: 1px;
- border: 1px solid var(--light-gray-color-40);
- background-color: var(--white);
- max-height: 275px;
- width: 600px;
- overflow-x: auto;
- overflow-y: hidden;
-
- > li {
- padding: 5px;
- cursor: pointer;
- display: flex;
- align-items: flex-start;
-
- &:hover, &.autocomplete__result--selected {
- background-color: var(--base-color);
- color: var(--white);
- }
-
- img {
- max-width: 40px;
- max-height: 40px;
- margin-right: 5px;
- }
- }
- }
- }
-}
diff --git a/resources/vue/components/OERMaterialEditor.vue b/resources/vue/components/OERMaterialEditor.vue
index 88b9232..1ad1f86 100644
--- a/resources/vue/components/OERMaterialEditor.vue
+++ b/resources/vue/components/OERMaterialEditor.vue
@@ -6,7 +6,7 @@
data-secure
enctype="multipart/form-data"
>
- <input type="hidden" :name="csrf.name" :value="csrf.token">
+ <input type="hidden" :name="csrf.name" :value="csrf.value">
<input v-if="template?.redirect_url"
type="hidden"
name="redirect_url"
@@ -136,18 +136,18 @@
<div class="oer_tags_container">
<h4>{{ $gettext('Themen (am besten mindestens 5)') }}</h4>
<ul class="clean oer_tags">
- <li v-for="(tag, index) in displayTags" :key="index">
+ <li v-for="(tag, index) in tags" :key="index">
#
<quicksearch name="tags[]"
:searchtype="tagSearch"
v-model="tags[index]"
:autocomplete="true"
+ v-focus-on-create
></quicksearch>
- <a href="#"
- @click.prevent="removeTag(index)"
+ <button class="as-link" @click.prevent="removeTag(index)"
:title="$gettext('Thema aus der Liste streichen')">
<studip-icon shape="trash" :size="20" class="text-bottom"></studip-icon>
- </a>
+ </button>
</li>
</ul>
@@ -196,9 +196,12 @@
</fieldset>
<footer data-dialog-button>
- <button type="button" name="save">
- {{ material.id ? $gettext('Hochladen') : $gettext('Speichern') }}
+ <button type="submit" name="save" class="button">
+ {{ material.id ? $gettext('Speichern') : $gettext('Hochladen') }}
</button>
+ <a :href="URLHelper.getURL('dispatch.php/oer/mymaterial')" class="button cancel">
+ {{ $gettext('Abbrechen') }}
+ </a>
</footer>
</form>
</template>
@@ -206,10 +209,25 @@
import Quicksearch from "./Quicksearch.vue";
import StudipIcon from "./StudipIcon.vue";
import StudipLevelSlider from "./StudipLevelSlider.vue";
+import Vue from "vue";
+
+let mounted = false;
export default {
name: "OERMaterialEditor",
components: {StudipLevelSlider, StudipIcon, Quicksearch },
+ directives: {
+ ['focus-on-create']: {
+ bind(el) {
+ if (mounted) {
+ Vue.nextTick(() => el.querySelector('input')?.focus());
+ }
+ }
+ }
+ },
+ mounted () {
+ mounted = true;
+ },
props: {
material: {
type: Object,
@@ -287,11 +305,6 @@ export default {
return this.template?.image_tmp_name?.length > 0
|| this.material.front_image_content_type?.length > 0;
},
- displayTags () {
- return this.material.tags.concat(
- Array(this.minimumTags).fill('')
- ).slice(0, this.minimumTags);
- },
logoUrl() {
return this.template?.image_tmp_name ? STUDIP.URLHelper.getURL('dispatch.php/oer/mymaterial/show_tmp_image') : this.material.logoUrl;
},
@@ -299,9 +312,6 @@ export default {
return STUDIP.URLHelper;
}
},
- mounted() {
- jQuery('.oercampus_editmaterial').find(':focusable').first().focus();
- },
methods: {
editImage(event) {
let reader = new FileReader();
@@ -336,12 +346,13 @@ export default {
this.tags.push('');
},
removeTag(i) {
- this.$delete(this.tags, i);
- if (
- this.minimumTags > this.tags.length
- && this.minimumTags > 5
- ) {
- this.minimumTags--;
+ this.tags = this.tags.filter((element, index) => index !== i);
+ }
+ },
+ watch: {
+ tags(current) {
+ if (current.length === 0) {
+ this.tags.push('');
}
}
}
@@ -383,14 +394,5 @@ export default {
.oer_tags_container {
margin-top: 10px;
}
-
- .level_labels {
- display: flex;
- justify-content: space-between;
- font-size: 0.8em;
- color: var(--black);
- margin-top: 20px;
- }
-
}
</style>
diff --git a/resources/vue/components/Quicksearch.vue b/resources/vue/components/Quicksearch.vue
index 0f37ae0..cdfdeb0 100644
--- a/resources/vue/components/Quicksearch.vue
+++ b/resources/vue/components/Quicksearch.vue
@@ -181,3 +181,49 @@ export default {
}
}
</script>
+<style lang="scss">
+.quicksearch_container {
+ align-items: center;
+ display: inline-flex;
+ flex-direction: row-reverse;
+ width: 100%;
+
+ .dropdownmenu {
+ max-width: 0;
+ max-height: 0;
+ overflow: visible;
+ position: relative;
+ top: 31px;
+ z-index: 99999;
+
+ .autocomplete__results {
+ list-style-type: none;
+ padding: 1px;
+ border: 1px solid var(--light-gray-color-40);
+ background-color: var(--white);
+ max-height: 275px;
+ width: 600px;
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ > li {
+ padding: 5px;
+ cursor: pointer;
+ display: flex;
+ align-items: flex-start;
+
+ &:hover, &.autocomplete__result--selected {
+ background-color: var(--base-color);
+ color: var(--white);
+ }
+
+ img {
+ max-width: 40px;
+ max-height: 40px;
+ margin-right: 5px;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/resources/vue/components/StudipLevelSlider.vue b/resources/vue/components/StudipLevelSlider.vue
index a1b91e0..ee362e6 100644
--- a/resources/vue/components/StudipLevelSlider.vue
+++ b/resources/vue/components/StudipLevelSlider.vue
@@ -1,11 +1,16 @@
<template>
<div class="level-slider" :style="{width: this.width}">
<div class="level-labels">
- <div>{{ lowerLabel }}</div>
- <div>{{ upperLabel }}</div>
+ <div class="level-label">{{ lowerLabel }}</div>
+ <div class="level-label">{{ upperLabel }}</div>
</div>
<div class="level-numbers">
- <div v-for="i in this.maxValue" :key="`level-${i}`">{{ i }}</div>
+ <div v-for="i in this.maxValue"
+ :key="`level-${i}`"
+ class="level-number"
+ >
+ {{ i }}
+ </div>
</div>
<div ref="slider" class="slider-element"></div>
</div>
@@ -48,8 +53,6 @@ export default {
max: this.maxValue,
values: [this.lowerValue, this.upperValue],
change: (event, ui) => {
- console.log('Updating', ui.values[0], ui.values[1]);
-
this.$emit('update:lowerValue', ui.values[0]);
this.$emit('update:upperValue', ui.values[1]);
}
@@ -71,10 +74,14 @@ export default {
display: flex;
justify-content: space-between;
}
+ .level-number {
+ flex: 0 2ex;
+ text-align: right;
+ }
.slider-element {
- margin-left: 5px;
- margin-right: 9px;
margin-top: 5px;
+ margin-left: 0.5ex;
+ margin-right: 0.5ex;
}
}
</style>
generated by cgit v1.0 at 2026-05-27 11:48:26 +0000