Implemented article composer

extend.php

@@ -15,6 +15,7 @@
 // Controllers
 use V17Development\FlarumBlog\Controller\BlogOverviewController;
 use V17Development\FlarumBlog\Controller\BlogItemController;
+use V17Development\FlarumBlog\Controller\BlogComposerController;
 
 // Extender
 use V17Development\FlarumBlog\Extenders\ThemeExtender;
@@ -43,6 +44,7 @@
         ->js(__DIR__.'/js/dist/forum.js')
         ->css(__DIR__ . '/less/Forum.less')
         ->route('/blog', 'blog.overview', BlogOverviewController::class)
+        ->route('/blog/compose', 'blog.compose', BlogComposerController::class)
         ->route('/blog/category/{category}', 'blog.category', BlogOverviewController::class)
         ->route('/blog/{id:[\d\S]+(?:-[^/]*)?}', 'blog.post', BlogItemController::class)
         // Shall we add RSS?

js/src/forum/components/BlogItemSidebar/BlogAuthor.js

@@ -5,16 +5,18 @@ import avatar from 'flarum/helpers/avatar';
 
 export default class BlogAuthor extends Component {  
   view() {
+    const author = !this.props.loading ? (this.props.article ? this.props.article.user() : this.props.user) : null;
+
     return (
       <div className={"FlarumBlog-Article-Author"}>
-        <div className={`FlarumBlog-Article-Author-background ${this.props.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: this.props.article && this.props.article.user() ? this.props.article && this.props.article.user().color() : null }} />
+        <div className={`FlarumBlog-Article-Author-background ${this.props.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: author && author.color() ? author.color() : null }} />
 
-        <div className={"FlarumBlog-Article-Author-Avatar"}>{this.props.article && this.props.article.user() ? avatar(this.props.article.user()) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>
+        <div className={"FlarumBlog-Article-Author-Avatar"}>{author ? avatar(author) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>
 
-        {this.props.article && this.props.article.user() && (
+        {author && (
           <div className={"FlarumBlog-Article-Author-Info"}>
-            <span className={"FlarumBlog-Article-Author-Name"}>{this.props.article.user().displayName()}</span>
-            <p className={"FlarumBlog-Article-Author-Bio"}>{this.props.article.user().bio && this.props.article.user().bio()}</p>
+            <span className={"FlarumBlog-Article-Author-Name"}>{author.displayName()}</span>
+            <p className={"FlarumBlog-Article-Author-Bio"}>{author.bio && author.bio()}</p>
 
             <ul className={"FlarumBlog-Article-Author-Extended"}>
               {listItems(this.items().toArray())}

js/src/forum/components/Composer.js

@@ -0,0 +1,46 @@
+import ComposerBody from 'flarum/components/ComposerBody';
+import Button from 'flarum/components/Button';
+
+export default class Composer extends ComposerBody {
+  init() {
+    super.init();
+
+    this.previewContent = false;
+  }
+
+  // Render
+  render() {
+    const hasContent = (this.content() && this.content() !== "");
+
+    return (
+      <div className={"Flarum-Blog-Composer"}>
+        <div className={"Flarum-Blog-Composer-tabs"}>
+          <Button className={!this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = false}>{app.translator.trans('v17development-flarum-blog.forum.composer.write')}</Button>
+          <Button className={this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = true}>{app.translator.trans('v17development-flarum-blog.forum.composer.view')}</Button>
+        </div>
+
+        <div className={"Composer Flarum-Blog-Composer-body"}>
+          {this.previewContent ? (
+            <div className={"Flarum-Blog-Composer-preview"} config={hasContent && this.configPreview.bind(this)}>
+              {!hasContent && (
+                app.translator.trans('v17development-flarum-blog.forum.composer.nothing_to_preview')
+              )}
+            </div>
+          ) : this.view()}
+        </div>
+      </div>
+    )
+  }
+
+  // Initialize preview content
+  configPreview(element) {
+    s9e.TextFormatter.preview(this.content() || '', element);
+  }
+
+  // Submit trigger
+  onsubmit() {
+    if(this.props.onsubmit) {
+      this.props.onsubmit();
+    }
+  }
+}

js/src/forum/components/Modals/BlogPostSettingsModal.js

@@ -7,8 +7,13 @@ export default class BlogPostSettingsModal extends Modal {
   init() {
     super.init();
 
-    this.isNew = this.props.article.blogMeta() ? false : true;
-    this.meta = this.props.article.blogMeta() ? this.props.article.blogMeta() : app.store.createRecord('blogMeta');
+    if(this.props.article) {
+      this.meta = this.props.article && this.props.article.blogMeta() ? this.props.article.blogMeta() : app.store.createRecord('blogMeta');
+    }else{
+      this.meta = this.props.meta ? this.props.meta : app.store.createRecord('blogMeta');
+    }
+
+    this.isNew = this.meta.exists;
 
     this.summary = m.prop(this.meta.summary() || '');
 
@@ -57,7 +62,7 @@ export default class BlogPostSettingsModal extends Modal {
         <small>Best image resolution for social media: 1200x630</small>
 
         {this.featuredImage() != "" && (
-          <img src={this.featuredImage()} alt={this.props.article.title()} title={"Blog post image"} width={"100%"} style={{ marginTop: '15px' }} />
+          <img src={this.featuredImage()} alt={"Article image"} title={"Blog post image"} width={"100%"} style={{ marginTop: '15px' }} />
         )}
       </div>
     ), 30);
@@ -96,21 +101,35 @@ export default class BlogPostSettingsModal extends Modal {
       isFeatured: this.isFeatured(),
       isSized: this.isSized(),
       isPendingReview: this.isPendingReview(),
-      relationships: this.isNew && {
+      relationships: this.isNew && !this.props.isComposer && {
         discussion: this.props.article
       }
     };
   }
 
   onsubmit(e) {
     e.preventDefault();
+
+    // Submit data
+    if(this.props.onsubmit) {
+      // Update attributes
+      this.meta.pushData({
+        attributes: this.submitData()
+      });
+
+      // Push
+      this.props.onsubmit(this.meta);
+
+      this.hide();
+      return;
+    }
 
     this.loading = true;
 
     this.meta
       .save(this.submitData())
       .then(() => {
-        if(this.isNew) {
+        if(this.props.article) {
           this.props.article.pushData({
             relationships: {
               blogMeta: this.meta

js/src/forum/components/Modals/RenameArticleModal.js

@@ -46,12 +46,14 @@ export default class RenameArticleModal extends Modal {
       </div>
     ), 50);
 
-    items.add('slug', (
-      <div className="Form-group">
-        <label>{app.translator.trans('v17development-flarum-blog.forum.article.slug')}:</label>
-        <input className="FormControl" placeholder={app.translator.trans('v17development-flarum-blog.forum.article.slug')} value={this.slug()} oninput={m.withAttr('value', this.slug)}/>
-      </div>
-    ), 40);
+    if(!this.props.onChange) {
+      items.add('slug', (
+        <div className="Form-group">
+          <label>{app.translator.trans('v17development-flarum-blog.forum.article.slug')}:</label>
+          <input className="FormControl" placeholder={app.translator.trans('v17development-flarum-blog.forum.article.slug')} value={this.slug()} oninput={m.withAttr('value', this.slug)}/>
+        </div>
+      ), 40);
+    }
 
     items.add('submit', (
       <div className="Form-group">
@@ -79,6 +81,14 @@ export default class RenameArticleModal extends Modal {
 
     this.loading = true;
 
+    // Do not save
+    if(this.props.onChange) {
+      this.props.onChange(this.name());
+      this.hide();
+
+      return;
+    }
+
     this.article.save({
       title: this.name(),
       slug: this.slug()

js/src/forum/index.js

@@ -8,15 +8,19 @@ import BlogMeta from "../common/Models/BlogMeta";
 import extendTagOverview from "./utils/extendTagOverview";
 import discussionRouting from "./utils/discussionRouting";
 import compat from "./compat";
+import BlogComposer from "./pages/BlogComposer";
 
 // Register Flarum Blog
 app.initializers.add('v17development-flarum-blog', app => {
   app.routes.blog = { path: '/blog', component: BlogOverview.component() };
 
   app.routes.blogCategory = { path: '/blog/category/:slug', component: BlogOverview.component() };
 
+  app.routes.blogComposer = { path: '/blog/compose', component: BlogComposer.component() };
+
   app.routes.blogArticle = { path: '/blog/:id', component: BlogItem.component() };
 
+
   app.store.models.blogMeta = BlogMeta;
 
   Discussion.prototype.blogMeta = Model.hasOne('blogMeta');