chapters.js

Vue.component('chapters', {	
	template: `<div v-if="chapters.length > 0" class="field">
        <h2 class="ui header">Rearrange Chapters</h2>  
        <p><i class="arrows alternate icon"></i> Tap on chapter to start moving</p>
        <div class="ui grid">
            <div v-for="c in chapters" class="four wide column">
            	<div class="ui grid">
            		<div class="chapter" :class="{ 'twelve wide column': moving, 'sixteen wide column': !moving }">
			            <div class="ui card" @click="startMoving(c)">	
						    <div class="image">						    
						    	<div class="ui red right corner tiny label">
						    	  <div style="margin-left: 20px; margin-top: 4px; font-weight: bold; font-size: 14px;">{{c.chapterIndex+1}}</div>
						    	</div>
						    	<img :src="getThumbnailUrl(c)">		
						    </div>		
						    <div class="ui bottom attached button">
						      {{c.nameV}}
						    </div>
			            </div>
			        </div>
		            <div class="four wide column middle aligned"  v-if="moving">
		            	<button class="ui green icon tiny button" 
		            			@click="moveChapter(c.chapterIndex)"
		            			type="button">
		            		<i class="plus icon"></i>
		            	</button>
		            </div>
		        </div>
            </div>
        </div>        
    </div>`,
	props: ['file'],
	data: function() {
		return {
			chapters: [],
			moving: null
		};
	},
	watch: {
		file: function(value) {
			if (value) {
				this.queryChapters(value);
			}
		}
	},
	methods: {
		getThumbnailUrl(chapter) {
			if (this.file) {
				return `../../../${this.file.vUrl.replace('.zip', `/Slide${chapter.startIndex+1}_tn.jpg`)}`
			}
		},
		queryChapters(file) {
			$.getJSON(`../../../${file.vUrl.replace('.zip', '/chapters.json')}`)
				.done(data => this.parseChapters(data.chapters));
		},
		parseChapters(chapters) {
			for (let i = 0; i < chapters.length; i++) {
				const c = chapters[i];
				c.chapterIndex = i;
				this.chapters.push(c);
			}
		},
		startMoving(chapter) {
			if (this.moving) {
				this.moving = null;
			} else {
				this.moving = chapter;	
			}
		},
		moveChapter(toIndex) {
			const fromIndex = this.moving.chapterIndex;

			for (let i = 0; i < this.chapters.length; i++) {
				const c = this.chapters[i];

				if (c.chapterIndex > fromIndex && c.chapterIndex <= toIndex) {
					c.chapterIndex--;
				} else if (c.chapterIndex < fromIndex && c.chapterIndex >= toIndex) {
					c.chapterIndex++;
				}
			}

			for (let i = 0; i < this.chapters.length; i++) {
				const c = this.chapters[i];

				if (c.chapterIndex == fromIndex) {
					c.chapterIndex = toIndex;
					break;
				}
			}

			this.chapters.sort((a,b) => {
				return a.chapterIndex > b.chapterIndex;
			});

			this.moving = null;
		}
	}
});

Usage: <chapters :file="file"></chapters> where file is a pitcher file with vUrl.