Make useIPAPronunciation a browser/session setting

public/api/User.php

@@ -81,13 +81,12 @@ VALUES (?, ?, ?, ?, ?, ?)';
   public function setUserData ($token, $user_data) {
     $token_data = $this->token->decode($token);
     if ($token_data !== false) {
-      $query = 'UPDATE users SET email=?, public_name=?, username=?, allow_email=?, use_ipa=? WHERE id=?';
+      $query = 'UPDATE users SET email=?, public_name=?, username=?, allow_email=? WHERE id=?';
       $properties = array(
         $user_data['email'],
         $user_data['publicName'],
         $user_data['username'],
         $user_data['allowEmail'],
-        $user_data['useIPAPronunciation'],
         $user_id,
       );
       $update_success = $this->db->execute($query, $properties);
@@ -112,7 +111,6 @@ VALUES (?, ?, ?, ?, ?, ?)';
         'username' => $user['username'],
         'publicName' => $user['public_name'],
         'allowEmails' => $user['allow_email'] == 1 ? true : false,
-        'useIPAPronunciation' => $user['use_ipa'] == 1 ? true : false,
       );
     }
 

public/api/structure.sql

@@ -21,7 +21,7 @@ CREATE TABLE IF NOT EXISTS `dictionaries` (
   `last_updated` int(11) DEFAULT NULL,
   `created_on` int(11) NOT NULL,
   PRIMARY KEY (`id`)
-) ENGINE=MyISAM AUTO_INCREMENT=421 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
+) ENGINE=MyISAM AUTO_INCREMENT=422 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 DELIMITER $$
 CREATE TRIGGER `delete_dictionary_parts` AFTER DELETE ON `dictionaries` FOR EACH ROW BEGIN
 	DELETE FROM words WHERE words.dictionary=old.id;
@@ -56,7 +56,6 @@ CREATE TABLE IF NOT EXISTS `users` (
   `username` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
   `current_dictionary` int(11) DEFAULT NULL,
   `allow_email` tinyint(1) NOT NULL DEFAULT '1',
-  `use_ipa` tinyint(1) NOT NULL DEFAULT '1',
   `last_login` int(11) DEFAULT NULL,
   `password_reset_code` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
   `password_reset_date` int(11) DEFAULT NULL,
@@ -64,7 +63,7 @@ CREATE TABLE IF NOT EXISTS `users` (
   PRIMARY KEY (`id`),
   UNIQUE KEY `email` (`email`),
   UNIQUE KEY `username` (`username`)
-) ENGINE=MyISAM AUTO_INCREMENT=183 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
+) ENGINE=MyISAM AUTO_INCREMENT=184 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 DELIMITER $$
 CREATE TRIGGER `Delete_User_Dictionaries` AFTER DELETE ON `users` FOR EACH ROW DELETE FROM dictionaries WHERE dictionaries.user = old.id
 $$

src/components/MainDisplay.jsx

@@ -65,7 +65,6 @@ export class MainDisplay extends Component {
       wordsAreFiltered,
       wordsInCurrentList,
       currentPage,
-      useIpaPronunciationField,
       stats,
       setPage,
       updateDisplay,

src/components/management/AccountManager/MyAccount.jsx

@@ -11,7 +11,6 @@ export class MyAccount extends Component {
       username: PropTypes.string.isRequired,
       publicName: PropTypes.string.isRequired,
       allowEmails: PropTypes.bool.isRequired,
-      useIPAPronunciation: PropTypes.bool.isRequired,
       userDictionaries: PropTypes.array.isRequired,
       updateUserData: PropTypes.func,
       changeDictionary: PropTypes.func,
@@ -22,7 +21,6 @@ export class MyAccount extends Component {
       username: this.props.username,
       publicName: this.props.publicName,
       allowEmails: this.props.allowEmails,
-      useIPAPronunciation: this.props.useIPAPronunciation,
       userDictionaries: this.props.userDictionaries,
     };
   }
@@ -59,14 +57,6 @@ export class MyAccount extends Component {
                 </label>
               </div>
             </div>
-            <div className='field'>
-              <input className='is-checkradio is-rtl' type='checkbox' id='useIPAPronunciation'
-                checked={this.state.useIPAPronunciation ? 'checked' : false}
-                onChange={(event) => { this.setState({ useIPAPronunciation: !this.state.useIPAPronunciation }) }} />
-              <label className='label is-unselectable' htmlFor='useIPAPronunciation'>
-                Use IPA in Pronunciation Fields
-              </label>
-            </div>
           </div>
           
           <div className='column'>

src/components/management/AccountManager/index.jsx

@@ -28,7 +28,6 @@ export class AccountManager extends Component {
         username: userData && userData.hasOwnProperty('username') ? userData.username : DEFAULT_USER_DATA.username,
         publicName: userData && userData.hasOwnProperty('publicName') ? userData.publicName : DEFAULT_USER_DATA.publicName,
         allowEmails: userData && userData.hasOwnProperty('allowEmails') ? userData.allowEmails : DEFAULT_USER_DATA.allowEmails,
-        useIPAPronunciation: userData && userData.hasOwnProperty('useIPAPronunciation') ? userData.useIPAPronunciation : DEFAULT_USER_DATA.useIPAPronunciation,
         itemsPerPage: userData && userData.hasOwnProperty('itemsPerPage') ? userData.itemsPerPage : DEFAULT_USER_DATA.itemsPerPage,
       },
       userDictionaries: [],
@@ -123,7 +122,6 @@ export class AccountManager extends Component {
               username={ userData.username }
               publicName={ userData.publicName }
               allowEmails={ userData.allowEmails }
-              useIPAPronunciation={ userData.useIPAPronunciation }
               userDictionaries={ this.state.userDictionaries }
               updateUserData={ this.updateUserData.bind(this) }
               changeDictionary={ () => {} } />

src/components/management/IPAField.jsx

@@ -1,6 +1,9 @@
 import Inferno from 'inferno';
 import { Component } from 'inferno';
 import PropTypes from 'prop-types';
+import store from 'store';
+
+import { DEFAULT_USER_DATA } from '../../Constants';
 
 const phondueUsage = require('../../../vendor/KeyboardFire/phondue/usage.html');
 const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json');
@@ -22,7 +25,7 @@ export class IPAField extends Component {
       helpText: PropTypes.string,
       placeholder: PropTypes.string,
       isDisplayOnly: PropTypes.bool,
-      preventIPA: PropTypes.bool,
+      useIPASetting: PropTypes.bool,
       onInput: PropTypes.func,
       onChange: PropTypes.func,
     }, props, 'prop', 'IPAField');
@@ -31,6 +34,7 @@ export class IPAField extends Component {
       value: props.value || '',
       doShowHelp: false,
       doShowTable: false,
+      useIPA: this.useIPA,
     }
 
     this.field = null;
@@ -42,6 +46,23 @@ export class IPAField extends Component {
     });
   }
 
