third_party/polymer/components/paper-spinner/paper-spinner.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components/paper-spinner/paper-spinner.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polym er.github.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS .txt

6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt

9 -->

10 <link rel="import" href="../polymer/polymer.html">

11

12 <!--

13 Element providing material design circular spinner.

14

15 ##### Example

16

17 <paper-spinner active></paper-spinner>

18

19 The default spinner cycles between blue, red, yellow and green. It can be custom ized so

20 that it uses one color only.

21

22 ##### Example

23

24 <style shim-shadowdom>

25 paper-spinner.blue::shadow .circle {

26 border-color: #4285f4;

27 }

28 </style>

29

30 <paper-spinner class="blue" active></paper-spinner>

31

32 Alt attribute should be set to provide adequate context for accessibility. If no t provided,

33 it defaults to 'loading'.

34 Empty alt can be provided to mark the element as decorative if alternative conte nt is provided

35 in another form (e.g. a text block following the spinner).

36

37 ##### Example

38 <paper-spinner alt="Loading contacts list" active></paper-spinner>

39

40 @element paper-spinner

41 @blurb Element providing material design circular spinner.

42 @status alpha

43 @homepage http://polymerlabs.github.io/paper-spinner

44 -->

45

46 <polymer-element name="paper-spinner" attributes="active alt" role="progressbar" >

47 <template>

48 <link rel="stylesheet" href="paper-spinner.css">

49

50 <div id="spinnerContainer">

51 <div class="spinner-layer blue">

52 <div class="circle-clipper left">

53 <div class="circle" fit></div>

54 </div><div class="gap-patch">

55 <div class="circle" fit></div>

56 </div><div class="circle-clipper right">

57 <div class="circle" fit></div>

58 </div>

59 </div>

60

61 <div class="spinner-layer red">

62 <div class="circle-clipper left">

63 <div class="circle" fit></div>

64 </div><div class="gap-patch">

65 <div class="circle" fit></div>

66 </div><div class="circle-clipper right">

67 <div class="circle" fit></div>

68 </div>

69 </div>

70

71 <div class="spinner-layer yellow">

72 <div class="circle-clipper left">

73 <div class="circle" fit></div>

74 </div><div class="gap-patch">

75 <div class="circle" fit></div>

76 </div><div class="circle-clipper right">

77 <div class="circle" fit></div>

78 </div>

79 </div>

80

81 <div class="spinner-layer green">

82 <div class="circle-clipper left">

83 <div class="circle" fit></div>

84 </div><div class="gap-patch">

85 <div class="circle" fit></div>

86 </div><div class="circle-clipper right">

87 <div class="circle" fit></div>

88 </div>

89 </div>

90 </div>

91 </template>

92

93 <script>

94 Polymer({

95 eventDelegates: {

96 'animationend': 'reset',

97 'webkitAnimationEnd': 'reset'

98 },

99 publish: {

100 /**

101 * Displays the spinner.

102 *

103 * @attribute active

104 * @type boolean

105 * @default false

106 */

107 active: {value: false, reflect: true},

108

109 /**

110 * Alternative text content for accessibility support.

111 * If alt is present, it will add an aria-label whose content matches al t when active.

112 * If alt is not present, it will default to 'loading' as the alt value.

113 * @attribute alt

114 * @type string

115 * @default 'loading'

116 */

117 alt: {value: 'loading', reflect: true}

118 },

119

120 ready: function() {

121 // Allow user-provided `aria-label` take preference to any other text al ternative.

122 if (this.hasAttribute('aria-label')) {

123 this.alt = this.getAttribute('aria-label');

124 } else {

125 this.setAttribute('aria-label', this.alt);

126 }

127 if (!this.active) {

128 this.setAttribute('aria-hidden', 'true');

129 }

130 },

131

132 activeChanged: function() {

133 if (this.active) {

134 this.$.spinnerContainer.classList.remove('cooldown');

135 this.$.spinnerContainer.classList.add('active');

136 this.removeAttribute('aria-hidden');

137 } else {

138 this.$.spinnerContainer.classList.add('cooldown');

139 this.setAttribute('aria-hidden', 'true');

140 }

141 },

142

143 altChanged: function() {

144 if (this.alt === '') {

145 this.setAttribute('aria-hidden', 'true');

146 } else {

147 this.removeAttribute('aria-hidden');

148 }

149 this.setAttribute('aria-label', this.alt);

150 },

151

152 reset: function() {

153 this.$.spinnerContainer.classList.remove('active', 'cooldown');

154 }

155 });

156 </script>

157 </polymer-element>

OLD	NEW