Initial commit

.gitignore

@@ -0,0 +1,2 @@
+.discourse-site
+HELP

about.json

@@ -0,0 +1,10 @@
+{
+  "name": "User Card Directory",
+  "about_url": null,
+  "license_url": null,
+  "assets": {
+  },
+  "color_schemes": {
+  },
+  "component": true
+}

common/common.scss

@@ -0,0 +1,17 @@
+
+.user-card-directory {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  
+    .user-card {
+      position: relative;
+      left: auto;
+      width: 100%;
+    }
+  
+    .user-card-container {
+      width: calc(50% - 40px);
+      margin: 50px 20px 10px 20px;
+    }
+  }

javascripts/discourse/components/user-card-static.js.es6

@@ -0,0 +1,11 @@
+import UserCardContents from "discourse/components/user-card-contents";
+
+export default UserCardContents.extend({
+  layoutName: "components/user-card-contents",
+  elementId: null,
+  // Overriding functions which cause the user card to show/hide based on mouse/keyboard events:
+  cleanUp() {},
+  didInsertElement() {},
+  willDestroyElement() {},
+  keyUp() {}
+});

javascripts/discourse/initializers/user-card-directory.js.es6

@@ -0,0 +1,59 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import discourseComputed from "discourse-common/utils/decorators";
+import User from "discourse/models/user";
+import EmberObject from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+
+export default {
+  name: "user-card-directory",
+  initialize(){
+    withPluginApi("0.8.7", api => {
+      api.modifyClass("controller:users", {
+        cachedUserCardInfo: {},
+        
+        @discourseComputed("model.content.@each")
+        userCards(allUsers) {
+            const toLoad = [];
+            const userCardInfos = allUsers.map(u => {
+              if (this.cachedUserCardInfo[u.id]) {
+                  return this.cachedUserCardInfo[u.id];
+              }
+
+              const userCardInfo = this.cachedUserCardInfo[u.id] = EmberObject.create({
+                  user: User.create(u.user),
+                  loading: true
+              });
+
+              toLoad.push(userCardInfo);
+
+              return userCardInfo;
+            });
+
+            const loadMax = 50;
+
+            while (toLoad.length > 0) {
+              const thisBatch = toLoad.splice(0, loadMax);
+              const promise = ajax("/user-cards.json", {
+                  data: { user_ids: thisBatch.map(uc => uc.user.id).join(",") }
+              });
+              thisBatch.forEach(uc => {
+                  const convertedPromise = promise.then(data => {
+                    // Find the correct user from users, and put it in the user attribute
+                    // Use Object.assign to avoid contaminating the source object
+                    return Object.assign({}, data, {
+                        user: data.users.find(u => u.id === uc.user.id)
+                    });
+                  });
+                  return uc.user
+                    .findDetails({ existingRequest: convertedPromise })
+                    .then(() => uc.set("loading", false));
+              });
+            }
+
+            return userCardInfos;
+        }
+
+      });
+    });
+  }
+}

javascripts/discourse/templates/users.hbs

@@ -0,0 +1,34 @@
+{{#d-section pageClass="users"}}
+  {{#load-more selector=".user-card-directory .user-card-container" action=(action "loadMore")}}
+    <div class="container">
+      <div class='directory'>
+        {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
+        <div class='clearfix'>
+          {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
+        </div>
+
+        {{#conditional-loading-spinner condition=model.loading}}
+          {{#if userCards.length}}
+          <div class="user-card-directory">
+            {{#each userCards as |userCard|}}
+              <div class="user-card-container">
+                {{user-card-static
+                  user=userCard.user
+                  visible=true
+                  loading=userCard.loading
+                  username=userCard.user.username
+                  }}
+              </div>
+            {{/each}}
+            </div>
+            {{conditional-loading-spinner condition=model.loadingMore}}
+          {{else}}
+            <div class='clearfix'></div>
+            <p>{{i18n "directory.no_results"}}</p>
+          {{/if}}
+        {{/conditional-loading-spinner}}
+
+      </div>
+    </div>
+  {{/load-more}}
+{{/d-section}}

locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  theme_metadata:
+    description: Replaces the user directory with a grid of user cards