cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move escapeCSS function to mixins

Browse Source
This commit is contained in:
tomtjes 2024-02-15 14:56:04 -05:00
parent b5a204265a
commit f34dc4d242
4 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
vue/src/components/IngredientComponent.vue
View File

@ -43,7 +43,7 @@
</template> </template>
<script> <script>
import {calculateAmount, ResolveUrlMixin, escapeCSS} from "@/utils/utils" import {calculateAmount, ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils"
import Vue from "vue" import Vue from "vue"
import VueSanitize from "vue-sanitize" import VueSanitize from "vue-sanitize"
@ -57,7 +57,7 @@ export default {
ingredient_factor: {type: Number, default: 1}, ingredient_factor: {type: Number, default: 1},
detailed: {type: Boolean, default: true}, detailed: {type: Boolean, default: true},
}, },
mixins: [ResolveUrlMixin], mixins: [ResolveUrlMixin, EscapeCSSMixin],
data() { data() {
return { return {
checked: false, checked: false,
@ -125,9 +125,6 @@ export default {
// sends parent recipe ingredient to notify complete has been toggled // sends parent recipe ingredient to notify complete has been toggled
done: function () { done: function () {
this.$emit("checked-state-changed", this.ingredient) this.$emit("checked-state-changed", this.ingredient)
},
escapeCSS: function (classname) {
return CSS.escape(escapeCSS(classname))
} }
}, },
} }

7
vue/src/components/KeywordsComponent.vue
View File

@ -15,11 +15,11 @@
<script> <script>
import {ResolveUrlMixin, escapeCSS} from "@/utils/utils"; import {ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils";
export default { export default {
name: 'KeywordsComponent', name: 'KeywordsComponent',
mixins: [ResolveUrlMixin], mixins: [ResolveUrlMixin, EscapeCSSMixin],
props: { props: {
recipe: Object, recipe: Object,
limit: Number, limit: Number,
@ -36,9 +36,6 @@ export default {
methods: { methods: {
keywordClass: function(k) { keywordClass: function(k) {
return this.escapeCSS('_keywordname-' + k.label) return this.escapeCSS('_keywordname-' + k.label)
},
escapeCSS: function (classname) {
return CSS.escape(escapeCSS(classname))
} }
} }
} }

12
vue/src/components/StepComponent.vue
View File

@ -122,18 +122,18 @@
</template> </template>
<script> <script>
import {calculateAmount, GettextMixin, getUserPreference, escapeCSS} from "@/utils/utils" import {calculateAmount, GettextMixin, getUserPreference} from "@/utils/utils"
import CompileComponent from "@/components/CompileComponent" import CompileComponent from "@/components/CompileComponent"
import IngredientsCard from "@/components/IngredientsCard" import IngredientsCard from "@/components/IngredientsCard"
import Vue from "vue" import Vue from "vue"
import moment from "moment" import moment from "moment"
import {ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils" import {ResolveUrlMixin, calculateHourMinuteSplit, EscapeCSSMixin} from "@/utils/utils"
Vue.prototype.moment = moment Vue.prototype.moment = moment
export default { export default {
name: "StepComponent", name: "StepComponent",
mixins: [GettextMixin, ResolveUrlMixin], mixins: [GettextMixin, ResolveUrlMixin, EscapeCSSMixin],
components: {CompileComponent, IngredientsCard}, components: {CompileComponent, IngredientsCard},
props: { props: {
step: Object, step: Object,
@ -148,7 +148,8 @@ export default {
}, },
computed: { computed: {
step_time: function() { step_time: function() {
return calculateHourMinuteSplit(this.step.time)}, return calculateHourMinuteSplit(this.step.time)
},
step_name: function() { step_name: function() {
if (this.step.name) { if (this.step.name) {
return this.step.name return this.step.name
@ -196,9 +197,6 @@ export default {
}, },
openPopover: function () { openPopover: function () {
this.$refs[`id_reactive_popover_${this.step.id}`].$emit("open") this.$refs[`id_reactive_popover_${this.step.id}`].$emit("open")
},
escapeCSS: function (classname) {
return CSS.escape(escapeCSS(classname))
} }
}, },
} }

9
vue/src/utils/utils.js
View File

@ -317,8 +317,13 @@ export function calculateAmount(amount, factor) {
} }
} }
export function escapeCSS(classname) { /* Replace spaces by dashes, then use DOM method to escape special characters. Use for dynamically generated CSS classes*/
return classname.replace(/\s+/g, "-").toLowerCase() export const EscapeCSSMixin = {
methods: {
escapeCSS: function(classname) {
return CSS.escape(classname.replace(/\s+/g, "-").toLowerCase())
}
}
} }
export function roundDecimals(num) { export function roundDecimals(num) {