Динамическое переключение favicon в Aurelia, предпочтительно с использованием связывания - PullRequest
Новая
       36

Динамическое переключение favicon в Aurelia, предпочтительно с использованием связывания

1 голос
/ 15 марта 2019

У меня есть приложение для обмена сообщениями Aurelia, в котором мне нужно динамически менять значок при получении нового сообщения.

Что-то, что вы могли наблюдать во многих приложениях в наши дни, чтобы сообщить пользователю об изменении состояния.

Особенно полезно, когда пользователь находится на других вкладках.

Глядя на похожие вопросы здесь и здесь кажется довольно простой работой в vanilla JS или в JQuery.

Мое текущее решение этой проблемы - добавить функцию в мою модель представления, которая может напрямую обращаться к DOM. 

activate() {
    PLATFORM.addEventListener('newMessageIsReceived', this.msgReceived, true);
    PLATFORM.addEventListener('msgIsRead', this.msgRead, true);       
  }

  deactivate() {
    PLATFORM.removeEventListener('newMessageIsReceived', this.msgReceived);
    PLATFORM.removeEventListener('msgIsRead', this.msgRead);
  }

  msgReceived(event) {
    // new msg received. Change the favicon to alert mode 
    let link = PLATFORM.querySelector("link[rel*='icon']") || PLATFORM.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'alert.ico';
    PLATFORM.getElementsByTagName('head')[0].appendChild(link);
  }

  msgRead(event) {
     // msg read by the user, change the favicon back to default 
     let link = PLATFORM.querySelector("link[rel*='icon']") || PLATFORM.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = 'default.ico';
     PLATFORM.getElementsByTagName('head')[0].appendChild(link);
  }

Но очень очевидной проблемой здесь является сам подход JQuery для непосредственного манипулирования DOM изнутри моей модели представления.

Учитывая, что это всего лишь особый случай, я могу с этим смириться, но думаю, есть ли лучший способ, как Аурелия достичь этого.

что-то вроде 

<link rel="shortcut icon" type="image/ico" href.bind="faviconLink">

Но как вы можете использовать привязки в заголовке страницы указателя? Aurelia обновляет заголовок страницы при каждой навигации по маршруту, и поскольку заголовок также находится за пределами корня приложения aurelia, должна быть возможность привязать / манипулировать другими свойствами заголовка также изнутри приложения Aurelia. не так ли? * * 1023

Существует еще один интересный подход к использованию canvas , и у нас могут быть динамические значки. 

const canvas = document.createElement('canvas')
canvas.height = 64
canvas.width = 64

const ctx = canvas.getContext('2d')
ctx.font = '64px serif'
ctx.fillText('?', 0, 64)
console.log(canvas.toDataURL())

const favicon = document.querySelector('link[rel=icon]')
favicon.href = canvas.toDataURL()

но опять же, как избежать прямого манипулирования DOM и использовать привязки Аурелии даже для этого метода?

1 Ответ

4 голосов
/ 15 марта 2019

Вы можете сделать это полностью, демонстрация здесь https://1rn1866v64.codesandbox.io/

исходная демонстрация на https://codesandbox.io/s/1rn1866v64

, скопированная на дискурсе https://discourse.aurelia.io/t/better-know-a-framework-21-enhance-document-head-with-aurelia/2374

То, что вы хотите, это способулучшить шаблон document.head для объекта в качестве модели представления.Вы можете найти код для этой демонстрации здесь.Обычно это выглядит так просто: 

au.enhance({
  root: someObjectAsViewModel_for_the_enhancement,
  host: document.head
})

<link rel="icon" href.bind="iconHref">
...