Instead of using spoiler boolean and spoiler_text, simply check for non-blank spoiler_text

Federate spoiler_text using warning attribute on <content /> instead of a <category term="spoiler" />
Clean up schema file from accidental development migrations

6 files changed, 102 insertions, 103 deletions

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index 948ccf872..6d0188166 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -70,7 +70,6 @@ export function submitCompose() {
       in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
       media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')),
       sensitive: getState().getIn(['compose', 'sensitive']),
-      spoiler: getState().getIn(['compose', 'spoiler']),
       spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''),
       visibility: getState().getIn(['compose', 'private']) ? 'private' : (getState().getIn(['compose', 'unlisted']) ? 'unlisted' : 'public')
     }).then(function (response) {
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 74b52e485..ff90226d8 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -1,6 +1,7 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import emojify from '../emoji';
+import { FormattedMessage } from 'react-intl';
 
 const StatusContent = React.createClass({
 
@@ -13,17 +14,17 @@ const StatusContent = React.createClass({
     onClick: React.PropTypes.func
   },
 
+  getInitialState () {
+    return {
+      hidden: true
+    };
+  },
+
   mixins: [PureRenderMixin],
 
   componentDidMount () {
     const node  = ReactDOM.findDOMNode(this);
     const links = node.querySelectorAll('a');
-    const spoilers = node.querySelectorAll('.spoiler');
-
-    for (var i = 0; i < spoilers.length; ++i) {
-      let spoiler    = spoilers[i];
-      spoiler.addEventListener('click', this.onSpoilerClick.bind(this, spoiler), true);
-    }
 
     for (var i = 0; i < links.length; ++i) {
       let link    = links[i];
@@ -56,18 +57,6 @@ const StatusContent = React.createClass({
     }
   },
 
-  onSpoilerClick (spoiler, e) {
-    if (e.button === 0) {
-      //only toggle if we're not clicking a visible link
-      var hasClass = $(spoiler).hasClass('spoiler-on');
-      if (hasClass || e.target === spoiler) {
-        e.stopPropagation();
-        e.preventDefault();
-        $(spoiler).siblings(".spoiler").andSelf().toggleClass('spoiler-on', !hasClass);
-      }
-    }
-  },
-
   handleMouseDown (e) {
     this.startXY = [e.clientX, e.clientY];
   },
@@ -87,20 +76,40 @@ const StatusContent = React.createClass({
     this.startXY = null;
   },
 
+  handleSpoilerClick () {
+    this.setState({ hidden: !this.state.hidden });
+  },
+
   render () {
     const { status } = this.props;
+    const { hidden } = this.state;
 
     const content = { __html: emojify(status.get('content')) };
-
-    return (
-      <div
-        className='status__content'
-        style={{ cursor: 'pointer' }}
-        dangerouslySetInnerHTML={content}
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}
-      />
-    );
+    const spoilerContent = { __html: emojify(status.get('spoiler_text')) };
+
+    if (status.get('spoiler_text').length > 0) {
+      const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
+
+      return (
+        <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+          <p>
+            <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>{toggleText}</a>
+          </p>
+
+          <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
+        </div>
+      );
+    } else {
+      return (
+        <div
+          className='status__content'
+          style={{ cursor: 'pointer' }}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+          dangerouslySetInnerHTML={content}
+        />
+      );
+    }
   },
 
 });
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
index 84d273299..48363a968 100644
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -155,7 +155,7 @@ const ComposeForm = React.createClass({
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
           <div style={{ float: 'right' }}><Button text={intl.formatMessage(messages.publish)} onClick={this.handleSubmit} disabled={disabled} /></div>
-          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.spoiler ? (this.props.spoiler_text + "\n" + this.props.text) : this.props.text} /></div>
+          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div>
           <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>
 
diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
index 8a14dda69..94c94b4b7 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
@@ -12,7 +12,8 @@ const UploadForm = React.createClass({
   propTypes: {
     media: ImmutablePropTypes.list.isRequired,
     is_uploading: React.PropTypes.bool,
-    onRemoveFile: React.PropTypes.func.isRequired
+    onRemoveFile: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
   },
 
   mixins: [PureRenderMixin],
diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx
index 1c6c3d4f4..d3a84842f 100644
--- a/app/assets/javascripts/components/reducers/compose.jsx
+++ b/app/assets/javascripts/components/reducers/compose.jsx
@@ -96,68 +96,68 @@ const insertSuggestion = (state, position, token, completion) => {
 
 export default function compose(state = initialState, action) {
   switch(action.type) {
-    case STORE_HYDRATE:
-      return state.merge(action.state.get('compose'));
-    case COMPOSE_MOUNT:
-      return state.set('mounted', true);
-    case COMPOSE_UNMOUNT:
-      return state.set('mounted', false);
-    case COMPOSE_SENSITIVITY_CHANGE:
-      return state.set('sensitive', action.checked);
-    case COMPOSE_SPOILERNESS_CHANGE:
-      return state.set('spoiler', action.checked);
-    case COMPOSE_SPOILER_TEXT_CHANGE:
-      return state.set('spoiler_text', action.text);
-    case COMPOSE_VISIBILITY_CHANGE:
-      return state.set('private', action.checked);
-    case COMPOSE_LISTABILITY_CHANGE:
-      return state.set('unlisted', action.checked);
-    case COMPOSE_CHANGE:
-      return state.set('text', action.text);
-    case COMPOSE_REPLY:
-      return state.withMutations(map => {
-        map.set('in_reply_to', action.status.get('id'));
-        map.set('text', statusToTextMentions(state, action.status));
-      });
-    case COMPOSE_REPLY_CANCEL:
-      return state.withMutations(map => {
-        map.set('in_reply_to', null);
-        map.set('text', '');
-      });
-    case COMPOSE_SUBMIT_REQUEST:
-      return state.set('is_submitting', true);
-    case COMPOSE_SUBMIT_SUCCESS:
-      return clearAll(state);
-    case COMPOSE_SUBMIT_FAIL:
-      return state.set('is_submitting', false);
-    case COMPOSE_UPLOAD_REQUEST:
-      return state.withMutations(map => {
-        map.set('is_uploading', true);
-        map.set('fileDropDate', new Date());
-      });
-    case COMPOSE_UPLOAD_SUCCESS:
-      return appendMedia(state, Immutable.fromJS(action.media));
-    case COMPOSE_UPLOAD_FAIL:
-      return state.set('is_uploading', false);
-    case COMPOSE_UPLOAD_UNDO:
-      return removeMedia(state, action.media_id);
-    case COMPOSE_UPLOAD_PROGRESS:
-      return state.set('progress', Math.round((action.loaded / action.total) * 100));
-    case COMPOSE_MENTION:
-      return state.update('text', text => `${text}@${action.account.get('acct')} `);
-    case COMPOSE_SUGGESTIONS_CLEAR:
-      return state.update('suggestions', Immutable.List(), list => list.clear()).set('suggestion_token', null);
-    case COMPOSE_SUGGESTIONS_READY:
-      return state.set('suggestions', Immutable.List(action.accounts.map(item => item.id))).set('suggestion_token', action.token);
-    case COMPOSE_SUGGESTION_SELECT:
-      return insertSuggestion(state, action.position, action.token, action.completion);
-    case TIMELINE_DELETE:
-      if (action.id === state.get('in_reply_to')) {
-        return state.set('in_reply_to', null);
-      } else {
-        return state;
-      }
-    default:
+  case STORE_HYDRATE:
+    return state.merge(action.state.get('compose'));
+  case COMPOSE_MOUNT:
+    return state.set('mounted', true);
+  case COMPOSE_UNMOUNT:
+    return state.set('mounted', false);
+  case COMPOSE_SENSITIVITY_CHANGE:
+    return state.set('sensitive', action.checked);
+  case COMPOSE_SPOILERNESS_CHANGE:
+    return (action.checked ? state : state.set('spoiler_text', '')).set('spoiler', action.checked);
+  case COMPOSE_SPOILER_TEXT_CHANGE:
+    return state.set('spoiler_text', action.text);
+  case COMPOSE_VISIBILITY_CHANGE:
+    return state.set('private', action.checked);
+  case COMPOSE_LISTABILITY_CHANGE:
+    return state.set('unlisted', action.checked);
+  case COMPOSE_CHANGE:
+    return state.set('text', action.text);
+  case COMPOSE_REPLY:
+    return state.withMutations(map => {
+      map.set('in_reply_to', action.status.get('id'));
+      map.set('text', statusToTextMentions(state, action.status));
+    });
+  case COMPOSE_REPLY_CANCEL:
+    return state.withMutations(map => {
+      map.set('in_reply_to', null);
+      map.set('text', '');
+    });
+  case COMPOSE_SUBMIT_REQUEST:
+    return state.set('is_submitting', true);
+  case COMPOSE_SUBMIT_SUCCESS:
+    return clearAll(state);
+  case COMPOSE_SUBMIT_FAIL:
+    return state.set('is_submitting', false);
+  case COMPOSE_UPLOAD_REQUEST:
+    return state.withMutations(map => {
+      map.set('is_uploading', true);
+      map.set('fileDropDate', new Date());
+    });
+  case COMPOSE_UPLOAD_SUCCESS:
+    return appendMedia(state, Immutable.fromJS(action.media));
+  case COMPOSE_UPLOAD_FAIL:
+    return state.set('is_uploading', false);
+  case COMPOSE_UPLOAD_UNDO:
+    return removeMedia(state, action.media_id);
+  case COMPOSE_UPLOAD_PROGRESS:
+    return state.set('progress', Math.round((action.loaded / action.total) * 100));
+  case COMPOSE_MENTION:
+    return state.update('text', text => `${text}@${action.account.get('acct')} `);
+  case COMPOSE_SUGGESTIONS_CLEAR:
+    return state.update('suggestions', Immutable.List(), list => list.clear()).set('suggestion_token', null);
+  case COMPOSE_SUGGESTIONS_READY:
+    return state.set('suggestions', Immutable.List(action.accounts.map(item => item.id))).set('suggestion_token', action.token);
+  case COMPOSE_SUGGESTION_SELECT:
+    return insertSuggestion(state, action.position, action.token, action.completion);
+  case TIMELINE_DELETE:
+    if (action.id === state.get('in_reply_to')) {
+      return state.set('in_reply_to', null);
+    } else {
       return state;
+    }
+  default:
+    return state;
   }
 };
diff --git a/app/assets/javascripts/extras.jsx b/app/assets/javascripts/extras.jsx
index 5784d17c2..5738863dd 100644
--- a/app/assets/javascripts/extras.jsx
+++ b/app/assets/javascripts/extras.jsx
@@ -14,16 +14,6 @@ $(() => {
     }
   });
 
-  $.each($('.spoiler'), (_, content) => {
-    $(content).on('click', e => {
-      var hasClass = $(content).hasClass('spoiler-on');
-      if (hasClass || e.target === content) {
-        e.preventDefault();
-        $(content).siblings(".spoiler").andSelf().toggleClass('spoiler-on', !hasClass);
-      }
-    });
-  });
-
   $('.media-spoiler').on('click', e => {
     $(e.target).hide();
   });