https://deutscheoperberlin.de/module/jscript/lib/cb_ui/button.js

1/* This file is part of cbui.
2 * Copyright © 2010-2012 stiftung kulturserver.de ggmbh <[email protected]>
3 *
4 * cbui is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 *
9 * cbui is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with cbui.  If not, see <http://www.gnu.org/licenses/>.
16 */
17
18/**
19 * A text button. I'm sure we'll eventually need some kind of special behaviour
20 * here. Maybe the click handler should be centralized.
21 */
22jQuery.CbWidget.textButton = jQuery.CbWidget.text.extend({});
23
24/**
25 * A button intended for language selection. It always shows an isocode for the
26 * current language.
27 */
28jQuery.CbWidget.langSelect = jQuery.CbWidget.textButton.extend({
29
30   constructor : function(element) {
31      this.base(element);
32      if(jQuery.CbWidgetRegistry.language)
33        this.element().html(jQuery.CbWidgetRegistry.language.split('_')[0]);
34      this.element().click(function() {
35         new jQuery.CbWidget.language_window().open();
36      });
37   },
38
39   changeLanguage : function(bricks) {
40      this.element().html(jQuery.CbWidgetRegistry.language.split('_')[0]);
41      this.base(bricks);
42   }
43});
44
45jQuery.CbWidget.imgButton = jQuery.CbWidget.widget.extend({
46   constructor : function(element) {
47      this.base(element);
48      var title = this.element().attr('title');
49      if (title) this.texts.title = title;
50   },
51
52   changeLangauge : function(bricks) {
53      this.base(bricks);
54      if (this.texts.title) {
55         this.element().attr('title', bricks[this.texts.title]);
56      }
57   }
58});
59
60/**
61 * close button for windows. When clicked this button searches for the next
62 * parent element which defines the "close" method. It then calls this method.
63 */
64jQuery.CbWidget.closeButton = jQuery.CbWidget.imgButton.extend({
65
66   constructor : function(element) {
67      this.base(element);
68      this.closer = new jQuery.CbUtil.window_closer(element);
69      this.element().click(this.doClose());
70      return this;
71   },
72
73   doClose : function() {
74      // we need self here, as click will run in a different context
75      var self = this;
76      if (self.doCloseCallback === undefined) {
77         self.doCloseCallback = function(event) {
78            if (event !== undefined) event.preventDefault();
79            self.closer.destroy()
80         };
81      }
82      return self.doCloseCallback;
83   },
84
85   refreshElement : function() {
86      this.closer.refreshElement();
87      this.base();
88   },
89
90   handleDestroy : function() {
91      this.element().unbind('click', this.doClose());
92   }
93});
94
95jQuery.CbWidget.langFlag = jQuery.CbWidget.imgButton.extend({
96   setLanguage : function(locale) {
97      var countrycode = null;
98      var parts = locale.split('_');
99      if (parts.length === 1) {
100         countrycode = parts[0];
101      } else {
102         countrycode = parts[1].substr(0, 2).toLowerCase();
103      }
104      /* 123 is 97 + 26 where 97 is the offset of 'a' in the ascii alphabet and
105       * 26 is the number of useful characters in the locale. So in fact we're
106       * counting the flags from right/bottom here.
107       */
108      var pos_x = (123 - countrycode.charCodeAt(0)) * this.element().innerWidth();
109      var pos_y = (123 - countrycode.charCodeAt(1)) * this.element().innerHeight();
110      this.element().css('background-position', pos_x + 'px ' + pos_y + 'px');
111   }
112});
113
114/**
115 * Language selector with flag. Assumes a background image that's indexed by
116 * background-position. The outerWidth of the given element is assumed to be
117 * the unit of indexing.
118 */
119jQuery.CbWidget.langSelectFlag = jQuery.CbWidget.langFlag.extend({
120   constructor : function(element) {
121      this.base(element);
122      this.element().click(function() {
123         new jQuery.CbWidget.language_window().open();
124      });
125   },
126
127   changeLanguage : function(bricks) {
128      this.base(bricks);
129      this.setLanguage(jQuery.CbWidgetRegistry.language);
130   },
131
132   handleReady : function(params) {
133      this.base(params);
134      this.changeLanguage(); // call changeLanguage again to get the dimensions right
135   }
136});
137
138
139/**
140 * A choose list widget. presents a list of options with alternating colors.
141 * Each entry represents an id and a description text. Entries can be added
142 * with the static method addOption.
143 * The colors can be defined with the CSS classes __CbUiListOddColor and
144 * __CbUiListEvenColor. If one of the entries is clicked the "select" event is
145 * triggered, with {id : <id of chosen entry>} as parameter.
146 */
147jQuery.CbWidget.chooseList = jQuery.CbWidget.widget.extend({
148
149   constructor : function(element) {
150      this.base(element);
151      var self = this;

152      this.element().children().each(function() {
153         jQuery(this).click(function() {
154            self.trigger('select', {id : jQuery(jQuery(this).children()[0]).text()});
155         });
156      });
157   }
158}, {
159   /**
160    * has to be done before applying widgets as additional
161    * widgets might be defined in the description.
162    */
163   addOption : function(element, id, description) {
164      var node = jQuery(document.createElement('div'));
165      node.append(jQuery(document.createElement('span'))
166         .addClass('__CbUiListItemValue')
167         .text(id).hide());
168      node.append(description);
169      if (element.children().length % 2) {
170         node.addClass("__CbUiListEvenColor");
171      } else {
172         node.addClass("__CbUiListOddColor");
173      }
174      element.append(node);
175   },
176
177   init : function() {
178      jQuery.CbEvent(this, 'select');
179      this.base();
180   }
181});
182
183
184jQuery.CbWidget.langChooseList = jQuery.CbWidget.chooseList.extend({
185   constructor : function(element) {
186      this.closer = new CbWindowCloser(element);
187      return this.base(element);
188   },
189
190   handleReady : function(params) {
191      this.element().children().each(function() {
192         jQuery(this).find('.__CbUiLangFlag').CbWidget()
193               .setLanguage(jQuery(this).find('.__CbUiListItemValue').text());
194      });
195      return this.base(params);
196   },
197
198   handleSelect : function(params) {
199      var self = this;
200      jQuery.CbWidgetRegistry.changeLanguage(params.id, undefined, function() {
201         self.closer.destroy();
202      });
203      return this.base(params);
204   },
205
206   refreshElement : function() {
207      this.closer.refreshElement();
208      return this.base();
209   }
210
211}, {
212   addOption : function(element, locale, name, idLang) {
213      var desc = jQuery(document.createElement('div'));
214      desc.addClass('__CbUiLangListItem').attr('data-locale', locale).attr('data-id-lang', idLang);
215      desc.append(jQuery(document.createElement('span')).addClass('__CbUiText').text(name));
216      desc.append(jQuery(document.createElement('span')).addClass('__CbUiLangFlag'));
217      var button = jQuery(document.createElement('span')).addClass('__CbUiText abbr')
218            .text(locale.split('_')[0]);
219      if (locale == jQuery.CbWidgetRegistry.language) button.addClass('__CbUiSelected');
220      desc.append(button);
221      jQuery.CbWidget.chooseList.addOption.call(this, element, locale, desc);
222   }
223});