This repository was archived by the owner on Sep 5, 2024. It is now read-only.
feat(browser-color): enable browser header coloring #9192
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /** | ||
| * @ngdoc service | ||
| * @name $$mdMeta | ||
| * @module material.core.meta | ||
| * | ||
| * @description | ||
| * | ||
| * A provider and a service that simplifies meta tags access | ||
| * | ||
| * Note: This is intended only for use with dynamic meta tags such as browser color and title. | ||
| * Tags that are only processed when the page is rendered (such as `charset`, and `http-equiv`) | ||
| * will not work since `$$mdMeta` adds the tags after the page has already been loaded. | ||
| * | ||
| * ```js | ||
| * app.config(function($$mdMetaProvider) { | ||
| * var removeMeta = $$mdMetaProvider.setMeta('meta-name', 'content'); | ||
| * var metaValue = $$mdMetaProvider.getMeta('meta-name'); // -> 'content' | ||
| * | ||
| * removeMeta(); | ||
| * }); | ||
| * | ||
| * app.controller('myController', function($$mdMeta) { | ||
| * var removeMeta = $$mdMeta.setMeta('meta-name', 'content'); | ||
| * var metaValue = $$mdMeta.getMeta('meta-name'); // -> 'content' | ||
| * | ||
| * removeMeta(); | ||
| * }); | ||
| * ``` | ||
| * | ||
| * @returns {$$mdMeta.$service} | ||
| * | ||
| */ | ||
| angular.module('material.core.meta', []) | ||
| .provider('$$mdMeta', function () { | ||
| var head = angular.element(document.head); | ||
| var metaElements = {}; | ||
|
|
||
| /** | ||
| * Checks if the requested element was written manually and maps it | ||
| * | ||
| * @param {string} name meta tag 'name' attribute value | ||
| * @returns {boolean} returns true if there is an element with the requested name | ||
| */ | ||
| function mapExistingElement(name) { | ||
| if (metaElements[name]) { | ||
| return true; | ||
| } | ||
|
|
||
| var element = document.getElementsByName(name)[0]; | ||
|
|
||
| if (!element) { | ||
| return false; | ||
| } | ||
|
|
||
| metaElements[name] = angular.element(element); | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| /** | ||
| * @ngdoc method | ||
| * @name $$mdMeta#setMeta | ||
| * | ||
| * @description | ||
| * Creates meta element with the 'name' and 'content' attributes, | ||
| * if the meta tag is already created than we replace the 'content' value | ||
| * | ||
| * @param {string} name meta tag 'name' attribute value | ||
| * @param {string} content meta tag 'content' attribute value | ||
| * @returns {function} remove function | ||
| * | ||
| */ | ||
| function setMeta(name, content) { | ||
| mapExistingElement(name); | ||
|
|
||
| if (!metaElements[name]) { | ||
| var newMeta = angular.element('<meta name="' + name + '" content="' + content + '"/>'); | ||
| head.append(newMeta); | ||
| metaElements[name] = newMeta; | ||
| } | ||
| else { | ||
| metaElements[name].attr('content', content); | ||
| } | ||
|
|
||
| return function () { | ||
| metaElements[name].attr('content', ''); | ||
| metaElements[name].remove(); | ||
| delete metaElements[name]; | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * @ngdoc method | ||
| * @name $$mdMeta#getMeta | ||
| * | ||
| * @description | ||
| * Gets the 'content' attribute value of the wanted meta element | ||
| * | ||
| * @param {string} name meta tag 'name' attribute value | ||
| * @returns {string} content attribute value | ||
| */ | ||
| function getMeta(name) { | ||
| if (!mapExistingElement(name)) { | ||
| throw Error('$$mdMeta: could not find a meta tag with the name \'' + name + '\''); | ||
|
There was a problem hiding this comment. I see a lot of people take this approach with strings of using single quotes and then escaping them... Is there a reason you don't just use double-quotes to wrap the outer string? Totally just my curiosity at play here 😄 There was a problem hiding this comment. I just hate double quotes 😅 There was a problem hiding this comment. JS Style Guide also says to always use single quotes. |
||
| } | ||
|
|
||
| return metaElements[name].attr('content'); | ||
| } | ||
|
|
||
| var module = { | ||
| setMeta: setMeta, | ||
| getMeta: getMeta | ||
| }; | ||
|
|
||
| return angular.extend({}, module, { | ||
| $get: function () { | ||
| return module; | ||
| } | ||
| }); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| describe('$$mdMeta', function() { | ||
| var $$mdMeta; | ||
|
|
||
| beforeEach(module('material.core')); | ||
|
|
||
| beforeEach(function() { | ||
| inject(function(_$$mdMeta_) { | ||
| $$mdMeta = _$$mdMeta_; | ||
| }); | ||
| }); | ||
|
|
||
| describe('set meta', function () { | ||
| beforeEach(function () { | ||
| angular.element(document.getElementsByTagName('meta')).remove(); | ||
| }); | ||
|
|
||
| it('should create the element and append it to the body', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| expect(document.getElementsByName(name).length).toEqual(0); | ||
|
|
||
| $$mdMeta.setMeta(name, content); | ||
|
|
||
| expect(angular.element(document.getElementsByName(name)[0]).attr('content')).toBe(content); | ||
| }); | ||
|
|
||
| it('should update the existing meta tag', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| $$mdMeta.setMeta(name, content); | ||
|
|
||
| expect(angular.element(document.getElementsByName(name)[0]).attr('content')).toBe(content); | ||
|
|
||
| $$mdMeta.setMeta(name, content + '2'); | ||
|
|
||
| expect(angular.element(document.getElementsByName(name)[0]).attr('content')).toBe(content + '2'); | ||
| }); | ||
|
|
||
| it('should map existing meta tag', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| var element = angular.element('<meta name="' + name + '" content="' + content + '"/>'); | ||
| angular.element(document.head).append(element); | ||
|
|
||
| expect(angular.element(document.getElementsByName(name)[0]).attr('content')).toBe(content); | ||
|
|
||
| $$mdMeta.setMeta(name, content + '2'); | ||
|
|
||
| expect(angular.element(document.getElementsByName(name)[0]).attr('content')).toBe(content + '2'); | ||
| }); | ||
|
|
||
| it('should return a remove function', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| var remove = $$mdMeta.setMeta(name, content); | ||
|
|
||
| expect(document.getElementsByName(name).length).toBe(1); | ||
|
|
||
| remove(); | ||
|
|
||
| expect(document.getElementsByName(name).length).toBe(0); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| describe('get meta', function () { | ||
| beforeEach(function () { | ||
| angular.element(document.getElementsByTagName('meta')).remove(); | ||
| }); | ||
|
|
||
| it('should return the meta content', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| $$mdMeta.setMeta(name, content); | ||
|
|
||
| expect($$mdMeta.getMeta(name)).toBe(content); | ||
| }); | ||
|
|
||
| it('should reject unavailable meta tags', function() { | ||
| var name = 'test'; | ||
|
|
||
| expect(function () { | ||
| $$mdMeta.getMeta(name); | ||
| }).toThrowError('$$mdMeta: could not find a meta tag with the name \'' + name + '\''); | ||
| }); | ||
|
|
||
| it('should add not mapped meta tag to the hashmap', function() { | ||
| var name = 'test'; | ||
| var content = 'value'; | ||
|
|
||
| var element = angular.element('<meta name="' + name + '" content="' + content + '"/>'); | ||
| angular.element(document.head).append(element); | ||
|
|
||
| expect($$mdMeta.getMeta(name)).toBe(content); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might make a note that certain
<meta>tags (such ascharset,http-equiv="Content-Type", and I thinkname="viewport") cannot be added dynamically because the browser will have already decided how to render (and probably rendered) the page by the time they get added.I could not find a complete list of the ones that were editable, but this caught me the other day so it's probably not very obvious to most devs :-)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done