'jQuery UI', 'version' => '1.10.4', 'summary' => 'jQuery UI as required by ProcessWire and plugins', 'href' => 'https://ui.jquery.com', 'permanent' => true, ); } protected $filesLoaded = array(); /** * Wired to API * */ public function wired() { $config = $this->wire()->config; $debug = $config->debug; $this->loadStyles = false; $this->loadScripts = false; $components = array( 'latest' => 'dev/JqueryUI.js', 'modal' => $debug ? 'modal.js' : 'modal.min.js', 'panel' => $debug ? 'panel.js' : 'panel.min.js', 'touch' => 'touch.js' ); $this->addComponents($components); $url = $config->urls('JqueryUI'); if($config->debug === 'dev' && $config->admin) { $this->loadScripts = false; $jQueryUI = $url . $components['latest']; } else { $jQueryUI = $url . 'JqueryUI.js'; } $config->scripts->add($jQueryUI); $this->filesLoaded['jquery-ui'] = $jQueryUI; parent::wired(); } /** * Module init * */ public function init() { parent::init(); if($this->wire()->session->get('touch')) $this->use('touch'); } /** * Load/use a component * * Available components: * - modal: modal window support * - panel: slide-out panel support * - touch: jQuery UI Touch Punch * - vex: Vex dialog library * - selectize: Selectize input elements without theme * - selectize.default: Selectize input with default theme * - selectize.legacy: Selectize input with legacy theme * - selectize.bootstrap2: Selectize input with bootstrap2 theme * - selectize.bootstrap3: Selectize input with bootstrap3 theme * * @param string $name * @return $this|ModuleJS * */ public function ___use($name) { if($name == 'panel') { // also add stylesheet when panel component requested $this->config->styles->add($this->wire()->config->urls('JqueryUI') . "panel.css"); } else if($name == 'vex') { $this->useVex(); return $this; } else if(strpos($name, 'selectize') === 0) { $this->useSelectize($name); return $this; } else if($name === 'latest') { $oldFile = isset($this->filesLoaded['jquery-ui']) ? $this->filesLoaded['jquery-ui'] : null; if($oldFile !== null) { // replace rather than add $config = $this->wire()->config; $url = $config->urls('JqueryUI'); $newFile = $url . $this->components['latest']; $config->scripts->replace($oldFile, $newFile); $this->filesLoaded['jquery-ui'] = $newFile; return $this; } else { // let it be added by parent use() method } } return parent::___use($name); } /** * Get URL to JqueryUI module * * @param string $name * @return string * */ protected function url($name = '') { return $this->wire()->config->urls('JqueryUI') . ($name ? "$name/" : ""); } /** * Load/use VEX component * */ protected function useVex() { if(isset($this->filesLoaded['vex-css'])) return; $config = $this->wire()->config; $url = $this->url('vex'); $fileCSS = $url . 'css/vex.css'; $this->filesLoaded['vex-css'] = $fileCSS; $config->styles->add($fileCSS); $config->styles->add($url . 'styles/vex-theme-default.css'); $config->scripts->add($url . 'scripts/vex.combined.min.js'); $adminTheme = $this->wire()->adminTheme; if($adminTheme) $adminTheme->addExtraMarkup('head', "" ); } /** * Load/use selectize component * * @param string $name One of 'selectize', 'selectize.default', 'selectize.legacy', 'selectize.bootstrap2', 'selectize.bootstrap3' * */ protected function useSelectize($name = '') { $theme = ''; if(strpos($name, '.')) list(,$theme) = explode('.', $name, 2); // i.e. 'selectize.default' $config = $this->wire()->config; $url = $this->url('selectize'); $fileCSS = $url . "css/selectize" . ($theme ? ".$theme" : "") . ".css"; $fileJS = $url . 'js/standalone/selectize.' . ($config->debug ? 'js' : 'min.js'); if(isset($this->filesLoaded['selectize-css'])) { if($this->filesLoaded['selectize-css'] === $fileCSS) { $fileCSS = ''; // file already added } else { $config->styles->remove($this->filesLoaded['selectize-css']); // replace } } if($fileCSS) { $config->styles->add($fileCSS); $this->filesLoaded['selectize-css'] = $fileCSS; } if(!isset($this->fileLoaded['selectize-js'])) { $config->scripts->add($fileJS); $this->filesLoaded['selectize-js'] = $fileJS; } } }