Source: node_modules/jsuites/dist/jsuites.basic.js

  1. /**
  2. * (c) jSuites Javascript Web Components (v2.7)
  3. *
  4. * Author: Paul Hodel <paul.hodel@gmail.com>
  5. * Website: https://bossanova.uk/jsuites/
  6. * Description: Create amazing web based applications.
  7. *
  8. * MIT License
  9. *
  10. */
  11. ;(function (global, factory) {
  12. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  13. typeof define === 'function' && define.amd ? define(factory) :
  14. global.jSuites = factory();
  15. }(this, (function () {
  16. 'use strict';
  17. var jSuites = function(options) {
  18. var obj = {}
  19. obj.init = function() {
  20. // Find root element
  21. var app = document.querySelector('.japp');
  22. // Root element
  23. if (app) {
  24. obj.el = app;
  25. } else {
  26. obj.el = document.body;
  27. }
  28. }
  29. obj.guid = function() {
  30. var guid = '';
  31. for (var i = 0; i < 32; i++) {
  32. guid += Math.floor(Math.random()*0xF).toString(0xF);
  33. }
  34. return guid;
  35. }
  36. obj.getWindowWidth = function() {
  37. var w = window,
  38. d = document,
  39. e = d.documentElement,
  40. g = d.getElementsByTagName('body')[0],
  41. x = w.innerWidth || e.clientWidth || g.clientWidth;
  42. return x;
  43. }
  44. obj.getWindowHeight = function() {
  45. var w = window,
  46. d = document,
  47. e = d.documentElement,
  48. g = d.getElementsByTagName('body')[0],
  49. y = w.innerHeight|| e.clientHeight|| g.clientHeight;
  50. return y;
  51. }
  52. obj.getPosition = function(e) {
  53. if (e.changedTouches && e.changedTouches[0]) {
  54. var x = e.changedTouches[0].pageX;
  55. var y = e.changedTouches[0].pageY;
  56. } else {
  57. var x = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  58. var y = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  59. }
  60. return [ x, y ];
  61. }
  62. obj.click = function(el) {
  63. if (el.click) {
  64. el.click();
  65. } else {
  66. var evt = new MouseEvent('click', {
  67. bubbles: true,
  68. cancelable: true,
  69. view: window
  70. });
  71. el.dispatchEvent(evt);
  72. }
  73. }
  74. obj.getElement = function(element, className) {
  75. var foundElement = false;
  76. function path (element) {
  77. if (element.className) {
  78. if (element.classList.contains(className)) {
  79. foundElement = element;
  80. }
  81. }
  82. if (element.parentNode) {
  83. path(element.parentNode);
  84. }
  85. }
  86. path(element);
  87. return foundElement;
  88. }
  89. obj.getLinkElement = function(element) {
  90. var targetElement = false;
  91. function path (element) {
  92. if ((element.tagName == 'A' || element.tagName == 'DIV') && element.getAttribute('data-href')) {
  93. targetElement = element;
  94. }
  95. if (element.parentNode) {
  96. path(element.parentNode);
  97. }
  98. }
  99. path(element);
  100. return targetElement;
  101. }
  102. obj.getFormElements = function(formObject) {
  103. var ret = {};
  104. if (formObject) {
  105. var elements = formObject.querySelectorAll("input, select, textarea");
  106. } else {
  107. var elements = document.querySelectorAll("input, select, textarea");
  108. }
  109. for (var i = 0; i < elements.length; i++) {
  110. var element = elements[i];
  111. var name = element.name;
  112. var value = element.value;
  113. if (name) {
  114. ret[name] = value;
  115. }
  116. }
  117. return ret;
  118. }
  119. obj.exists = function(url, __callback) {
  120. var http = new XMLHttpRequest();
  121. http.open('HEAD', url, false);
  122. http.send();
  123. if (http.status) {
  124. __callback(http.status);
  125. }
  126. }
  127. obj.getFiles = function(element) {
  128. if (! element) {
  129. console.error('No element defined in the arguments of your method');
  130. }
  131. // Get attachments
  132. var files = element.querySelectorAll('.jfile');
  133. if (files.length > 0) {
  134. var data = [];
  135. for (var i = 0; i < files.length; i++) {
  136. var file = {};
  137. var src = files[i].getAttribute('src');
  138. if (files[i].classList.contains('jremove')) {
  139. file.remove = 1;
  140. } else {
  141. if (src.substr(0,4) == 'data') {
  142. file.content = src.substr(src.indexOf(',') + 1);
  143. file.extension = files[i].getAttribute('data-extension');
  144. } else {
  145. file.file = src;
  146. file.extension = files[i].getAttribute('data-extension');
  147. if (! file.extension) {
  148. file.extension = src.substr(src.lastIndexOf('.') + 1);
  149. }
  150. if (jSuites.files[file.file]) {
  151. file.content = jSuites.files[file.file];
  152. }
  153. }
  154. // Optional file information
  155. if (files[i].getAttribute('data-name')) {
  156. file.name = files[i].getAttribute('data-name');
  157. }
  158. if (files[i].getAttribute('data-file')) {
  159. file.file = files[i].getAttribute('data-file');
  160. }
  161. if (files[i].getAttribute('data-size')) {
  162. file.size = files[i].getAttribute('data-size');
  163. }
  164. if (files[i].getAttribute('data-date')) {
  165. file.date = files[i].getAttribute('data-date');
  166. }
  167. if (files[i].getAttribute('data-cover')) {
  168. file.cover = files[i].getAttribute('data-cover');
  169. }
  170. }
  171. // TODO SMALL thumbs?
  172. data[i] = file;
  173. }
  174. return data;
  175. }
  176. }
  177. obj.ajax = function(options) {
  178. if (! options.data) {
  179. options.data = {};
  180. }
  181. if (options.type) {
  182. options.method = options.type;
  183. }
  184. if (options.data) {
  185. var data = [];
  186. var keys = Object.keys(options.data);
  187. if (keys.length) {
  188. for (var i = 0; i < keys.length; i++) {
  189. if (typeof(options.data[keys[i]]) == 'object') {
  190. var o = options.data[keys[i]];
  191. for (var j = 0; j < o.length; j++) {
  192. if (typeof(o[j]) == 'string') {
  193. data.push(keys[i] + '[' + j + ']=' + encodeURIComponent(o[j]));
  194. } else {
  195. var prop = Object.keys(o[j]);
  196. for (var z = 0; z < prop.length; z++) {
  197. data.push(keys[i] + '[' + j + '][' + prop[z] + ']=' + encodeURIComponent(o[j][prop[z]]));
  198. }
  199. }
  200. }
  201. } else {
  202. data.push(keys[i] + '=' + encodeURIComponent(options.data[keys[i]]));
  203. }
  204. }
  205. }
  206. if (options.method == 'GET' && data.length > 0) {
  207. if (options.url.indexOf('?') < 0) {
  208. options.url += '?';
  209. }
  210. options.url += data.join('&');
  211. }
  212. }
  213. var httpRequest = new XMLHttpRequest();
  214. httpRequest.open(options.method, options.url, true);
  215. if (options.method == 'POST') {
  216. httpRequest.setRequestHeader('Accept', 'application/json');
  217. httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  218. } else {
  219. if (options.dataType == 'json') {
  220. httpRequest.setRequestHeader('Content-Type', 'text/json');
  221. }
  222. }
  223. // No cache
  224. httpRequest.setRequestHeader('pragma', 'no-cache');
  225. httpRequest.setRequestHeader('cache-control', 'no-cache');
  226. httpRequest.onload = function() {
  227. if (httpRequest.status === 200) {
  228. if (options.dataType == 'json') {
  229. try {
  230. var result = JSON.parse(httpRequest.responseText);
  231. if (options.success && typeof(options.success) == 'function') {
  232. options.success(result);
  233. }
  234. } catch(err) {
  235. if (options.error && typeof(options.error) == 'function') {
  236. options.error(result);
  237. }
  238. }
  239. } else {
  240. var result = httpRequest.responseText;
  241. if (options.success && typeof(options.success) == 'function') {
  242. options.success(result);
  243. }
  244. }
  245. } else {
  246. if (options.error && typeof(options.error) == 'function') {
  247. options.error(httpRequest.responseText);
  248. }
  249. }
  250. // Global complete method
  251. if (obj.ajax.requests && obj.ajax.requests.length) {
  252. // Get index of this request in the container
  253. var index = obj.ajax.requests.indexOf(httpRequest)
  254. // Remove from the ajax requests container
  255. obj.ajax.requests.splice(index, 1);
  256. // Last one?
  257. if (! obj.ajax.requests.length) {
  258. if (options.complete && typeof(options.complete) == 'function') {
  259. options.complete(result);
  260. }
  261. }
  262. }
  263. }
  264. if (data) {
  265. httpRequest.send(data.join('&'));
  266. } else {
  267. httpRequest.send();
  268. }
  269. obj.ajax.requests.push(httpRequest);
  270. return httpRequest;
  271. }
  272. obj.ajax.requests = [];
  273. obj.slideLeft = function(element, direction, done) {
  274. if (direction == true) {
  275. element.classList.add('slide-left-in');
  276. setTimeout(function() {
  277. element.classList.remove('slide-left-in');
  278. if (typeof(done) == 'function') {
  279. done();
  280. }
  281. }, 400);
  282. } else {
  283. element.classList.add('slide-left-out');
  284. setTimeout(function() {
  285. element.classList.remove('slide-left-out');
  286. if (typeof(done) == 'function') {
  287. done();
  288. }
  289. }, 400);
  290. }
  291. }
  292. obj.slideRight = function(element, direction, done) {
  293. if (direction == true) {
  294. element.classList.add('slide-right-in');
  295. setTimeout(function() {
  296. element.classList.remove('slide-right-in');
  297. if (typeof(done) == 'function') {
  298. done();
  299. }
  300. }, 400);
  301. } else {
  302. element.classList.add('slide-right-out');
  303. setTimeout(function() {
  304. element.classList.remove('slide-right-out');
  305. if (typeof(done) == 'function') {
  306. done();
  307. }
  308. }, 400);
  309. }
  310. }
  311. obj.slideTop = function(element, direction, done) {
  312. if (direction == true) {
  313. element.classList.add('slide-top-in');
  314. setTimeout(function() {
  315. element.classList.remove('slide-top-in');
  316. if (typeof(done) == 'function') {
  317. done();
  318. }
  319. }, 400);
  320. } else {
  321. element.classList.add('slide-top-out');
  322. setTimeout(function() {
  323. element.classList.remove('slide-top-out');
  324. if (typeof(done) == 'function') {
  325. done();
  326. }
  327. }, 400);
  328. }
  329. }
  330. obj.slideBottom = function(element, direction, done) {
  331. if (direction == true) {
  332. element.classList.add('slide-bottom-in');
  333. setTimeout(function() {
  334. element.classList.remove('slide-bottom-in');
  335. if (typeof(done) == 'function') {
  336. done();
  337. }
  338. }, 400);
  339. } else {
  340. element.classList.add('slide-bottom-out');
  341. setTimeout(function() {
  342. element.classList.remove('slide-bottom-out');
  343. if (typeof(done) == 'function') {
  344. done();
  345. }
  346. }, 100);
  347. }
  348. }
  349. obj.fadeIn = function(element, done) {
  350. element.classList.add('fade-in');
  351. setTimeout(function() {
  352. element.classList.remove('fade-in');
  353. if (typeof(done) == 'function') {
  354. done();
  355. }
  356. }, 2000);
  357. }
  358. obj.fadeOut = function(element, done) {
  359. element.classList.add('fade-out');
  360. setTimeout(function() {
  361. element.classList.remove('fade-out');
  362. if (typeof(done) == 'function') {
  363. done();
  364. }
  365. }, 1000);
  366. }
  367. obj.keyDownControls = function(e) {
  368. if (e.which == 27) {
  369. var nodes = document.querySelectorAll('.jslider');
  370. if (nodes.length > 0) {
  371. for (var i = 0; i < nodes.length; i++) {
  372. nodes[i].slider.close();
  373. }
  374. }
  375. if (document.querySelector('.jdialog')) {
  376. jSuites.dialog.close();
  377. }
  378. } else if (e.which == 13) {
  379. if (document.querySelector('.jdialog')) {
  380. if (typeof(jSuites.dialog.options.onconfirm) == 'function') {
  381. jSuites.dialog.options.onconfirm();
  382. }
  383. jSuites.dialog.close();
  384. }
  385. }
  386. // Verify mask
  387. if (jSuites.mask) {
  388. jSuites.mask.apply(e);
  389. }
  390. }
  391. var actionUpControl = function(e) {
  392. var element = null;
  393. if (element = jSuites.getLinkElement(e.target)) {
  394. var link = element.getAttribute('data-href');
  395. if (link == '#back') {
  396. window.history.back();
  397. } else if (link == '#panel') {
  398. jSuites.panel();
  399. } else {
  400. jSuites.pages(link);
  401. }
  402. }
  403. }
  404. var controlSwipeLeft = function(e) {
  405. var element = jSuites.getElement(e.target, 'option');
  406. if (element && element.querySelector('.option-actions')) {
  407. element.scrollTo({
  408. left: 100,
  409. behavior: 'smooth'
  410. });
  411. } else {
  412. var element = jSuites.getElement(e.target, 'jcalendar');
  413. if (element && jSuites.calendar.current) {
  414. jSuites.calendar.current.prev();
  415. } else {
  416. if (jSuites.panel) {
  417. var element = jSuites.panel.get();
  418. if (element) {
  419. if (element.style.display != 'none') {
  420. jSuites.panel.close();
  421. }
  422. }
  423. }
  424. }
  425. }
  426. }
  427. var controlSwipeRight = function(e) {
  428. var element = jSuites.getElement(e.target, 'option');
  429. if (element && element.querySelector('.option-actions')) {
  430. element.scrollTo({
  431. left: 0,
  432. behavior: 'smooth'
  433. });
  434. } else {
  435. var element = jSuites.getElement(e.target, 'jcalendar');
  436. if (element && jSuites.calendar.current) {
  437. jSuites.calendar.current.next();
  438. } else {
  439. if (jSuites.panel) {
  440. var element = jSuites.panel.get();
  441. if (element) {
  442. if (element.style.display == 'none') {
  443. jSuites.panel();
  444. }
  445. }
  446. }
  447. }
  448. }
  449. }
  450. var actionOverControl = function(e) {
  451. // Tooltip
  452. if (jSuites.tooltip) {
  453. jSuites.tooltip(e);
  454. }
  455. }
  456. var actionOutControl = function(e) {
  457. // Tooltip
  458. if (jSuites.tooltip) {
  459. jSuites.tooltip.hide();
  460. }
  461. }
  462. // Create page container
  463. document.addEventListener('swipeleft', controlSwipeLeft);
  464. document.addEventListener('swiperight', controlSwipeRight);
  465. document.addEventListener('keydown', obj.keyDownControls);
  466. if ('ontouchend' in document.documentElement === true) {
  467. document.addEventListener('touchend', actionUpControl);
  468. } else {
  469. document.addEventListener('mouseup', actionUpControl);
  470. }
  471. // Onmouseover
  472. document.addEventListener('mouseover', actionOverControl);
  473. document.addEventListener('mouseout', actionOutControl);
  474. document.addEventListener('DOMContentLoaded', function() {
  475. obj.init();
  476. });
  477. // Pop state control
  478. window.onpopstate = function(e) {
  479. if (e.state && e.state.route) {
  480. if (jSuites.pages.get(e.state.route)) {
  481. jSuites.pages(e.state.route, { ignoreHistory:true });
  482. }
  483. }
  484. }
  485. return obj;
  486. }();
  487. jSuites.files = [];
  488. jSuites.calendar = (function(el, options) {
  489. var obj = {};
  490. obj.options = {};
  491. // Global container
  492. if (! jSuites.calendar.current) {
  493. jSuites.calendar.current = null;
  494. }
  495. // Default configuration
  496. var defaults = {
  497. // Date format
  498. format: 'DD/MM/YYYY',
  499. // Allow keyboard date entry
  500. readonly: true,
  501. // Today is default
  502. today: false,
  503. // Show timepicker
  504. time: false,
  505. // Show the reset button
  506. resetButton: true,
  507. // Placeholder
  508. placeholder: '',
  509. // Translations can be done here
  510. months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  511. weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
  512. weekdays_short: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  513. // Value
  514. value: null,
  515. // Events
  516. onclose: null,
  517. onchange: null,
  518. // Fullscreen (this is automatic set for screensize < 800)
  519. fullscreen: false,
  520. // Internal mode controller
  521. mode: null,
  522. position: null,
  523. // Create the calendar closed as default
  524. opened: false,
  525. };
  526. // Loop through our object
  527. for (var property in defaults) {
  528. if (options && options.hasOwnProperty(property)) {
  529. obj.options[property] = options[property];
  530. } else {
  531. obj.options[property] = defaults[property];
  532. }
  533. }
  534. // Value
  535. if (! obj.options.value && el.value) {
  536. obj.options.value = el.value;
  537. }
  538. // Make sure use upper case in the format
  539. obj.options.format = obj.options.format.toUpperCase();
  540. if (obj.options.value) {
  541. var date = obj.options.value.split(' ');
  542. var time = date[1];
  543. var date = date[0].split('-');
  544. var y = parseInt(date[0]);
  545. var m = parseInt(date[1]);
  546. var d = parseInt(date[2]);
  547. if (time) {
  548. var time = time.split(':');
  549. var h = parseInt(time[0]);
  550. var i = parseInt(time[1]);
  551. } else {
  552. var h = 0;
  553. var i = 0;
  554. }
  555. } else {
  556. var date = new Date();
  557. var y = date.getFullYear();
  558. var m = date.getMonth() + 1;
  559. var d = date.getDate();
  560. var h = date.getHours();
  561. var i = date.getMinutes();
  562. }
  563. // Current value
  564. obj.date = [ y, m, d, h, i, 0 ];
  565. // Two digits
  566. var two = function(value) {
  567. value = '' + value;
  568. if (value.length == 1) {
  569. value = '0' + value;
  570. }
  571. return value;
  572. }
  573. // Element
  574. el.classList.add('jcalendar-input');
  575. // Calendar elements
  576. var calendarReset = document.createElement('div');
  577. calendarReset.className = 'jcalendar-reset';
  578. calendarReset.innerHTML = 'Reset';
  579. var calendarConfirm = document.createElement('div');
  580. calendarConfirm.className = 'jcalendar-confirm';
  581. calendarConfirm.innerHTML = 'Done';
  582. var calendarControls = document.createElement('div');
  583. calendarControls.className = 'jcalendar-controls'
  584. if (obj.options.resetButton) {
  585. calendarControls.appendChild(calendarReset);
  586. }
  587. calendarControls.appendChild(calendarConfirm);
  588. var calendarContainer = document.createElement('div');
  589. calendarContainer.className = 'jcalendar-container';
  590. var calendarContent = document.createElement('div');
  591. calendarContent.className = 'jcalendar-content';
  592. calendarContent.appendChild(calendarControls);
  593. calendarContainer.appendChild(calendarContent);
  594. // Main element
  595. var calendar = document.createElement('div');
  596. calendar.className = 'jcalendar';
  597. calendar.appendChild(calendarContainer);
  598. // Previous button
  599. var calendarHeaderPrev = document.createElement('td');
  600. calendarHeaderPrev.setAttribute('colspan', '2');
  601. calendarHeaderPrev.className = 'jcalendar-prev';
  602. // Header with year and month
  603. var calendarLabelYear = document.createElement('span');
  604. calendarLabelYear.className = 'jcalendar-year';
  605. var calendarLabelMonth = document.createElement('span');
  606. calendarLabelMonth.className = 'jcalendar-month';
  607. var calendarHeaderTitle = document.createElement('td');
  608. calendarHeaderTitle.className = 'jcalendar-header';
  609. calendarHeaderTitle.setAttribute('colspan', '3');
  610. calendarHeaderTitle.appendChild(calendarLabelMonth);
  611. calendarHeaderTitle.appendChild(calendarLabelYear);
  612. var calendarHeaderNext = document.createElement('td');
  613. calendarHeaderNext.setAttribute('colspan', '2');
  614. calendarHeaderNext.className = 'jcalendar-next';
  615. var calendarHeaderRow = document.createElement('tr');
  616. calendarHeaderRow.appendChild(calendarHeaderPrev);
  617. calendarHeaderRow.appendChild(calendarHeaderTitle);
  618. calendarHeaderRow.appendChild(calendarHeaderNext);
  619. var calendarHeader = document.createElement('thead');
  620. calendarHeader.appendChild(calendarHeaderRow);
  621. var calendarBody = document.createElement('tbody');
  622. var calendarFooter = document.createElement('tfoot');
  623. // Calendar table
  624. var calendarTable = document.createElement('table');
  625. calendarTable.setAttribute('cellpadding', '0');
  626. calendarTable.setAttribute('cellspacing', '0');
  627. calendarTable.appendChild(calendarHeader);
  628. calendarTable.appendChild(calendarBody);
  629. calendarTable.appendChild(calendarFooter);
  630. calendarContent.appendChild(calendarTable);
  631. var calendarSelectHour = document.createElement('select');
  632. calendarSelectHour.className = 'jcalendar-select';
  633. calendarSelectHour.onchange = function() {
  634. obj.date[3] = this.value;
  635. }
  636. for (var i = 0; i < 24; i++) {
  637. var element = document.createElement('option');
  638. element.value = i;
  639. element.innerHTML = two(i);
  640. calendarSelectHour.appendChild(element);
  641. }
  642. var calendarSelectMin = document.createElement('select');
  643. calendarSelectMin.className = 'jcalendar-select';
  644. calendarSelectMin.onchange = function() {
  645. obj.date[4] = this.value;
  646. }
  647. for (var i = 0; i < 60; i++) {
  648. var element = document.createElement('option');
  649. element.value = i;
  650. element.innerHTML = two(i);
  651. calendarSelectMin.appendChild(element);
  652. }
  653. // Footer controls
  654. var calendarControls = document.createElement('div');
  655. calendarControls.className = 'jcalendar-controls';
  656. var calendarControlsTime = document.createElement('div');
  657. calendarControlsTime.className = 'jcalendar-time';
  658. calendarControlsTime.style.maxWidth = '140px';
  659. calendarControlsTime.appendChild(calendarSelectHour);
  660. calendarControlsTime.appendChild(calendarSelectMin);
  661. var calendarControlsUpdate = document.createElement('div');
  662. calendarControlsUpdate.style.flexGrow = '10';
  663. calendarControlsUpdate.innerHTML = '<input type="button" class="jcalendar-update" value="Update">'
  664. calendarControls.appendChild(calendarControlsTime);
  665. calendarControls.appendChild(calendarControlsUpdate);
  666. calendarContent.appendChild(calendarControls);
  667. var calendarBackdrop = document.createElement('div');
  668. calendarBackdrop.className = 'jcalendar-backdrop';
  669. calendar.appendChild(calendarBackdrop);
  670. // Methods
  671. obj.open = function (value) {
  672. if (! calendar.classList.contains('jcalendar-focus')) {
  673. if (jSuites.calendar.current) {
  674. jSuites.calendar.current.close();
  675. }
  676. // Current
  677. jSuites.calendar.current = obj;
  678. // Show calendar
  679. calendar.classList.add('jcalendar-focus');
  680. // Get days
  681. obj.getDays();
  682. // Hour
  683. if (obj.options.time) {
  684. calendarSelectHour.value = obj.date[3];
  685. calendarSelectMin.value = obj.date[4];
  686. }
  687. // Get the position of the corner helper
  688. if (jSuites.getWindowWidth() < 800 || obj.options.fullscreen) {
  689. // Full
  690. calendar.classList.add('jcalendar-fullsize');
  691. // Animation
  692. jSuites.slideBottom(calendarContent, 1);
  693. } else {
  694. const rect = el.getBoundingClientRect();
  695. const rectContent = calendarContent.getBoundingClientRect();
  696. if (obj.options.position) {
  697. calendarContainer.style.position = 'fixed';
  698. if (window.innerHeight < rect.bottom + rectContent.height) {
  699. calendarContainer.style.top = (rect.top - (rectContent.height + 2)) + 'px';
  700. } else {
  701. calendarContainer.style.top = (rect.top + rect.height + 2) + 'px';
  702. }
  703. calendarContainer.style.left = rect.left + 'px';
  704. } else {
  705. if (window.innerHeight < rect.bottom + rectContent.height) {
  706. calendarContainer.style.bottom = (1 * rect.height + rectContent.height + 2) + 'px';
  707. } else {
  708. calendarContainer.style.top = 2 + 'px';
  709. }
  710. }
  711. }
  712. }
  713. }
  714. obj.close = function (ignoreEvents, update) {
  715. // Current
  716. jSuites.calendar.current = null;
  717. if (update != false && el.tagName == 'INPUT') {
  718. obj.setValue(obj.getValue());
  719. }
  720. // Animation
  721. if (! ignoreEvents && typeof(obj.options.onclose) == 'function') {
  722. obj.options.onclose(el);
  723. }
  724. // Hide
  725. calendar.classList.remove('jcalendar-focus');
  726. return obj.getValue();
  727. }
  728. obj.prev = function() {
  729. // Check if the visualization is the days picker or years picker
  730. if (obj.options.mode == 'years') {
  731. obj.date[0] = obj.date[0] - 12;
  732. // Update picker table of days
  733. obj.getYears();
  734. } else {
  735. // Go to the previous month
  736. if (obj.date[1] < 2) {
  737. obj.date[0] = obj.date[0] - 1;
  738. obj.date[1] = 12;
  739. } else {
  740. obj.date[1] = obj.date[1] - 1;
  741. }
  742. // Update picker table of days
  743. obj.getDays();
  744. }
  745. }
  746. obj.next = function() {
  747. // Check if the visualization is the days picker or years picker
  748. if (obj.options.mode == 'years') {
  749. obj.date[0] = parseInt(obj.date[0]) + 12;
  750. // Update picker table of days
  751. obj.getYears();
  752. } else {
  753. // Go to the previous month
  754. if (obj.date[1] > 11) {
  755. obj.date[0] = obj.date[0] + 1;
  756. obj.date[1] = 1;
  757. } else {
  758. obj.date[1] = obj.date[1] + 1;
  759. }
  760. // Update picker table of days
  761. obj.getDays();
  762. }
  763. }
  764. obj.setValue = function(val) {
  765. if (val) {
  766. // Keep value
  767. obj.options.value = val;
  768. // Set label
  769. var value = obj.setLabel(val, obj.options.format);
  770. var date = obj.options.value.split(' ');
  771. if (! date[1]) {
  772. date[1] = '00:00:00';
  773. }
  774. var time = date[1].split(':')
  775. var date = date[0].split('-');
  776. var y = parseInt(date[0]);
  777. var m = parseInt(date[1]);
  778. var d = parseInt(date[2]);
  779. var h = parseInt(time[0]);
  780. var i = parseInt(time[1]);
  781. obj.date = [ y, m, d, h, i, 0 ];
  782. var val = obj.setLabel(val, obj.options.format);
  783. if (el.value != val) {
  784. el.value = val;
  785. // On change
  786. if (typeof(obj.options.onchange) == 'function') {
  787. obj.options.onchange(el, val, obj.date);
  788. }
  789. }
  790. obj.getDays();
  791. }
  792. }
  793. obj.getValue = function() {
  794. if (obj.date) {
  795. if (obj.options.time) {
  796. return two(obj.date[0]) + '-' + two(obj.date[1]) + '-' + two(obj.date[2]) + ' ' + two(obj.date[3]) + ':' + two(obj.date[4]) + ':' + two(0);
  797. } else {
  798. return two(obj.date[0]) + '-' + two(obj.date[1]) + '-' + two(obj.date[2]) + ' ' + two(0) + ':' + two(0) + ':' + two(0);
  799. }
  800. } else {
  801. return "";
  802. }
  803. }
  804. /**
  805. * Update calendar
  806. */
  807. obj.update = function(element) {
  808. obj.date[2] = element.innerText;
  809. if (! obj.options.time) {
  810. obj.close();
  811. } else {
  812. obj.date[3] = calendarSelectHour.value;
  813. obj.date[4] = calendarSelectMin.value;
  814. }
  815. var elements = calendar.querySelector('.jcalendar-selected');
  816. if (elements) {
  817. elements.classList.remove('jcalendar-selected');
  818. }
  819. element.classList.add('jcalendar-selected')
  820. }
  821. /**
  822. * Set to blank
  823. */
  824. obj.reset = function() {
  825. // Clear element
  826. obj.date = null;
  827. // Reset element
  828. el.value = '';
  829. // Close calendar
  830. obj.close();
  831. }
  832. /**
  833. * Get calendar days
  834. */
  835. obj.getDays = function() {
  836. // Mode
  837. obj.options.mode = 'days';
  838. // Variables
  839. var d = 0;
  840. var today = 0;
  841. var today_d = 0;
  842. var calendar_day;
  843. // Setting current values in case of NULLs
  844. var date = new Date();
  845. var year = obj.date && obj.date[0] ? obj.date[0] : parseInt(date.getFullYear());
  846. var month = obj.date && obj.date[1] ? obj.date[1] : parseInt(date.getMonth()) + 1;
  847. var day = obj.date && obj.date[2] ? obj.date[2] : parseInt(date.getDay());
  848. var hour = obj.date && obj.date[3] ? obj.date[3] : parseInt(date.getHours());
  849. var min = obj.date && obj.date[4] ? obj.date[4] : parseInt(date.getMinutes());
  850. obj.date = [year, month, day, hour, min, 0 ];
  851. // Update title
  852. calendarLabelYear.innerHTML = year;
  853. calendarLabelMonth.innerHTML = obj.options.months[month - 1];
  854. // Flag if this is the current month and year
  855. if ((date.getMonth() == month-1) && (date.getFullYear() == year)) {
  856. today = 1;
  857. today_d = date.getDate();
  858. }
  859. var date = new Date(year, month, 0, 0, 0);
  860. var nd = date.getDate();
  861. var date = new Date(year, month-1, 0, hour, min);
  862. var fd = date.getDay() + 1;
  863. // Reset table
  864. calendarBody.innerHTML = '';
  865. // Weekdays Row
  866. var row = document.createElement('tr');
  867. row.setAttribute('align', 'center');
  868. calendarBody.appendChild(row);
  869. for (var i = 0; i < 7; i++) {
  870. var cell = document.createElement('td');
  871. cell.setAttribute('width', '30');
  872. cell.classList.add('jcalendar-weekday')
  873. cell.innerHTML = obj.options.weekdays_short[i];
  874. row.appendChild(cell);
  875. }
  876. // Avoid a blank line
  877. if (fd == 7) {
  878. var j = 7;
  879. } else {
  880. var j = 0;
  881. }
  882. // Days inside the table
  883. var row = document.createElement('tr');
  884. row.setAttribute('align', 'center');
  885. calendarBody.appendChild(row);
  886. // Days in the month
  887. for (var i = j; i < (Math.ceil((nd + fd) / 7) * 7); i++) {
  888. // Create row
  889. if ((i > 0) && (!(i % 7))) {
  890. var row = document.createElement('tr');
  891. row.setAttribute('align', 'center');
  892. calendarBody.appendChild(row);
  893. }
  894. if ((i >= fd) && (i < nd + fd)) {
  895. d += 1;
  896. } else {
  897. d = 0;
  898. }
  899. // Create cell
  900. var cell = document.createElement('td');
  901. cell.setAttribute('width', '30');
  902. cell.classList.add('jcalendar-set-day');
  903. row.appendChild(cell);
  904. if (d == 0) {
  905. cell.innerHTML = '';
  906. } else {
  907. if (d < 10) {
  908. cell.innerHTML = 0 + d;
  909. } else {
  910. cell.innerHTML = d;
  911. }
  912. }
  913. // Selected
  914. if (d && d == day) {
  915. cell.classList.add('jcalendar-selected');
  916. }
  917. // Sundays
  918. if (! (i % 7)) {
  919. cell.style.color = 'red';
  920. }
  921. // Today
  922. if ((today == 1) && (today_d == d)) {
  923. cell.style.fontWeight = 'bold';
  924. }
  925. }
  926. // Show time controls
  927. if (obj.options.time) {
  928. calendarControlsTime.style.display = '';
  929. } else {
  930. calendarControlsTime.style.display = 'none';
  931. }
  932. }
  933. obj.getMonths = function() {
  934. // Mode
  935. obj.options.mode = 'months';
  936. // Loading month labels
  937. var months = obj.options.months;
  938. // Update title
  939. calendarLabelYear.innerHTML = obj.date[0];
  940. calendarLabelMonth.innerHTML = '';
  941. // Create months table
  942. var html = '<td colspan="7"><table width="100%"><tr align="center">';
  943. for (i = 0; i < 12; i++) {
  944. if ((i > 0) && (!(i % 4))) {
  945. html += '</tr><tr align="center">';
  946. }
  947. var month = parseInt(i) + 1;
  948. html += '<td class="jcalendar-set-month" data-value="' + month + '">' + months[i] +'</td>';
  949. }
  950. html += '</tr></table></td>';
  951. calendarBody.innerHTML = html;
  952. }
  953. obj.getYears = function() {
  954. // Mode
  955. obj.options.mode = 'years';
  956. // Array of years
  957. var y = [];
  958. for (i = 0; i < 25; i++) {
  959. y[i] = parseInt(obj.date[0]) + (i - 12);
  960. }
  961. // Assembling the year tables
  962. var html = '<td colspan="7"><table width="100%"><tr align="center">';
  963. for (i = 0; i < 25; i++) {
  964. if ((i > 0) && (!(i % 5))) {
  965. html += '</tr><tr align="center">';
  966. }
  967. html += '<td class="jcalendar-set-year">'+ y[i] +'</td>';
  968. }
  969. html += '</tr></table></td>';
  970. calendarBody.innerHTML = html;
  971. }
  972. obj.setLabel = function(value, format) {
  973. return jSuites.calendar.getDateString(value, format);
  974. }
  975. obj.fromFormatted = function (value, format) {
  976. return jSuites.calendar.extractDateFromString(value, format);
  977. }
  978. // Add properties
  979. el.setAttribute('autocomplete', 'off');
  980. el.setAttribute('data-mask', obj.options.format.toLowerCase());
  981. if (obj.options.readonly) {
  982. el.setAttribute('readonly', 'readonly');
  983. }
  984. if (obj.options.placeholder) {
  985. el.setAttribute('placeholder', obj.options.placeholder);
  986. }
  987. var mouseUpControls = function(e) {
  988. var action = e.target.className;
  989. // Object id
  990. if (action == 'jcalendar-prev') {
  991. obj.prev();
  992. e.stopPropagation();
  993. e.preventDefault();
  994. } else if (action == 'jcalendar-next') {
  995. obj.next();
  996. e.stopPropagation();
  997. e.preventDefault();
  998. } else if (action == 'jcalendar-month') {
  999. obj.getMonths();
  1000. e.stopPropagation();
  1001. e.preventDefault();
  1002. } else if (action == 'jcalendar-year') {
  1003. obj.getYears();
  1004. e.stopPropagation();
  1005. e.preventDefault();
  1006. } else if (action == 'jcalendar-set-year') {
  1007. obj.date[0] = e.target.innerText;
  1008. obj.getDays();
  1009. e.stopPropagation();
  1010. e.preventDefault();
  1011. } else if (action == 'jcalendar-set-month') {
  1012. obj.date[1] = parseInt(e.target.getAttribute('data-value'));
  1013. obj.getDays();
  1014. e.stopPropagation();
  1015. e.preventDefault();
  1016. } else if (action == 'jcalendar-confirm' || action == 'jcalendar-update') {
  1017. obj.close();
  1018. e.stopPropagation();
  1019. e.preventDefault();
  1020. } else if (action == 'jcalendar-close') {
  1021. obj.close();
  1022. e.stopPropagation();
  1023. e.preventDefault();
  1024. } else if (action == 'jcalendar-backdrop') {
  1025. obj.close(false, false);
  1026. e.stopPropagation();
  1027. e.preventDefault();
  1028. } else if (action == 'jcalendar-reset') {
  1029. obj.reset();
  1030. e.stopPropagation();
  1031. e.preventDefault();
  1032. } else if (e.target.classList.contains('jcalendar-set-day')) {
  1033. if (e.target.innerText) {
  1034. obj.update(e.target);
  1035. e.stopPropagation();
  1036. e.preventDefault();
  1037. }
  1038. }
  1039. }
  1040. var keyUpControls = function(e) {
  1041. if (e.target.value && e.target.value.length > 3) {
  1042. var test = jSuites.calendar.extractDateFromString(e.target.value, obj.options.format);
  1043. if (test) {
  1044. if (e.target.getAttribute('data-completed') == 'true') {
  1045. obj.setValue(test);
  1046. }
  1047. }
  1048. }
  1049. }
  1050. var verifyControls = function(e) {
  1051. console.log(e.target.className)
  1052. }
  1053. // Handle events
  1054. el.addEventListener("keyup", keyUpControls);
  1055. // Add global events
  1056. calendar.addEventListener("swipeleft", function(e) {
  1057. jSuites.slideLeft(calendarTable, 0, function() {
  1058. obj.next();
  1059. jSuites.slideRight(calendarTable, 1);
  1060. });
  1061. e.preventDefault();
  1062. e.stopPropagation();
  1063. });
  1064. calendar.addEventListener("swiperight", function(e) {
  1065. jSuites.slideRight(calendarTable, 0, function() {
  1066. obj.prev();
  1067. jSuites.slideLeft(calendarTable, 1);
  1068. });
  1069. e.preventDefault();
  1070. e.stopPropagation();
  1071. });
  1072. if ('ontouchend' in document.documentElement === true) {
  1073. calendar.addEventListener("touchend", mouseUpControls);
  1074. el.addEventListener("touchend", function(e) {
  1075. obj.open();
  1076. });
  1077. } else {
  1078. calendar.addEventListener("mouseup", mouseUpControls);
  1079. el.addEventListener("mouseup", function(e) {
  1080. obj.open();
  1081. });
  1082. }
  1083. // Append element to the DOM
  1084. el.parentNode.insertBefore(calendar, el.nextSibling);
  1085. // Keep object available from the node
  1086. el.calendar = obj;
  1087. if (obj.options.opened == true) {
  1088. obj.open();
  1089. }
  1090. return obj;
  1091. });
  1092. jSuites.calendar.prettify = function(d, texts) {
  1093. if (! texts) {
  1094. var texts = {
  1095. justNow: 'Just now',
  1096. xMinutesAgo: '{0}m ago',
  1097. xHoursAgo: '{0}h ago',
  1098. xDaysAgo: '{0}d ago',
  1099. xWeeksAgo: '{0}w ago',
  1100. xMonthsAgo: '{0} mon ago',
  1101. xYearsAgo: '{0}y ago',
  1102. }
  1103. }
  1104. var d1 = new Date();
  1105. var d2 = new Date(d);
  1106. var total = parseInt((d1 - d2) / 1000 / 60);
  1107. String.prototype.format = function(o) {
  1108. return this.replace('{0}', o);
  1109. }
  1110. if (total == 0) {
  1111. var text = texts.justNow;
  1112. } else if (total < 90) {
  1113. var text = texts.xMinutesAgo.format(total);
  1114. } else if (total < 1440) { // One day
  1115. var text = texts.xHoursAgo.format(Math.round(total/60));
  1116. } else if (total < 20160) { // 14 days
  1117. var text = texts.xDaysAgo.format(Math.round(total / 1440));
  1118. } else if (total < 43200) { // 30 days
  1119. var text = texts.xWeeksAgo.format(Math.round(total / 10080));
  1120. } else if (total < 1036800) { // 24 months
  1121. var text = texts.xMonthsAgo.format(Math.round(total / 43200));
  1122. } else { // 24 months+
  1123. var text = texts.xYearsAgo.format(Math.round(total / 525600));
  1124. }
  1125. return text;
  1126. }
  1127. jSuites.calendar.prettifyAll = function() {
  1128. var elements = document.querySelectorAll('.prettydate');
  1129. for (var i = 0; i < elements.length; i++) {
  1130. if (elements[i].getAttribute('data-date')) {
  1131. elements[i].innerHTML = jSuites.calendar.prettify(elements[i].getAttribute('data-date'));
  1132. } else {
  1133. elements[i].setAttribute('data-date', elements[i].innerHTML);
  1134. elements[i].innerHTML = jSuites.calendar.prettify(elements[i].innerHTML);
  1135. }
  1136. }
  1137. }
  1138. jSuites.calendar.now = function() {
  1139. var date = new Date();
  1140. var y = date.getFullYear();
  1141. var m = date.getMonth() + 1;
  1142. var d = date.getDate();
  1143. var h = date.getHours();
  1144. var i = date.getMinutes();
  1145. var s = date.getSeconds();
  1146. // Two digits
  1147. var two = function(value) {
  1148. value = '' + value;
  1149. if (value.length == 1) {
  1150. value = '0' + value;
  1151. }
  1152. return value;
  1153. }
  1154. return two(y) + '-' + two(m) + '-' + two(d) + ' ' + two(h) + ':' + two(i) + ':' + two(s);
  1155. }
  1156. // Helper to extract date from a string
  1157. jSuites.calendar.extractDateFromString = function(date, format) {
  1158. var v1 = '' + date;
  1159. var v2 = format.replace(/[0-9]/g,'');
  1160. var test = 1;
  1161. // Get year
  1162. var y = v2.search("YYYY");
  1163. y = v1.substr(y,4);
  1164. if (parseInt(y) != y) {
  1165. test = 0;
  1166. }
  1167. // Get month
  1168. var m = v2.search("MM");
  1169. m = v1.substr(m,2);
  1170. if (parseInt(m) != m || d > 12) {
  1171. test = 0;
  1172. }
  1173. // Get day
  1174. var d = v2.search("DD");
  1175. d = v1.substr(d,2);
  1176. if (parseInt(d) != d || d > 31) {
  1177. test = 0;
  1178. }
  1179. // Get hour
  1180. var h = v2.search("HH");
  1181. if (h >= 0) {
  1182. h = v1.substr(h,2);
  1183. if (! parseInt(h) || h > 23) {
  1184. h = '00';
  1185. }
  1186. } else {
  1187. h = '00';
  1188. }
  1189. // Get minutes
  1190. var i = v2.search("MI");
  1191. if (i >= 0) {
  1192. i = v1.substr(i,2);
  1193. if (! parseInt(i) || i > 59) {
  1194. i = '00';
  1195. }
  1196. } else {
  1197. i = '00';
  1198. }
  1199. // Get seconds
  1200. var s = v2.search("SS");
  1201. if (s >= 0) {
  1202. s = v1.substr(s,2);
  1203. if (! parseInt(s) || s > 59) {
  1204. s = '00';
  1205. }
  1206. } else {
  1207. s = '00';
  1208. }
  1209. if (test == 1 && date.length == v2.length) {
  1210. // Update source
  1211. var data = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
  1212. return data;
  1213. }
  1214. return '';
  1215. }
  1216. // Helper to convert date into string
  1217. jSuites.calendar.getDateString = function(value, format) {
  1218. // Default calendar
  1219. if (! format) {
  1220. var format = 'DD/MM/YYYY';
  1221. }
  1222. if (value) {
  1223. var d = ''+value;
  1224. d = d.split(' ');
  1225. var h = '';
  1226. var m = '';
  1227. var s = '';
  1228. if (d[1]) {
  1229. h = d[1].split(':');
  1230. m = h[1] ? h[1] : '00';
  1231. s = h[2] ? h[2] : '00';
  1232. h = h[0] ? h[0] : '00';
  1233. } else {
  1234. h = '00';
  1235. m = '00';
  1236. s = '00';
  1237. }
  1238. d = d[0].split('-');
  1239. if (d[0] && d[1] && d[2] && d[0] > 0 && d[1] > 0 && d[1] < 13 && d[2] > 0 && d[2] < 32) {
  1240. var calendar = new Date(d[0], d[1]-1, d[2]);
  1241. var weekday = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
  1242. var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
  1243. d[1] = (d[1].length < 2 ? '0' : '') + d[1];
  1244. d[2] = (d[2].length < 2 ? '0' : '') + d[2];
  1245. h = (h.length < 2 ? '0' : '') + h;
  1246. m = (m.length < 2 ? '0' : '') + m;
  1247. s = (s.length < 2 ? '0' : '') + s;
  1248. value = format;
  1249. value = value.replace('WD', weekday[calendar.getDay()]);
  1250. value = value.replace('DD', d[2]);
  1251. value = value.replace('MM', d[1]);
  1252. value = value.replace('YYYY', d[0]);
  1253. value = value.replace('YY', d[0].substring(2,4));
  1254. value = value.replace('MON', months[parseInt(d[1])-1].toUpperCase());
  1255. if (h) {
  1256. value = value.replace('HH24', h);
  1257. }
  1258. if (h > 12) {
  1259. value = value.replace('HH12', h - 12);
  1260. value = value.replace('HH', h);
  1261. } else {
  1262. value = value.replace('HH12', h);
  1263. value = value.replace('HH', h);
  1264. }
  1265. value = value.replace('MI', m);
  1266. value = value.replace('MM', m);
  1267. value = value.replace('SS', s);
  1268. } else {
  1269. value = '';
  1270. }
  1271. }
  1272. return value;
  1273. }
  1274. jSuites.calendar.isOpen = function(e) {
  1275. if (jSuites.calendar.current) {
  1276. if (! e.target.className || e.target.className.indexOf('jcalendar') == -1) {
  1277. jSuites.calendar.current.close();
  1278. }
  1279. }
  1280. }
  1281. if ('ontouchstart' in document.documentElement === true) {
  1282. document.addEventListener("touchstart", jSuites.calendar.isOpen);
  1283. } else {
  1284. document.addEventListener("mousedown", jSuites.calendar.isOpen);
  1285. }
  1286. jSuites.color = (function(el, options) {
  1287. var obj = {};
  1288. obj.options = {};
  1289. obj.values = [];
  1290. // Global container
  1291. if (! jSuites.color.current) {
  1292. jSuites.color.current = null;
  1293. }
  1294. /**
  1295. * @typedef {Object} defaults
  1296. * @property {(string|Array)} value - Initial value of the compontent
  1297. * @property {string} placeholder - The default instruction text on the element
  1298. * @property {requestCallback} onchange - Method to be execute after any changes on the element
  1299. * @property {requestCallback} onclose - Method to be execute when the element is closed
  1300. */
  1301. var defaults = {
  1302. placeholder: '',
  1303. value: null,
  1304. onclose: null,
  1305. onchange: null,
  1306. };
  1307. // Loop through our object
  1308. for (var property in defaults) {
  1309. if (options && options.hasOwnProperty(property)) {
  1310. obj.options[property] = options[property];
  1311. } else {
  1312. obj.options[property] = defaults[property];
  1313. }
  1314. }
  1315. var palette = {
  1316. "red": {
  1317. "50": "#ffebee",
  1318. "100": "#ffcdd2",
  1319. "200": "#ef9a9a",
  1320. "300": "#e57373",
  1321. "400": "#ef5350",
  1322. "500": "#f44336",
  1323. "600": "#e53935",
  1324. "700": "#d32f2f",
  1325. "800": "#c62828",
  1326. "900": "#b71c1c",
  1327. },
  1328. "pink": {
  1329. "50": "#fce4ec",
  1330. "100": "#f8bbd0",
  1331. "200": "#f48fb1",
  1332. "300": "#f06292",
  1333. "400": "#ec407a",
  1334. "500": "#e91e63",
  1335. "600": "#d81b60",
  1336. "700": "#c2185b",
  1337. "800": "#ad1457",
  1338. "900": "#880e4f",
  1339. },
  1340. "purple": {
  1341. "50": "#f3e5f5",
  1342. "100": "#e1bee7",
  1343. "200": "#ce93d8",
  1344. "300": "#ba68c8",
  1345. "400": "#ab47bc",
  1346. "500": "#9c27b0",
  1347. "600": "#8e24aa",
  1348. "700": "#7b1fa2",
  1349. "800": "#6a1b9a",
  1350. "900": "#4a148c",
  1351. },
  1352. "indigo": {
  1353. "50": "#e8eaf6",
  1354. "100": "#c5cae9",
  1355. "200": "#9fa8da",
  1356. "300": "#7986cb",
  1357. "400": "#5c6bc0",
  1358. "500": "#3f51b5",
  1359. "600": "#3949ab",
  1360. "700": "#303f9f",
  1361. "800": "#283593",
  1362. "900": "#1a237e",
  1363. },
  1364. "blue": {
  1365. "50": "#e3f2fd",
  1366. "100": "#bbdefb",
  1367. "200": "#90caf9",
  1368. "300": "#64b5f6",
  1369. "400": "#42a5f5",
  1370. "500": "#2196f3",
  1371. "600": "#1e88e5",
  1372. "700": "#1976d2",
  1373. "800": "#1565c0",
  1374. "900": "#0d47a1",
  1375. },
  1376. "cyan": {
  1377. "50": "#e0f7fa",
  1378. "100": "#b2ebf2",
  1379. "200": "#80deea",
  1380. "300": "#4dd0e1",
  1381. "400": "#26c6da",
  1382. "500": "#00bcd4",
  1383. "600": "#00acc1",
  1384. "700": "#0097a7",
  1385. "800": "#00838f",
  1386. "900": "#006064",
  1387. },
  1388. "teal": {
  1389. "50": "#e0f2f1",
  1390. "100": "#b2dfdb",
  1391. "200": "#80cbc4",
  1392. "300": "#4db6ac",
  1393. "400": "#26a69a",
  1394. "500": "#009688",
  1395. "600": "#00897b",
  1396. "700": "#00796b",
  1397. "800": "#00695c",
  1398. "900": "#004d40",
  1399. },
  1400. "green": {
  1401. "50": "#e8f5e9",
  1402. "100": "#c8e6c9",
  1403. "200": "#a5d6a7",
  1404. "300": "#81c784",
  1405. "400": "#66bb6a",
  1406. "500": "#4caf50",
  1407. "600": "#43a047",
  1408. "700": "#388e3c",
  1409. "800": "#2e7d32",
  1410. "900": "#1b5e20",
  1411. },
  1412. "lightgreen": {
  1413. "50": "#f1f8e9",
  1414. "100": "#dcedc8",
  1415. "200": "#c5e1a5",
  1416. "300": "#aed581",
  1417. "400": "#9ccc65",
  1418. "500": "#8bc34a",
  1419. "600": "#7cb342",
  1420. "700": "#689f38",
  1421. "800": "#558b2f",
  1422. "900": "#33691e",
  1423. },
  1424. "lime": {
  1425. "50": "#f9fbe7",
  1426. "100": "#f0f4c3",
  1427. "200": "#e6ee9c",
  1428. "300": "#dce775",
  1429. "400": "#d4e157",
  1430. "500": "#cddc39",
  1431. "600": "#c0ca33",
  1432. "700": "#afb42b",
  1433. "800": "#9e9d24",
  1434. "900": "#827717",
  1435. },
  1436. "yellow": {
  1437. "50": "#fffde7",
  1438. "100": "#fff9c4",
  1439. "200": "#fff59d",
  1440. "300": "#fff176",
  1441. "400": "#ffee58",
  1442. "500": "#ffeb3b",
  1443. "600": "#fdd835",
  1444. "700": "#fbc02d",
  1445. "800": "#f9a825",
  1446. "900": "#f57f17",
  1447. },
  1448. "amber": {
  1449. "50": "#fff8e1",
  1450. "100": "#ffecb3",
  1451. "200": "#ffe082",
  1452. "300": "#ffd54f",
  1453. "400": "#ffca28",
  1454. "500": "#ffc107",
  1455. "600": "#ffb300",
  1456. "700": "#ffa000",
  1457. "800": "#ff8f00",
  1458. "900": "#ff6f00",
  1459. },
  1460. "orange": {
  1461. "50": "#fff3e0",
  1462. "100": "#ffe0b2",
  1463. "200": "#ffcc80",
  1464. "300": "#ffb74d",
  1465. "400": "#ffa726",
  1466. "500": "#ff9800",
  1467. "600": "#fb8c00",
  1468. "700": "#f57c00",
  1469. "800": "#ef6c00",
  1470. "900": "#e65100",
  1471. },
  1472. "deeporange": {
  1473. "50": "#fbe9e7",
  1474. "100": "#ffccbc",
  1475. "200": "#ffab91",
  1476. "300": "#ff8a65",
  1477. "400": "#ff7043",
  1478. "500": "#ff5722",
  1479. "600": "#f4511e",
  1480. "700": "#e64a19",
  1481. "800": "#d84315",
  1482. "900": "#bf360c",
  1483. },
  1484. "brown": {
  1485. "50": "#efebe9",
  1486. "100": "#d7ccc8",
  1487. "200": "#bcaaa4",
  1488. "300": "#a1887f",
  1489. "400": "#8d6e63",
  1490. "500": "#795548",
  1491. "600": "#6d4c41",
  1492. "700": "#5d4037",
  1493. "800": "#4e342e",
  1494. "900": "#3e2723"
  1495. },
  1496. "grey": {
  1497. "50": "#fafafa",
  1498. "100": "#f5f5f5",
  1499. "200": "#eeeeee",
  1500. "300": "#e0e0e0",
  1501. "400": "#bdbdbd",
  1502. "500": "#9e9e9e",
  1503. "600": "#757575",
  1504. "700": "#616161",
  1505. "800": "#424242",
  1506. "900": "#212121"
  1507. },
  1508. "bluegrey": {
  1509. "50": "#eceff1",
  1510. "100": "#cfd8dc",
  1511. "200": "#b0bec5",
  1512. "300": "#90a4ae",
  1513. "400": "#78909c",
  1514. "500": "#607d8b",
  1515. "600": "#546e7a",
  1516. "700": "#455a64",
  1517. "800": "#37474f",
  1518. "900": "#263238"
  1519. }
  1520. };
  1521. var x = 0;
  1522. var y = 0;
  1523. var colors = [];
  1524. var col = Object.keys(palette);
  1525. var shade = Object.keys(palette[col[0]]);
  1526. for (var i = 0; i < col.length; i++) {
  1527. for (var j = 0; j < shade.length; j++) {
  1528. if (! colors[j]) {
  1529. colors[j] = [];
  1530. }
  1531. colors[j][i] = palette[col[i]][shade[j]];
  1532. }
  1533. };
  1534. // Value
  1535. if (obj.options.value) {
  1536. el.value = obj.options.value;
  1537. }
  1538. // Table container
  1539. var container = document.createElement('div');
  1540. container.className = 'jcolor';
  1541. // Table container
  1542. var backdrop = document.createElement('div');
  1543. backdrop.className = 'jcolor-backdrop';
  1544. container.appendChild(backdrop);
  1545. // Content
  1546. var content = document.createElement('div');
  1547. content.className = 'jcolor-content';
  1548. // Close button
  1549. var closeButton = document.createElement('div');
  1550. closeButton.className = 'jcolor-close';
  1551. closeButton.innerHTML = 'Done';
  1552. closeButton.onclick = function() {
  1553. obj.close();
  1554. }
  1555. content.appendChild(closeButton);
  1556. // Table pallete
  1557. var table = document.createElement('table');
  1558. table.setAttribute('cellpadding', '7');
  1559. table.setAttribute('cellspacing', '0');
  1560. for (var i = 0; i < colors.length; i++) {
  1561. var tr = document.createElement('tr');
  1562. for (var j = 0; j < colors[i].length; j++) {
  1563. var td = document.createElement('td');
  1564. td.style.backgroundColor = colors[i][j];
  1565. td.setAttribute('data-value', colors[i][j]);
  1566. td.innerHTML = '';
  1567. tr.appendChild(td);
  1568. // Selected color
  1569. if (obj.options.value == colors[i][j]) {
  1570. td.classList.add('jcolor-selected');
  1571. }
  1572. // Possible values
  1573. obj.values[colors[i][j]] = td;
  1574. }
  1575. table.appendChild(tr);
  1576. }
  1577. /**
  1578. * Open color pallete
  1579. */
  1580. obj.open = function() {
  1581. if (jSuites.color.current) {
  1582. if (jSuites.color.current != obj) {
  1583. jSuites.color.current.close();
  1584. }
  1585. }
  1586. if (! jSuites.color.current) {
  1587. // Persist element
  1588. jSuites.color.current = obj;
  1589. // Show colorpicker
  1590. container.classList.add('jcolor-focus');
  1591. const rectContent = content.getBoundingClientRect();
  1592. if (jSuites.getWindowWidth() < 800) {
  1593. content.style.top = '';
  1594. content.classList.add('jcolor-fullscreen');
  1595. jSuites.slideBottom(content, 1);
  1596. backdrop.style.display = 'block';
  1597. } else {
  1598. if (content.classList.contains('jcolor-fullscreen')) {
  1599. content.classList.remove('jcolor-fullscreen');
  1600. backdrop.style.display = '';
  1601. }
  1602. const rect = el.getBoundingClientRect();
  1603. if (window.innerHeight < rect.bottom + rectContent.height) {
  1604. content.style.top = -1 * (rectContent.height + 2) + 'px';
  1605. } else {
  1606. content.style.top = rect.height + 'px';
  1607. }
  1608. }
  1609. container.focus();
  1610. }
  1611. }
  1612. /**
  1613. * Close color pallete
  1614. */
  1615. obj.close = function(ignoreEvents) {
  1616. if (jSuites.color.current) {
  1617. jSuites.color.current = null;
  1618. if (! ignoreEvents && typeof(obj.options.onclose) == 'function') {
  1619. obj.options.onclose(el);
  1620. }
  1621. container.classList.remove('jcolor-focus');
  1622. }
  1623. // Make sure backdrop is hidden
  1624. backdrop.style.display = '';
  1625. return obj.options.value;
  1626. }
  1627. /**
  1628. * Set value
  1629. */
  1630. obj.setValue = function(color) {
  1631. if (color) {
  1632. el.value = color;
  1633. obj.options.value = color;
  1634. }
  1635. // Remove current selecded mark
  1636. var selected = container.querySelector('.jcolor-selected');
  1637. if (selected) {
  1638. selected.classList.remove('jcolor-selected');
  1639. }
  1640. // Mark cell as selected
  1641. obj.values[color].classList.add('jcolor-selected');
  1642. // Onchange
  1643. if (typeof(obj.options.onchange) == 'function') {
  1644. obj.options.onchange(el, color);
  1645. }
  1646. }
  1647. /**
  1648. * Get value
  1649. */
  1650. obj.getValue = function() {
  1651. return obj.options.value;
  1652. }
  1653. /**
  1654. * If element is focus open the picker
  1655. */
  1656. el.addEventListener("focus", function(e) {
  1657. obj.open();
  1658. });
  1659. el.addEventListener("mousedown", function(e) {
  1660. obj.open();
  1661. });
  1662. // Select color
  1663. container.addEventListener("mouseup", function(e) {
  1664. if (e.target.tagName == 'TD') {
  1665. jSuites.color.current.setValue(e.target.getAttribute('data-value'));
  1666. jSuites.color.current.close();
  1667. }
  1668. });
  1669. // Close controller
  1670. document.addEventListener("mousedown", function(e) {
  1671. if (jSuites.color.current) {
  1672. var element = jSuites.getElement(e.target, 'jcolor');
  1673. if (! element) {
  1674. jSuites.color.current.close();
  1675. }
  1676. }
  1677. });
  1678. // Possible to focus the container
  1679. container.setAttribute('tabindex', '900');
  1680. // Placeholder
  1681. if (obj.options.placeholder) {
  1682. el.setAttribute('placeholder', obj.options.placeholder);
  1683. }
  1684. // Append to the table
  1685. content.appendChild(table);
  1686. container.appendChild(content);
  1687. // Insert picker after the element
  1688. el.parentNode.insertBefore(container, el);
  1689. // Keep object available from the node
  1690. el.color = obj;
  1691. return obj;
  1692. });
  1693. jSuites.contextmenu = (function(el, options) {
  1694. var obj = {};
  1695. obj.options = {};
  1696. // Default configuration
  1697. var defaults = {
  1698. items: null,
  1699. onclick: null,
  1700. };
  1701. // Loop through our object
  1702. for (var property in defaults) {
  1703. if (options && options.hasOwnProperty(property)) {
  1704. obj.options[property] = options[property];
  1705. } else {
  1706. obj.options[property] = defaults[property];
  1707. }
  1708. }
  1709. // Class definition
  1710. el.classList.add('jcontextmenu');
  1711. // Focusable
  1712. el.setAttribute('tabindex', '900');
  1713. /**
  1714. * Open contextmenu
  1715. */
  1716. obj.open = function(e, items) {
  1717. if (items) {
  1718. // Update content
  1719. obj.options.items = items;
  1720. // Create items
  1721. obj.create(items);
  1722. }
  1723. // Coordinates
  1724. if (e.target) {
  1725. var x = e.clientX;
  1726. var y = e.clientY;
  1727. } else {
  1728. var x = e.x;
  1729. var y = e.y;
  1730. }
  1731. el.classList.add('jcontextmenu-focus');
  1732. el.focus();
  1733. const rect = el.getBoundingClientRect();
  1734. if (window.innerHeight < y + rect.height) {
  1735. el.style.top = (y - rect.height) + 'px';
  1736. } else {
  1737. el.style.top = y + 'px';
  1738. }
  1739. if (window.innerWidth < x + rect.width) {
  1740. if (x - rect.width > 0) {
  1741. el.style.left = (x - rect.width) + 'px';
  1742. } else {
  1743. el.style.left = '10px';
  1744. }
  1745. } else {
  1746. el.style.left = x + 'px';
  1747. }
  1748. }
  1749. /**
  1750. * Close menu
  1751. */
  1752. obj.close = function() {
  1753. if (el.classList.contains('jcontextmenu-focus')) {
  1754. el.classList.remove('jcontextmenu-focus');
  1755. }
  1756. }
  1757. /**
  1758. * Create items based on the declared objectd
  1759. * @param {object} items - List of object
  1760. */
  1761. obj.create = function(items) {
  1762. // Update content
  1763. el.innerHTML = '';
  1764. // Append items
  1765. for (var i = 0; i < items.length; i++) {
  1766. if (items[i].type && items[i].type == 'line') {
  1767. var itemContainer = document.createElement('hr');
  1768. } else {
  1769. var itemContainer = document.createElement('div');
  1770. var itemText = document.createElement('a');
  1771. itemText.innerHTML = items[i].title;
  1772. if (items[i].disabled) {
  1773. itemContainer.className = 'jcontextmenu-disabled';
  1774. } else if (items[i].onclick) {
  1775. itemContainer.method = items[i].onclick;
  1776. itemContainer.addEventListener("mouseup", function() {
  1777. // Execute method
  1778. this.method(this);
  1779. });
  1780. }
  1781. itemContainer.appendChild(itemText);
  1782. if (items[i].shortcut) {
  1783. var itemShortCut = document.createElement('span');
  1784. itemShortCut.innerHTML = items[i].shortcut;
  1785. itemContainer.appendChild(itemShortCut);
  1786. }
  1787. }
  1788. el.appendChild(itemContainer);
  1789. }
  1790. }
  1791. if (typeof(obj.options.onclick) == 'function') {
  1792. el.addEventListener('click', function(e) {
  1793. obj.options.onclick(obj);
  1794. });
  1795. }
  1796. el.addEventListener('blur', function(e) {
  1797. setTimeout(function() {
  1798. obj.close();
  1799. }, 120);
  1800. });
  1801. window.addEventListener("mousewheel", function() {
  1802. obj.close();
  1803. });
  1804. // Create items
  1805. if (obj.options.items) {
  1806. obj.create(obj.options.items);
  1807. }
  1808. el.contextmenu = obj;
  1809. return obj;
  1810. });
  1811. jSuites.contextmenu.getElement = function(element) {
  1812. var foundId = 0;
  1813. function path (element) {
  1814. if (element.parentNode && element.getAttribute('aria-contextmenu-id')) {
  1815. foundId = element.getAttribute('aria-contextmenu-id')
  1816. } else {
  1817. if (element.parentNode) {
  1818. path(element.parentNode);
  1819. }
  1820. }
  1821. }
  1822. path(element);
  1823. return foundId;
  1824. }
  1825. document.addEventListener("contextmenu", function(e) {
  1826. var id = jSuites.contextmenu.getElement(e.target);
  1827. if (id) {
  1828. var element = document.querySelector('#' + id);
  1829. if (! element) {
  1830. console.error('JSUITES: Contextmenu id not found');
  1831. } else {
  1832. element.contextmenu.open(e);
  1833. e.preventDefault();
  1834. }
  1835. }
  1836. });
  1837. jSuites.dropdown = (function(el, options) {
  1838. var obj = {};
  1839. obj.options = {};
  1840. // If the element is a SELECT tag, create a configuration object
  1841. if (el.tagName == 'SELECT') {
  1842. var ret = jSuites.dropdown.extractFromDom(el, options);
  1843. el = ret.el;
  1844. options = ret.options;
  1845. }
  1846. // Default configuration
  1847. var defaults = {
  1848. url: null,
  1849. data: [],
  1850. multiple: false,
  1851. autocomplete: false,
  1852. type: null,
  1853. width: null,
  1854. opened: false,
  1855. value: null,
  1856. placeholder: '',
  1857. position: false,
  1858. onchange: null,
  1859. onload: null,
  1860. onopen: null,
  1861. onclose: null,
  1862. onblur: null,
  1863. };
  1864. // Loop through our object
  1865. for (var property in defaults) {
  1866. if (options && options.hasOwnProperty(property)) {
  1867. obj.options[property] = options[property];
  1868. } else {
  1869. obj.options[property] = defaults[property];
  1870. }
  1871. }
  1872. // Global container
  1873. if (! jSuites.dropdown.current) {
  1874. jSuites.dropdown.current = null;
  1875. }
  1876. // Containers
  1877. obj.items = [];
  1878. obj.groups = [];
  1879. obj.selected = [];
  1880. // Create dropdown
  1881. el.classList.add('jdropdown');
  1882. if (obj.options.type == 'searchbar') {
  1883. el.classList.add('jdropdown-searchbar');
  1884. } else if (obj.options.type == 'list') {
  1885. el.classList.add('jdropdown-list');
  1886. } else if (obj.options.type == 'picker') {
  1887. el.classList.add('jdropdown-picker');
  1888. } else {
  1889. if (jSuites.getWindowWidth() < 800) {
  1890. el.classList.add('jdropdown-picker');
  1891. obj.options.type = 'picker';
  1892. } else {
  1893. if (obj.options.width) {
  1894. el.style.width = obj.options.width;
  1895. el.style.minWidth = obj.options.width;
  1896. }
  1897. el.classList.add('jdropdown-default');
  1898. obj.options.type = 'default';
  1899. }
  1900. }
  1901. // Header container
  1902. var containerHeader = document.createElement('div');
  1903. containerHeader.className = 'jdropdown-container-header';
  1904. // Header
  1905. var header = document.createElement('input');
  1906. header.className = 'jdropdown-header';
  1907. if (typeof(obj.options.onblur) == 'function') {
  1908. header.onblur = function() {
  1909. obj.options.onblur(el);
  1910. }
  1911. }
  1912. // Container
  1913. var container = document.createElement('div');
  1914. container.className = 'jdropdown-container';
  1915. // Dropdown content
  1916. var content = document.createElement('div');
  1917. content.className = 'jdropdown-content';
  1918. // Close button
  1919. var closeButton = document.createElement('div');
  1920. closeButton.className = 'jdropdown-close';
  1921. closeButton.innerHTML = 'Done';
  1922. // Create backdrop
  1923. var backdrop = document.createElement('div');
  1924. backdrop.className = 'jdropdown-backdrop';
  1925. // Autocomplete
  1926. if (obj.options.autocomplete == true) {
  1927. el.setAttribute('data-autocomplete', true);
  1928. // Handler
  1929. var keyTimer = null;
  1930. header.addEventListener('keyup', function(e) {
  1931. if (keyTimer) {
  1932. clearTimeout(keyTimer);
  1933. }
  1934. keyTimer = setTimeout(function() {
  1935. obj.find(header.value);
  1936. keyTimer = null;
  1937. }, 500);
  1938. if (! el.classList.contains('jdropdown-focus')) {
  1939. if (e.which > 65) {
  1940. obj.open();
  1941. }
  1942. }
  1943. });
  1944. } else {
  1945. header.setAttribute('readonly', 'readonly');
  1946. }
  1947. // Place holder
  1948. if (! obj.options.placeholder && el.getAttribute('placeholder')) {
  1949. obj.options.placeholder = el.getAttribute('placeholder');
  1950. }
  1951. if (obj.options.placeholder) {
  1952. header.setAttribute('placeholder', obj.options.placeholder);
  1953. }
  1954. // Append elements
  1955. containerHeader.appendChild(header);
  1956. if (obj.options.type == 'searchbar') {
  1957. containerHeader.appendChild(closeButton);
  1958. } else {
  1959. container.appendChild(closeButton);
  1960. }
  1961. container.appendChild(content);
  1962. el.appendChild(containerHeader);
  1963. el.appendChild(container);
  1964. el.appendChild(backdrop);
  1965. /**
  1966. * Init dropdown
  1967. */
  1968. obj.init = function() {
  1969. if (obj.options.url) {
  1970. jSuites.ajax({
  1971. url: obj.options.url,
  1972. method: 'GET',
  1973. dataType: 'json',
  1974. success: function(data) {
  1975. if (data) {
  1976. // Set data
  1977. obj.setData(data);
  1978. // Set value
  1979. if (obj.options.value != null) {
  1980. obj.setValue(obj.options.value);
  1981. }
  1982. // Onload method
  1983. if (typeof(obj.options.onload) == 'function') {
  1984. obj.options.onload(el, obj, data);
  1985. }
  1986. }
  1987. }
  1988. });
  1989. } else {
  1990. // Set data
  1991. obj.setData();
  1992. // Set value
  1993. if (obj.options.value != null) {
  1994. obj.setValue(obj.options.value);
  1995. }
  1996. // Onload
  1997. if (typeof(obj.options.onload) == 'function') {
  1998. obj.options.onload(el, obj, data);
  1999. }
  2000. }
  2001. // Open dropdown
  2002. if (obj.options.opened == true) {
  2003. obj.open();
  2004. }
  2005. }
  2006. obj.getUrl = function() {
  2007. return obj.options.url;
  2008. }
  2009. obj.setUrl = function(url) {
  2010. obj.options.url = url;
  2011. jSuites.ajax({
  2012. url: obj.options.url,
  2013. method: 'GET',
  2014. dataType: 'json',
  2015. success: function(data) {
  2016. obj.setData(data);
  2017. }
  2018. });
  2019. }
  2020. /**
  2021. * Create a new item
  2022. */
  2023. obj.createItem = function(data) {
  2024. // Create item
  2025. var item = {};
  2026. item.element = document.createElement('div');
  2027. item.element.className = 'jdropdown-item';
  2028. item.value = data.id;
  2029. item.text = data.name;
  2030. item.textLowerCase = '' + data.name.toLowerCase();
  2031. // Image
  2032. if (data.image) {
  2033. var image = document.createElement('img');
  2034. image.className = 'jdropdown-image';
  2035. image.src = data.image;
  2036. if (! data.title) {
  2037. image.classList.add('jdropdown-image-small');
  2038. }
  2039. item.element.appendChild(image);
  2040. }
  2041. // Set content
  2042. var node = document.createElement('div');
  2043. node.className = 'jdropdown-description';
  2044. node.innerHTML = data.name;
  2045. // Title
  2046. if (data.title) {
  2047. var title = document.createElement('div');
  2048. title.className = 'jdropdown-title';
  2049. title.innerHTML = data.title;
  2050. node.appendChild(title);
  2051. }
  2052. // Add node to item
  2053. item.element.appendChild(node);
  2054. return item;
  2055. }
  2056. obj.setData = function(data) {
  2057. // Update data
  2058. if (data) {
  2059. obj.options.data = data;
  2060. }
  2061. // Data
  2062. var data = obj.options.data;
  2063. // Make sure the content container is blank
  2064. content.innerHTML = '';
  2065. // Reset
  2066. obj.reset();
  2067. // Reset items
  2068. obj.items = [];
  2069. // Helpers
  2070. var items = [];
  2071. var groups = [];
  2072. // Create elements
  2073. if (data.length) {
  2074. // Prepare data
  2075. for (var i = 0; i < data.length; i++) {
  2076. // Compatibility
  2077. if (typeof(data[i]) != 'object') {
  2078. // Correct format
  2079. obj.options.data[i] = data[i] = { id: data[i], name: data[i] };
  2080. }
  2081. // Process groups
  2082. if (data[i].group) {
  2083. if (! groups[data[i].group]) {
  2084. groups[data[i].group] = [];
  2085. }
  2086. groups[data[i].group].push(i);
  2087. } else {
  2088. items.push(i);
  2089. }
  2090. }
  2091. // Groups
  2092. var groupNames = Object.keys(groups);
  2093. // Append groups in case exists
  2094. if (groupNames.length > 0) {
  2095. for (var i = 0; i < groupNames.length; i++) {
  2096. // Group container
  2097. var group = document.createElement('div');
  2098. group.className = 'jdropdown-group';
  2099. // Group name
  2100. var groupName = document.createElement('div');
  2101. groupName.className = 'jdropdown-group-name';
  2102. groupName.innerHTML = groupNames[i];
  2103. // Group arrow
  2104. var groupArrow = document.createElement('i');
  2105. groupArrow.className = 'jdropdown-group-arrow jdropdown-group-arrow-down';
  2106. groupName.appendChild(groupArrow);
  2107. // Group items
  2108. var groupContent = document.createElement('div');
  2109. groupContent.className = 'jdropdown-group-items';
  2110. for (var j = 0; j < groups[groupNames[i]].length; j++) {
  2111. var item = obj.createItem(data[groups[groupNames[i]][j]]);
  2112. groupContent.appendChild(item.element);
  2113. // Items
  2114. obj.items.push(item);
  2115. }
  2116. // Group itens
  2117. group.appendChild(groupName);
  2118. group.appendChild(groupArrow);
  2119. group.appendChild(groupContent);
  2120. content.appendChild(group);
  2121. }
  2122. }
  2123. if (items.length) {
  2124. for (var i = 0; i < items.length; i++) {
  2125. var item = obj.createItem(data[items[i]]);
  2126. obj.items.push(item);
  2127. content.appendChild(item.element);
  2128. }
  2129. }
  2130. // Create the Indexes
  2131. for (var i = 0; i < obj.items.length; i++) {
  2132. obj.items[i].element.setAttribute('data-index', i);
  2133. }
  2134. }
  2135. }
  2136. obj.getText = function(asArray) {
  2137. // Result
  2138. var result = [];
  2139. // Append options
  2140. for (var i = 0; i < obj.selected.length; i++) {
  2141. if (obj.items[obj.selected[i]]) {
  2142. result.push(obj.items[obj.selected[i]].text);
  2143. }
  2144. }
  2145. if (asArray) {
  2146. return result;
  2147. } else {
  2148. return result.join('; ');
  2149. }
  2150. }
  2151. obj.getValue = function(asArray) {
  2152. // Result
  2153. var result = [];
  2154. // Append options
  2155. for (var i = 0; i < obj.selected.length; i++) {
  2156. if (obj.items[obj.selected[i]]) {
  2157. result.push(obj.items[obj.selected[i]].value);
  2158. }
  2159. }
  2160. if (asArray) {
  2161. return result;
  2162. } else {
  2163. return result.join(';');
  2164. }
  2165. }
  2166. obj.setValue = function(value) {
  2167. // Remove values
  2168. for (var i = 0; i < obj.selected.length; i++) {
  2169. obj.items[obj.selected[i]].element.classList.remove('jdropdown-selected')
  2170. }
  2171. // Reset selected
  2172. obj.selected = [];
  2173. // Set values
  2174. if (value != null) {
  2175. if (Array.isArray(value)) {
  2176. for (var i = 0; i < obj.items.length; i++) {
  2177. for (var j = 0; j < value.length; j++) {
  2178. if (obj.items[i].value == value[j]) {
  2179. // Keep index of the selected item
  2180. obj.selected.push(i);
  2181. // Visual selection
  2182. obj.items[i].element.classList.add('jdropdown-selected');
  2183. }
  2184. }
  2185. }
  2186. } else {
  2187. for (var i = 0; i < obj.items.length; i++) {
  2188. if (obj.items[i].value == value) {
  2189. // Keep index of the selected item
  2190. obj.selected.push(i);
  2191. // Visual selection
  2192. obj.items[i].element.classList.add('jdropdown-selected');
  2193. }
  2194. }
  2195. }
  2196. }
  2197. // Update labels
  2198. obj.updateLabel();
  2199. }
  2200. obj.selectIndex = function(index) {
  2201. // Only select those existing elements
  2202. if (obj.items && obj.items[index]) {
  2203. var index = index = parseInt(index);
  2204. // Current selection
  2205. var oldValue = obj.getValue();
  2206. var oldLabel = obj.getText();
  2207. // Remove cursor style
  2208. if (obj.currentIndex != null) {
  2209. obj.items[obj.currentIndex].element.classList.remove('jdropdown-cursor');
  2210. }
  2211. // Set cursor style
  2212. obj.items[index].element.classList.add('jdropdown-cursor');
  2213. // Update cursor position
  2214. obj.currentIndex = index;
  2215. // Focus behaviour
  2216. if (! obj.options.multiple) {
  2217. // Unselect option
  2218. if (obj.items[index].element.classList.contains('jdropdown-selected')) {
  2219. // Reset selected
  2220. obj.resetSelected();
  2221. } else {
  2222. // Reset selected
  2223. obj.resetSelected();
  2224. // Update selected item
  2225. obj.items[index].element.classList.add('jdropdown-selected');
  2226. // Add to the selected list
  2227. obj.selected.push(index);
  2228. // Close
  2229. obj.close();
  2230. }
  2231. } else {
  2232. // Toggle option
  2233. if (obj.items[index].element.classList.contains('jdropdown-selected')) {
  2234. obj.items[index].element.classList.remove('jdropdown-selected');
  2235. // Remove from selected list
  2236. var indexToRemove = obj.selected.indexOf(index);
  2237. // Remove select
  2238. obj.selected.splice(indexToRemove, 1);
  2239. } else {
  2240. // Select element
  2241. obj.items[index].element.classList.add('jdropdown-selected');
  2242. // Add to the selected list
  2243. obj.selected.push(index);
  2244. }
  2245. // Update labels for multiple dropdown
  2246. if (! obj.options.autocomplete) {
  2247. obj.updateLabel();
  2248. }
  2249. }
  2250. // Current selection
  2251. var newValue = obj.getValue();
  2252. var newLabel = obj.getText();
  2253. // Events
  2254. if (typeof(obj.options.onchange) == 'function') {
  2255. obj.options.onchange(el, index, oldValue, newValue, oldLabel, newLabel);
  2256. }
  2257. }
  2258. }
  2259. obj.selectItem = function(item) {
  2260. if (jSuites.dropdown.current) {
  2261. var index = item.getAttribute('data-index');
  2262. if (index != null) {
  2263. obj.selectIndex(index);
  2264. }
  2265. }
  2266. }
  2267. obj.find = function(str) {
  2268. // Force lowercase
  2269. var str = str ? str.toLowerCase() : null;
  2270. // Append options
  2271. for (var i = 0; i < obj.items.length; i++) {
  2272. if (str == null || obj.items[i].textLowerCase.indexOf(str) != -1) {
  2273. obj.items[i].element.style.display = '';
  2274. } else {
  2275. if (obj.selected.indexOf(i) == -1) {
  2276. obj.items[i].element.style.display = 'none';
  2277. } else {
  2278. obj.items[i].element.style.display = '';
  2279. }
  2280. }
  2281. }
  2282. var numVisibleItems = function(items) {
  2283. var visible = 0;
  2284. for (var j = 0; j < items.length; j++) {
  2285. if (items[j].style.display != 'none') {
  2286. visible++;
  2287. }
  2288. }
  2289. return visible;
  2290. }
  2291. // Hide groups
  2292. /*for (var i = 0; i < obj.groups.length; i++) {
  2293. if (numVisibleItems(obj.groups[i].querySelectorAll('.jdropdown-item'))) {
  2294. obj.groups[i].children[0].style.display = '';
  2295. } else {
  2296. obj.groups[i].children[0].style.display = 'none';
  2297. }
  2298. }*/
  2299. }
  2300. obj.updateLabel = function() {
  2301. // Update label
  2302. header.value = obj.getText();
  2303. }
  2304. obj.open = function() {
  2305. if (jSuites.dropdown.current != el) {
  2306. if (jSuites.dropdown.current) {
  2307. jSuites.dropdown.current.dropdown.close();
  2308. }
  2309. jSuites.dropdown.current = el;
  2310. }
  2311. // Focus
  2312. if (! el.classList.contains('jdropdown-focus')) {
  2313. // Add focus
  2314. el.classList.add('jdropdown-focus');
  2315. // Animation
  2316. if (jSuites.getWindowWidth() < 800) {
  2317. if (obj.options.type == null || obj.options.type == 'picker') {
  2318. jSuites.slideBottom(container, 1);
  2319. }
  2320. }
  2321. // Filter
  2322. if (obj.options.autocomplete == true) {
  2323. // Redo search
  2324. obj.find();
  2325. // Clear search field
  2326. header.value = '';
  2327. header.focus();
  2328. }
  2329. // Set cursor for the first or first selected element
  2330. var cursor = (obj.selected && obj.selected[0]) ? obj.selected[0] : 0;
  2331. obj.updateCursor(cursor);
  2332. // Container Size
  2333. if (! obj.options.type || obj.options.type == 'default') {
  2334. const rect = el.getBoundingClientRect();
  2335. const rectContainer = container.getBoundingClientRect();
  2336. if (obj.options.position) {
  2337. container.style.position = 'fixed';
  2338. if (window.innerHeight < rect.bottom + rectContainer.height) {
  2339. container.style.top = '';
  2340. container.style.bottom = (window.innerHeight - rect.top ) + 1 + 'px';
  2341. } else {
  2342. container.style.top = rect.bottom + 'px';
  2343. container.style.bottom = '';
  2344. }
  2345. container.style.left = rect.left + 'px';
  2346. } else {
  2347. if (window.innerHeight < rect.bottom + rectContainer.height) {
  2348. container.style.top = '';
  2349. container.style.bottom = rect.height + 1 + 'px';
  2350. } else {
  2351. container.style.top = '';
  2352. container.style.bottom = '';
  2353. }
  2354. }
  2355. container.style.minWidth = rect.width + 'px';
  2356. }
  2357. }
  2358. // Events
  2359. if (typeof(obj.options.onopen) == 'function') {
  2360. obj.options.onopen(el);
  2361. }
  2362. }
  2363. obj.close = function(ignoreEvents) {
  2364. if (jSuites.dropdown.current) {
  2365. // Remove controller
  2366. jSuites.dropdown.current = null
  2367. // Remove cursor
  2368. obj.resetCursor();
  2369. // Update labels
  2370. obj.updateLabel();
  2371. // Events
  2372. if (! ignoreEvents && typeof(obj.options.onclose) == 'function') {
  2373. obj.options.onclose(el);
  2374. }
  2375. // Blur
  2376. if (header.blur) {
  2377. header.blur();
  2378. }
  2379. // Remove focus
  2380. el.classList.remove('jdropdown-focus');
  2381. }
  2382. return obj.getValue();
  2383. }
  2384. /**
  2385. * Update position cursor
  2386. */
  2387. obj.updateCursor = function(index) {
  2388. // Set new cursor
  2389. if (obj.items && obj.items[index] && obj.items[index].element) {
  2390. // Reset cursor
  2391. obj.resetCursor();
  2392. // Set new cursor
  2393. obj.items[index].element.classList.add('jdropdown-cursor');
  2394. // Update position
  2395. obj.currentIndex = parseInt(index);
  2396. // Update scroll to the cursor element
  2397. var container = content.scrollTop;
  2398. var element = obj.items[obj.currentIndex].element;
  2399. content.scrollTop = element.offsetTop - element.scrollTop + element.clientTop - 95;
  2400. }
  2401. }
  2402. /**
  2403. * Reset cursor
  2404. */
  2405. obj.resetCursor = function() {
  2406. // Remove current cursor
  2407. if (obj.currentIndex != null) {
  2408. // Remove visual cursor
  2409. if (obj.items && obj.items[obj.currentIndex]) {
  2410. obj.items[obj.currentIndex].element.classList.remove('jdropdown-cursor');
  2411. }
  2412. // Reset cursor
  2413. obj.currentIndex = null;
  2414. }
  2415. }
  2416. /**
  2417. * Reset cursor
  2418. */
  2419. obj.resetSelected = function() {
  2420. // Unselected all
  2421. if (obj.selected) {
  2422. // Remove visual selection
  2423. for (var i = 0; i < obj.selected.length; i++) {
  2424. if (obj.items[obj.selected[i]]) {
  2425. obj.items[obj.selected[i]].element.classList.remove('jdropdown-selected');
  2426. }
  2427. }
  2428. // Reset current selected items
  2429. obj.selected = [];
  2430. }
  2431. }
  2432. /**
  2433. * Reset cursor and selected items
  2434. */
  2435. obj.reset = function() {
  2436. // Reset cursor
  2437. obj.resetCursor();
  2438. // Reset selected
  2439. obj.resetSelected();
  2440. // Update labels
  2441. obj.updateLabel();
  2442. }
  2443. /**
  2444. * First visible item
  2445. */
  2446. obj.firstVisible = function() {
  2447. var newIndex = null;
  2448. for (var i = 0; i < obj.items.length; i++) {
  2449. if (obj.items[i].element.style.display != 'none') {
  2450. newIndex = i;
  2451. break;
  2452. }
  2453. }
  2454. if (newIndex == null) {
  2455. return false;
  2456. }
  2457. obj.updateCursor(newIndex);
  2458. }
  2459. /**
  2460. * Navigation
  2461. */
  2462. obj.first = function() {
  2463. var newIndex = null;
  2464. for (var i = obj.currentIndex - 1; i >= 0; i--) {
  2465. if (obj.items[i].element.style.display != 'none') {
  2466. newIndex = i;
  2467. }
  2468. }
  2469. if (newIndex == null) {
  2470. return false;
  2471. }
  2472. obj.updateCursor(newIndex);
  2473. }
  2474. obj.last = function() {
  2475. var newIndex = null;
  2476. for (var i = obj.currentIndex + 1; i < obj.items.length; i++) {
  2477. if (obj.items[i].element.style.display != 'none') {
  2478. newIndex = i;
  2479. }
  2480. }
  2481. if (newIndex == null) {
  2482. return false;
  2483. }
  2484. obj.updateCursor(newIndex);
  2485. }
  2486. obj.next = function() {
  2487. var newIndex = null;
  2488. for (var i = obj.currentIndex + 1; i < obj.items.length; i++) {
  2489. if (obj.items[i].element.style.display != 'none') {
  2490. newIndex = i;
  2491. break;
  2492. }
  2493. }
  2494. if (newIndex == null) {
  2495. return false;
  2496. }
  2497. obj.updateCursor(newIndex);
  2498. }
  2499. obj.prev = function() {
  2500. var newIndex = null;
  2501. for (var i = obj.currentIndex - 1; i >= 0; i--) {
  2502. if (obj.items[i].element.style.display != 'none') {
  2503. newIndex = i;
  2504. break;
  2505. }
  2506. }
  2507. if (newIndex == null) {
  2508. return false;
  2509. }
  2510. obj.updateCursor(newIndex);
  2511. }
  2512. if (! jSuites.dropdown.hasEvents) {
  2513. if ('ontouchsend' in document.documentElement === true) {
  2514. document.addEventListener('touchsend', jSuites.dropdown.mouseup);
  2515. } else {
  2516. document.addEventListener('mouseup', jSuites.dropdown.mouseup);
  2517. }
  2518. document.addEventListener('keydown', jSuites.dropdown.onkeydown);
  2519. jSuites.dropdown.hasEvents = true;
  2520. }
  2521. // Start dropdown
  2522. obj.init();
  2523. // Keep object available from the node
  2524. el.dropdown = obj;
  2525. return obj;
  2526. });
  2527. jSuites.dropdown.hasEvents = false;
  2528. jSuites.dropdown.mouseup = function(e) {
  2529. var element = jSuites.getElement(e.target, 'jdropdown');
  2530. if (element) {
  2531. var dropdown = element.dropdown;
  2532. if (e.target.classList.contains('jdropdown-header')) {
  2533. if (element.classList.contains('jdropdown-focus') && element.classList.contains('jdropdown-default')) {
  2534. dropdown.close();
  2535. } else {
  2536. dropdown.open();
  2537. }
  2538. } else if (e.target.classList.contains('jdropdown-group-name')) {
  2539. var items = e.target.nextSibling.children;
  2540. if (e.target.nextSibling.style.display != 'none') {
  2541. for (var i = 0; i < items.length; i++) {
  2542. if (items[i].style.display != 'none') {
  2543. dropdown.selectItem(items[i]);
  2544. }
  2545. }
  2546. }
  2547. } else if (e.target.classList.contains('jdropdown-group-arrow')) {
  2548. if (e.target.classList.contains('jdropdown-group-arrow-down')) {
  2549. e.target.classList.remove('jdropdown-group-arrow-down');
  2550. e.target.classList.add('jdropdown-group-arrow-up');
  2551. e.target.parentNode.nextSibling.style.display = 'none';
  2552. } else {
  2553. e.target.classList.remove('jdropdown-group-arrow-up');
  2554. e.target.classList.add('jdropdown-group-arrow-down');
  2555. e.target.parentNode.nextSibling.style.display = '';
  2556. }
  2557. } else if (e.target.classList.contains('jdropdown-item')) {
  2558. dropdown.selectItem(e.target);
  2559. } else if (e.target.classList.contains('jdropdown-image')) {
  2560. dropdown.selectIndex(e.target.parentNode.getAttribute('data-index'));
  2561. } else if (e.target.classList.contains('jdropdown-description')) {
  2562. dropdown.selectIndex(e.target.parentNode.getAttribute('data-index'));
  2563. } else if (e.target.classList.contains('jdropdown-title')) {
  2564. dropdown.selectIndex(e.target.parentNode.parentNode.getAttribute('data-index'));
  2565. } else if (e.target.classList.contains('jdropdown-close') || e.target.classList.contains('jdropdown-backdrop')) {
  2566. // Close
  2567. dropdown.close();
  2568. }
  2569. e.stopPropagation();
  2570. e.preventDefault();
  2571. } else {
  2572. if (jSuites.dropdown.current) {
  2573. jSuites.dropdown.current.dropdown.close();
  2574. }
  2575. }
  2576. }
  2577. // Keydown controls
  2578. jSuites.dropdown.onkeydown = function(e) {
  2579. if (jSuites.dropdown.current) {
  2580. // Element
  2581. var element = jSuites.dropdown.current.dropdown;
  2582. // Index
  2583. var index = element.currentIndex;
  2584. if (e.shiftKey) {
  2585. } else {
  2586. if (e.which == 13 || e.which == 27 || e.which == 35 || e.which == 36 || e.which == 38 || e.which == 40) {
  2587. // Move cursor
  2588. if (e.which == 13) {
  2589. element.selectIndex(index)
  2590. } else if (e.which == 38) {
  2591. if (index == null) {
  2592. element.firstVisible();
  2593. } else if (index > 0) {
  2594. element.prev();
  2595. }
  2596. } else if (e.which == 40) {
  2597. if (index == null) {
  2598. element.firstVisible();
  2599. } else if (index + 1 < element.options.data.length) {
  2600. element.next();
  2601. }
  2602. } else if (e.which == 36) {
  2603. element.first();
  2604. } else if (e.which == 35) {
  2605. element.last();
  2606. } else if (e.which == 27) {
  2607. element.close();
  2608. }
  2609. e.stopPropagation();
  2610. e.preventDefault();
  2611. }
  2612. }
  2613. }
  2614. }
  2615. jSuites.dropdown.extractFromDom = function(el, options) {
  2616. // Keep reference
  2617. var select = el;
  2618. if (! options) {
  2619. options = {};
  2620. }
  2621. // Prepare configuration
  2622. if (el.getAttribute('multiple') && (! options || options.multiple == undefined)) {
  2623. options.multiple = true;
  2624. }
  2625. if (el.getAttribute('placeholder') && (! options || options.placeholder == undefined)) {
  2626. options.placeholder = el.getAttribute('placeholder');
  2627. }
  2628. if (el.getAttribute('data-autocomplete') && (! options || options.autocomplete == undefined)) {
  2629. options.autocomplete = true;
  2630. }
  2631. if (! options || options.width == undefined) {
  2632. options.width = el.offsetWidth;
  2633. }
  2634. if (el.value && (! options || options.value == undefined)) {
  2635. options.value = el.value;
  2636. }
  2637. if (! options || options.data == undefined) {
  2638. options.data = [];
  2639. for (var j = 0; j < el.children.length; j++) {
  2640. if (el.children[j].tagName == 'OPTGROUP') {
  2641. for (var i = 0; i < el.children[j].children.length; i++) {
  2642. options.data.push({
  2643. id: el.children[j].children[i].value,
  2644. name: el.children[j].children[i].innerHTML,
  2645. group: el.children[j].getAttribute('label'),
  2646. });
  2647. }
  2648. } else {
  2649. options.data.push({
  2650. id: el.children[j].value,
  2651. name: el.children[j].innerHTML,
  2652. });
  2653. }
  2654. }
  2655. }
  2656. if (! options || options.onchange == undefined) {
  2657. options.onchange = function(a,b,c,d) {
  2658. if (options.multiple == true) {
  2659. if (obj.items[b].classList.contains('jdropdown-selected')) {
  2660. select.options[b].setAttribute('selected', 'selected');
  2661. } else {
  2662. select.options[b].removeAttribute('selected');
  2663. }
  2664. } else {
  2665. select.value = d;
  2666. }
  2667. }
  2668. }
  2669. // Create DIV
  2670. var div = document.createElement('div');
  2671. el.parentNode.insertBefore(div, el);
  2672. el.style.display = 'none';
  2673. el = div;
  2674. return { el:el, options:options };
  2675. }
  2676. jSuites.image = (function(el, options) {
  2677. var obj = {};
  2678. obj.options = {};
  2679. // Default configuration
  2680. var defaults = {
  2681. minWidth: false,
  2682. onchange: null,
  2683. singleFile: true,
  2684. remoteParser: null,
  2685. text:{
  2686. extensionNotAllowed:'The extension is not allowed',
  2687. imageTooSmall:'The resolution is too low, try a image with a better resolution. width > 800px',
  2688. }
  2689. };
  2690. // Loop through our object
  2691. for (var property in defaults) {
  2692. if (options && options.hasOwnProperty(property)) {
  2693. obj.options[property] = options[property];
  2694. } else {
  2695. obj.options[property] = defaults[property];
  2696. }
  2697. }
  2698. // Upload icon
  2699. el.classList.add('jupload');
  2700. // Add image
  2701. obj.addImage = function(file) {
  2702. if (! file.date) {
  2703. file.date = '';
  2704. }
  2705. var img = document.createElement('img');
  2706. img.setAttribute('data-date', file.lastmodified ? file.lastmodified : file.date);
  2707. img.setAttribute('data-name', file.name);
  2708. img.setAttribute('data-size', file.size);
  2709. img.setAttribute('data-small', file.small ? file.small : '');
  2710. img.setAttribute('data-cover', file.cover ? 1 : 0);
  2711. img.setAttribute('data-extension', file.extension);
  2712. img.setAttribute('src', file.file);
  2713. img.className = 'jfile';
  2714. img.style.width = '100%';
  2715. return img;
  2716. }
  2717. // Add image
  2718. obj.addImages = function(files) {
  2719. if (obj.options.singleFile == true) {
  2720. el.innerHTML = '';
  2721. }
  2722. for (var i = 0; i < files.length; i++) {
  2723. el.appendChild(obj.addImage(files[i]));
  2724. }
  2725. }
  2726. obj.addFromFile = function(file) {
  2727. var type = file.type.split('/');
  2728. if (type[0] == 'image') {
  2729. if (obj.options.singleFile == true) {
  2730. el.innerHTML = '';
  2731. }
  2732. var imageFile = new FileReader();
  2733. imageFile.addEventListener("load", function (v) {
  2734. var img = new Image();
  2735. img.onload = function onload() {
  2736. var canvas = document.createElement('canvas');
  2737. canvas.width = img.width;
  2738. canvas.height = img.height;
  2739. var ctx = canvas.getContext('2d');
  2740. ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  2741. var data = {
  2742. file: canvas.toDataURL(),
  2743. extension: file.name.substr(file.name.lastIndexOf('.') + 1),
  2744. name: file.name,
  2745. size: file.size,
  2746. lastmodified: file.lastModified,
  2747. }
  2748. var newImage = obj.addImage(data);
  2749. el.appendChild(newImage);
  2750. // Onchange
  2751. if (typeof(obj.options.onchange) == 'function') {
  2752. obj.options.onchange(newImage);
  2753. }
  2754. };
  2755. img.src = v.srcElement.result;
  2756. });
  2757. imageFile.readAsDataURL(file);
  2758. } else {
  2759. alert(text.extentionNotAllowed);
  2760. }
  2761. }
  2762. obj.addFromUrl = function(src) {
  2763. if (src.substr(0,4) != 'data' && ! obj.options.remoteParser) {
  2764. console.error('remoteParser not defined in your initialization');
  2765. } else {
  2766. // This is to process cross domain images
  2767. if (src.substr(0,4) == 'data') {
  2768. var extension = src.split(';')
  2769. extension = extension[0].split('/');
  2770. extension = extension[1];
  2771. } else {
  2772. var extension = src.substr(src.lastIndexOf('.') + 1);
  2773. // Work for cross browsers
  2774. src = obj.options.remoteParser + src;
  2775. }
  2776. var img = new Image();
  2777. img.onload = function onload() {
  2778. var canvas = document.createElement('canvas');
  2779. canvas.width = img.width;
  2780. canvas.height = img.height;
  2781. var ctx = canvas.getContext('2d');
  2782. ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  2783. canvas.toBlob(function(blob) {
  2784. var data = {
  2785. file: window.URL.createObjectURL(blob),
  2786. extension: extension
  2787. }
  2788. var newImage = obj.addImage(data);
  2789. el.appendChild(newImage);
  2790. // Keep base64 ready to go
  2791. var content = canvas.toDataURL();
  2792. jSuites.files[data.file] = content.substr(content.indexOf(',') + 1);
  2793. // Onchange
  2794. if (typeof(obj.options.onchange) == 'function') {
  2795. obj.options.onchange(newImage);
  2796. }
  2797. });
  2798. };
  2799. img.src = src;
  2800. }
  2801. }
  2802. var attachmentInput = document.createElement('input');
  2803. attachmentInput.type = 'file';
  2804. attachmentInput.setAttribute('accept', 'image/*');
  2805. attachmentInput.onchange = function() {
  2806. for (var i = 0; i < this.files.length; i++) {
  2807. obj.addFromFile(this.files[i]);
  2808. }
  2809. }
  2810. el.addEventListener("dblclick", function(e) {
  2811. jSuites.click(attachmentInput);
  2812. });
  2813. el.addEventListener('dragenter', function(e) {
  2814. el.style.border = '1px dashed #000';
  2815. });
  2816. el.addEventListener('dragleave', function(e) {
  2817. el.style.border = '1px solid #eee';
  2818. });
  2819. el.addEventListener('dragstop', function(e) {
  2820. el.style.border = '1px solid #eee';
  2821. });
  2822. el.addEventListener('dragover', function(e) {
  2823. e.preventDefault();
  2824. });
  2825. el.addEventListener('drop', function(e) {
  2826. e.preventDefault();
  2827. e.stopPropagation();
  2828. var html = (e.originalEvent || e).dataTransfer.getData('text/html');
  2829. var file = (e.originalEvent || e).dataTransfer.files;
  2830. if (file.length) {
  2831. for (var i = 0; i < e.dataTransfer.files.length; i++) {
  2832. obj.addFromFile(e.dataTransfer.files[i]);
  2833. }
  2834. } else if (html) {
  2835. if (obj.options.singleFile == true) {
  2836. el.innerHTML = '';
  2837. }
  2838. // Create temp element
  2839. var div = document.createElement('div');
  2840. div.innerHTML = html;
  2841. // Extract images
  2842. var img = div.querySelectorAll('img');
  2843. if (img.length) {
  2844. for (var i = 0; i < img.length; i++) {
  2845. obj.addFromUrl(img[i].src);
  2846. }
  2847. }
  2848. }
  2849. el.style.border = '1px solid #eee';
  2850. return false;
  2851. });
  2852. el.image = obj;
  2853. return obj;
  2854. });
  2855. /**
  2856. * (c) jLoading
  2857. * https://github.com/paulhodel/jtools
  2858. *
  2859. * @author: Paul Hodel <paul.hodel@gmail.com>
  2860. * @description: Page loading spin
  2861. */
  2862. jSuites.loading = (function() {
  2863. var obj = {};
  2864. var loading = document.createElement('div');
  2865. loading.className = 'jloading';
  2866. obj.show = function() {
  2867. document.body.appendChild(loading);
  2868. };
  2869. obj.hide = function() {
  2870. document.body.removeChild(loading);
  2871. };
  2872. return obj;
  2873. })();
  2874. /**
  2875. * (c) jTools Input Mask
  2876. * https://github.com/paulhodel/jtools
  2877. *
  2878. * @author: Paul Hodel <paul.hodel@gmail.com>
  2879. * @description: Input mask
  2880. */
  2881. jSuites.mask = (function() {
  2882. var obj = {};
  2883. var index = 0;
  2884. var values = []
  2885. var pieces = [];
  2886. obj.run = function(value, mask, decimal) {
  2887. if (value && mask) {
  2888. if (! decimal) {
  2889. decimal = '.';
  2890. }
  2891. if (value == Number(value)) {
  2892. var number = (''+value).split('.');
  2893. var value = number[0];
  2894. var valueDecimal = number[1];
  2895. } else {
  2896. value = '' + value;
  2897. }
  2898. index = 0;
  2899. values = [];
  2900. // Create mask token
  2901. obj.prepare(mask);
  2902. // Current value
  2903. var currentValue = value;
  2904. if (currentValue) {
  2905. // Checking current value
  2906. for (var i = 0; i < currentValue.length; i++) {
  2907. if (currentValue[i] != null) {
  2908. obj.process(currentValue[i]);
  2909. }
  2910. }
  2911. }
  2912. if (valueDecimal) {
  2913. obj.process(decimal);
  2914. var currentValue = valueDecimal;
  2915. if (currentValue) {
  2916. // Checking current value
  2917. for (var i = 0; i < currentValue.length; i++) {
  2918. if (currentValue[i] != null) {
  2919. obj.process(currentValue[i]);
  2920. }
  2921. }
  2922. }
  2923. }
  2924. // Formatted value
  2925. return values.join('');
  2926. } else {
  2927. return '';
  2928. }
  2929. }
  2930. obj.apply = function(e) {
  2931. var mask = e.target.getAttribute('data-mask');
  2932. if (mask && e.keyCode > 46) {
  2933. index = 0;
  2934. values = [];
  2935. // Create mask token
  2936. obj.prepare(mask);
  2937. // Current value
  2938. if (e.target.selectionStart < e.target.selectionEnd) {
  2939. var currentValue = e.target.value.substring(0, e.target.selectionStart);
  2940. } else {
  2941. var currentValue = e.target.value;
  2942. }
  2943. if (currentValue) {
  2944. // Checking current value
  2945. for (var i = 0; i < currentValue.length; i++) {
  2946. if (currentValue[i] != null) {
  2947. obj.process(currentValue[i]);
  2948. }
  2949. }
  2950. }
  2951. // New input
  2952. obj.process(obj.fromKeyCode(e));
  2953. // Update value to the element
  2954. e.target.value = values.join('');
  2955. if (pieces.length == values.length && pieces[pieces.length-1].length == values[values.length-1].length) {
  2956. e.target.setAttribute('data-completed', 'true');
  2957. } else {
  2958. e.target.setAttribute('data-completed', 'false');
  2959. }
  2960. // Prevent default
  2961. e.preventDefault();
  2962. }
  2963. }
  2964. /**
  2965. * Process inputs and save to values
  2966. */
  2967. obj.process = function(input) {
  2968. do {
  2969. if (pieces[index] == 'mm') {
  2970. if (values[index] == null || values[index] == '') {
  2971. if (parseInt(input) > 1 && parseInt(input) < 10) {
  2972. values[index] = '0' + input;
  2973. index++;
  2974. return true;
  2975. } else if (parseInt(input) < 10) {
  2976. values[index] = input;
  2977. return true;
  2978. } else {
  2979. return false;
  2980. }
  2981. } else {
  2982. if (values[index] == 1 && values[index] < 2 && parseInt(input) < 3) {
  2983. values[index] += input;
  2984. index++;
  2985. return true;
  2986. } else if (values[index] == 0 && values[index] < 10) {
  2987. values[index] += input;
  2988. index++;
  2989. return true;
  2990. } else {
  2991. return false
  2992. }
  2993. }
  2994. } else if (pieces[index] == 'dd') {
  2995. if (values[index] == null || values[index] == '') {
  2996. if (parseInt(input) > 3 && parseInt(input) < 10) {
  2997. values[index] = '0' + input;
  2998. index++;
  2999. return true;
  3000. } else if (parseInt(input) < 10) {
  3001. values[index] = input;
  3002. return true;
  3003. } else {
  3004. return false;
  3005. }
  3006. } else {
  3007. if (values[index] == 3 && parseInt(input) < 2) {
  3008. values[index] += input;
  3009. index++;
  3010. return true;
  3011. } else if (values[index] < 3 && parseInt(input) < 10) {
  3012. values[index] += input;
  3013. index++;
  3014. return true;
  3015. } else {
  3016. return false
  3017. }
  3018. }
  3019. } else if (pieces[index] == 'hh24') {
  3020. if (values[index] == null || values[index] == '') {
  3021. if (parseInt(input) > 2 && parseInt(input) < 10) {
  3022. values[index] = '0' + input;
  3023. index++;
  3024. return true;
  3025. } else if (parseInt(input) < 10) {
  3026. values[index] = input;
  3027. return true;
  3028. } else {
  3029. return false;
  3030. }
  3031. } else {
  3032. if (values[index] == 2 && parseInt(input) < 4) {
  3033. values[index] += input;
  3034. index++;
  3035. return true;
  3036. } else if (values[index] < 2 && parseInt(input) < 10) {
  3037. values[index] += input;
  3038. index++;
  3039. return true;
  3040. } else {
  3041. return false
  3042. }
  3043. }
  3044. } else if (pieces[index] == 'hh') {
  3045. if (values[index] == null || values[index] == '') {
  3046. if (parseInt(input) > 1 && parseInt(input) < 10) {
  3047. values[index] = '0' + input;
  3048. index++;
  3049. return true;
  3050. } else if (parseInt(input) < 10) {
  3051. values[index] = input;
  3052. return true;
  3053. } else {
  3054. return false;
  3055. }
  3056. } else {
  3057. if (values[index] == 1 && parseInt(input) < 3) {
  3058. values[index] += input;
  3059. index++;
  3060. return true;
  3061. } else if (values[index] < 1 && parseInt(input) < 10) {
  3062. values[index] += input;
  3063. index++;
  3064. return true;
  3065. } else {
  3066. return false
  3067. }
  3068. }
  3069. } else if (pieces[index] == 'mi' || pieces[index] == 'ss') {
  3070. if (values[index] == null || values[index] == '') {
  3071. if (parseInt(input) > 5 && parseInt(input) < 10) {
  3072. values[index] = '0' + input;
  3073. index++;
  3074. return true;
  3075. } else if (parseInt(input) < 10) {
  3076. values[index] = input;
  3077. return true;
  3078. } else {
  3079. return false;
  3080. }
  3081. } else {
  3082. if (parseInt(input) < 10) {
  3083. values[index] += input;
  3084. index++;
  3085. return true;
  3086. } else {
  3087. return false
  3088. }
  3089. }
  3090. } else if (pieces[index] == 'yy' || pieces[index] == 'yyyy') {
  3091. if (parseInt(input) < 10) {
  3092. if (values[index] == null || values[index] == '') {
  3093. values[index] = input;
  3094. } else {
  3095. values[index] += input;
  3096. }
  3097. if (values[index].length == pieces[index].length) {
  3098. index++;
  3099. }
  3100. return true;
  3101. } else {
  3102. return false;
  3103. }
  3104. } else if (pieces[index] == '#' || pieces[index] == '#.##' || pieces[index] == '#,##' || pieces[index] == '# ##') {
  3105. if (input.match(/[0-9]/g)) {
  3106. if (pieces[index] == '#.##') {
  3107. var separator = '.';
  3108. } else if (pieces[index] == '#,##') {
  3109. var separator = ',';
  3110. } else if (pieces[index] == '# ##') {
  3111. var separator = ' ';
  3112. } else {
  3113. var separator = '';
  3114. }
  3115. if (values[index] == null || values[index] == '') {
  3116. values[index] = input;
  3117. } else {
  3118. values[index] += input;
  3119. if (separator) {
  3120. values[index] = values[index].match(/[0-9]/g).join('');
  3121. var t = [];
  3122. var s = 0;
  3123. for (var j = values[index].length - 1; j >= 0 ; j--) {
  3124. t.push(values[index][j]);
  3125. s++;
  3126. if (! (s % 3)) {
  3127. t.push(separator);
  3128. }
  3129. }
  3130. t = t.reverse();
  3131. values[index] = t.join('');
  3132. if (values[index].substr(0,1) == separator) {
  3133. values[index] = values[index].substr(1);
  3134. }
  3135. }
  3136. }
  3137. return true;
  3138. } else {
  3139. if (pieces[index] == '#.##' && input == '.') {
  3140. // Do nothing
  3141. } else if (pieces[index] == '#,##' && input == ',') {
  3142. // Do nothing
  3143. } else if (pieces[index] == '# ##' && input == ' ') {
  3144. // Do nothing
  3145. } else {
  3146. if (values[index]) {
  3147. index++;
  3148. if (pieces[index]) {
  3149. if (pieces[index] == input) {
  3150. values[index] = input;
  3151. return true;
  3152. } else {
  3153. if (pieces[index] == '0' && pieces[index+1] == input) {
  3154. index++;
  3155. values[index] = input;
  3156. return true;
  3157. }
  3158. }
  3159. }
  3160. }
  3161. }
  3162. return false;
  3163. }
  3164. } else if (pieces[index] == '0') {
  3165. if (input.match(/[0-9]/g)) {
  3166. values[index] = input;
  3167. index++;
  3168. return true;
  3169. } else {
  3170. return false;
  3171. }
  3172. } else if (pieces[index] == 'a') {
  3173. if (input.match(/[a-zA-Z]/g)) {
  3174. values[index] = input;
  3175. index++;
  3176. return true;
  3177. } else {
  3178. return false;
  3179. }
  3180. } else {
  3181. if (pieces[index] != null) {
  3182. if (pieces[index] == '\\a') {
  3183. var v = 'a';
  3184. } else if (pieces[index] == '\\0') {
  3185. var v = '0';
  3186. } else if (pieces[index] == '[-]') {
  3187. if (input == '-' || input == '+') {
  3188. var v = input;
  3189. } else {
  3190. var v = ' ';
  3191. }
  3192. } else {
  3193. var v = pieces[index];
  3194. }
  3195. values[index] = v;
  3196. if (input == v) {
  3197. index++;
  3198. return true;
  3199. }
  3200. }
  3201. }
  3202. index++;
  3203. } while (pieces[index]);
  3204. }
  3205. /**
  3206. * Create tokens for the mask
  3207. */
  3208. obj.prepare = function(mask) {
  3209. pieces = [];
  3210. for (var i = 0; i < mask.length; i++) {
  3211. if (mask[i].match(/[0-9]|[a-z]|\\/g)) {
  3212. if (mask[i] == 'y' && mask[i+1] == 'y' && mask[i+2] == 'y' && mask[i+3] == 'y') {
  3213. pieces.push('yyyy');
  3214. i += 3;
  3215. } else if (mask[i] == 'y' && mask[i+1] == 'y') {
  3216. pieces.push('yy');
  3217. i++;
  3218. } else if (mask[i] == 'm' && mask[i+1] == 'm' && mask[i+2] == 'm' && mask[i+3] == 'm') {
  3219. pieces.push('mmmm');
  3220. i += 3;
  3221. } else if (mask[i] == 'm' && mask[i+1] == 'm' && mask[i+2] == 'm') {
  3222. pieces.push('mmm');
  3223. i += 2;
  3224. } else if (mask[i] == 'm' && mask[i+1] == 'm') {
  3225. pieces.push('mm');
  3226. i++;
  3227. } else if (mask[i] == 'd' && mask[i+1] == 'd') {
  3228. pieces.push('dd');
  3229. i++;
  3230. } else if (mask[i] == 'h' && mask[i+1] == 'h' && mask[i+2] == '2' && mask[i+3] == '4') {
  3231. pieces.push('hh24');
  3232. i += 3;
  3233. } else if (mask[i] == 'h' && mask[i+1] == 'h') {
  3234. pieces.push('hh');
  3235. i++;
  3236. } else if (mask[i] == 'm' && mask[i+1] == 'i') {
  3237. pieces.push('mi');
  3238. i++;
  3239. } else if (mask[i] == 's' && mask[i+1] == 's') {
  3240. pieces.push('ss');
  3241. i++;
  3242. } else if (mask[i] == 'a' && mask[i+1] == 'm') {
  3243. pieces.push('am');
  3244. i++;
  3245. } else if (mask[i] == 'p' && mask[i+1] == 'm') {
  3246. pieces.push('pm');
  3247. i++;
  3248. } else if (mask[i] == '\\' && mask[i+1] == '0') {
  3249. pieces.push('\\0');
  3250. i++;
  3251. } else if (mask[i] == '\\' && mask[i+1] == 'a') {
  3252. pieces.push('\\a');
  3253. i++;
  3254. } else {
  3255. pieces.push(mask[i]);
  3256. }
  3257. } else {
  3258. if (mask[i] == '#' && mask[i+1] == '.' && mask[i+2] == '#' && mask[i+3] == '#') {
  3259. pieces.push('#.##');
  3260. i += 3;
  3261. } else if (mask[i] == '#' && mask[i+1] == ',' && mask[i+2] == '#' && mask[i+3] == '#') {
  3262. pieces.push('#,##');
  3263. i += 3;
  3264. } else if (mask[i] == '#' && mask[i+1] == ' ' && mask[i+2] == '#' && mask[i+3] == '#') {
  3265. pieces.push('# ##');
  3266. i += 3;
  3267. } else if (mask[i] == '[' && mask[i+1] == '-' && mask[i+2] == ']') {
  3268. pieces.push('[-]');
  3269. i += 2;
  3270. } else {
  3271. pieces.push(mask[i]);
  3272. }
  3273. }
  3274. }
  3275. }
  3276. /**
  3277. * Thanks for the collaboration
  3278. */
  3279. obj.fromKeyCode = function(e) {
  3280. var _to_ascii = {
  3281. '188': '44',
  3282. '109': '45',
  3283. '190': '46',
  3284. '191': '47',
  3285. '192': '96',
  3286. '220': '92',
  3287. '222': '39',
  3288. '221': '93',
  3289. '219': '91',
  3290. '173': '45',
  3291. '187': '61', //IE Key codes
  3292. '186': '59', //IE Key codes
  3293. '189': '45' //IE Key codes
  3294. }
  3295. var shiftUps = {
  3296. "96": "~",
  3297. "49": "!",
  3298. "50": "@",
  3299. "51": "#",
  3300. "52": "$",
  3301. "53": "%",
  3302. "54": "^",
  3303. "55": "&",
  3304. "56": "*",
  3305. "57": "(",
  3306. "48": ")",
  3307. "45": "_",
  3308. "61": "+",
  3309. "91": "{",
  3310. "93": "}",
  3311. "92": "|",
  3312. "59": ":",
  3313. "39": "\"",
  3314. "44": "<",
  3315. "46": ">",
  3316. "47": "?"
  3317. };
  3318. var c = e.which;
  3319. if (_to_ascii.hasOwnProperty(c)) {
  3320. c = _to_ascii[c];
  3321. }
  3322. if (!e.shiftKey && (c >= 65 && c <= 90)) {
  3323. c = String.fromCharCode(c + 32);
  3324. } else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
  3325. c = shiftUps[c];
  3326. } else if (96 <= c && c <= 105) {
  3327. c = String.fromCharCode(c - 48);
  3328. } else {
  3329. c = String.fromCharCode(c);
  3330. }
  3331. return c;
  3332. }
  3333. return obj;
  3334. })();
  3335. /**
  3336. * (c) jSuites modal
  3337. * https://github.com/paulhodel/jsuites
  3338. *
  3339. * @author: Paul Hodel <paul.hodel@gmail.com>
  3340. * @description: Modal
  3341. */
  3342. jSuites.modal = (function(el, options) {
  3343. var obj = {};
  3344. obj.options = {};
  3345. // Default configuration
  3346. var defaults = {
  3347. url: null,
  3348. onopen: null,
  3349. onclose: null,
  3350. closed: false,
  3351. width: null,
  3352. height: null,
  3353. title: null,
  3354. };
  3355. // Loop through our object
  3356. for (var property in defaults) {
  3357. if (options && options.hasOwnProperty(property)) {
  3358. obj.options[property] = options[property];
  3359. } else {
  3360. obj.options[property] = defaults[property];
  3361. }
  3362. }
  3363. // Title
  3364. if (! obj.options.title && el.getAttribute('title')) {
  3365. obj.options.title = el.getAttribute('title');
  3366. }
  3367. var temp = document.createElement('div');
  3368. for (var i = 0; i < el.children.length; i++) {
  3369. temp.appendChild(el.children[i]);
  3370. }
  3371. obj.content = document.createElement('div');
  3372. obj.content.className = 'jmodal_content';
  3373. obj.content.innerHTML = el.innerHTML;
  3374. for (var i = 0; i < temp.children.length; i++) {
  3375. obj.content.appendChild(temp.children[i]);
  3376. }
  3377. obj.container = document.createElement('div');
  3378. obj.container.className = 'jmodal';
  3379. obj.container.appendChild(obj.content);
  3380. if (obj.options.width) {
  3381. obj.container.style.width = obj.options.width;
  3382. }
  3383. if (obj.options.height) {
  3384. obj.container.style.height = obj.options.height;
  3385. }
  3386. if (obj.options.title) {
  3387. obj.container.setAttribute('title', obj.options.title);
  3388. } else {
  3389. obj.container.classList.add('no-title');
  3390. }
  3391. el.innerHTML = '';
  3392. el.style.display = 'none';
  3393. el.appendChild(obj.container);
  3394. // Backdrop
  3395. var backdrop = document.createElement('div');
  3396. backdrop.className = 'jmodal_backdrop';
  3397. el.appendChild(backdrop);
  3398. obj.open = function() {
  3399. el.style.display = 'block';
  3400. // Fullscreen
  3401. const rect = obj.container.getBoundingClientRect();
  3402. if (jSuites.getWindowWidth() < rect.width) {
  3403. obj.container.style.top = '';
  3404. obj.container.style.left = '';
  3405. obj.container.classList.add('jmodal_fullscreen');
  3406. jSuites.slideBottom(obj.container, 1);
  3407. } else {
  3408. backdrop.style.display = 'block';
  3409. }
  3410. // Current
  3411. jSuites.modal.current = obj;
  3412. // Event
  3413. if (typeof(obj.options.onopen) == 'function') {
  3414. obj.options.onopen(el, obj);
  3415. }
  3416. }
  3417. obj.resetPosition = function() {
  3418. obj.container.style.top = '';
  3419. obj.container.style.left = '';
  3420. }
  3421. obj.isOpen = function() {
  3422. return el.style.display != 'none' ? true : false;
  3423. }
  3424. obj.close = function() {
  3425. el.style.display = 'none';
  3426. // Backdrop
  3427. backdrop.style.display = '';
  3428. // Current
  3429. jSuites.modal.current = null;
  3430. // Remove fullscreen class
  3431. obj.container.classList.remove('jmodal_fullscreen');
  3432. // Event
  3433. if (typeof(obj.options.onclose) == 'function') {
  3434. obj.options.onclose(el, obj);
  3435. }
  3436. }
  3437. if (! jSuites.modal.hasEvents) {
  3438. jSuites.modal.current = obj;
  3439. if ('ontouchstart' in document.documentElement === true) {
  3440. document.addEventListener("touchstart", jSuites.modal.mouseDownControls);
  3441. } else {
  3442. document.addEventListener('mousedown', jSuites.modal.mouseDownControls);
  3443. document.addEventListener('mousemove', jSuites.modal.mouseMoveControls);
  3444. document.addEventListener('mouseup', jSuites.modal.mouseUpControls);
  3445. }
  3446. document.addEventListener('keydown', jSuites.modal.keyDownControls);
  3447. jSuites.modal.hasEvents = true;
  3448. }
  3449. if (obj.options.url) {
  3450. jSuites.ajax({
  3451. url: obj.options.url,
  3452. method: 'GET',
  3453. success: function(data) {
  3454. obj.content.innerHTML = data;
  3455. if (! obj.options.closed) {
  3456. obj.open();
  3457. }
  3458. }
  3459. });
  3460. } else {
  3461. if (! obj.options.closed) {
  3462. obj.open();
  3463. }
  3464. }
  3465. // Keep object available from the node
  3466. el.modal = obj;
  3467. return obj;
  3468. });
  3469. jSuites.modal.current = null;
  3470. jSuites.modal.position = null;
  3471. jSuites.modal.keyDownControls = function(e) {
  3472. if (e.which == 27) {
  3473. if (jSuites.modal.current) {
  3474. jSuites.modal.current.close();
  3475. }
  3476. }
  3477. }
  3478. jSuites.modal.mouseUpControls = function(e) {
  3479. if (jSuites.modal.current) {
  3480. jSuites.modal.current.container.style.cursor = 'auto';
  3481. }
  3482. jSuites.modal.position = null;
  3483. }
  3484. jSuites.modal.mouseMoveControls = function(e) {
  3485. if (jSuites.modal.current && jSuites.modal.position) {
  3486. if (e.which == 1 || e.which == 3) {
  3487. var position = jSuites.modal.position;
  3488. jSuites.modal.current.container.style.top = (position[1] + (e.clientY - position[3]) + (position[5] / 2)) + 'px';
  3489. jSuites.modal.current.container.style.left = (position[0] + (e.clientX - position[2]) + (position[4] / 2)) + 'px';
  3490. jSuites.modal.current.container.style.cursor = 'move';
  3491. } else {
  3492. jSuites.modal.current.container.style.cursor = 'auto';
  3493. }
  3494. }
  3495. }
  3496. jSuites.modal.mouseDownControls = function(e) {
  3497. jSuites.modal.position = [];
  3498. if (e.target.classList.contains('jmodal')) {
  3499. setTimeout(function() {
  3500. // Get target info
  3501. var rect = e.target.getBoundingClientRect();
  3502. if (e.changedTouches && e.changedTouches[0]) {
  3503. var x = e.changedTouches[0].clientX;
  3504. var y = e.changedTouches[0].clientY;
  3505. } else {
  3506. var x = e.clientX;
  3507. var y = e.clientY;
  3508. }
  3509. if (rect.width - (x - rect.left) < 50 && (y - rect.top) < 50) {
  3510. setTimeout(function() {
  3511. jSuites.modal.current.close();
  3512. }, 100);
  3513. } else {
  3514. if (e.target.getAttribute('title') && (y - rect.top) < 50) {
  3515. if (document.selection) {
  3516. document.selection.empty();
  3517. } else if ( window.getSelection ) {
  3518. window.getSelection().removeAllRanges();
  3519. }
  3520. jSuites.modal.position = [
  3521. rect.left,
  3522. rect.top,
  3523. e.clientX,
  3524. e.clientY,
  3525. rect.width,
  3526. rect.height,
  3527. ];
  3528. }
  3529. }
  3530. }, 100);
  3531. }
  3532. }
  3533. return jSuites;
  3534. })));