Skip to content
This repository has been archived by the owner on Feb 8, 2019. It is now read-only.

Consider removing the materialdesign CDN image dependencies #40

Open
E3V3A opened this issue Mar 28, 2018 · 1 comment
Open

Consider removing the materialdesign CDN image dependencies #40

E3V3A opened this issue Mar 28, 2018 · 1 comment
Labels
api The API data sources we use enhancement

Comments

@E3V3A
Copy link
Collaborator

E3V3A commented Mar 28, 2018

There is no good reason to keep the module having to download the material design icons, every time they are needed. It also prevent the module to display properly if:

  • You have firewalled / adblocker not allowing the cdn site
  • You do not have an internet connection

Here is the line that does the loading:

  loadCSS: function() {
    var css = [{
        id:   'materialDesignIcons',
        href: 'https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css',
    }]

So to accomplish this we need to download the images and keep them in ./images/ (?).
The icons in question are specified here (and possible in other places).

  getDom : function() {
    var wrapper = document.createElement("div")
    wrapper.className = "ASSTNT"
    var iconDom = document.createElement("div")
    iconDom.className = "mdi status " + this.status + " "
    switch(this.status) {
      case 'INITIALIZED':
        iconDom.className += "mdi-microphone-outline"
        break
      case 'HOTWORD_STARTED':
        iconDom.className += "mdi-microphone"
        break
      case 'HOTWORD_DETECTED':
        iconDom.className += "mdi-microphone"
        break
      case 'ASSISTANT_STARTED':
        iconDom.className += "mdi-google-assistant"
        break
      case 'ASSISTANT_SPEAKING':
        iconDom.className += "mdi-google-assistant"
        break
      case 'COMMAND_STARTED':
        iconDom.className += "mdi-apple-keyboard-command"
        break
      case 'COMMAND_LISTENED':
        iconDom.className += "mdi-apple-keyboard-command"
        break
      case 'SPEAK_STARTED':
        iconDom.className += "mdi-message-processing"
        break
      case 'SPEAK_ENDED':
        iconDom.className += "mdi-microphone"
        break
}
@E3V3A E3V3A added enhancement api The API data sources we use labels Mar 28, 2018
@E3V3A
Copy link
Collaborator Author

E3V3A commented Apr 11, 2018

Two things that need to be done:

  1. Download and keep a local copy of the (expanded) but edited css file.
  2. Download the icons themselves.

Some content from file is:

/* MaterialDesignIcons.com */
@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.eot?v=2.0.46");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=2.0.46") format("embedded-opentype"),
       url("../fonts/materialdesignicons-webfont.woff2?v=2.0.46") format("woff2"),
       url("../fonts/materialdesignicons-webfont.woff?v=2.0.46") format("woff"), 
       url("../fonts/materialdesignicons-webfont.ttf?v=2.0.46") format("truetype"), 
       url("../fonts/materialdesignicons-webfont.svg?v=2.0.46#materialdesigniconsregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.mdi:before,
.mdi-set {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mdi-access-point:before {
  content: "\F002";
}
...
.mdi-microphone:before {
  content: "\F36C";
}
.mdi-microphone-off:before {
  content: "\F36D";
}
.mdi-microphone-outline:before {
  content: "\F36E";
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
api The API data sources we use enhancement
Projects
None yet
Development

No branches or pull requests

1 participant