default.php
2 days ago
default_position_modal.php
2 days ago
default_widget_modal.php
2 days ago
index.html
2 days ago
default.php
394 lines
| 1 | <?php |
| 2 | /** |
| 3 | * @package VikAppointments |
| 4 | * @subpackage core |
| 5 | * @author E4J s.r.l. |
| 6 | * @copyright Copyright (C) 2021 E4J s.r.l. All Rights Reserved. |
| 7 | * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL |
| 8 | * @link https://vikwp.com |
| 9 | */ |
| 10 | |
| 11 | // No direct access |
| 12 | defined('ABSPATH') or die('No script kiddies please!'); |
| 13 | |
| 14 | JHtml::fetch('vaphtml.assets.select2'); |
| 15 | JHtml::fetch('vaphtml.assets.fontawesome'); |
| 16 | |
| 17 | $vik = VAPApplication::getInstance(); |
| 18 | |
| 19 | $last_widget_id = 0; |
| 20 | |
| 21 | ?> |
| 22 | |
| 23 | <form name="adminForm" action="index.php" method="post" id="adminForm"> |
| 24 | |
| 25 | <div class="widgets-builder"> |
| 26 | |
| 27 | <?php |
| 28 | foreach ($this->dashboard as $position => $widgets) |
| 29 | { |
| 30 | ?> |
| 31 | <div class="widgets-position-row" data-position="<?php echo $this->escape($position); ?>"> |
| 32 | |
| 33 | <h3><?php echo $position; ?></h3> |
| 34 | |
| 35 | <div class="widgets-position-container"> |
| 36 | |
| 37 | <?php |
| 38 | foreach ($widgets as $widget) |
| 39 | { |
| 40 | $last_widget_id = max(array($last_widget_id, $widget->getID())); |
| 41 | |
| 42 | ?> |
| 43 | <div class="widget-thumb" data-widget="<?php echo $this->escape($widget->getName()); ?>" data-id="<?php echo $widget->getID(); ?>"> |
| 44 | |
| 45 | <h3> |
| 46 | <span><?php echo $widget->getTitle(); ?></span> |
| 47 | <a href="javascript:void(0)" onclick="openWidgetInspector(<?php echo $widget->getID(); ?>);" style="margin-left: 2px;"> |
| 48 | <i class="fas fa-cogs"></i> |
| 49 | </a> |
| 50 | </h3> |
| 51 | |
| 52 | <div class="descr"> |
| 53 | <?php |
| 54 | $desc = $widget->getDescription(); |
| 55 | |
| 56 | if ($desc) |
| 57 | { |
| 58 | echo $vik->alert($desc, 'info'); |
| 59 | } |
| 60 | ?> |
| 61 | </div> |
| 62 | |
| 63 | <i class="fas fa-ellipsis-v widget-sort-handle"></i> |
| 64 | |
| 65 | <input type="hidden" name="widget_id[]" value="<?php echo $widget->getID(); ?>" /> |
| 66 | <input type="hidden" name="widget_id_user[]" value="<?php echo $widget->getUserID(); ?>" /> |
| 67 | <input type="hidden" name="widget_name[]" value="<?php echo $this->escape($widget->getTitle($default = false)); ?>" /> |
| 68 | <input type="hidden" name="widget_class[]" value="<?php echo $this->escape($widget->getName()); ?>" /> |
| 69 | <input type="hidden" name="widget_position[]" value="<?php echo $this->escape($position); ?>" /> |
| 70 | <input type="hidden" name="widget_size[]" value="<?php echo $this->escape($widget->getSize()); ?>" /> |
| 71 | |
| 72 | </div> |
| 73 | <?php |
| 74 | } |
| 75 | ?> |
| 76 | |
| 77 | <div class="widget-thumb add-new-widget"> |
| 78 | <i class="fas fa-plus"></i> |
| 79 | </div> |
| 80 | |
| 81 | </div> |
| 82 | |
| 83 | <i class="fas fa-ellipsis-v position-sort-handle"></i> |
| 84 | |
| 85 | </div> |
| 86 | <?php |
| 87 | } |
| 88 | ?> |
| 89 | |
| 90 | <div class="widgets-position-row add-new-position"> |
| 91 | <i class="fas fa-plus"></i> |
| 92 | </div> |
| 93 | |
| 94 | </div> |
| 95 | |
| 96 | <input type="hidden" name="location" value="<?php echo $this->escape($this->location); ?>" /> |
| 97 | <input type="hidden" name="task" value="" /> |
| 98 | <input type="hidden" name="option" value="com_vikappointments" /> |
| 99 | </form> |
| 100 | |
| 101 | <?php |
| 102 | // render inspector to manage positions |
| 103 | echo JHtml::fetch( |
| 104 | 'vaphtml.inspector.render', |
| 105 | 'widgets-position-inspector', |
| 106 | array( |
| 107 | 'title' => JText::translate('VAP_ADD_POSITION'), |
| 108 | 'closeButton' => true, |
| 109 | 'keyboard' => false, |
| 110 | 'footer' => '<button type="button" class="btn btn-success" id="position-save-config" data-role="save">' . JText::translate('JAPPLY') . '</button>', |
| 111 | 'width' => 400, |
| 112 | ), |
| 113 | $this->loadTemplate('position_modal') |
| 114 | ); |
| 115 | |
| 116 | // render inspector to manage widgets |
| 117 | |
| 118 | $footer = '<button type="button" class="btn btn-success" id="widget-save-config" data-role="save">' . JText::translate('JAPPLY') . '</button>' |
| 119 | . '<button type="button" class="btn btn-danger" id="widget-delete-btn" data-role="delete" style="float:right;">' . JText::translate('VAPDELETE') . '</button>'; |
| 120 | |
| 121 | echo JHtml::fetch( |
| 122 | 'vaphtml.inspector.render', |
| 123 | 'widget-config-inspector', |
| 124 | array( |
| 125 | 'title' => JText::translate('VAP_ADD_WIDGET'), |
| 126 | 'closeButton' => true, |
| 127 | 'keyboard' => false, |
| 128 | 'footer' => $footer, |
| 129 | 'width' => 400, |
| 130 | ), |
| 131 | $this->loadTemplate('widget_modal') |
| 132 | ); |
| 133 | |
| 134 | JText::script('VAP_ADD_POSITION'); |
| 135 | JText::script('VAP_ADD_WIDGET'); |
| 136 | JText::script('VAP_EDIT_WIDGET'); |
| 137 | ?> |
| 138 | |
| 139 | <script> |
| 140 | |
| 141 | var LAST_WIDGET_ID = <?php echo $last_widget_id; ?>; |
| 142 | var SELECTED_WIDGET = null; |
| 143 | |
| 144 | (function($) { |
| 145 | 'use strict'; |
| 146 | |
| 147 | const makePositionSortable = (selector) => { |
| 148 | $(selector).sortable({ |
| 149 | cursor: 'move', |
| 150 | handle: '.widget-sort-handle', |
| 151 | items: '.widget-thumb', |
| 152 | cancel: '.add-new-widget', |
| 153 | connectWith: '.widgets-position-row .widgets-position-container', |
| 154 | revert: false, |
| 155 | receive: (event, ui) => { |
| 156 | // get new position |
| 157 | var position = $(ui.item).closest('.widgets-position-row').data('position'); |
| 158 | |
| 159 | // update widget position (input) |
| 160 | $(ui.item).find('input[name^="widget_position["]').val(position); |
| 161 | }, |
| 162 | }); |
| 163 | |
| 164 | $('.widgets-position-row').disableSelection(); |
| 165 | } |
| 166 | |
| 167 | $(function() { |
| 168 | $('.widgets-builder').sortable({ |
| 169 | axis: 'y', |
| 170 | cursor: 'move', |
| 171 | handle: '.position-sort-handle', |
| 172 | items: '.widgets-position-row:not(.add-new-position)', |
| 173 | revert: false, |
| 174 | }); |
| 175 | |
| 176 | makePositionSortable('.widgets-position-row .widgets-position-container'); |
| 177 | |
| 178 | $('.widget-thumb').disableSelection(); |
| 179 | |
| 180 | // new position placeholder clicked |
| 181 | $('.add-new-position').on('click', function() { |
| 182 | // clear position form before showing it |
| 183 | clearPositionForm(); |
| 184 | |
| 185 | // open position inspector |
| 186 | vapOpenInspector('widgets-position-inspector'); |
| 187 | }); |
| 188 | |
| 189 | // create new position |
| 190 | $('#widgets-position-inspector').on('inspector.save', function() { |
| 191 | // validate position first |
| 192 | if (!positionValidator.validate()) { |
| 193 | return false; |
| 194 | } |
| 195 | |
| 196 | // get position data |
| 197 | var data = getPositionData(); |
| 198 | |
| 199 | // create position block |
| 200 | var block = '<div class="widgets-position-row" data-position="' + data.position + '">\n' + |
| 201 | '<h3>' + data.position + '</h3>\n' + |
| 202 | '<div class="widgets-position-container">\n' + |
| 203 | '<div class="widget-thumb add-new-widget">\n' + |
| 204 | '<i class="fas fa-plus"></i>\n' + |
| 205 | '</div>\n'+ |
| 206 | '<i class="fas fa-ellipsis-v position-sort-handle"></i>\n' + |
| 207 | '</div>\n' + |
| 208 | '</div>'; |
| 209 | |
| 210 | // insert new position before ADD placeholder |
| 211 | $(block).insertBefore('.add-new-position'); |
| 212 | |
| 213 | // make it sortable |
| 214 | makePositionSortable('.widgets-position-row[data-position="' + data.position + '"] .widgets-position-container'); |
| 215 | |
| 216 | // add position to widget modal dropdown |
| 217 | addPositionOption(data.position); |
| 218 | |
| 219 | // dismiss inspector |
| 220 | $(this).inspector('dismiss'); |
| 221 | }); |
| 222 | |
| 223 | // new widget placeholder clicked |
| 224 | $('.widgets-builder').on('click', '.add-new-widget', function() { |
| 225 | // get widget position |
| 226 | var position = $(this).closest('.widgets-position-row').data('position'); |
| 227 | |
| 228 | // pre-fill only the position when creating a new widget |
| 229 | setupWidgetData({position: position}); |
| 230 | |
| 231 | // open widget inspector |
| 232 | openWidgetInspector(); |
| 233 | }); |
| 234 | |
| 235 | // fill the form before showing the inspector |
| 236 | $('#widget-config-inspector').on('inspector.show', function() { |
| 237 | // make sure we are editing a widget |
| 238 | if (SELECTED_WIDGET) { |
| 239 | var data = {}; |
| 240 | |
| 241 | // extract widget data |
| 242 | $('.widget-thumb[data-id="' + SELECTED_WIDGET + '"]') |
| 243 | .find('input[name^="widget_"]') |
| 244 | .each(function() { |
| 245 | var name = $(this).attr('name').match(/^widget_([a-z0-9_]+)\[\]$/i); |
| 246 | var value = $(this).val(); |
| 247 | |
| 248 | if (name && name.length) { |
| 249 | data[name[1]] = value; |
| 250 | } |
| 251 | }); |
| 252 | |
| 253 | // pre-fill inspector with widget data |
| 254 | setupWidgetData(data); |
| 255 | } |
| 256 | }); |
| 257 | |
| 258 | // save widget |
| 259 | $('#widget-config-inspector').on('inspector.save', function() { |
| 260 | // validate widget first |
| 261 | if (!widgetValidator.validate()) { |
| 262 | return false; |
| 263 | } |
| 264 | |
| 265 | // get widget data |
| 266 | var data = getWidgetData(); |
| 267 | |
| 268 | if (!SELECTED_WIDGET) { |
| 269 | // insert widget block first and update widget temporary ID |
| 270 | SELECTED_WIDGET = insertWidgetBlock(data); |
| 271 | } |
| 272 | |
| 273 | // then fill inputs with data |
| 274 | updateWidgetBlock(data); |
| 275 | |
| 276 | // dismiss inspector |
| 277 | $(this).inspector('dismiss'); |
| 278 | }); |
| 279 | |
| 280 | // delete widget |
| 281 | $('#widget-config-inspector').on('inspector.delete', function() { |
| 282 | // get widget block |
| 283 | var widget = $('.widget-thumb[data-id="' + SELECTED_WIDGET + '"]'); |
| 284 | |
| 285 | // get widget ID |
| 286 | var id = parseInt(widget.find('input[name^="widget_id["]').val()); |
| 287 | |
| 288 | if (id > 0) { |
| 289 | // register widget ID to delete |
| 290 | $('#adminForm').append('<input type="hidden" name="widgets_delete[]" value="' + id + '" />'); |
| 291 | } |
| 292 | |
| 293 | // remove block |
| 294 | widget.remove(); |
| 295 | |
| 296 | // dismiss inspector |
| 297 | $(this).inspector('dismiss'); |
| 298 | }); |
| 299 | |
| 300 | }); |
| 301 | })(jQuery); |
| 302 | |
| 303 | function openWidgetInspector(widget) { |
| 304 | SELECTED_WIDGET = widget; |
| 305 | |
| 306 | var title; |
| 307 | |
| 308 | if (typeof widget === 'undefined') { |
| 309 | title = Joomla.JText._('VAP_ADD_WIDGET'); |
| 310 | jQuery('#widget-delete-btn').hide(); |
| 311 | } else { |
| 312 | title = Joomla.JText._('VAP_EDIT_WIDGET'); |
| 313 | jQuery('#widget-delete-btn').show(); |
| 314 | } |
| 315 | |
| 316 | // open inspector |
| 317 | vapOpenInspector('widget-config-inspector', {title: title}); |
| 318 | } |
| 319 | |
| 320 | function updateWidgetBlock(data) { |
| 321 | // get widget block |
| 322 | var block = jQuery('.widget-thumb[data-id="' + SELECTED_WIDGET + '"]'); |
| 323 | |
| 324 | // extract widget data |
| 325 | jQuery('.widget-thumb[data-id="' + SELECTED_WIDGET + '"]') |
| 326 | .find('input[name^="widget_"]') |
| 327 | .each(function() { |
| 328 | var name = jQuery(this).attr('name').match(/^widget_([a-z0-9_]+)\[\]$/i); |
| 329 | |
| 330 | if (data.hasOwnProperty(name)) { |
| 331 | jQuery(this).val(data[name]); |
| 332 | } |
| 333 | }); |
| 334 | |
| 335 | // get default widget data |
| 336 | var widget = getDefaultWidget(data.widget); |
| 337 | |
| 338 | // set widget name (if empty, the default title will be used) |
| 339 | block.find('h3 span').text(data.name || widget.title); |
| 340 | block.find('input[name^="widget_name["]').val(data.name); |
| 341 | |
| 342 | // update widget class |
| 343 | block.find('input[name^="widget_class["]').val(data.widget); |
| 344 | |
| 345 | // update position |
| 346 | block.find('input[name^="widget_position["]').val(data.position); |
| 347 | |
| 348 | // update size |
| 349 | block.find('input[name^="widget_size["]').val(data.size); |
| 350 | |
| 351 | // refresh widget description |
| 352 | block.find('div.descr').html(widget.description); |
| 353 | |
| 354 | // get current position in which the block is placed |
| 355 | var prev_pos = block.closest('.widgets-position-row').data('position'); |
| 356 | |
| 357 | // check if the position has changed |
| 358 | if (data.position != prev_pos) { |
| 359 | // move block in the right position |
| 360 | block.prependTo('.widgets-position-row[data-position="' + data.position + '"] .widgets-position-container'); |
| 361 | } |
| 362 | } |
| 363 | |
| 364 | function insertWidgetBlock(data) { |
| 365 | LAST_WIDGET_ID++; |
| 366 | |
| 367 | // create widget HTML |
| 368 | var html = '<div class="widget-thumb" data-widget="' + data.widget + '" data-id="' + LAST_WIDGET_ID + '">\n'+ |
| 369 | '<h3>\n'+ |
| 370 | '<span></span>\n'+ |
| 371 | '<a href="javascript:void(0);" onclick="openWidgetInspector(' + LAST_WIDGET_ID + ');" style="margin-left: 2px;">\n'+ |
| 372 | '<i class="fas fa-cogs"></i>\n'+ |
| 373 | '</a>\n'+ |
| 374 | '</h3>\n'+ |
| 375 | '<div class="descr">\n</div>\n'+ |
| 376 | '<i class="fas fa-ellipsis-v widget-sort-handle"></i>\n'+ |
| 377 | '<input type="hidden" name="widget_id[]" value="0" />\n'+ |
| 378 | '<input type="hidden" name="widget_id_user[]" value="<?php echo JFactory::getUser()->id; ?>" />\n'+ |
| 379 | '<input type="hidden" name="widget_name[]" value="" />\n'+ |
| 380 | '<input type="hidden" name="widget_class[]" value="" />\n'+ |
| 381 | '<input type="hidden" name="widget_position[]" value="" />\n'+ |
| 382 | '<input type="hidden" name="widget_size[]" value="" />\n'+ |
| 383 | '</div>\n'; |
| 384 | |
| 385 | // insert HTML before the ADD placeholder |
| 386 | jQuery(html).insertBefore('.widgets-position-row[data-position="' + data.position + '"] .add-new-widget'); |
| 387 | |
| 388 | jQuery('.widget-thumb').disableSelection(); |
| 389 | |
| 390 | return LAST_WIDGET_ID; |
| 391 | } |
| 392 | |
| 393 | </script> |
| 394 |