Controls.js 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284
  1. /***
  2. Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
  3. (c) 2005 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
  4. (c) 2005 Jon Tirsen (http://www.tirsen.com)
  5. Contributors:
  6. Richard Livsey
  7. Rahul Bhargava
  8. Rob Wills
  9. Mochi-ized By Thomas Herve (_firstname_@nimail.org)
  10. See scriptaculous.js for full license.
  11. Autocompleter.Base handles all the autocompletion functionality
  12. that's independent of the data source for autocompletion. This
  13. includes drawing the autocompletion menu, observing keyboard
  14. and mouse events, and similar.
  15. Specific autocompleters need to provide, at the very least,
  16. a getUpdatedChoices function that will be invoked every time
  17. the text inside the monitored textbox changes. This method
  18. should get the text for which to provide autocompletion by
  19. invoking this.getToken(), NOT by directly accessing
  20. this.element.value. This is to allow incremental tokenized
  21. autocompletion. Specific auto-completion logic (AJAX, etc)
  22. belongs in getUpdatedChoices.
  23. Tokenized incremental autocompletion is enabled automatically
  24. when an autocompleter is instantiated with the 'tokens' option
  25. in the options parameter, e.g.:
  26. new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
  27. will incrementally autocomplete with a comma as the token.
  28. Additionally, ',' in the above example can be replaced with
  29. a token array, e.g. { tokens: [',', '\n'] } which
  30. enables autocompletion on multiple tokens. This is most
  31. useful when one of the tokens is \n (a newline), as it
  32. allows smart autocompletion after linebreaks.
  33. ***/
  34. MochiKit.Base.update(MochiKit.Base, {
  35. ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',
  36. stripScripts: function (str) {
  37. return str.replace(new RegExp(MochiKit.Base.ScriptFragment, 'img'), '');
  38. },
  39. stripTags: function(str) {
  40. return str.replace(/<\/?[^>]+>/gi, '');
  41. },
  42. extractScripts: function (str) {
  43. var matchAll = new RegExp(MochiKit.Base.ScriptFragment, 'img');
  44. var matchOne = new RegExp(MochiKit.Base.ScriptFragment, 'im');
  45. return MochiKit.Base.map(function (scriptTag) {
  46. return (scriptTag.match(matchOne) || ['', ''])[1];
  47. }, str.match(matchAll) || []);
  48. },
  49. evalScripts: function (str) {
  50. return MochiKit.Base.map(function (scr) {
  51. eval(scr);
  52. }, MochiKit.Base.extractScripts(str));
  53. }
  54. });
  55. MochiKit.Form = {
  56. serialize: function (form) {
  57. var elements = MochiKit.Form.getElements(form);
  58. var queryComponents = [];
  59. for (var i = 0; i < elements.length; i++) {
  60. var queryComponent = MochiKit.Form.serializeElement(elements[i]);
  61. if (queryComponent) {
  62. queryComponents.push(queryComponent);
  63. }
  64. }
  65. return queryComponents.join('&');
  66. },
  67. getElements: function (form) {
  68. form = MochiKit.DOM.getElement(form);
  69. var elements = [];
  70. for (tagName in MochiKit.Form.Serializers) {
  71. var tagElements = form.getElementsByTagName(tagName);
  72. for (var j = 0; j < tagElements.length; j++) {
  73. elements.push(tagElements[j]);
  74. }
  75. }
  76. return elements;
  77. },
  78. serializeElement: function (element) {
  79. element = MochiKit.DOM.getElement(element);
  80. var method = element.tagName.toLowerCase();
  81. var parameter = MochiKit.Form.Serializers[method](element);
  82. if (parameter) {
  83. var key = encodeURIComponent(parameter[0]);
  84. if (key.length === 0) {
  85. return;
  86. }
  87. if (!(parameter[1] instanceof Array)) {
  88. parameter[1] = [parameter[1]];
  89. }
  90. return parameter[1].map(function (value) {
  91. return key + '=' + encodeURIComponent(value);
  92. }).join('&');
  93. }
  94. }
  95. };
  96. MochiKit.Form.Serializers = {
  97. input: function (element) {
  98. switch (element.type.toLowerCase()) {
  99. case 'submit':
  100. case 'hidden':
  101. case 'password':
  102. case 'text':
  103. return MochiKit.Form.Serializers.textarea(element);
  104. case 'checkbox':
  105. case 'radio':
  106. return MochiKit.Form.Serializers.inputSelector(element);
  107. }
  108. return false;
  109. },
  110. inputSelector: function (element) {
  111. if (element.checked) {
  112. return [element.name, element.value];
  113. }
  114. },
  115. textarea: function (element) {
  116. return [element.name, element.value];
  117. },
  118. select: function (element) {
  119. return MochiKit.Form.Serializers[element.type == 'select-one' ?
  120. 'selectOne' : 'selectMany'](element);
  121. },
  122. selectOne: function (element) {
  123. var value = '', opt, index = element.selectedIndex;
  124. if (index >= 0) {
  125. opt = element.options[index];
  126. value = opt.value;
  127. if (!value && !('value' in opt)) {
  128. value = opt.text;
  129. }
  130. }
  131. return [element.name, value];
  132. },
  133. selectMany: function (element) {
  134. var value = [];
  135. for (var i = 0; i < element.length; i++) {
  136. var opt = element.options[i];
  137. if (opt.selected) {
  138. var optValue = opt.value;
  139. if (!optValue && !('value' in opt)) {
  140. optValue = opt.text;
  141. }
  142. value.push(optValue);
  143. }
  144. }
  145. return [element.name, value];
  146. }
  147. };
  148. var Ajax = {
  149. activeRequestCount: 0
  150. };
  151. Ajax.Responders = {
  152. responders: [],
  153. register: function (responderToAdd) {
  154. if (MochiKit.Base.find(this.responders, responderToAdd) == -1) {
  155. this.responders.push(responderToAdd);
  156. }
  157. },
  158. unregister: function (responderToRemove) {
  159. this.responders = this.responders.without(responderToRemove);
  160. },
  161. dispatch: function (callback, request, transport, json) {
  162. MochiKit.Iter.forEach(this.responders, function (responder) {
  163. if (responder[callback] &&
  164. typeof(responder[callback]) == 'function') {
  165. try {
  166. responder[callback].apply(responder, [request, transport, json]);
  167. } catch (e) {}
  168. }
  169. });
  170. }
  171. };
  172. Ajax.Responders.register({
  173. onCreate: function () {
  174. Ajax.activeRequestCount++;
  175. },
  176. onComplete: function () {
  177. Ajax.activeRequestCount--;
  178. }
  179. });
  180. Ajax.Base = function () {};
  181. Ajax.Base.prototype = {
  182. setOptions: function (options) {
  183. this.options = {
  184. method: 'post',
  185. asynchronous: true,
  186. parameters: ''
  187. }
  188. MochiKit.Base.update(this.options, options || {});
  189. },
  190. responseIsSuccess: function () {
  191. return this.transport.status == undefined
  192. || this.transport.status === 0
  193. || (this.transport.status >= 200 && this.transport.status < 300);
  194. },
  195. responseIsFailure: function () {
  196. return !this.responseIsSuccess();
  197. }
  198. };
  199. Ajax.Request = function (url, options) {
  200. this.__init__(url, options);
  201. };
  202. Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded',
  203. 'Interactive', 'Complete'];
  204. MochiKit.Base.update(Ajax.Request.prototype, Ajax.Base.prototype);
  205. MochiKit.Base.update(Ajax.Request.prototype, {
  206. __init__: function (url, options) {
  207. this.transport = MochiKit.Async.getXMLHttpRequest();
  208. this.setOptions(options);
  209. this.request(url);
  210. },
  211. request: function (url) {
  212. var parameters = this.options.parameters || '';
  213. if (parameters.length > 0){
  214. parameters += '&_=';
  215. }
  216. try {
  217. this.url = url;
  218. if (this.options.method == 'get' && parameters.length > 0) {
  219. this.url += (this.url.match(/\?/) ? '&' : '?') + parameters;
  220. }
  221. Ajax.Responders.dispatch('onCreate', this, this.transport);
  222. this.transport.open(this.options.method, this.url,
  223. this.options.asynchronous);
  224. if (this.options.asynchronous) {
  225. this.transport.onreadystatechange = MochiKit.Base.bind(this.onStateChange, this);
  226. setTimeout(MochiKit.Base.bind(function () {
  227. this.respondToReadyState(1);
  228. }, this), 10);
  229. }
  230. this.setRequestHeaders();
  231. var body = this.options.postBody ? this.options.postBody : parameters;
  232. this.transport.send(this.options.method == 'post' ? body : null);
  233. } catch (e) {
  234. this.dispatchException(e);
  235. }
  236. },
  237. setRequestHeaders: function () {
  238. var requestHeaders = ['X-Requested-With', 'XMLHttpRequest'];
  239. if (this.options.method == 'post') {
  240. requestHeaders.push('Content-type',
  241. 'application/x-www-form-urlencoded');
  242. /* Force 'Connection: close' for Mozilla browsers to work around
  243. * a bug where XMLHttpRequest sends an incorrect Content-length
  244. * header. See Mozilla Bugzilla #246651.
  245. */
  246. if (this.transport.overrideMimeType) {
  247. requestHeaders.push('Connection', 'close');
  248. }
  249. }
  250. if (this.options.requestHeaders) {
  251. requestHeaders.push.apply(requestHeaders, this.options.requestHeaders);
  252. }
  253. for (var i = 0; i < requestHeaders.length; i += 2) {
  254. this.transport.setRequestHeader(requestHeaders[i], requestHeaders[i+1]);
  255. }
  256. },
  257. onStateChange: function () {
  258. var readyState = this.transport.readyState;
  259. if (readyState != 1) {
  260. this.respondToReadyState(this.transport.readyState);
  261. }
  262. },
  263. header: function (name) {
  264. try {
  265. return this.transport.getResponseHeader(name);
  266. } catch (e) {}
  267. },
  268. evalJSON: function () {
  269. try {
  270. return eval(this.header('X-JSON'));
  271. } catch (e) {}
  272. },
  273. evalResponse: function () {
  274. try {
  275. return eval(this.transport.responseText);
  276. } catch (e) {
  277. this.dispatchException(e);
  278. }
  279. },
  280. respondToReadyState: function (readyState) {
  281. var event = Ajax.Request.Events[readyState];
  282. var transport = this.transport, json = this.evalJSON();
  283. if (event == 'Complete') {
  284. try {
  285. (this.options['on' + this.transport.status]
  286. || this.options['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')]
  287. || MochiKit.Base.noop)(transport, json);
  288. } catch (e) {
  289. this.dispatchException(e);
  290. }
  291. if ((this.header('Content-type') || '').match(/^text\/javascript/i)) {
  292. this.evalResponse();
  293. }
  294. }
  295. try {
  296. (this.options['on' + event] || MochiKit.Base.noop)(transport, json);
  297. Ajax.Responders.dispatch('on' + event, this, transport, json);
  298. } catch (e) {
  299. this.dispatchException(e);
  300. }
  301. /* Avoid memory leak in MSIE: clean up the oncomplete event handler */
  302. if (event == 'Complete') {
  303. this.transport.onreadystatechange = MochiKit.Base.noop;
  304. }
  305. },
  306. dispatchException: function (exception) {
  307. (this.options.onException || MochiKit.Base.noop)(this, exception);
  308. Ajax.Responders.dispatch('onException', this, exception);
  309. }
  310. });
  311. Ajax.Updater = function (container, url, options) {
  312. this.__init__(container, url, options);
  313. };
  314. MochiKit.Base.update(Ajax.Updater.prototype, Ajax.Request.prototype);
  315. MochiKit.Base.update(Ajax.Updater.prototype, {
  316. __init__: function (container, url, options) {
  317. this.containers = {
  318. success: container.success ? MochiKit.DOM.getElement(container.success) : MochiKit.DOM.getElement(container),
  319. failure: container.failure ? MochiKit.DOM.getElement(container.failure) :
  320. (container.success ? null : MochiKit.DOM.getElement(container))
  321. }
  322. this.transport = MochiKit.Async.getXMLHttpRequest();
  323. this.setOptions(options);
  324. var onComplete = this.options.onComplete || MochiKit.Base.noop;
  325. this.options.onComplete = MochiKit.Base.bind(function (transport, object) {
  326. this.updateContent();
  327. onComplete(transport, object);
  328. }, this);
  329. this.request(url);
  330. },
  331. updateContent: function () {
  332. var receiver = this.responseIsSuccess() ?
  333. this.containers.success : this.containers.failure;
  334. var response = this.transport.responseText;
  335. if (!this.options.evalScripts) {
  336. response = MochiKit.Base.stripScripts(response);
  337. }
  338. if (receiver) {
  339. if (this.options.insertion) {
  340. new this.options.insertion(receiver, response);
  341. } else {
  342. MochiKit.DOM.getElement(receiver).innerHTML =
  343. MochiKit.Base.stripScripts(response);
  344. setTimeout(function () {
  345. MochiKit.Base.evalScripts(response);
  346. }, 10);
  347. }
  348. }
  349. if (this.responseIsSuccess()) {
  350. if (this.onComplete) {
  351. setTimeout(MochiKit.Base.bind(this.onComplete, this), 10);
  352. }
  353. }
  354. }
  355. });
  356. var Field = {
  357. clear: function () {
  358. for (var i = 0; i < arguments.length; i++) {
  359. MochiKit.DOM.getElement(arguments[i]).value = '';
  360. }
  361. },
  362. focus: function (element) {
  363. MochiKit.DOM.getElement(element).focus();
  364. },
  365. present: function () {
  366. for (var i = 0; i < arguments.length; i++) {
  367. if (MochiKit.DOM.getElement(arguments[i]).value == '') {
  368. return false;
  369. }
  370. }
  371. return true;
  372. },
  373. select: function (element) {
  374. MochiKit.DOM.getElement(element).select();
  375. },
  376. activate: function (element) {
  377. element = MochiKit.DOM.getElement(element);
  378. element.focus();
  379. if (element.select) {
  380. element.select();
  381. }
  382. },
  383. scrollFreeActivate: function (field) {
  384. setTimeout(function () {
  385. Field.activate(field);
  386. }, 1);
  387. }
  388. };
  389. var Autocompleter = {};
  390. Autocompleter.Base = function () {};
  391. Autocompleter.Base.prototype = {
  392. baseInitialize: function (element, update, options) {
  393. this.element = MochiKit.DOM.getElement(element);
  394. this.update = MochiKit.DOM.getElement(update);
  395. this.hasFocus = false;
  396. this.changed = false;
  397. this.active = false;
  398. this.index = 0;
  399. this.entryCount = 0;
  400. if (this.setOptions) {
  401. this.setOptions(options);
  402. }
  403. else {
  404. this.options = options || {};
  405. }
  406. this.options.paramName = this.options.paramName || this.element.name;
  407. this.options.tokens = this.options.tokens || [];
  408. this.options.frequency = this.options.frequency || 0.4;
  409. this.options.minChars = this.options.minChars || 1;
  410. this.options.onShow = this.options.onShow || function (element, update) {
  411. if (!update.style.position || update.style.position == 'absolute') {
  412. update.style.position = 'absolute';
  413. MochiKit.Position.clone(element, update, {
  414. setHeight: false,
  415. offsetTop: element.offsetHeight
  416. });
  417. }
  418. MochiKit.Visual.appear(update, {duration:0.15});
  419. };
  420. this.options.onHide = this.options.onHide || function (element, update) {
  421. MochiKit.Visual.fade(update, {duration: 0.15});
  422. };
  423. if (typeof(this.options.tokens) == 'string') {
  424. this.options.tokens = new Array(this.options.tokens);
  425. }
  426. this.observer = null;
  427. this.element.setAttribute('autocomplete', 'off');
  428. MochiKit.Style.hideElement(this.update);
  429. MochiKit.Signal.connect(this.element, 'onblur', this, this.onBlur);
  430. MochiKit.Signal.connect(this.element, 'onkeypress', this, this.onKeyPress, this);
  431. },
  432. show: function () {
  433. if (MochiKit.DOM.getStyle(this.update, 'display') == 'none') {
  434. this.options.onShow(this.element, this.update);
  435. }
  436. if (!this.iefix && MochiKit.Base.isIE() && MochiKit.Base.isOpera() &&
  437. (MochiKit.DOM.getStyle(this.update, 'position') == 'absolute')) {
  438. new Insertion.After(this.update,
  439. '<iframe id="' + this.update.id + '_iefix" '+
  440. 'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
  441. 'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
  442. this.iefix = MochiKit.DOM.getElement(this.update.id + '_iefix');
  443. }
  444. if (this.iefix) {
  445. setTimeout(MochiKit.Base.bind(this.fixIEOverlapping, this), 50);
  446. }
  447. },
  448. fixIEOverlapping: function () {
  449. MochiKit.Position.clone(this.update, this.iefix);
  450. this.iefix.style.zIndex = 1;
  451. this.update.style.zIndex = 2;
  452. MochiKit.Style.showElement(this.iefix);
  453. },
  454. hide: function () {
  455. this.stopIndicator();
  456. if (MochiKit.DOM.getStyle(this.update, 'display') != 'none') {
  457. this.options.onHide(this.element, this.update);
  458. }
  459. if (this.iefix) {
  460. MochiKit.Style.hideElement(this.iefix);
  461. }
  462. },
  463. startIndicator: function () {
  464. if (this.options.indicator) {
  465. MochiKit.Style.showElement(this.options.indicator);
  466. }
  467. },
  468. stopIndicator: function () {
  469. if (this.options.indicator) {
  470. MochiKit.Style.hideElement(this.options.indicator);
  471. }
  472. },
  473. onKeyPress: function (event) {
  474. if (this.active) {
  475. if (event.keyString == "KEY_TAB" || event.keyString == "KEY_RETURN") {
  476. this.selectEntry();
  477. MochiKit.Event.stop(event);
  478. } else if (event.keyString == "KEY_ESCAPE") {
  479. this.hide();
  480. this.active = false;
  481. MochiKit.Event.stop(event);
  482. return;
  483. } else if (event.keyString == "KEY_LEFT" || event.keyString == "KEY_RIGHT") {
  484. return;
  485. } else if (event.keyString == "KEY_UP") {
  486. this.markPrevious();
  487. this.render();
  488. if (MochiKit.Base.isSafari()) {
  489. event.stop();
  490. }
  491. return;
  492. } else if (event.keyString == "KEY_DOWN") {
  493. this.markNext();
  494. this.render();
  495. if (MochiKit.Base.isSafari()) {
  496. event.stop();
  497. }
  498. return;
  499. }
  500. } else {
  501. if (event.keyString == "KEY_TAB" || event.keyString == "KEY_RETURN") {
  502. return;
  503. }
  504. }
  505. this.changed = true;
  506. this.hasFocus = true;
  507. if (this.observer) {
  508. clearTimeout(this.observer);
  509. }
  510. this.observer = setTimeout(MochiKit.Base.bind(this.onObserverEvent, this),
  511. this.options.frequency*1000);
  512. },
  513. findElement: function (event, tagName) {
  514. var element = event.target;
  515. while (element.parentNode && (!element.tagName ||
  516. (element.tagName.toUpperCase() != tagName.toUpperCase()))) {
  517. element = element.parentNode;
  518. }
  519. return element;
  520. },
  521. onHover: function (event) {
  522. var element = this.findElement(event, 'LI');
  523. if (this.index != element.autocompleteIndex) {
  524. this.index = element.autocompleteIndex;
  525. this.render();
  526. }
  527. event.stop();
  528. },
  529. onClick: function (event) {
  530. var element = this.findElement(event, 'LI');
  531. this.index = element.autocompleteIndex;
  532. this.selectEntry();
  533. this.hide();
  534. },
  535. onBlur: function (event) {
  536. // needed to make click events working
  537. setTimeout(MochiKit.Base.bind(this.hide, this), 250);
  538. this.hasFocus = false;
  539. this.active = false;
  540. },
  541. render: function () {
  542. if (this.entryCount > 0) {
  543. for (var i = 0; i < this.entryCount; i++) {
  544. this.index == i ?
  545. MochiKit.DOM.addElementClass(this.getEntry(i), 'selected') :
  546. MochiKit.DOM.removeElementClass(this.getEntry(i), 'selected');
  547. }
  548. if (this.hasFocus) {
  549. this.show();
  550. this.active = true;
  551. }
  552. } else {
  553. this.active = false;
  554. this.hide();
  555. }
  556. },
  557. markPrevious: function () {
  558. if (this.index > 0) {
  559. this.index--
  560. } else {
  561. this.index = this.entryCount-1;
  562. }
  563. },
  564. markNext: function () {
  565. if (this.index < this.entryCount-1) {
  566. this.index++
  567. } else {
  568. this.index = 0;
  569. }
  570. },
  571. getEntry: function (index) {
  572. return this.update.firstChild.childNodes[index];
  573. },
  574. getCurrentEntry: function () {
  575. return this.getEntry(this.index);
  576. },
  577. selectEntry: function () {
  578. this.active = false;
  579. this.updateElement(this.getCurrentEntry());
  580. },
  581. collectTextNodesIgnoreClass: function (element, className) {
  582. return MochiKit.Base.flattenArray(MochiKit.Base.map(function (node) {
  583. if (node.nodeType == 3) {
  584. return node.nodeValue;
  585. } else if (node.hasChildNodes() && !MochiKit.DOM.hasElementClass(node, className)) {
  586. return this.collectTextNodesIgnoreClass(node, className);
  587. }
  588. return '';
  589. }, MochiKit.DOM.getElement(element).childNodes)).join('');
  590. },
  591. updateElement: function (selectedElement) {
  592. if (this.options.updateElement) {
  593. this.options.updateElement(selectedElement);
  594. return;
  595. }
  596. var value = '';
  597. if (this.options.select) {
  598. var nodes = document.getElementsByClassName(this.options.select, selectedElement) || [];
  599. if (nodes.length > 0) {
  600. value = MochiKit.DOM.scrapeText(nodes[0]);
  601. }
  602. } else {
  603. value = this.collectTextNodesIgnoreClass(selectedElement, 'informal');
  604. }
  605. var lastTokenPos = this.findLastToken();
  606. if (lastTokenPos != -1) {
  607. var newValue = this.element.value.substr(0, lastTokenPos + 1);
  608. var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/);
  609. if (whitespace) {
  610. newValue += whitespace[0];
  611. }
  612. this.element.value = newValue + value;
  613. } else {
  614. this.element.value = value;
  615. }
  616. this.element.focus();
  617. if (this.options.afterUpdateElement) {
  618. this.options.afterUpdateElement(this.element, selectedElement);
  619. }
  620. },
  621. updateChoices: function (choices) {
  622. if (!this.changed && this.hasFocus) {
  623. this.update.innerHTML = choices;
  624. var d = MochiKit.DOM;
  625. d.removeEmptyTextNodes(this.update);
  626. d.removeEmptyTextNodes(this.update.firstChild);
  627. if (this.update.firstChild && this.update.firstChild.childNodes) {
  628. this.entryCount = this.update.firstChild.childNodes.length;
  629. for (var i = 0; i < this.entryCount; i++) {
  630. var entry = this.getEntry(i);
  631. entry.autocompleteIndex = i;
  632. this.addObservers(entry);
  633. }
  634. } else {
  635. this.entryCount = 0;
  636. }
  637. this.stopIndicator();
  638. this.index = 0;
  639. this.render();
  640. }
  641. },
  642. addObservers: function (element) {
  643. MochiKit.Signal.connect(element, 'onmouseover', this, this.onHover);
  644. MochiKit.Signal.connect(element, 'onclick', this, this.onClick);
  645. },
  646. onObserverEvent: function () {
  647. this.changed = false;
  648. if (this.getToken().length >= this.options.minChars) {
  649. this.startIndicator();
  650. this.getUpdatedChoices();
  651. } else {
  652. this.active = false;
  653. this.hide();
  654. }
  655. },
  656. getToken: function () {
  657. var tokenPos = this.findLastToken();
  658. if (tokenPos != -1) {
  659. var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,'');
  660. } else {
  661. var ret = this.element.value;
  662. }
  663. return /\n/.test(ret) ? '' : ret;
  664. },
  665. findLastToken: function () {
  666. var lastTokenPos = -1;
  667. for (var i = 0; i < this.options.tokens.length; i++) {
  668. var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]);
  669. if (thisTokenPos > lastTokenPos) {
  670. lastTokenPos = thisTokenPos;
  671. }
  672. }
  673. return lastTokenPos;
  674. }
  675. }
  676. Ajax.Autocompleter = function (element, update, url, options) {
  677. this.__init__(element, update, url, options);
  678. };
  679. MochiKit.Base.update(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype);
  680. MochiKit.Base.update(Ajax.Autocompleter.prototype, {
  681. __init__: function (element, update, url, options) {
  682. this.baseInitialize(element, update, options);
  683. this.options.asynchronous = true;
  684. this.options.onComplete = MochiKit.Base.bind(this.onComplete, this);
  685. this.options.defaultParams = this.options.parameters || null;
  686. this.url = url;
  687. },
  688. getUpdatedChoices: function () {
  689. var entry = encodeURIComponent(this.options.paramName) + '=' +
  690. encodeURIComponent(this.getToken());
  691. this.options.parameters = this.options.callback ?
  692. this.options.callback(this.element, entry) : entry;
  693. if (this.options.defaultParams) {
  694. this.options.parameters += '&' + this.options.defaultParams;
  695. }
  696. new Ajax.Request(this.url, this.options);
  697. },
  698. onComplete: function (request) {
  699. this.updateChoices(request.responseText);
  700. }
  701. });
  702. /***
  703. The local array autocompleter. Used when you'd prefer to
  704. inject an array of autocompletion options into the page, rather
  705. than sending out Ajax queries, which can be quite slow sometimes.
  706. The constructor takes four parameters. The first two are, as usual,
  707. the id of the monitored textbox, and id of the autocompletion menu.
  708. The third is the array you want to autocomplete from, and the fourth
  709. is the options block.
  710. Extra local autocompletion options:
  711. - choices - How many autocompletion choices to offer
  712. - partialSearch - If false, the autocompleter will match entered
  713. text only at the beginning of strings in the
  714. autocomplete array. Defaults to true, which will
  715. match text at the beginning of any *word* in the
  716. strings in the autocomplete array. If you want to
  717. search anywhere in the string, additionally set
  718. the option fullSearch to true (default: off).
  719. - fullSsearch - Search anywhere in autocomplete array strings.
  720. - partialChars - How many characters to enter before triggering
  721. a partial match (unlike minChars, which defines
  722. how many characters are required to do any match
  723. at all). Defaults to 2.
  724. - ignoreCase - Whether to ignore case when autocompleting.
  725. Defaults to true.
  726. It's possible to pass in a custom function as the 'selector'
  727. option, if you prefer to write your own autocompletion logic.
  728. In that case, the other options above will not apply unless
  729. you support them.
  730. ***/
  731. Autocompleter.Local = function (element, update, array, options) {
  732. this.__init__(element, update, array, options);
  733. };
  734. MochiKit.Base.update(Autocompleter.Local.prototype, Autocompleter.Base.prototype);
  735. MochiKit.Base.update(Autocompleter.Local.prototype, {
  736. __init__: function (element, update, array, options) {
  737. this.baseInitialize(element, update, options);
  738. this.options.array = array;
  739. },
  740. getUpdatedChoices: function () {
  741. this.updateChoices(this.options.selector(this));
  742. },
  743. setOptions: function (options) {
  744. this.options = MochiKit.Base.update({
  745. choices: 10,
  746. partialSearch: true,
  747. partialChars: 2,
  748. ignoreCase: true,
  749. fullSearch: false,
  750. selector: function (instance) {
  751. var ret = []; // Beginning matches
  752. var partial = []; // Inside matches
  753. var entry = instance.getToken();
  754. var count = 0;
  755. for (var i = 0; i < instance.options.array.length &&
  756. ret.length < instance.options.choices ; i++) {
  757. var elem = instance.options.array[i];
  758. var foundPos = instance.options.ignoreCase ?
  759. elem.toLowerCase().indexOf(entry.toLowerCase()) :
  760. elem.indexOf(entry);
  761. while (foundPos != -1) {
  762. if (foundPos === 0 && elem.length != entry.length) {
  763. ret.push('<li><strong>' + elem.substr(0, entry.length) + '</strong>' +
  764. elem.substr(entry.length) + '</li>');
  765. break;
  766. } else if (entry.length >= instance.options.partialChars &&
  767. instance.options.partialSearch && foundPos != -1) {
  768. if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos - 1, 1))) {
  769. partial.push('<li>' + elem.substr(0, foundPos) + '<strong>' +
  770. elem.substr(foundPos, entry.length) + '</strong>' + elem.substr(
  771. foundPos + entry.length) + '</li>');
  772. break;
  773. }
  774. }
  775. foundPos = instance.options.ignoreCase ?
  776. elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
  777. elem.indexOf(entry, foundPos + 1);
  778. }
  779. }
  780. if (partial.length) {
  781. ret = ret.concat(partial.slice(0, instance.options.choices - ret.length))
  782. }
  783. return '<ul>' + ret.join('') + '</ul>';
  784. }
  785. }, options || {});
  786. }
  787. });
  788. /***
  789. AJAX in-place editor
  790. see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
  791. Use this if you notice weird scrolling problems on some browsers,
  792. the DOM might be a bit confused when this gets called so do this
  793. waits 1 ms (with setTimeout) until it does the activation
  794. ***/
  795. Ajax.InPlaceEditor = function (element, url, options) {
  796. this.__init__(element, url, options);
  797. };
  798. Ajax.InPlaceEditor.defaultHighlightColor = '#FFFF99';
  799. Ajax.InPlaceEditor.prototype = {
  800. __init__: function (element, url, options) {
  801. this.url = url;
  802. this.element = MochiKit.DOM.getElement(element);
  803. this.options = MochiKit.Base.update({
  804. okButton: true,
  805. okText: 'ok',
  806. cancelLink: true,
  807. cancelText: 'cancel',
  808. savingText: 'Saving...',
  809. clickToEditText: 'Click to edit',
  810. okText: 'ok',
  811. rows: 1,
  812. onComplete: function (transport, element) {
  813. new MochiKit.Visual.Highlight(element, {startcolor: this.options.highlightcolor});
  814. },
  815. onFailure: function (transport) {
  816. alert('Error communicating with the server: ' + MochiKit.Base.stripTags(transport.responseText));
  817. },
  818. callback: function (form) {
  819. return MochiKit.DOM.formContents(form);
  820. },
  821. handleLineBreaks: true,
  822. loadingText: 'Loading...',
  823. savingClassName: 'inplaceeditor-saving',
  824. loadingClassName: 'inplaceeditor-loading',
  825. formClassName: 'inplaceeditor-form',
  826. highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
  827. highlightendcolor: '#FFFFFF',
  828. externalControl: null,
  829. submitOnBlur: false,
  830. ajaxOptions: {}
  831. }, options || {});
  832. if (!this.options.formId && this.element.id) {
  833. this.options.formId = this.element.id + '-inplaceeditor';
  834. if (MochiKit.DOM.getElement(this.options.formId)) {
  835. // there's already a form with that name, don't specify an id
  836. this.options.formId = null;
  837. }
  838. }
  839. if (this.options.externalControl) {
  840. this.options.externalControl = MochiKit.DOM.getElement(this.options.externalControl);
  841. }
  842. this.originalBackground = MochiKit.DOM.getStyle(this.element, 'background-color');
  843. if (!this.originalBackground) {
  844. this.originalBackground = 'transparent';
  845. }
  846. this.element.title = this.options.clickToEditText;
  847. this.onclickListener = MochiKit.Signal.connect(this.element, 'onclick', this, this.enterEditMode);
  848. this.mouseoverListener = MochiKit.Signal.connect(this.element, 'onmouseover', this, this.enterHover);
  849. this.mouseoutListener = MochiKit.Signal.connect(this.element, 'onmouseout', this, this.leaveHover);
  850. if (this.options.externalControl) {
  851. this.onclickListenerExternal = MochiKit.Signal.connect(this.options.externalControl,
  852. 'onclick', this, this.enterEditMode);
  853. this.mouseoverListenerExternal = MochiKit.Signal.connect(this.options.externalControl,
  854. 'onmouseover', this, this.enterHover);
  855. this.mouseoutListenerExternal = MochiKit.Signal.connect(this.options.externalControl,
  856. 'onmouseout', this, this.leaveHover);
  857. }
  858. },
  859. enterEditMode: function (evt) {
  860. if (this.saving) {
  861. return;
  862. }
  863. if (this.editing) {
  864. return;
  865. }
  866. this.editing = true;
  867. this.onEnterEditMode();
  868. if (this.options.externalControl) {
  869. MochiKit.Style.hideElement(this.options.externalControl);
  870. }
  871. MochiKit.Style.hideElement(this.element);
  872. this.createForm();
  873. this.element.parentNode.insertBefore(this.form, this.element);
  874. Field.scrollFreeActivate(this.editField);
  875. // stop the event to avoid a page refresh in Safari
  876. if (evt) {
  877. evt.stop();
  878. }
  879. return false;
  880. },
  881. createForm: function () {
  882. this.form = document.createElement('form');
  883. this.form.id = this.options.formId;
  884. MochiKit.DOM.addElementClass(this.form, this.options.formClassName)
  885. this.form.onsubmit = MochiKit.Base.bind(this.onSubmit, this);
  886. this.createEditField();
  887. if (this.options.textarea) {
  888. var br = document.createElement('br');
  889. this.form.appendChild(br);
  890. }
  891. if (this.options.okButton) {
  892. okButton = document.createElement('input');
  893. okButton.type = 'submit';
  894. okButton.value = this.options.okText;
  895. this.form.appendChild(okButton);
  896. }
  897. if (this.options.cancelLink) {
  898. cancelLink = document.createElement('a');
  899. cancelLink.href = '#';
  900. cancelLink.appendChild(document.createTextNode(this.options.cancelText));
  901. cancelLink.onclick = MochiKit.Base.bind(this.onclickCancel, this);
  902. this.form.appendChild(cancelLink);
  903. }
  904. },
  905. hasHTMLLineBreaks: function (string) {
  906. if (!this.options.handleLineBreaks) {
  907. return false;
  908. }
  909. return string.match(/<br/i) || string.match(/<p>/i);
  910. },
  911. convertHTMLLineBreaks: function (string) {
  912. return string.replace(/<br>/gi, '\n').replace(/<br\/>/gi, '\n').replace(/<\/p>/gi, '\n').replace(/<p>/gi, '');
  913. },
  914. createEditField: function () {
  915. var text;
  916. if (this.options.loadTextURL) {
  917. text = this.options.loadingText;
  918. } else {
  919. text = this.getText();
  920. }
  921. var obj = this;
  922. if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
  923. this.options.textarea = false;
  924. var textField = document.createElement('input');
  925. textField.obj = this;
  926. textField.type = 'text';
  927. textField.name = 'value';
  928. textField.value = text;
  929. textField.style.backgroundColor = this.options.highlightcolor;
  930. var size = this.options.size || this.options.cols || 0;
  931. if (size !== 0) {
  932. textField.size = size;
  933. }
  934. if (this.options.submitOnBlur) {
  935. textField.onblur = MochiKit.Base.bind(this.onSubmit, this);
  936. }
  937. this.editField = textField;
  938. } else {
  939. this.options.textarea = true;
  940. var textArea = document.createElement('textarea');
  941. textArea.obj = this;
  942. textArea.name = 'value';
  943. textArea.value = this.convertHTMLLineBreaks(text);
  944. textArea.rows = this.options.rows;
  945. textArea.cols = this.options.cols || 40;
  946. if (this.options.submitOnBlur) {
  947. textArea.onblur = MochiKit.Base.bind(this.onSubmit, this);
  948. }
  949. this.editField = textArea;
  950. }
  951. if (this.options.loadTextURL) {
  952. this.loadExternalText();
  953. }
  954. this.form.appendChild(this.editField);
  955. },
  956. getText: function () {
  957. return this.element.innerHTML;
  958. },
  959. loadExternalText: function () {
  960. MochiKit.DOM.addElementClass(this.form, this.options.loadingClassName);
  961. this.editField.disabled = true;
  962. new Ajax.Request(
  963. this.options.loadTextURL,
  964. MochiKit.Base.update({
  965. asynchronous: true,
  966. onComplete: MochiKit.Base.bind(this.onLoadedExternalText, this)
  967. }, this.options.ajaxOptions)
  968. );
  969. },
  970. onLoadedExternalText: function (transport) {
  971. MochiKit.DOM.removeElementClass(this.form, this.options.loadingClassName);
  972. this.editField.disabled = false;
  973. this.editField.value = MochiKit.Base.stripTags(transport);
  974. },
  975. onclickCancel: function () {
  976. this.onComplete();
  977. this.leaveEditMode();
  978. return false;
  979. },
  980. onFailure: function (transport) {
  981. this.options.onFailure(transport);
  982. if (this.oldInnerHTML) {
  983. this.element.innerHTML = this.oldInnerHTML;
  984. this.oldInnerHTML = null;
  985. }
  986. return false;
  987. },
  988. onSubmit: function () {
  989. // onLoading resets these so we need to save them away for the Ajax call
  990. var form = this.form;
  991. var value = this.editField.value;
  992. // do this first, sometimes the ajax call returns before we get a
  993. // chance to switch on Saving which means this will actually switch on
  994. // Saving *after* we have left edit mode causing Saving to be
  995. // displayed indefinitely
  996. this.onLoading();
  997. new Ajax.Updater(
  998. {
  999. success: this.element,
  1000. // dont update on failure (this could be an option)
  1001. failure: null
  1002. },
  1003. this.url,
  1004. MochiKit.Base.update({
  1005. parameters: this.options.callback(form, value),
  1006. onComplete: MochiKit.Base.bind(this.onComplete, this),
  1007. onFailure: MochiKit.Base.bind(this.onFailure, this)
  1008. }, this.options.ajaxOptions)
  1009. );
  1010. // stop the event to avoid a page refresh in Safari
  1011. if (arguments.length > 1) {
  1012. arguments[0].stop();
  1013. }
  1014. return false;
  1015. },
  1016. onLoading: function () {
  1017. this.saving = true;
  1018. this.removeForm();
  1019. this.leaveHover();
  1020. this.showSaving();
  1021. },
  1022. showSaving: function () {
  1023. this.oldInnerHTML = this.element.innerHTML;
  1024. this.element.innerHTML = this.options.savingText;
  1025. MochiKit.DOM.addElementClass(this.element, this.options.savingClassName);
  1026. this.element.style.backgroundColor = this.originalBackground;
  1027. MochiKit.Style.showElement(this.element);
  1028. },
  1029. removeForm: function () {
  1030. if (this.form) {
  1031. if (this.form.parentNode) {
  1032. MochiKit.DOM.removeElement(this.form);
  1033. }
  1034. this.form = null;
  1035. }
  1036. },
  1037. enterHover: function () {
  1038. if (this.saving) {
  1039. return;
  1040. }
  1041. this.element.style.backgroundColor = this.options.highlightcolor;
  1042. if (this.effect) {
  1043. this.effect.cancel();
  1044. }
  1045. MochiKit.DOM.addElementClass(this.element, this.options.hoverClassName)
  1046. },
  1047. leaveHover: function () {
  1048. if (this.options.backgroundColor) {
  1049. this.element.style.backgroundColor = this.oldBackground;
  1050. }
  1051. MochiKit.DOM.removeElementClass(this.element, this.options.hoverClassName)
  1052. if (this.saving) {
  1053. return;
  1054. }
  1055. this.effect = new MochiKit.Visual.Highlight(this.element, {
  1056. startcolor: this.options.highlightcolor,
  1057. endcolor: this.options.highlightendcolor,
  1058. restorecolor: this.originalBackground
  1059. });
  1060. },
  1061. leaveEditMode: function () {
  1062. MochiKit.DOM.removeElementClass(this.element, this.options.savingClassName);
  1063. this.removeForm();
  1064. this.leaveHover();
  1065. this.element.style.backgroundColor = this.originalBackground;
  1066. MochiKit.Style.showElement(this.element);
  1067. if (this.options.externalControl) {
  1068. MochiKit.Style.showElement(this.options.externalControl);
  1069. }
  1070. this.editing = false;
  1071. this.saving = false;
  1072. this.oldInnerHTML = null;
  1073. this.onLeaveEditMode();
  1074. },
  1075. onComplete: function (transport) {
  1076. this.leaveEditMode();
  1077. MochiKit.Base.bind(this.options.onComplete, this)(transport, this.element);
  1078. },
  1079. onEnterEditMode: function () {},
  1080. onLeaveEditMode: function () {},
  1081. dispose: function () {
  1082. if (this.oldInnerHTML) {
  1083. this.element.innerHTML = this.oldInnerHTML;
  1084. }
  1085. this.leaveEditMode();
  1086. MochiKit.Signal.disconnect(this.onclickListener);
  1087. MochiKit.Signal.disconnect(this.mouseoverListener);
  1088. MochiKit.Signal.disconnect(this.mouseoutListener);
  1089. if (this.options.externalControl) {
  1090. MochiKit.Signal.disconnect(this.onclickListenerExternal);
  1091. MochiKit.Signal.disconnect(this.mouseoverListenerExternal);
  1092. MochiKit.Signal.disconnect(this.mouseoutListenerExternal);
  1093. }
  1094. }
  1095. };