← All changes | inc/admin/views/question/option.php +112 -112 4.3.8 → 4.4.8 View file →

		@@ -1,112 +1,112 @@
1		-<?php
2		-/**
3		- * Admin question editor: question answer template.
4		- *
5		- * @since 3.0.0
6		- */
7		-?>
8		-
9		-<script type="text/x-template" id="tmpl-lp-question-answer-option">
10		- <tr class="answer-option" :class="[isNew() || isUpdating() ? 'new-option' : '']" :data-answer-id="id">
11		- <td class="sort lp-sortable-handle"><?php learn_press_admin_view( 'svg-icon' ); ?></td>
12		- <td class="answer-text">
13		- <form @submit.prevent="">
14		- <input type="text" v-model="answer.title" @change="changeTitle" @blur="updateTitle" @keyup.enter="updateTitle"/>
15		- </form>
16		- </td>
17		- <td class="answer-correct lp-answer-check">
18		- <input :type="radio ? 'radio' : 'checkbox'" :checked="correct ? 'checked' : ''" :value="answer.value" :name="name" @change="changeCorrect">
19		- </td>
20		- <td class="actions lp-toolbar-buttons">
21		- <div v-if="deletable" class="lp-toolbar-btn lp-btn-remove remove-answer">
22		- <a class="lp-btn-icon dashicons dashicons-trash" @click="deleteAnswer" title="<?php esc_attr_e( 'Delete', 'learnpress' ); ?>"></a>
23		- </div>
24		- </td>
25		- </tr>
26		-</script>
27		-
28		-<script type="text/javascript">
29		- jQuery( function($) {
30		- var $store = window.LP_Question_Store;
31		- window.$Vue = window.$Vue || Vue;
32		-
33		- $Vue.component('lp-question-answer-option', {
34		- template: '#tmpl-lp-question-answer-option',
35		- props: ['answer', 'index', 'type', 'radio', 'number'],
36		- data: function() {
37		- return {
38		- changed: false,
39		- updating: false
40		- }
41		- },
42		- computed: {
43		- // answer id
44		- id: function() {
45		- return this.answer.question_answer_id;
46		- },
47		- // check correct answer
48		- correct: function() {
49		- return this.answer.is_true === 'yes';
50		- },
51		- // input correct form name
52		- name: function() {
53		- return 'answer_question[' + $store.getters['id'] + ']'
54		- },
55		- // deletable answer
56		- deletable: function() {
57		- return !(this.number < 3 || (this.correct && $store.getters['numberCorrect'] === 1) || this.type === 'true_or_false');
58		- },
59		- status: function() {
60		- return $store.getters['status'];
61		- }
62		- },
63		- watch: {
64		- status: function(s) {
65		- if (s !== 'loading') {
66		- this.updating = false;
67		- }
68		- return s;
69		- }
70		- },
71		- mounted: function() {
72		- if (this.isNew()) {
73		- this.changed = true;
74		- this.updateTitle();
75		-
76		- setTimeout(() => {
77		- $(this.$el).find('.answer-text input').focus();
78		- }, 300)
79		- }
80		- },
81		- methods: {
82		- changeTitle: function() {
83		- this.changed = true;
84		- },
85		- updateTitle: function() {
86		- if (this.changed) {
87		- this.updating = true;
88		- this.$emit('updateTitle', this.answer);
89		- }
90		- },
91		- changeCorrect: function (e) {
92		- this.updating = true;
93		-
94		- this.answer.is_true = (e.target.checked) ? 'yes' : '';
95		- this.$emit('changeCorrect', this.answer);
96		- },
97		- deleteAnswer: function () {
98		- this.$emit('deleteAnswer', {
99		- id: this.id,
100		- order: this.answer.order
101		- });
102		- },
103		- isNew: function () {
104		- return isNaN(this.answer.question_answer_id);
105		- },
106		- isUpdating: function () {
107		- return this.updating;
108		- }
109		- }
110		- })
111		- });
112		-</script>
	1	+<?php
	2	+/**
	3	+ * Admin question editor: question answer template.
	4	+ *
	5	+ * @since 3.0.0
	6	+ */
	7	+?>
	8	+
	9	+<script type="text/x-template" id="tmpl-lp-question-answer-option">
	10	+ <tr class="answer-option" :class="[isNew() || isUpdating() ? 'new-option' : '']" :data-answer-id="id">
	11	+ <td class="sort lp-sortable-handle"><?php learn_press_admin_view( 'svg-icon' ); ?></td>
	12	+ <td class="answer-text">
	13	+ <form @submit.prevent="">
	14	+ <input type="text" v-model="answer.title" @change="changeTitle" @blur="updateTitle" @keyup.enter="updateTitle"/>
	15	+ </form>
	16	+ </td>
	17	+ <td class="answer-correct lp-answer-check">
	18	+ <input :type="radio ? 'radio' : 'checkbox'" :checked="correct ? 'checked' : ''" :value="answer.value" :name="name" @change="changeCorrect">
	19	+ </td>
	20	+ <td class="actions lp-toolbar-buttons">
	21	+ <div v-if="deletable" class="lp-toolbar-btn lp-btn-remove remove-answer">
	22	+ <a class="lp-btn-icon dashicons dashicons-trash" @click="deleteAnswer" title="<?php esc_attr_e( 'Delete', 'learnpress' ); ?>"></a>
	23	+ </div>
	24	+ </td>
	25	+ </tr>
	26	+</script>
	27	+
	28	+<script type="text/javascript">
	29	+ jQuery( function($) {
	30	+ var $store = window.LP_Question_Store;
	31	+ window.$Vue = window.$Vue || Vue;
	32	+
	33	+ $Vue.component('lp-question-answer-option', {
	34	+ template: '#tmpl-lp-question-answer-option',
	35	+ props: ['answer', 'index', 'type', 'radio', 'number'],
	36	+ data: function() {
	37	+ return {
	38	+ changed: false,
	39	+ updating: false
	40	+ }
	41	+ },
	42	+ computed: {
	43	+ // answer id
	44	+ id: function() {
	45	+ return this.answer.question_answer_id;
	46	+ },
	47	+ // check correct answer
	48	+ correct: function() {
	49	+ return this.answer.is_true === 'yes';
	50	+ },
	51	+ // input correct form name
	52	+ name: function() {
	53	+ return 'answer_question[' + $store.getters['id'] + ']'
	54	+ },
	55	+ // deletable answer
	56	+ deletable: function() {
	57	+ return !(this.number < 3 || (this.correct && $store.getters['numberCorrect'] === 1) || this.type === 'true_or_false');
	58	+ },
	59	+ status: function() {
	60	+ return $store.getters['status'];
	61	+ }
	62	+ },
	63	+ watch: {
	64	+ status: function(s) {
	65	+ if (s !== 'loading') {
	66	+ this.updating = false;
	67	+ }
	68	+ return s;
	69	+ }
	70	+ },
	71	+ mounted: function() {
	72	+ if (this.isNew()) {
	73	+ this.changed = true;
	74	+ this.updateTitle();
	75	+
	76	+ setTimeout(() => {
	77	+ $(this.$el).find('.answer-text input').focus();
	78	+ }, 300)
	79	+ }
	80	+ },
	81	+ methods: {
	82	+ changeTitle: function() {
	83	+ this.changed = true;
	84	+ },
	85	+ updateTitle: function() {
	86	+ if (this.changed) {
	87	+ this.updating = true;
	88	+ this.$emit('updateTitle', this.answer);
	89	+ }
	90	+ },
	91	+ changeCorrect: function (e) {
	92	+ this.updating = true;
	93	+
	94	+ this.answer.is_true = (e.target.checked) ? 'yes' : '';
	95	+ this.$emit('changeCorrect', this.answer);
	96	+ },
	97	+ deleteAnswer: function () {
	98	+ this.$emit('deleteAnswer', {
	99	+ id: this.id,
	100	+ order: this.answer.order
	101	+ });
	102	+ },
	103	+ isNew: function () {
	104	+ return isNaN(this.answer.question_answer_id);
	105	+ },
	106	+ isUpdating: function () {
	107	+ return this.updating;
	108	+ }
	109	+ }
	110	+ })
	111	+ });
	112	+</script>