Addressed @georgiashay's comments

Separated punctuated and non-punctuated abbreviations Moved imports to app.js Renamed variables/added comments to increase clarity
sipb · May 17, 2020 · 0f59bcf · 0f59bcf
1 parent d436331
commit 0f59bcf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 35 deletions.
diff --git a/src/app.js b/src/app.js
@@ -7,6 +7,7 @@ import Vuetify from 'vuetify';
 import VueRouter from 'vue-router';
 import VueCookies from 'vue-cookies';
 import './css/app.css';
+import VueLineClamp from './utils/vue-line-clamp.js';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faSignInAlt, faSignOutAlt, faCloudDownloadAlt, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
@@ -22,6 +23,7 @@ Vue.component('font-awesome-icon', FontAwesomeIcon);
 Vue.use(Vuetify);
 Vue.use(VueCookies);
 Vue.use(VueRouter);
+Vue.use(VueLineClamp);
 Vue.use(BrowserSupportPlugin);
 
 var routes = [

diff --git a/src/components/Class.vue b/src/components/Class.vue
@@ -34,7 +34,7 @@
               cancel
             </v-icon>
             <v-card-text ref="title" v-line-clamp:20="3" class="card-text">
-              <span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span> {{ useShortenedTitle ? shortenedTitle : classInfo.title }}
+              <span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span> {{ useShortenedTitle && textTruncated ? shortenedTitle : classInfo.title }}
             </v-card-text>
           </div>
         </v-card>
@@ -74,11 +74,7 @@
 
 <script>
 import colorMixin from './../mixins/colorMixin.js';
-import { abbreviations, nonAbbreviator } from './../utils/abbreviations.js';
-import Vue from 'vue';
-import VueLineClamp from './../utils/vue-line-clamp.js';
-
-Vue.use(VueLineClamp);
+import * as abbreviations from './../utils/abbreviations.js';
 
 export default {
   name: 'Class',
@@ -105,29 +101,26 @@ export default {
     return {
       warningDialog: false,
       shouldOverrideWarnings: this.classInfo.overrideWarnings,
-      useShortenedTitle: false
+      useShortenedTitle: true, // Set to false to never shorten titles
+      textTruncated: false // Changed to true by VueLineClamp if title is too long
     };
   },
   computed: {
     shortenedTitle: function () {
       var title = this.classInfo.title.split(/([^A-Za-z])/);// Keep separators
-      var words = [];
+      var shortTitle = '';
       for (const word of title) {
         const lookup = word.toLowerCase();
-        var abbr = abbreviations[lookup];
+        const abbr = abbreviations.punctuated[lookup] || abbreviations.notPunctuated[lookup];
         if (abbr) {
-          var abbrevChar = '.';
-          if (abbr.startsWith(nonAbbreviator)) {
-            abbr = abbr.substring(nonAbbreviator.length);
-            abbrevChar = '';
-          }
+          const abbrevChar = lookup in abbreviations.punctuated ? '.' : '';
           // Match capitalization
-          words.push((word.charAt(0) === lookup.charAt(0) ? abbr : abbr.charAt(0).toUpperCase() + abbr.slice(1)) + abbrevChar);
+          shortTitle += (word.charAt(0) === lookup.charAt(0) ? abbr : abbr.charAt(0).toUpperCase() + abbr.slice(1)) + abbrevChar;
         } else {
-          words.push(word);
+          shortTitle += word;
         }
       }
-      return words.join('');
+      return shortTitle;
     }
   },
   methods: {
@@ -167,11 +160,6 @@ export default {
     align-items: flex-start;
     height: 5.8em; /* Chosen for three lines in the card, working with the set padding and margins. */
     padding: .2em .4em .5em .2em;
-    /* Multi-line truncation is not a supported feature of CSS right now.
-       Optimally, we would have multi-line truncation within the cards, but
-       currently extra words are clipped.
-    text-overflow: ellipsis;
-    white-space: nowrap; */
   }
 
   .placeholder {

diff --git a/src/utils/abbreviations.js b/src/utils/abbreviations.js
@@ -1,13 +1,13 @@
-// Abbreviations starting with '|' don't receive a delimeter (eg. '.') after them
-const nonAbbreviator = '|';
-const abbreviations = {
-  'and': nonAbbreviator + '&',
-  'i': nonAbbreviator + '1',
-  'ii': nonAbbreviator + '2',
-  'iii': nonAbbreviator + '3',
-  'iv': nonAbbreviator + '4',
-  'v': nonAbbreviator + '5',
-  'vi': nonAbbreviator + '6',
+const notPunctuated = { // No delimiter ('i' not 'i.')
+  'and': '&',
+  'i': '1',
+  'ii': '2',
+  'iii': '3',
+  'iv': '4',
+  'v': '5',
+  'vi': '6'
+};
+const punctuated = { // Delimeter ('comp.', not 'comp')
   'undergraduate': 'undergrad',
   'computer': 'comp',
   'special': 'spec',
@@ -311,4 +311,4 @@ const abbreviations = {
   'company': 'comp'
 };
 
-export { abbreviations, nonAbbreviator };
+export { punctuated, notPunctuated };
diff --git a/src/utils/vue-line-clamp.js b/src/utils/vue-line-clamp.js
@@ -20,7 +20,7 @@ function defaultFallbackFunc (el, bindings, vNode) {
   } else {
     el.style.maxHeight = el.style.overflowX = '';
   }
-  if (el.scrollHeight > el.offsetHeight) vNode.context.$data.useShortenedTitle = true;
+  if (el.scrollHeight > el.offsetHeight) vNode.context.$data.textTruncated = true;
 }
 
 const truncateText = function (el, bindings, vNode) {
@@ -32,7 +32,7 @@ const truncateText = function (el, bindings, vNode) {
     el[currentValueProp] = lines;
     el.style.webkitLineClamp = lines || '';
   }
-  if (el.scrollHeight > el.offsetHeight) vNode.context.$data.useShortenedTitle = true;
+  if (el.scrollHeight > el.offsetHeight) vNode.context.$data.textTruncated = true;
 };
 
 const VueLineClamp = {