fix position .visually-hidden with :focus
[ryf-theme.git] / js / theme.js
1 /**
2 * @file
3 * Theme hooks for the Drupal Bootstrap base theme.
4 */
5 (function ($, Drupal, Bootstrap, Attributes) {
6
7 /**
8 * Fallback for theming an icon if the Icon API module is not installed.
9 */
10 if (!Drupal.icon) Drupal.icon = { bundles: {} };
11 if (!Drupal.theme.icon || Drupal.theme.prototype.icon) {
12 $.extend(Drupal.theme, /** @lends Drupal.theme */ {
13 /**
14 * Renders an icon.
15 *
16 * @param {string} bundle
17 * The bundle which the icon belongs to.
18 * @param {string} icon
19 * The name of the icon to render.
20 * @param {object|Attributes} [attributes]
21 * An object of attributes to also apply to the icon.
22 *
23 * @returns {string}
24 */
25 icon: function (bundle, icon, attributes) {
26 if (!Drupal.icon.bundles[bundle]) return '';
27 attributes = Attributes.create(attributes).addClass('icon').set('aria-hidden', 'true');
28 icon = Drupal.icon.bundles[bundle](icon, attributes);
29 return '<span' + attributes + '></span>';
30 }
31 });
32 }
33
34 /**
35 * Callback for modifying an icon in the "bootstrap" icon bundle.
36 *
37 * @param {string} icon
38 * The icon being rendered.
39 * @param {Attributes} attributes
40 * Attributes object for the icon.
41 */
42 Drupal.icon.bundles.bootstrap = function (icon, attributes) {
43 attributes.addClass(['glyphicon', 'glyphicon-' + icon]);
44 };
45
46 /**
47 * Add necessary theming hooks.
48 */
49 $.extend(Drupal.theme, /** @lends Drupal.theme */ {
50
51 /**
52 * Renders a Bootstrap AJAX glyphicon throbber.
53 *
54 * @returns {string}
55 */
56 ajaxThrobber: function () {
57 return Drupal.theme('bootstrapIcon', 'refresh', {'class': ['ajax-throbber', 'glyphicon-spin'] });
58 },
59
60 /**
61 * Renders a button element.
62 *
63 * @param {object|Attributes} attributes
64 * An object of attributes to apply to the button. If it contains one of:
65 * - value: The label of the button.
66 * - context: The context type of Bootstrap button, can be one of:
67 * - default
68 * - primary
69 * - success
70 * - info
71 * - warning
72 * - danger
73 * - link
74 *
75 * @returns {string}
76 */
77 button: function (attributes) {
78 attributes = Attributes.create(attributes).addClass('btn');
79 var context = attributes.get('context', 'default');
80 var label = attributes.get('value', '');
81 attributes.remove('context').remove('value');
82 if (!attributes.hasClass(['btn-default', 'btn-primary', 'btn-success', 'btn-info', 'btn-warning', 'btn-danger', 'btn-link'])) {
83 attributes.addClass('btn-' + Bootstrap.checkPlain(context));
84 }
85
86 // Attempt to, intelligently, provide a default button "type".
87 if (!attributes.exists('type')) {
88 attributes.set('type', attributes.hasClass('form-submit') ? 'submit' : 'button');
89 }
90
91 return '<button' + attributes + '>' + label + '</button>';
92 },
93
94 /**
95 * Alias for "button" theme hook.
96 *
97 * @param {object|Attributes} attributes
98 * An object of attributes to apply to the button.
99 *
100 * @see Drupal.theme.button()
101 *
102 * @returns {string}
103 */
104 btn: function (attributes) {
105 return Drupal.theme('button', attributes);
106 },
107
108 /**
109 * Renders a button block element.
110 *
111 * @param {object|Attributes} attributes
112 * An object of attributes to apply to the button.
113 *
114 * @see Drupal.theme.button()
115 *
116 * @returns {string}
117 */
118 'btn-block': function (attributes) {
119 return Drupal.theme('button', Attributes.create(attributes).addClass('btn-block'));
120 },
121
122 /**
123 * Renders a large button element.
124 *
125 * @param {object|Attributes} attributes
126 * An object of attributes to apply to the button.
127 *
128 * @see Drupal.theme.button()
129 *
130 * @returns {string}
131 */
132 'btn-lg': function (attributes) {
133 return Drupal.theme('button', Attributes.create(attributes).addClass('btn-lg'));
134 },
135
136 /**
137 * Renders a small button element.
138 *
139 * @param {object|Attributes} attributes
140 * An object of attributes to apply to the button.
141 *
142 * @see Drupal.theme.button()
143 *
144 * @returns {string}
145 */
146 'btn-sm': function (attributes) {
147 return Drupal.theme('button', Attributes.create(attributes).addClass('btn-sm'));
148 },
149
150 /**
151 * Renders an extra small button element.
152 *
153 * @param {object|Attributes} attributes
154 * An object of attributes to apply to the button.
155 *
156 * @see Drupal.theme.button()
157 *
158 * @returns {string}
159 */
160 'btn-xs': function (attributes) {
161 return Drupal.theme('button', Attributes.create(attributes).addClass('btn-xs'));
162 },
163
164 /**
165 * Renders a glyphicon.
166 *
167 * @param {string} name
168 * The name of the glyphicon.
169 * @param {object|Attributes} [attributes]
170 * An object of attributes to apply to the icon.
171 *
172 * @returns {string}
173 */
174 bootstrapIcon: function (name, attributes) {
175 return Drupal.theme('icon', 'bootstrap', name, attributes);
176 }
177
178 });
179
180 })(window.jQuery, window.Drupal, window.Drupal.bootstrap, window.Attributes);