https://repertorio.org/scripts/update-meta.js

1// Create all modules and define dependencies to make sure they exist
2// and are loaded in the correct order to satisfy dependency injection
3// before all nested files are concatenated by Gulp
4
5// Modules
6angular.module('updateMeta', []);
7
8(function(){
9
10  /**
11   * Update a link tag dynamically
12   *
13   * @constructor
14   */
15  function UpdateLinkDirective($log, updateAttribute) {
16
17    var supportedAttributes =
18      [
19        'href',
20        'charset',
21        'crossorigin',
22        'hreflang',
23        'integrity',
24        'media',
25        'methods',
26        'referrerpolicy',
27        'sizes',
28        'target',
29        'title',
30        'type'
31      ];
32
33      var queryAttributes = ['id', 'rel'];
34
35      function buildAttributeFilter(scope, attribute) {
36        return '[' + attribute + '="' + scope[attribute] + '"]';
37      };
38
39      function buildQuery(scope, attributes) {
40        return attributes.filter(function(attribute) {
41          return scope[attribute];
42        }).map(function(attribute) {
43          return buildAttributeFilter(scope, attribute);
44        }).join('');
45      };
46
47    return {
48      restrict: 'E',
49      scope: {
50        rel: '@',
51        href: '@',
52        id: '@?',
53        charset: '@?',
54        crossorigin: '@?',
55        hreflang: '@?',
56        integrity: '@?',
57        media: '@?',
58        methods: '@?',
59        referrerpolicy: '@?',
60        sizes: '@?',
61        target: '@?',
62        title: '@?',
63        type: '@?'
64      },
65      link: function(scope, iElem, iAttrs) {
66
67        var selector = 'link' + buildQuery(scope, queryAttributes);
68
69        // Watch only desired attributes
70        supportedAttributes.filter(function(attribute) {
71          return scope[attribute];
72        }

72).forEach(function(attribute) {
73          scope.$watch(attribute, function(newValue, oldValue) {
74            if (typeof newValue !== 'undefined') {
75              updateAttribute.update(selector, attribute, scope[attribute])
76            }
77          });
78        });
79      }
80    };
81  }
82
83  // Inject dependencies
84  UpdateLinkDirective.$inject = ['$log', 'updateAttribute'];
85
86  // Export
87  angular
88    .module('updateMeta')
89    .directive('updateLink', UpdateLinkDirective);
90})();
91
92(function(){
93
94  /**
95   * Update a meta tag dynamically
96   *
97   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
98   *
99   * @constructor
100   */
101  function UpdateMetaDirective($log, updateAttribute) {
102
103    return {
104      restrict: 'E',
105      scope: {
106        charset: '@',
107        name: '@',
108        content: '@',
109        httpEquiv: '@',
110        scheme: '@',
111        property: '@',
112        itemprop: '@'
113      },
114      link: function(scope, iElem, iAttrs) {
115        var selector;
116
117        if(scope.name) {
118          selector = 'meta[name="' + scope.name + '"]';
119        }
120
121        if(scope.httpEquiv) {
122          selector = 'meta[http-equiv="' + scope.httpEquiv + '"]';
123        }
124
125        if(scope.property) {
126          selector = 'meta[property="' + scope.property + '"]';
127        }
128
129        if(scope.itemprop) {
130          selector = 'meta[itemprop="' + scope.itemprop + '"]';
131        }
132
133        // watch the content parameter and set the changing value as needed
134        scope.$watch('content', function (newValue, oldValue) {
135          if (typeof newValue !== 'undefined') {
136            updateAttribute.update(selector, 'content', scope.content);
137          }
138        });
139
140        // watch the charset parameter and set it as needed
141        scope.$watch('charset', function (newValue, oldValue) {
142          if (typeof newValue !== 'undefined') {
143            updateAttribute.update('meta[charset]', 'charset', scope.charset);
144          }
145        });
146      }
147    };
148  }
149
150  // Inject dependencies
151  UpdateMetaDirective.$inject = ['$log', 'updateAttribute'];
152
153  // Export
154  angular
155    .module('updateMeta')
156    .directive('updateMeta', UpdateMetaDirective);
157})();
158
159(function(){
160
161  /**
162   * Update a title dynamically
163   *
164   * @constructor
165   */
166  function UpdateTitleDirective($log) {
167
168    return {
169      restrict: 'E',
170      scope: {
171        title: '@'
172      },
173      link: function(scope, iElem, iAttrs) {
174
175        // watch the value and set as needed
176        // use document instead of $document as $document doesn't work here
177        scope.$watch('title', function (newValue, oldValue) {
178          if (typeof newValue !== 'undefined') {
179            if(document){
180              document.title = newValue;
181            }
182          }
183        });
184      }
185    };
186  }
187
188  // Inject dependencies
189  UpdateTitleDirective.$inject = ['$log'];
190
191  // Export
192  angular
193    .module('updateMeta')
194    .directive('updateTitle', UpdateTitleDirective);
195})();
196
197(function(){
198
199  /**
200  * Service to update attribute
201  *
202  * @constructor
203  */
204  function UpdateAttributeService($log) {
205    function update(selector, attributeName, attributeValue) {
206      if(!document) {
207        $log.error('updateMeta: document is not available!');
208        return;
209      }
210
211      if(!selector) {
212        $log.error('updateMeta: please provide a selector');
213        return;
214      }
215
216      var el = document.querySelector(selector);
217      if (el && el.setAttribute) {
218        el.setAttribute(attributeName, attributeValue);
219      }
220    }
221
222    return {
223      update: update
224    }
225  }
226
227  // Inject dependencies
228  UpdateAttributeService.$inject = ['$log'];
229
230  angular
231    .module('updateMeta')
232    .factory('updateAttribute', UpdateAttributeService);
233})();