+  get useIPA() {
+    if (this.props.useIPASetting) {
+      const userData = store.get('LexicongaUserData');
+      return userData && userData.hasOwnProperty('useIPAPronunciation')
+        ? userData.useIPAPronunciation : DEFAULT_USER_DATA.useIPAPronunciation;
+    }
+    return true;
+  }
+
+  toggleIPA () {
+    const userData = store.get('LexicongaUserData');
+    userData.useIPAPronunciation = !this.useIPA;
+    this.setState({ useIPA: userData.useIPAPronunciation }, () => {
+      store.set('LexicongaUserData', userData);
+    });
+  }
+
   showHelp () {
     if (this.state.doShowHelp) {
       return (
@@ -105,7 +126,7 @@ export class IPAField extends Component {
   onInput (event) {
     let val = event.target.value;
     let pos;
-    if (!this.props.preventIPA) {
+    if (this.state.useIPA) {
       pos = this.field.selectionStart || val.length;
 
       if (event.key) {
@@ -121,7 +142,7 @@ export class IPAField extends Component {
 
     if (val !== this.state.value) {
       this.setState({ value: val }, () => {
-        if (!this.props.preventIPA) {
+        if (this.state.useIPA) {
           this.field.focus();
           this.field.setSelectionRange(pos, pos);
         }
@@ -144,6 +165,19 @@ export class IPAField extends Component {
       <div className='field'>
         <label className='label' htmlFor={ this.props.id || null }>
           { this.props.label || 'Pronunciation' }
+          { this.props.useIPASetting && 
+            <a className='button is-small is-pulled-right is-inline'
+              title='Toggle IPA'
+              aria-label={`Toggle IPA`}
+              onClick={this.toggleIPA.bind(this)}>
+              <span className='icon'>
+                <i className={`fa fa-${this.state.useIPA ? 'ban' : 'check-circle-o'}`} />
+              </span>
+              <span className='is-hidden-touch'>
+                {this.state.useIPA ? 'Dis' : 'En' }able IPA
+              </span>
+            </a>
+          }
         </label>
         {
           this.props.helpText
@@ -155,7 +189,7 @@ export class IPAField extends Component {
         }
         <div className='control'>
           <input className='input' id={ this.props.id || null } type='text'
-            placeholder={ this.props.placeholder || (!this.props.preventIPA ? '[prə.ˌnʌn.si.ˈeɪ.ʃən]' : 'pronunciation') }
+            placeholder={ this.props.placeholder || (this.state.useIPA ? '[prə.ˌnʌn.si.ˈeɪ.ʃən]' : 'pronunciation') }
             disabled={ !!this.props.isDisplayOnly }
             ref={ (input) => this.field = input }
             value={ this.state.value }
@@ -163,7 +197,7 @@ export class IPAField extends Component {
             onKeyDown={ (event) => this.onInput(event) }
             onChange={ () => this.onChange() } />
         </div>
-        { !this.props.preventIPA && this.showButtons() }
+        { this.state.useIPA && this.showButtons() }
       </div>
     );
   }

src/components/management/WordForm.jsx

@@ -103,9 +103,6 @@ export class WordForm extends Component {
   }
 
   render () {
-    const userData = store.get('LexicongaUserData');
-    const useIpaField = userData && userData.hasOwnProperty('useIPAPronunciation')
-      ? userData.useIPAPronunciation : DEFAULT_USER_DATA.useIPAPronunciation;
     return (
       <div className='box'>
         <div className='field'>
@@ -125,7 +122,7 @@ export class WordForm extends Component {
         </div>
 
         <IPAField value={ this.state.wordPronunciation }
-          preventIPA={ !useIpaField }
+          useIPASetting={ true }
           onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
 
         <div className='field'>