Merge

grunt/nw.js

@@ -6,8 +6,7 @@ module.exports = function(grunt) {
 	var options = {
 		buildDir: 'build/nwjs/',
 		cacheDir: 'nwbuilder-cache/',
-		version: '0.16.0',
-		'chromium-args': '--enable-threaded-compositing',
+		version: '0.17.4',
 		macIcns: 'src/common/img/logo.icns',
 		winIco: 'src/common/img/logo.ico'
 	}

src/common/router.js

@@ -67,7 +67,8 @@ TwineRouter.map({
 				const story = state.story.stories.find(
 					story => story.id === this.$route.params.id
 				);
-				const formatName = story.format || state.pref.defaultFormat;
+
+				const formatName = story.storyFormat || state.pref.defaultFormat;
 				const format = state.storyFormat.formats.find(
 					format => format.name === formatName
 				);
@@ -112,7 +113,7 @@ TwineRouter.map({
 				const story = state.story.stories.find(
 					story => story.id === this.$route.params.id
 				);
-				const formatName = story.format || state.pref.defaultFormat;
+				const formatName = story.storyFormat || state.pref.defaultFormat;
 				const format = state.storyFormat.formats.find(
 					format => format.name === formatName
 				);
@@ -134,9 +135,9 @@ TwineRouter.map({
 			ready() {
 				const state = this.$store.state;
 				const story = state.story.stories.find(
-					story => story.id === this.$route.params.id
+					story => story.id === this.$route.params.storyId
 				);
-				const formatName = story.format || state.pref.defaultFormat;
+				const formatName = story.storyFormat || state.pref.defaultFormat;
 				const format = state.storyFormat.formats.find(
 					format => format.name === formatName
 				);

src/data/import.js

@@ -72,7 +72,7 @@ function domToObject(storyEl, forceLastUpdate) {
 								: 100,
 						height:
 							passageEl.attributes.height ?
-								parseInt(passageEl.attributes.width.value)
+								parseInt(passageEl.attributes.height.value)
 								: 100,
 						tags:
 							passageEl.attributes.tags.value === '' ?

src/data/story.js

@@ -132,6 +132,19 @@ const storyStore = module.exports = {
 				props
 			);
 
+			/*
+			Force the top and left properties to be at least zero, to keep
+			passages onscreen.
+			*/
+
+			if (newPassage.left < 0) {
+				newPassage.left = 0;
+			}
+
+			if (newPassage.top < 0) {
+				newPassage.top = 0;
+			}
+
 			newPassage.story = story.id;
 			story.passages.push(newPassage);
 
@@ -145,6 +158,19 @@ const storyStore = module.exports = {
 		UPDATE_PASSAGE_IN_STORY(state, storyId, passageId, props) {
 			let story = getStoryById(state, storyId);
 
+			/*
+			Force the top and left properties to be at least zero, to keep
+			passages onscreen.
+			*/
+
+			if (props.left && props.left < 0) {
+				props.left = 0;
+			}
+
+			if (props.top && props.top < 0) {
+				props.top = 0;
+			}
+
 			Object.assign(getPassageInStory(story, passageId), props);
 			story.lastUpdate = new Date();
 		},

src/dialogs/formats/index.html

@@ -10,15 +10,15 @@
 		{{'Story formats control the appearance and behavior of stories during play.' | say}}
 		</p>
 
-		<format-item v-for="format in storyFormats" :format="format"></format-item>
+		<format-item v-for="format in storyFormats" :format="format" transition="fade-in-out"></format-item>
 	</tab-item>
 
 	<tab-item name="Proofing Formats">
 		<p>
 		{{'Proofing formats create a versions of stories tailored for editing and proofreading.' | say}}
 		</p>
 
-		<format-item v-for="format in proofingFormats" :format="format"></format-item>
+		<format-item v-for="format in proofingFormats" :format="format" transition="fade-in-out"></format-item>
 	</tab-item>
 
 	<tab-item name="Add a New Format">

src/dialogs/formats/index.js

@@ -7,9 +7,8 @@ module.exports = Vue.extend({
 	template: require('./index.html'),
 
 	data: () => ({
-		// Used to create the <format-item>s using v-for.
-		storyFormats: [],
-		proofingFormats: [],
+		// Detail about each format.
+		loadedFormats: [],
 
 		// Determines whether to show the error <span>, and with what text.
 		error: '',
@@ -24,20 +23,53 @@ module.exports = Vue.extend({
 		newFormatUrl: ''
 	}),
 
+	/*
+	These are linked to the Vuex formatNames, so that when a format is deleted
+	it will disappear from these properties.
+	*/
+
+	computed: {
+		proofingFormats() {
+			let result = [];
+
+			this.formatNames.forEach(name => {
+				const format = this.loadedFormats.find(
+					format => format.name === name
+				);
+
+				if (format && format.properties.proofing) {
+					result.push(format);
+				}
+			});
+
+			return result;
+		},
+
+		storyFormats() {
+			let result = [];
+
+			this.formatNames.forEach(name => {
+				const format = this.loadedFormats.find(
+					format => format.name === name
+				);
+
+				if (format && !format.properties.proofing) {
+					result.push(format);
+				}
+			});
+
+			return result;
+		}
+	},
+
 	methods: {
 		// Loads the next pending format.
 
 		loadNext() {
 			if (this.loadIndex < this.formatNames.length) {
 				this.loadFormat(this.formatNames[this.loadIndex])
 				.then(format => {
-					if (format.properties.proofing) {
-						this.proofingFormats.push(format);
-					}
-					else {
-						this.storyFormats.push(format);
-					}
-
+					this.loadedFormats.push(format);
 					this.loadIndex++;
 					this.loadNext();
 				})

src/dialogs/formats/item.js

@@ -1,7 +1,7 @@
 'use strict';
 const Vue = require('vue');
 const locale = require('../../locale');
-const { confirm } = require('../../ui');
+const { confirm } = require('../confirm');
 const { deleteFormat, setPref } = require('../../data/actions');
 
 module.exports = Vue.extend({

src/editors/stylesheet/index.html

@@ -8,6 +8,6 @@
 	</p>
 
 	<div class="expand">
-		<code-mirror :options="cmOptions" :text="story.stylesheet" @cm-change="save" v-ref:codemirror></code-mirror>
+		<code-mirror :options="cmOptions" :text="source" @cm-change="save" v-ref:codemirror></code-mirror>
 	</div>
 </modal-dialog>

src/editors/stylesheet/index.js

@@ -53,6 +53,10 @@ module.exports = Vue.extend({
 	vuex: {
 		actions: {
 			updateStory
+		},
+
+		getters: {
+			allStories: state => state.story.stories
 		}
 	}
 });

src/nw/index.js

@@ -19,6 +19,8 @@ module.exports = {
 			return;
 		}
 
+		require('core-js');
+
 		const startupErrorTemplate = require('./startup-error.ejs');
 		let startupTask = 'beginning startup tasks';
 

src/story-edit-view/index.js

@@ -141,6 +141,16 @@ module.exports = Vue.extend({
 		}
 	},
 
+	watch: {
+		'story.name': {
+			handler(value) {
+				document.title = value;
+			},
+
+			immediate: true
+		}
+	},
+
 	ready() {
 		this.resize();
 		this.on(window, 'resize', this.resize);

src/story-edit-view/passage-item/index.html

@@ -10,5 +10,5 @@
 		</p>
 	</div> <!-- .frame -->
 
-	<passage-menu v-if="needsMenu" :passage="passage"></passage-menu>
+	<passage-menu v-if="needsMenu" :passage="passage" :parent-story="parentStory"></passage-menu>
 </div>

src/story-edit-view/passage-item/passage-menu/index.js

@@ -1,6 +1,7 @@
 // A contextual menu that appears when the user points at a passage.
 
 const Vue = require('vue');
+const { updateStory } = require('../../../data/actions');
 
 module.exports = Vue.extend({
 	template: require('./index.html'),
@@ -9,6 +10,11 @@ module.exports = Vue.extend({
 		passage: {
 			type: Object,
 			required: true
+		},
+
+		parentStory: {
+			type: Object,
+			required: true
 		}
 	},
 
@@ -22,15 +28,25 @@ module.exports = Vue.extend({
 		},
 
 		test() {
-			this.$dispatch('story-test', this.passage.id);
+			window.open(
+				'#stories/' + this.parentStory.id + '/test/' + this.passage.id,
+				'twinestory_test_' + this.parentStory.id
+			);
 		},
 
 		setAsStart() {
-			this.$dispatch('story-set-start', this.passage.id);
+			this.updateStory(
+				this.parentStory.id, 
+				{ startPassage: this.passage.id }
+			);
 		}
 	},
 
 	components: {
 		'drop-down': require('../../../ui/drop-down')
+	},
+
+	vuex: {
+		actions: { updateStory }
 	}
 });

src/story-edit-view/story-toolbar/story-menu/index.js

@@ -49,7 +49,7 @@ module.exports = Vue.extend({
 					),
 				buttonLabel:
 					'<i class="fa fa-ok"></i> ' + locale.say('Rename'),
-				defaultText:
+				response:
 					this.story.name,
 				blankTextError:
 					locale.say('Please enter a name.')

src/ui/file-drag-n-drop/index.html

@@ -0,0 +1,7 @@
+<div :class="'drag-n-drop ' + (receiving ? 'receiving' : '')" @drop.prevent="fileReceived">
+	<div class="label">
+		<slot></slot>
+	</div>
+
+	<div class="inner-border"></div>
+</div>

src/ui/file-drag-n-drop/index.js

@@ -1,40 +1,51 @@
+/*
+Manages a drag-and-drop-target on a component. When a file is dragged onto it,
+this component dispatches a `file-drag-n-drop` event to its parent.
+*/
+
 const Vue = require('vue');
-const { default: { on, off } } = require('oui-dom-events');
+const domEvents = require('../../vue/mixins/dom-events');
 
 module.exports = Vue.extend({
-	template:
-		`<div :class="'drag-n-drop ' + (dragover ? 'dragover' : '')">
-			<div class='label'>
-				<slot></slot>
-			</div>
-			<div class='inner-border'></div>
-		</div>`,
+	template: require('./index.html'),
+
 	data: () => ({
-		dragover: false,
+		/* Whether the user has a file dragged onto this component. */
+
+		receiving: false
 	}),
+
 	ready() {
-		const {$el, $parent:{$el:parentEl}} = this;
+		const parentEl = this.$parent.$el;
 
-		on(parentEl, 'dragenter.file-drag-n-drop', () => {
-			this.dragover = true;
-		});
+		/*
+		Make ourselves visible when the user drags a file onto us.
+		*/
 
-		on(parentEl, 'dragexit.file-drag-n-drop', () => {
-			this.dragover = false;
+		this.on(parentEl, 'dragenter', () => {
+			this.receiving = true;
 		});
-		// The below is necessary to prevent the browser from
-		// opening the file directly, on drop.
-		on(parentEl, 'dragover.file-drag-n-drop', e => {
-			e.preventDefault();
+
+		this.on(parentEl, 'dragexit', () => {
+			this.receiving = false;
 		});
-		on($el, 'drop', e => {
+
+		/*
+		The below is necessary to prevent the browser from opening the file
+		directly after the user drops a file on us.
+		*/
+
+		this.on(parentEl, 'dragover', e => {
 			e.preventDefault();
-			this.$dispatch('file-drag-n-drop', e.dataTransfer.files);
-			this.dragover = false;
 		});
 	},
 
-	beforeDestroy() {
-		off(this.$parent.$el, '.file-drag-n-drop');
+	methods: {
+		fileReceived(e) {
+			this.$dispatch('file-drag-n-drop', e.dataTransfer.files);
+			this.receiving = false;
+		}
 	},
+
+	mixins: [domEvents]
 });

src/ui/file-drag-n-drop/index.less

@@ -22,7 +22,7 @@
 
 	// Display a dotted rectangle overlay when dragging
 
-	&.dragover {
+	&.receiving {
 		z-index: 100; // In front of the UI.
 		background: fadeout(@color-darken, 20%);
 		color: @color-paper;
@@ -43,4 +43,4 @@
 			box-sizing: border-box;
 		}
 	}
-}
+}