|
|
|
|
@ -139,7 +139,7 @@ |
|
|
|
|
<div id="course-redactor__nav" class="kit__nav"> |
|
|
|
|
<button class="kit__btn btn btn_lg" |
|
|
|
|
v-bind:class="{ 'btn_stroke': viewSection === 'course', 'btn_gray': viewSection !== 'course' }" |
|
|
|
|
type="button" @click="viewSection = 'course'">Описание |
|
|
|
|
type="button" @click="showCourse">Описание |
|
|
|
|
курса |
|
|
|
|
</button> |
|
|
|
|
<button class="kit__btn btn btn_lg" |
|
|
|
|
@ -151,41 +151,43 @@ |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="viewSection === 'course'" class="kit__body"> |
|
|
|
|
<div v-for="(block, index) in course.content"> |
|
|
|
|
<block-text v-if="block.type === 'text'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:text.sync="block.data.text" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-image-text v-if="block.type === 'image-text'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:text.sync="block.data.text" |
|
|
|
|
:image-id.sync="block.data.image_id" |
|
|
|
|
:image-url.sync="block.data.image_url" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-image v-if="block.type === 'image'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:image-id.sync="block.data.image_id" |
|
|
|
|
:image-url.sync="block.data.image_url" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-images v-if="block.type === 'images'" |
|
|
|
|
<vue-draggable v-model="course.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }"> |
|
|
|
|
<div v-for="(block, index) in course.content" :key="block.data.id ? block.data.id : block.data.guid"> |
|
|
|
|
<block-text v-if="block.type === 'text'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:text.sync="block.data.text" |
|
|
|
|
:images.sync="block.data.images" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-video v-if="block.type === 'video'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:video-url.sync="block.data.video_url"/> |
|
|
|
|
</div> |
|
|
|
|
<block-image-text v-if="block.type === 'image-text'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:text.sync="block.data.text" |
|
|
|
|
:image-id.sync="block.data.image_id" |
|
|
|
|
:image-url.sync="block.data.image_url" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-image v-if="block.type === 'image'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:image-id.sync="block.data.image_id" |
|
|
|
|
:image-url.sync="block.data.image_url" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-images v-if="block.type === 'images'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
:text.sync="block.data.text" |
|
|
|
|
:images.sync="block.data.images" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:access-token="accessToken"/> |
|
|
|
|
<block-video v-if="block.type === 'video'" |
|
|
|
|
:index="index" |
|
|
|
|
:title.sync="block.data.title" |
|
|
|
|
v-on:remove="onBlockRemoved" |
|
|
|
|
:video-url.sync="block.data.video_url"/> |
|
|
|
|
</div> |
|
|
|
|
</vue-draggable> |
|
|
|
|
|
|
|
|
|
<block-add v-on:added="onBlockAdded"/> |
|
|
|
|
|
|
|
|
|
@ -257,6 +259,11 @@ |
|
|
|
|
import $ from 'jquery'; |
|
|
|
|
import {required, minValue, numeric } from 'vuelidate/lib/validators' |
|
|
|
|
import slugify from 'slugify'; |
|
|
|
|
import Draggable from 'vuedraggable'; |
|
|
|
|
import {showNotification} from "../js/modules/notification"; |
|
|
|
|
import createHistory from "history/createBrowserHistory"; |
|
|
|
|
|
|
|
|
|
const history = createHistory(); |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "course-redactor", |
|
|
|
|
@ -422,9 +429,21 @@ |
|
|
|
|
}, |
|
|
|
|
editLesson(lessonIndex) { |
|
|
|
|
this.currentLesson = this.lessons[lessonIndex]; |
|
|
|
|
if (this.viewSection !== 'lessons-edit') { |
|
|
|
|
history.push("/course/create/lessons/new"); |
|
|
|
|
} |
|
|
|
|
this.viewSection = 'lessons-edit'; |
|
|
|
|
}, |
|
|
|
|
showCourse() { |
|
|
|
|
if (this.viewSection !== 'course') { |
|
|
|
|
history.push("/course/create"); |
|
|
|
|
} |
|
|
|
|
this.viewSection = 'course' |
|
|
|
|
}, |
|
|
|
|
showLessons() { |
|
|
|
|
if (this.viewSection !== 'lessons') { |
|
|
|
|
history.push("/course/create/lessons"); |
|
|
|
|
} |
|
|
|
|
this.viewSection = 'lessons'; |
|
|
|
|
}, |
|
|
|
|
addLesson() { |
|
|
|
|
@ -434,6 +453,9 @@ |
|
|
|
|
course_id: this.course.id, |
|
|
|
|
content: [], |
|
|
|
|
}; |
|
|
|
|
if (this.viewSection !== 'lessons-edit') { |
|
|
|
|
history.push("/course/create/lessons/new"); |
|
|
|
|
} |
|
|
|
|
this.viewSection = 'lessons-edit'; |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
}, |
|
|
|
|
@ -515,6 +537,7 @@ |
|
|
|
|
onCoursePublish() { |
|
|
|
|
this.showErrors = true; |
|
|
|
|
if (this.$v.$invalid) { |
|
|
|
|
showNotification("error", "Заполните все необходимые поля"); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const publishButton = $('#course-redactor__publish-button'); |
|
|
|
|
@ -583,6 +606,17 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// Listen for changes to the current location. |
|
|
|
|
this.unlisten = history.listen((location, action) => { |
|
|
|
|
if (location.pathname === '/course/create/lessons') { |
|
|
|
|
this.viewSection = 'lessons'; |
|
|
|
|
} else if (location.pathname === '/course/create') { |
|
|
|
|
this.viewSection = 'course'; |
|
|
|
|
} else if (location.pathname === '/course/create/lessons/new') { |
|
|
|
|
this.viewSection = 'lessons-edit'; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
api.getCategories(this.accessToken) |
|
|
|
|
.then((response) => { |
|
|
|
|
if (response.data) { |
|
|
|
|
@ -677,6 +711,9 @@ |
|
|
|
|
return `https://lil.city/course/${suffix}`; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
beforeDestroy() { |
|
|
|
|
this.unlisten(); |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
'course': { |
|
|
|
|
handler: function (newValue, oldValue) { |
|
|
|
|
@ -707,6 +744,7 @@ |
|
|
|
|
'block-images': BlockImages, |
|
|
|
|
'block-video': BlockVideo, |
|
|
|
|
'lesson-redactor': LessonRedactor, |
|
|
|
|
'vue-draggable': Draggable, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -776,4 +814,18 @@ |
|
|
|
|
width: 140px; |
|
|
|
|
height: 140px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
.kit__section-remove { |
|
|
|
|
button.sortable__handle { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
cursor: -webkit-grab; |
|
|
|
|
cursor: grab; |
|
|
|
|
|
|
|
|
|
svg.icon-hamburger { |
|
|
|
|
width: 1em; |
|
|
|
|
height: 1em; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
Vitaly Baev
8 years ago
