Fixes various Firefox compatibility bugs as well as undesired text-se…

…lection across browsers

app/scripts/components/controls-tabs.components.jsx

@@ -35,7 +35,8 @@ export class ControlsTabs extends React.Component {
 		})
 
 		return (
-			<div className="controls-tabs">
+			<div className="controls-tabs"
+				onSelectstart="event.preventDefault();">
 				<ul className="controls-tabs-headers">
 					{headers}
 				</ul>

app/scripts/components/font-selector.components.jsx

@@ -19,7 +19,7 @@ export default class FontSelector extends React.Component {
 
 	render() {
 		const family = {
-			'font-family': `"${this.props.font.familyName}"`,
+			'fontFamily': `"${this.props.font.familyName}"`,
 		};
 
 		const classes = ClassNames({

app/scripts/components/prototypo-canvas.components.jsx

@@ -72,22 +72,22 @@ export default class PrototypoCanvas extends React.Component {
 	}
 
 	mouseMove(e) {
-		fontInstance.moveHandler.bind(fontInstance)(e);
+		fontInstance.onMove.bind(fontInstance)(e);
 	}
 
 	wheel(e) {
-		fontInstance.wheelHandler.bind(fontInstance)(e);
+		fontInstance.onWheel.bind(fontInstance)(e);
 		this.client.dispatchAction('/store-panel-param', {
 			zoom: fontInstance.zoom,
 		})
 	}
 
 	mouseDown(e) {
-		fontInstance.downHandler.bind(fontInstance)(e);
+		fontInstance.onDown.bind(fontInstance)(e);
 	}
 
 	mouseUp(e) {
-		fontInstance.upHandler.bind(fontInstance)(e);
+		fontInstance.onUp.bind(fontInstance)(e);
 		this.client.dispatchAction('/store-panel-param',{
 			pos: fontInstance.view.center,
 			zoom: fontInstance.zoom,

app/scripts/components/prototypo-text.components.jsx

@@ -82,7 +82,7 @@ export default class PrototypoText extends React.Component {
 
 	render() {
 		const style = {
-			'fontFamily':`${this.props.fontName || 'theyaintus'}, 'sans-serif'`,
+			'fontFamily':`'${this.props.fontName || 'theyaintus'}', sans-serif`,
 			'fontSize': `${this.props.panel.textFontSize || 1}em`,
 			'color': this.props.panel.invertedTextColors ? '#fefefe' : '#232323',
 			'backgroundColor': !this.props.panel.invertedTextColors ? '#fefefe' : '#232323',
@@ -119,7 +119,7 @@ export default class PrototypoText extends React.Component {
 				</ReactGeminiScrollbar>
 				<div className="action-bar">
 					<CloseButton click={() => { this.props.close('text') }}/>
-					<ZoomButtons 
+					<ZoomButtons
 						plus={() => { this.changeTextFontSize(this.props.panel.textFontSize + 0.3) }}
 						minus={() => { this.changeTextFontSize(this.props.panel.textFontSize - 0.3) }}
 					/>

app/scripts/components/prototypo-word.components.jsx

@@ -84,7 +84,7 @@ export default class PrototypoWord extends React.Component {
 
 	render() {
 		const style = {
-			'fontFamily':`${this.props.fontName || 'theyaintus'}, 'sans-serif'`,
+			'fontFamily':`'${this.props.fontName || 'theyaintus'}', sans-serif`,
 			'fontSize': `${this.props.panel.wordFontSize || 1}em`,
 			'color': this.props.panel.invertedWordColors ? '#fefefe' : '#232323',
 			'backgroundColor': !this.props.panel.invertedWordColors ? '#fefefe' : '#232323',
@@ -121,7 +121,7 @@ export default class PrototypoWord extends React.Component {
 				</ReactGeminiScrollbar>
 				<div className="action-bar">
 					<CloseButton click={() => { this.props.close('word') }}/>
-					<ZoomButtons 
+					<ZoomButtons
 						plus={() => { this.changeTextFontSize(this.props.panel.wordFontSize + 0.3) }}
 						minus={() => { this.changeTextFontSize(this.props.panel.wordFontSize - 0.3) }}
 					/>

app/scripts/components/sliders.components.jsx

@@ -76,8 +76,13 @@ export class SliderController extends React.Component {
 	componentWillMount() {
 		this.lifespan = new Lifespan();
 		this.client = LocalClient.instance();
-		this.bindedHandleUp = this.handleUp.bind(this);
-		this.bindedHandleMove = this.handleMove.bind(this);
+
+		document.addEventListener( 'mouseup',
+			this.handleUp.bind(this) );
+		window.addEventListener( 'mousemove',
+			this.handleMove.bind(this) );
+		document.addEventListener( 'selectstart',
+			this.handleSelectstart.bind(this) );
 	}
 
 	componentDidMount() {
@@ -93,6 +98,7 @@ export class SliderController extends React.Component {
 		if (this.props.disabled) {
 			return;
 		}
+
 		this.tracking = true;
 		const newX = e.pageX || e.screenX;
 		const {offsetLeft} = DOM.getAbsOffset(React.findDOMNode(this.refs.slider));
@@ -104,45 +110,48 @@ export class SliderController extends React.Component {
 		this.currentX = newX;
 
 		e.stopPropagation();
-
-		document.addEventListener('mouseup',this.bindedHandleUp);
-		window.addEventListener('mousemove',this.bindedHandleMove);
 	}
 
 	handleUp(e) {
-		if (this.tracking) {
-
-			this.tracking = false;
-			this.client.dispatchAction('/change-param',{value:this.props.value,name:this.props.name,label:this.props.label,force:true});
-
-			e.stopPropagation();
+		if ( !this.tracking ) {
+			return;
+		}
 
-			document.removeEventListener('mouseup',this.bindedHandleUp);
-			window.removeEventListener('mousemove',this.bindedHandleMove);
+		this.tracking = false;
+		this.client.dispatchAction('/change-param',{value:this.props.value,name:this.props.name,label:this.props.label,force:true});
 
-		}
+		e.stopPropagation();
 	}
 
 	handleMove(e) {
-		if (this.tracking) {
-			const newX = e.pageX || e.screenX;
-			const el = React.findDOMNode(this.refs.slider);
-			const {offsetLeft} = DOM.getAbsOffset(el);
+		if ( !this.tracking ) {
+			return;
+		}
 
-			let newValue;
+		const newX = e.pageX || e.screenX;
+		const el = React.findDOMNode(this.refs.slider);
+		const {offsetLeft} = DOM.getAbsOffset(el);
 
-			if (newX >= offsetLeft && newX <= offsetLeft + el.clientWidth) {
-				const variation = (newX - this.currentX) / this.sliderWidth * (this.props.max - this.props.min);
-				newValue = this.props.value + variation;
+		let newValue;
 
-				newValue = Math.min(Math.max(newValue,this.props.min),this.props.max);
-			}
-			else {
-				newValue = newX < offsetLeft ? this.props.min : this.props.max
-			}
+		if (newX >= offsetLeft && newX <= offsetLeft + el.clientWidth) {
+			const variation = (newX - this.currentX) / this.sliderWidth * (this.props.max - this.props.min);
+			newValue = this.props.value + variation;
+
+			newValue = Math.min(Math.max(newValue,this.props.min),this.props.max);
+		}
+		else {
+			newValue = newX < offsetLeft ? this.props.min : this.props.max
+		}
+
+		this.client.dispatchAction('/change-param',{value:newValue,name:this.props.name});
+		this.currentX = newX;
+	}
 
-			this.client.dispatchAction('/change-param',{value:newValue,name:this.props.name});
-			this.currentX = newX;
+	// This prevents preview text to be selected whil using the sliders
+	handleSelectstart(e) {
+		if ( this.tracking ) {
+			return e.preventDefault();
 		}
 	}
 

app/scripts/main.js

@@ -3,11 +3,16 @@ import pleaseWait from 'please-wait';
 pleaseWait.instance = pleaseWait.pleaseWait({
 	logo: '/assets/images/prototypo-loading.svg',
 	// backgroundColor: '#49e4a9',
-	loadingHtml: `Hello Prototypo`,
+	loadingHtml: 'Hello Prototypo',
 });
 
-var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
-var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
+// Naughty naughty browser sniffing.
+// TODO: replace UA sniffing by feature detection. Here's what we need:
+// - document.fonts
+// - what else?
+var ua = navigator.userAgent;
+var isSafari = ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1;
+var isIE = ua.indexOf('Trident') !== -1;
 
 import React from 'react';
 import Router from 'react-router';
@@ -33,7 +38,16 @@ import HoodieApi from './services/hoodie.services.js';
 import uuid from 'node-uuid';
 import {FontValues, AppValues} from './services/values.services.js';
 
-if (!isSafari && !isIE) {
+if ( isSafari || isIE ) {
+	const Route = Router.Route,
+		RouteHandler = Router.RouteHandler,
+		DefaultRoute = Router.DefaultRoute;
+
+	const content = document.getElementById('content');
+
+	React.render(<NotABrowser />, content);
+
+} else {
 
 	Stripe.setPublishableKey('pk_test_bK4DfNp7MqGoNYB3MNfYqOAi');
 
@@ -261,7 +275,8 @@ if (!isSafari && !isIE) {
 			'/store-text': ({value, propName}) => {
 				const patch = panel.set(propName,value).commit();
 				localServer.dispatchUpdate('/panel',patch);
-				fontInstance.subset = panel.head.toJS().text + panel.head.toJS().word || false;
+
+				fontInstance.subset = panel.head.toJS().text + panel.head.toJS().word || '';
 				saveAppValues();
 			},
 			'/load-app-values': ({values}) => {
@@ -305,9 +320,7 @@ if (!isSafari && !isIE) {
 				const typedataJSON = await Typefaces.getFont(repo);
 				const typedata = JSON.parse(typedataJSON);
 
-				await fontInstance.changeFont({
-					fontSource: typedataJSON,
-				});
+				await fontInstance.loadFont( typedata.fontinfo.familyName, typedataJSON );
 
 				localClient.dispatchAction('/create-font', fontInstance);
 
@@ -321,10 +334,8 @@ if (!isSafari && !isIE) {
 
 		localServer.on('action',({path, params}) => {
 
-			if(actions[path] !== void 0) {
-
+			if ( actions[path] !== void 0 ) {
 				actions[path](params);
-
 			}
 
 		}, localServer.lifespan);
@@ -347,7 +358,7 @@ if (!isSafari && !isIE) {
 					}
 				};
 
-				console.log(err);
+				console.error(err);
 			}
 
 			const typedataJSON = await Typefaces.getFont(appValues.values.template || 'john-fell.ptf');
@@ -361,26 +372,24 @@ if (!isSafari && !isIE) {
 			});
 
 			const presetValues = typedata.presets['Modern'];
-			const prototypoSource = await Typefaces.getPrototypo();
+			// const prototypoSource = await Typefaces.getPrototypo();
+			let workerDeps = document.querySelector('script[src*=prototypo\\.]').src;
 			let workerUrl;
-			let prototypoUrl;
 
-			// The worker will be built from URL when during development, and from
+			// The worker will be built from URL during development, and from
 			// source in production.
 			if ( process.env.NODE_ENV !== 'production' ) {
 				workerUrl = '/prototypo-canvas/src/worker.js';
-				prototypoUrl = '/prototypo.js/dist/prototypo.js';
 			}
 
-			const fontPromise = PrototypoCanvas.load({
+			const fontPromise = PrototypoCanvas.init({
 				canvas: canvasEl,
-				fontSource: typedataJSON,
-				prototypoSource: prototypoSource,
 				workerUrl,
-				prototypoUrl,
+				workerDeps,
 			});
 
 			const font = window.fontInstance = await fontPromise;
+			await font.loadFont( typedata.fontinfo.familyName, typedataJSON );
 			font.displayChar('A');
 			localClient.dispatchAction('/create-font', font);
 
@@ -395,7 +404,7 @@ if (!isSafari && !isIE) {
 			}
 			catch (err) {
 				localClient.dispatchAction('/load-values', _.extend(fontControls.get('values'), _.extend(initValues,presetValues)));
-				console.log(err);
+				console.error(err);
 			}
 		}
 		catch (err) {
@@ -436,12 +445,3 @@ if (!isSafari && !isIE) {
 			});
 		});
 }
-else {
-	const Route = Router.Route,
-		RouteHandler = Router.RouteHandler,
-		DefaultRoute = Router.DefaultRoute;
-
-	const content = document.getElementById('content');
-
-	React.render(<NotABrowser />, content);
-}

app/scripts/services/typefaces.services.js

@@ -19,24 +19,24 @@ Typefaces.getFont = (repo) => {
 	});
 }
 
-Typefaces.getPrototypo = () => {
-	const xhr = new XMLHttpRequest();
-
-	return new Promise((resolve,reject) => {
-		xhr.open('GET',document.querySelector('script[src*=prototypo\\.]').src);
-
-		xhr.onload = (e) => {
-			resolve(e.target.responseText);
-		}
-
-		xhr.onerror = (e) => {
-			reject(e);
-		}
-
-		xhr.send();
-
-	})
-}
+// Typefaces.getPrototypo = () => {
+// 	const xhr = new XMLHttpRequest();
+//
+// 	return new Promise((resolve,reject) => {
+// 		xhr.open('GET',document.querySelector('script[src*=prototypo\\.]').src);
+//
+// 		xhr.onload = (e) => {
+// 			resolve(e.target.responseText);
+// 		}
+//
+// 		xhr.onerror = (e) => {
+// 			reject(e);
+// 		}
+//
+// 		xhr.send();
+//
+// 	})
+// }
 
 export default {
 	Typefaces

app/styles/main.scss

@@ -114,7 +114,8 @@ a:visited {
 
 // ...except where it makes sense
 input,
-textarea {
+textarea,
+[contenteditable] {
 	-moz-user-select: text;
 	-webkit-user-select: text;
 	-ms-user-select: text;

link-locallib.sh

@@ -1,3 +1,2 @@
 npm link prototypo.js
 npm link prototypo-canvas
-npm link genese.ptf

package.json

@@ -20,7 +20,7 @@
     "pouchdb": "^3.6.0",
     "pouchdb-authentication": "^0.4.0",
     "pouchdb-hoodie-api": "^1.0.3",
-    "prototypo-canvas": "^1.2.0",
+    "prototypo-canvas": "^1.4.0",
     "prototypo.js": "^0.6.5",
     "react": "^0.13.3",
     "react-gemini-scrollbar": "^1.1.1",