用Angular操作favicon的讨论

2 年 ago

科, 雅

4 minutes

关于如何在Angular中优雅地操作favicon的故事。

favicon是什么？

网站图标（favicon）是指网站运营者放置在网站或网页上的符号标志或图像，是俗称的图标。这个词是由英文短语“favorite icon”（喜爱的图标）缩写而来。

现在的ico图标真麻烦啊。
现在有很多apple-touch-icon之类的。
要是能用svg就好了，但目前只有Firefox支持。→ http://caniuse.com/#feat=link-icon-svg

说到别的话题

听说有一个叫做 favicon一括生成サイト的网站 → http://realfavicongenerator.net/
这个网站超级方便，可以一次性生成 favicon，还可以生成适用于 iPhone、android、windows8 等等的图标，非常不错。

引言

简介

绪论

听说可以在Chrome、Firefox、Opera和IE11+上运行。
我正在尝试制作一个聊天工具，想找一个好的方法来显示未读消息数量。后来我听说了favicon.js，于是尝试去使用它。

引入

请阅读以下关于检测未读消息的方法的说明。
http://qiita.com/shinsukeimai/items/dd1e96456b7b51e32cce
我将根据此处的脚本进行编写。

初始阶段

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="MainCtrl as main">
        <ul ng-repeat="message in main.messages">
            <li msg content=message ng-class="{message: message.read }">{{message.text}}</li>
        </ul>
    </div>
</div>
<script src="./angular.min.js"></script>
<script src="./favico.js"></script>
<script src="app.js"></script>
</body>

"use strict";

angular.module("myApp", []);

angular.module("myApp").directive("msg", ["$window", function($window){
  return {
    restrict: "A",
    scope: {
      content: "="
    },
    link: function(scope, element){
      angular.element($window).bind('scroll', function () {
        var elementY = element[0].offsetTop;
        var pageTop = this.pageYOffset;
        var pageBottom = this.pageYOffset + this.innerHeight - 50;
        if(elementY > pageTop && elementY < pageBottom){
          scope.content.read = true;
          scope.$apply();
        }
      });
    }
  }
}]);

angular.module("myApp").controller("MainCtrl", function(){
  this.messages = [];
  for(var i = 0; i < 100; i++){
    this.messages[i] = {
      text: "message" + i,
      read: false
    }
  }
});

.message{
    color: red;
}

我将从这里开始

自然界所存在的一切物質、能量和生物，以及它們之間的相互作用的結合，被稱為「環境」。

favico.jsを用意します。(githubから落として下さい。)

实施

我要写index.html文件。
我要为链接设置favicon图标。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- ここ！！！-->
    <link rel="shortcut icon" href="favicon32.ico">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <ul ng-repeat="message in messages">
            <li msg content=message ng-class="{message: message.read }">{{message.text}}</li>
        </ul>
    </div>
</div>
<script src="./angular.min.js"></script>
<script src="./favico.js"></script>
<script src="app.js"></script>
</body>

我們將為favico.js編寫一個Service（工廠），以便設置詳細的動作。如果您想要進一步設定，請參考http://lab.ejci.net/favico.js/。

angular.module("myApp").factory("faviconService", function(){
  var favicon = new Favico({
    //animationを切る
    animation: "none"
  });
  var badge = function(num){
    favicon.badge(num);
  };

  return {
    badge: badge
  };
});

我会添加一个控制器。
当滚动时，我将通过更改favicon的标记值来实现。


angular.module("myApp").controller("MainCtrl", ["$scope", "$window", "$timeout", "faviconService", function($scope, $window, $timeout, faviconService){
  //初期値設定
  var num, scrollTimer;
  scrollTimer = false;
  $scope.messages = [];

  for(var i = 0; i < 100; i++){
    $scope.messages[i] = {
      text: "message" + i,
      read: false
    }
  }
  num = $scope.messages.length;
  faviconService.badge(num);
  //スクロール時の動き
  angular.element($window).bind('scroll', function () {
    //スクロール中の時の動きで100msの間を空けます。
    if(scrollTimer){
      $timeout.cancel(scrollTimer);
    }
    scrollTimer = $timeout(function(){
      var newNum = 0;
      //メッセージの既読を確認します。
      $scope.messages.forEach(function(message){
        if(!message.read){newNum++; }
      });
      if(num !== newNum){
        faviconService.badge(newNum);
        num = newNum;
      }
    },100);
  });
}]);

总结一下。

"use strict";

angular.module("myApp", []);

angular.module("myApp").directive("msg", ["$window", function($window){
  return {
    restrict: "A",
    scope: {
      content: "="
    },
    link: function(scope, element){
      angular.element($window).bind('scroll', function () {
        var elementY = element[0].offsetTop;
        var pageTop = this.pageYOffset;
        var pageBottom = this.pageYOffset + this.innerHeight - 30;
        if(elementY > pageTop && elementY < pageBottom){
          scope.content.read = true;
          scope.$apply();
        }
      });
    }
  }
}]);

angular.module("myApp").controller("MainCtrl", ["$scope", "$window", "$timeout", "faviconService", function($scope, $window, $timeout, faviconService){
  //初期値設定
  var num, scrollTimer;
  scrollTimer = false;
  $scope.messages = [];

  for(var i = 0; i < 100; i++){
    $scope.messages[i] = {
      text: "message" + i,
      read: false
    }
  }
  num = $scope.messages.length;
  faviconService.badge(num);
  //スクロール時の動き
  angular.element($window).bind('scroll', function () {
    //スクロール中の時の動きで100msの間を空けます。
    if(scrollTimer){
      $timeout.cancel(scrollTimer);
    }
    scrollTimer = $timeout(function(){
      var newNum = 0;
      $scope.messages.forEach(function(message){
        if(!message.read){newNum++; }
      });
      if(num !== newNum){
        faviconService.badge(newNum);
        num = newNum;
      }
    },100);
  });
}]);

angular.module("myApp").factory("faviconService", function(){
  var favicon = new Favico({
    animation: "none"
  });
  var badge = function(num){
    favicon.badge(num);
  };

  return {
    badge: badge
  };
});