Upload fix, multiple PRs (#134)

* Dev upload fix (#133) * Pr/126 merge (#132) * feat: extract Blog Overview Items into separate component; make extensible * fix: add missing import Co-authored-by: David Wheatley <[email protected]> * Bundled output for commit cd6591b Includes transpiled JS/TS. [skip ci] * Working on allowing multiple modals for upload select * Finished multi-dialogs Co-authored-by: David Wheatley <[email protected]> Co-authored-by: flarum-bot <[email protected]> * Closes #14 * Closes #87 * Updated tag-classnames * Fix #121 * Fix #128 * Update Item.less * Fixed #114 * Fix #100 Co-authored-by: David Wheatley <[email protected]> Co-authored-by: flarum-bot <[email protected]>
v17development · Apr 30, 2022 · 05481b0 · 05481b0
1 parent dc413c5
commit 05481b0
Show file tree

Hide file tree

Showing 13 changed files with 314 additions and 45 deletions.
diff --git a/js/src/admin/pages/BlogSettings.js b/js/src/admin/pages/BlogSettings.js
@@ -28,6 +28,7 @@ export default class BlogSettings extends ExtensionPage {
       app.data.settings.blog_category_hierarchy ?? true;
     this.addSidebarNav = app.data.settings.blog_add_sidebar_nav ?? true;
     this.featuredCount = app.data.settings.blog_featured_count ?? 3;
+    this.blogAddHero = app.data.settings.blog_add_hero ?? true;
 
     app.forum.data.attributes.blog_default_imageUrl = `${app.forum.attribute(
       "baseUrl"
@@ -153,6 +154,28 @@ export default class BlogSettings extends ExtensionPage {
                   </div>,
                 ]
               ),
+              Switch.component(
+                {
+                  state: this.blogAddHero == true,
+                  onchange: (val) => {
+                    this.blogAddHero = val;
+                    this.hasChanges = true;
+                  },
+                },
+                [
+                  <b>
+                    {app.translator.trans(
+                      "v17development-flarum-blog.admin.settings.add_hero_label"
+                    )}
+                  </b>,
+                  <div className="helpText">
+                    {app.translator.trans(
+                      "v17development-flarum-blog.admin.settings.add_hero_text"
+                    )}
+                  </div>,
+                ]
+              ),
+
               <div className="Form-group">
                 {
                   <label>
@@ -362,6 +385,7 @@ export default class BlogSettings extends ExtensionPage {
       blog_category_hierarchy: this.addCategoryHierarchy,
       blog_filter_discussion_list: this.hideOnDiscussionList,
       blog_featured_count: this.featuredCount,
+      blog_add_hero: this.blogAddHero,
     })
       .then(() => {
         this.hasChanges = false;

diff --git a/js/src/forum/components/BlogOverviewItem.tsx b/js/src/forum/components/BlogOverviewItem.tsx
@@ -116,10 +116,14 @@ export default class BlogOverviewItem extends Component<Attrs> {
         href={app.route("blogArticle", {
           id: `${article.slug()}`,
         })}
-        className={classList("BlogList-item", {
-          "BlogList-item-sized": isSized,
-          "BlogList-item-default": !isSized,
-        })}
+        className={classList(
+          "BlogList-item",
+          {
+            "BlogList-item-sized": isSized,
+            "BlogList-item-default": !isSized,
+          },
+          article.tags().map((tag) => `BlogList-item-category-${tag.id()}`)
+        )}
       >
         <div
           class={classList("BlogList-item-photo", {

diff --git a/js/src/forum/components/FeaturedBlogItem.tsx b/js/src/forum/components/FeaturedBlogItem.tsx
@@ -5,6 +5,7 @@ import humanTime from "flarum/common/helpers/humanTime";
 import icon from "flarum/common/helpers/icon";
 import Discussion from "flarum/common/models/Discussion";
 import ItemList from "flarum/common/utils/ItemList";
+import classList from "flarum/common/utils/classList";
 import app from "flarum/forum/app";
 import type Mithril from "mithril";
 
@@ -118,7 +119,13 @@ export default class FeaturedBlogItem extends Component<Attrs> {
         href={app.route("blogArticle", {
           id: `${article.slug()}`,
         })}
-        className="BlogFeatured-list-item FlarumBlog-default-image"
+        className={classList(
+          "BlogFeatured-list-item",
+          article
+            .tags()
+            .map((tag) => `BlogFeatured-list-item-category-${tag.id()}`),
+          "FlarumBlog-default-image"
+        )}
         style={{ backgroundImage: blogImage }}
       >
         <div class="BlogFeatured-list-item-top">

diff --git a/js/src/forum/components/Modals/BlogPostSettingsModal.js b/js/src/forum/components/Modals/BlogPostSettingsModal.js
@@ -82,39 +82,27 @@ export default class BlogPostSettingsModal extends Modal {
       app.forum.attribute("fof-upload.canUpload")
     ) {
       const {
-        components: { Uploader },
+        components: { Uploader, FileManagerModal },
       } = require("@fof-upload");
 
+      const uploader = new Uploader();
+
       fofUploadButton = (
         <Button
           class="Button Button--icon"
           onclick={async () => {
-            const file = await selectFiles("image/*", false);
-
-            if (!file) return;
-
-            const uploadingAlertId = app.alerts.show(
-              { type: "info" },
-              "Uploading image..."
+            app.modal.show(
+              FileManagerModal,
+              {
+                uploader: uploader,
+                onSelect: (files) => {
+                  const file = app.store.getById("files", files[0]);
+
+                  this.featuredImage(file.url());
+                },
+              },
+              true
             );
-
-            const fileModel = await new Promise((resolve) => {
-              /**
-               * @param {{file: File}}
-               */
-              function fileUploadSuccessCallback({ file }) {
-                resolve(file);
-              }
-
-              const uploader = new Uploader();
-              uploader.callbacks.success = [fileUploadSuccessCallback];
-
-              uploader.upload([file]).catch(() => {});
-            });
-
-            app.alerts.dismiss(uploadingAlertId);
-
-            this.featuredImage(fileModel.url());
           }}
           icon="fas fa-cloud-upload-alt"
         />
@@ -127,7 +115,6 @@ export default class BlogPostSettingsModal extends Modal {
         <label>Article image URL:</label>
         <div data-upload-enabled={!!fofUploadButton}>
           <input
-            readonly={!!fofUploadButton}
             type="text"
             className="FormControl"
             bidi={this.featuredImage}

diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -12,6 +12,10 @@ import compat from "./compat";
 import addSidebarNav from "./utils/addSidebarNav";
 import app from "flarum/forum/app";
 
+// Create our own modal manager
+import OverrideModalState from "./states/OverrideModalState";
+import overrideModalManager from "./utils/overrideModalManager";
+
 // Register Flarum Blog
 app.initializers.add(
   "v17development-flarum-blog",
@@ -52,6 +56,14 @@ app.initializers.add(
 
     // Add a link to the blog to the IndexPage sidebar, if enabled.
     addSidebarNav();
+
+    /**
+     * Notice from V17: Temporary override due to lack of multi-dialogs!
+     *
+     * We'll open a PR to support multi-dialog to the Flarum main repo
+     */
+    overrideModalManager();
+    app.modal = new OverrideModalState();
   },
   -100000
 );

diff --git a/js/src/forum/pages/BlogItem.js b/js/src/forum/pages/BlogItem.js
@@ -1,4 +1,5 @@
 import Page from "flarum/common/components/Page";
+import IndexPage from "flarum/components/IndexPage";
 import CommentPost from "flarum/forum/components/CommentPost";
 import PostStream from "flarum/forum/components/PostStream";
 import PostStreamState from "flarum/forum/states/PostStreamState";
@@ -90,7 +91,15 @@ export default class BlogItem extends Page {
 
     // Scroll to specific post
     if (this.near) {
-      this.stream.goToNumber(this.near, true);
+      this.stream.goToNumber(this.near || 0, true).then(() => {
+        app.current.set("discussion", article);
+        app.current.set("stream", this.stream);
+      });
+    }
+
+    // Read post on load
+    if (!article.lastReadPostNumber()) {
+      article.save({ lastReadPostNumber: 1 });
     }
 
     m.redraw();
@@ -263,7 +272,7 @@ export default class BlogItem extends Page {
     );
 
     if (
-      !(this?.article?.isLocked?.() || this?.article?.commentCount?.() === 1)
+      !(this?.article?.isLocked?.() && this?.article?.commentCount?.() === 1)
     ) {
       items.add(
         "comments",
@@ -317,7 +326,8 @@ export default class BlogItem extends Page {
   }
 
   view() {
-    return (
+    return [
+      app.forum.attribute("blogAddHero") == true && IndexPage.prototype.hero(),
       <div className={"FlarumBlogItem"}>
         <div className={"container"}>
           <div className={"FlarumBlog-ToolButtons"}>
@@ -347,8 +357,8 @@ export default class BlogItem extends Page {
             <BlogItemSidebar article={this.article} loading={this.loading} />
           </div>
         </div>
-      </div>
-    );
+      </div>,
+    ];
   }
 
   positionChanged(startNumber, endNumber) {

diff --git a/js/src/forum/pages/BlogOverview.js b/js/src/forum/pages/BlogOverview.js
@@ -1,5 +1,6 @@
 import app from "flarum/forum/app";
 
+import IndexPage from "flarum/components/IndexPage";
 import Page from "flarum/common/components/Page";
 import Button from "flarum/common/components/Button";
 import BlogCategories from "../components/BlogCategories";
@@ -34,7 +35,7 @@ export default class BlogOverview extends Page {
 
     this.loadBlogOverview();
 
-    this.featuredCount = app.forum.attribute("blogFeaturedCount");
+    this.featuredCount = parseInt(app.forum.attribute("blogFeaturedCount"));
 
     this.showCategories = true;
     this.showForumNav = true;
@@ -167,7 +168,8 @@ export default class BlogOverview extends Page {
         })`
       : null;
 
-    return (
+    return [
+      app.forum.attribute("blogAddHero") == true && IndexPage.prototype.hero(),
       <div className={"FlarumBlogOverview"}>
         <div className={"container"}>
           <div className={"BlogFeatured"}>
@@ -207,7 +209,7 @@ export default class BlogOverview extends Page {
             <div class="BlogFeatured-list">
               {/* Ghost data */}
               {this.isLoading &&
-                [...Array(this.featuredCount)].map(() => (
+                [...new Array(this.featuredCount).fill(undefined)].map(() => (
                   <div class="BlogFeatured-list-item BlogFeatured-list-item-ghost">
                     <div class="BlogFeatured-list-item-details">
                       <h4>&nbsp;</h4>
@@ -312,8 +314,8 @@ export default class BlogOverview extends Page {
             </div>
           </div>
         </div>
-      </div>
-    );
+      </div>,
+    ];
   }
 
   newArticle() {