### Install Pocket Lists via SVN
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/README.md
Use this command to checkout the Pocket Lists app repository using SVN after Webasyst Framework is installed.
```bash
cd /PATH_TO_WEBASYST/wa-apps/
mkdir pocketlists
svn checkout http://svn.github.com/vofka/pl2webasyst.git ./
```
--------------------------------
### Install Pocket Lists via Git
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/README.md
Use this command to clone the Pocket Lists app repository using Git after Webasyst Framework is installed.
```bash
cd /PATH_TO_WEBASYST/wa-apps/
mkdir pocketlists
git clone git://github.com/vofka/pl2webasyst.git ./
```
--------------------------------
### Initialize Pocket Lists for Shop Orders
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/include/app_hook/shop.backend_order.aux_info.html
Initializes the Pocket Lists Items and Comments components for a specific shop order. This setup is used to manage to-do items directly within the order details view. It configures options like standalone item addition and default linked entities.
```javascript
var Items = new $.pocketlists.Items($list_wrapper, {
enableAddLinkOnHover: false,
enableChangeLevel: false,
enableSortItems: false,
current_user_id: {$wa->user()->getId()},
standAloneItemAdd: 1,
defaultLinkedEntity: {
app: '{$params.app->getApp()}',
entity_type: 'order',
entity_id: {$params.order.id}
},
appUrl: '{$params.plurl}',
userHasLinkedApps: {$params.user->hasLinkedApps()},
wa_url: '{$wa_url}',
fileUpload: {$params.fileupload},
externalApp: 'shop'
});
new $.pocketlists.Comments($list_wrapper, {
standAloneItemAdd: true,
appUrl: '{$params.plurl}',
wa_url: '{$wa_url}'
});
```
--------------------------------
### Add Pocket Lists to apps.php
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/README.md
Add this line to your /wa-config/apps.php file to register the Pocket Lists app after installation.
```php
'pocketlists' => true,
```
--------------------------------
### Initialize Task List UI and Event Handlers
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/include/app_hook/tasks.backend_task.after_description.html
Sets up the UI for the task list, including toggling visibility, handling item additions, and managing storage for UI state. It also initializes PocketLists Items and Comments.
```javascript
(function(){ var $order_info_wrapper = $('#s-split-order-wrapper'), $list_wrapper = $('#pl-list-content'), $toggle_link = $('[data-pl2-action="show-add-item"]'), has_items = /*if empty($params.count_undone_items) && empty($params.count_done_items)*/false/*else*/true/*endif*/; $order_info_wrapper.prepend($list_wrapper); function canShow() { return !$.storage.get('pocketlists/apps/hide-pl2ss-by-default'); } $list_wrapper.on('click', '[data-pl2-shop-action="close"]', function (e) { e.preventDefault(); $.storage.set('pocketlists/apps/hide-pl2ss-by-default', 1); $list_wrapper.slideUp(200, function() { $('[data-pl2-action="show-add-item"]').find('span').css('background', 'greenyellow'); setTimeout(function () { $('[data-pl2-action="show-add-item"]').find('span').css('background', 'white'); }, 1312); }); }); // if (!canShow()) { // $list_wrapper.hide(); // } else { // setTimeout(function() { // $list_wrapper.slideDown(); // }, 131.2); // } $toggle_link.on('click', function (e) { e.preventDefault(); $.storage.del('pocketlists/apps/hide-pl2ss-by-default'); $list_wrapper.slideToggle(200, function () { if ($list_wrapper.is(':visible')) { $list_wrapper.find('#pl-item-add textarea').trigger('focus'); } }); }); var Items = new $.pocketlists.Items($list_wrapper, { enableAddLinkOnHover: false, enableChangeLevel: false, enableSortItems: false, current_user_id: {$wa->user()->getId()}, standAloneItemAdd: 1, defaultLinkedEntity: { app: '{$params.app->getApp()}', entity_type: 'task', entity_id: {$params.task->id} }, appUrl: '{$params.plurl}', userHasLinkedApps: {$params.user->hasLinkedApps()}, wa_url: '{$wa_url}', fileUpload: {$params.fileupload}, externalApp: 'tasks' }); new $.pocketlists.Comments($list_wrapper, { standAloneItemAdd: true, appUrl: '{$params.plurl}', wa_url: '{$wa_url}' }); var order_id = parseInt($('#s-order-items [data-id]').data('id')), $order_list = $('#order-list'); $(document) .off('item_delete.pl2 item_add.pl2 item_complete.pl2 item_move.pl2 item_update.pl2') .on('item_delete.pl2 item_add.pl2 item_complete.pl2 item_move.pl2 item_update.pl2', function (e, data) { console.log('pl2 item captured', e.type, data); $.post('{$params.plurl}?module=shop&action=loadOrderIcon', { order: order_id }, function (r) { console.log('pl2 item loadOrderIcon response', r); if (r.status === 'ok' && r.data) { var $order = $order_list.find('[data-order-id='+r.data.entity_id+']'); if ($order.length) { var pl2 = ''+r.data.count_entities+'
'; $order.find('.pl2-shop-item-count').remove(); var $indicator = $('[data-pl2-action="show-add-item"] .indicator.red'); if (r.data.count_entities) { if ($indicator.length) { $indicator.text(r.data.count_entities); } else { $('[data-pl2-action="show-add-item"]').append('' + r.data.count_entities + '') } if ($.order_list.options.view == 'split') { $order .find('.details') .append(pl2); } else { $order .find('td:last') .append(pl2); } } else { $indicator.remove(); } } } }); }) }());
```
--------------------------------
### Initialize Pocketlists Pro Routing and Core
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/hooks/backend_head.html
Initializes Pocketlists Pro routing with the current user ID and the core Pocketlists Pro module, conditionally enabling debug mode based on Webasyst's debug configuration.
```javascript
(function () {
$.pocketlists_pro_routing.init({
user_id: {$wa->user()->get('id')}
});
$.pocketlists_pro.init({
debug: {if waSystemConfig::isDebug()}true{else}false{/if}
});
}())
```
--------------------------------
### Initialize Application State
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/layouts/Static.html
Sets up the global JavaScript `appState` object with essential application data fetched from the backend. This includes URLs, API tokens, user information, and configuration settings.
```html
```
--------------------------------
### JavaScript for Shortcut Initialization
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/settings/SettingsShortcuts.html
Initializes the to-do shortcut management interface, including setting titles, handling shortcut groups, and managing tag inputs for shortcuts.
```javascript
'use strict';
(function () {
$.pocketlists.setTitle();
var $shortcuts = $('[data-pl2pro-shortcuts]'),
$add = $('[data-pl2pro-shortcuts-action]'),
shortcuts = {$shortcuts_json},
shortcutTemplate = $('#pl2pro-shortcuts');
var init = function ($el, shortcuts) {
var shortcutNames = shortcuts ? shortcuts.map(function (shortcut) {
return shortcut['name'];
}) : [],
$button = $el.find('[type="button"]'),
$shortcuts = $el.find('[data-pl2pro-shortcuts-input]'),
shortcutsInputId = $shortcuts.attr('id'),
tagsInputSelector = '#' + shortcutsInputId + '_tag',
$buttons = $el.find('[data-pl2pro-shortcuts-buttons]'),
$yes = $buttons.find('.yes'),
groupId = $el.data('pl2pro-shortcuts-group');
var buttonShow = function() {
$buttons.show();
$button.removeClass('green').addClass('yellow');
};
$shortcuts
.val(shortcutNames.join(','))
.tagsInput({
autocomplete_url: '',
autocomplete: {
source: function (request, response) {
$.getJSON('?module=shortcut&action=autocomplete&type=settings&term=' + request.term, function (data) {
response(data.data);
});
}
},
height: '',
width: '',
defaultText: '',
onAddTag: buttonShow,
onRemoveTag: buttonShow
});
$el
.on('keyup', tagsInputSelector, function (e) {
if (e.which === 13) {
$button.trigger('click.pl2pro');
} else {
buttonShow();
}
})
.on('focus paste', tagsInputSelector, function (e) {
buttonShow();
});
$button.on('click.pl2pro', function (e) {
e.preventDefault();
var newVal = $.trim($el.find(tagsInputSelector).val());
if (newVal) {
$shortcuts.addTag(newVal)
}
$.post('?module=shortcut&action=renew', {
group: groupId,
shortcuts: $shortcuts.val()
}, function (r) {
if (r.status === 'ok') {
$button.removeClass('yellow').addClass('green');
$yes.show(1).delay(1312).hide(1);
}
}, 'json');
});
};
for (var group in shortcuts) {
var $shortcutsGroup = shortcutTemplate.tmpl({
group: $_('Group') + ' #' + group,
groupId: group,
id: +(new Date())
});
$shortcuts.append($shortcutsGroup);
init($shortcutsGroup, shortcuts[group]);
}
$add.on('click', function (e) {
e.preventDefault();
var groupId = $('[data-pl2pro-shortcuts-group]').length + 1,
$shortcutsGroup = shortcutTemplate.tmpl({
group: $_('Group') + ' #' + groupId,
groupId: 0,
id: +(new Date())
});
$shortcuts.append($shortcutsGroup);
init($shortcutsGroup);
});
}())
```
--------------------------------
### Pocketlists Initialization
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/layouts/Static.html
Initializes the Pocketlists JavaScript module with essential configuration parameters like account name, admin status, user ID, and debug mode.
```javascript
$.pocketlists.init({
account_name: '{$wa->accountName()|escape}',
isAdmin: {$isAdmin},
userId: {$wa->user()->get('id')},
debug: {if $wa->debug()}1{else}0{/if}
});
```
--------------------------------
### PocketLists Pro JavaScript Initialization and Event Handlers
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/hooks/backend_item_add.html
Initializes PocketLists Pro functionality and sets up event handlers for various actions like adding items, opening wrappers, and item details. It ensures that the necessary data and wrappers are available before initializing.
```javascript
var wrapperTime = {$time}, $wrapper = null, isNew = {$pl2pro.isNew}, labelsExists = {$pl2pro.labelsExists}, shortcutsExists = {$pl2pro.shortcutsExists};
$.pocketlists_pro.log('backend_item_add.html');
var pl2EventsHandlers = {
item_add: function (e, data) {
$wrapper = data.add_wrapper.find('[data-pl2pro-wrapper]');
$wrapper.removeData('pl2pro-item-add');
init($wrapper);
},
open_new_item_wrapper: function (e, data) {
$wrapper = data.add_wrapper.find('[data-pl2pro-wrapper]');
$wrapper.removeData('pl2pro-item-add');
init($wrapper);
},
itemDetailsOpened: function (e, data) {
$wrapper = data.details_wrapper.find('[data-pl2pro-wrapper]');
$wrapper.removeData('pl2pro-item-add');
init($wrapper);
},
itemDetailsClosed: function (e, data) {
$wrapper = data.details_wrapper.find('[data-pl2pro-wrapper]');
$wrapper.removeData('pl2pro-item-add');
init($wrapper);
}
};
$(document)
.off('item_add.pl2', pl2EventsHandlers.item_add)
.on('item_add.pl2', pl2EventsHandlers.item_add)
.off('open_new_item_wrapper.pl2 hide_new_item_wrapper.pl2', pl2EventsHandlers.open_new_item_wrapper)
.on('open_new_item_wrapper.pl2 hide_new_item_wrapper.pl2', pl2EventsHandlers.open_new_item_wrapper)
```
--------------------------------
### Initialize PocketLists Pro
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/hooks/backend_item_add.html
Initializes the PocketLists Pro plugin with debug mode enabled if the system is in debug mode. This is typically called once on page load.
```html
{if !empty($pl2pro['external'])} (function () { $.pocketlists_pro.init({ debug: {if waSystemConfig::isDebug()}true{else}false{/if} }); }()) {/if}
```
--------------------------------
### Todo List Initialization and Calendar Navigation
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/todo/Todo.html
Initializes the todo list interface, sets the title, and handles navigation between months in the calendar view. It fetches and displays monthly calendar data and todo items.
```javascript
(function(){
var $calendar_wrapper = $('[data-pl-todo-calendar]'), month = 0, $items_wrapper = $('#pl-list-todo-items');
$.pocketlists.setTitle('`My to-dos`');
$('[data-pl-todo-calendar-action]').on('click', function (e) {
e.preventDefault();
if ($(this).data('pl-todo-calendar-action') === 'next') {
month++;
} else {
month--;
}
$.get('?module=todo&action=month&month=' + month, function (html) {
$calendar_wrapper.html(html);
});
});
var getStream = function (date, filter) {
$.get('?module=todo&action=date' + (date ? ('&date=' + date) : '') + (filter ? ('&filter=' + filter): ''), function (html) {
$items_wrapper.html(html);
});
};
getStream();
var setPrintLink = function (date) {
var $print_link = $calendar_wrapper.find('[data-pl-action="list-print"]'), href = $print_link.attr('href'), new_href = href.replace(/&date=.*$/, '&date=' + (date ? date : ''));
$print_link.attr('href', new_href);
};
$calendar_wrapper
.on('click', '[data-pl-todo-date]', function () {
var $this = $(this), date = $this.data('pl-todo-date');
$calendar_wrapper.find('[data-pl-todo-date]').removeClass('pl-selected');
$this.addClass('pl-selected');
setPrintLink(date);
getStream(date);
})
.on('mouseenter', '[data-pl-todo-date]', function () {
var date = $(this).data('pl-todo-date'), $items = $items_wrapper.find('.pl-item-wrapper[data-pl-due-date="' + date + '"]');
if ($items.length) {
$items.addClass('highlighted-background');
}
})
.on('mouseleave', '[data-pl-todo-date]', function () {
var date = $(this).data('pl-todo-date'), $items = $items_wrapper.find('.pl-item-wrapper[data-pl-due-date="' + date + '"]');
if ($items.length) {
$items.removeClass('highlighted-background');
}
});
$items_wrapper.on('click', '[pl-todo-stream="date"] a', function (e) {
e.preventDefault();
$calendar_wrapper.find('[data-pl-todo-date]').removeClass('pl-selected');
setPrintLink();
getStream();
});
$('[data-pl="uho"]').on('click', '[data-pl-action="list-email"]', function (e) {
e.preventDefault();
e.stopPropagation();
var date = $('.pl-selected[data-pl-todo-date]').length ? $('.pl-selected[data-pl-todo-date]').data('pl-todo-date') : 'today';
$.get('?module=list&action=emailDialog&date=' + date)
.done(function (html) {
$.waDialog({
html: html,
onOpen: function ($dialog, dialog_instance) {
var $form = $dialog.find('form');
$form
.on("submit", function (e) {
e.preventDefault();
$form.after($.pocketlists.$loading);
$.post('?module=list&action=email', $form.serialize(), function (r) {
$.pocketlists.$loading.remove();
if (r.status === 'ok') {
dialog_instance.close();;
} else {
alert(r.errors);
}
}, 'json')
})
.on("click", ".cancel", function(e) {
e.preventDefault();
dialog_instance.close();
});
}
});
});
})
}());
```
--------------------------------
### Item and Comment Initialization
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/actions/label/LabelPocket.html
Initializes PocketLists items and comments for a given list wrapper. It configures options like file uploads and sets the title for the label.
```javascript
'use strict';
(function () {
var $list_wrapper = $('#pl-list-items');
new $.pocketlists.Items($list_wrapper, {
enableChangeLevel: false,
archive: false,
userHasLinkedApps: {$current_user->hasLinkedApps()},
current_user_id: {$current_user->getContact()->getId()},
fileUpload: true,
externalApp: '{$externalApp|default:''}'
});
new $.pocketlists.Comments($list_wrapper);
$.pocketlists.setTitle("{$label->getName()|escape|addslashes}");
}());
```
--------------------------------
### Pocket Lists Initialization JavaScript
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/pocket/Pocket.html
Initializes the Pocket Lists JavaScript component, setting up the pocket wrapper, lists wrapper, current user ID, admin status, and the pocket's title. This script should be placed where the Pocket Lists UI is rendered.
```javascript
(function () {
var $pocketWrapper = $('[data-pl2-pocket-wrapper]');
var $lists_wrapper = $pocketWrapper.find('[data-pl2-wrapper="lists"]');
new $.pocketlists.Pocket($pocketWrapper, {
current_user_id: {$wa->user()->get('id')},
isAdmin: {$isAdmin},
listsWrapper: $lists_wrapper
});
$.pocketlists.setTitle('{$pocket->getName()|default:" "|escape|addslashes}');
}());
```
--------------------------------
### Activity Log Entry Loop
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/activity/Activity.html
Iterates through a list of log entries and displays their creation datetime, log entry text, and action explanation.
```html
{foreach $logs as $log}
{$log->getCreateDatetime()|wa_datetime:'humandatetime'} {$log->getLogEntry()|escape} {$log->getActionExplained()} {$log->getMoreHtml()}
{/foreach}
```
--------------------------------
### Initialize PocketLists and Handle Calendar Navigation
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/app/App.html
Initializes PocketLists, sets the page title, and sets up event listeners for calendar navigation buttons (next/previous month). It fetches and updates the calendar view using AJAX.
```javascript
(function(){
// $.pocketlists.initNotice('#pl-stream-notice');
var $calendar_wrapper = $("[data-pl-todo-calendar]"), month = 0, $items_wrapper = $("#pl-list-todo-items");
$.pocketlists.setTitle('[`My to-dos`]');
$("[data-pl-todo-calendar-action]").on('click', function (e) {
e.preventDefault();
if ($(this).data('pl-todo-calendar-action') === 'next') {
month++;
} else {
month--;
}
$.get('?module=app&action=month&app={$app->getApp()}&month=' + month, function (html) {
$calendar_wrapper.html(html);
});
});
var getStream = function (date, filter) {
$.get('?module=app&action=date&app={$app->getApp()}' + (date ? ('&date=' + date) : '') + (filter ? ('&filter=' + filter): ''), function (html) {
$items_wrapper.html(html);
});
};
getStream();
// var setPrintLink = function (date) {
// var $print_link = $calendar_wrapper.find('[data-pl-action="list-print"]'),
// href = $print_link.attr('href'),
// new_href = href.replace(/&date=.*$/, '&date=' + (date ? date : ''));
//
// $print_link.attr('href', new_href);
// };
$calendar_wrapper
.on('click', '[data-pl-todo-date]', function () {
var $this = $(this), date = $this.data('pl-todo-date');
$calendar_wrapper.find('[data-pl-todo-date]').removeClass('pl-selected');
$this.addClass('pl-selected');
// setPrintLink(date);
getStream(date);
})
.on('mouseenter', '[data-pl-todo-date]', function () {
var date = $(this).data('pl-todo-date'), $items = $items_wrapper.find('.pl-item-wrapper[data-pl-due-date="' + date + '"]');
if ($items.length) {
$items.addClass('highlighted-background');
}
})
.on('mouseleave', '[data-pl-todo-date]', function () {
var date = $(this).data('pl-todo-date'), $items = $items_wrapper.find('.pl-item-wrapper[data-pl-due-date="' + date + '"]');
if ($items.length) {
$items.removeClass('highlighted-background');
}
});
$items_wrapper.on('click', '[pl-todo-stream="date"] a', function (e) {
e.preventDefault();
$calendar_wrapper.find('[data-pl-todo-date]').removeClass('pl-selected');
// setPrintLink();
getStream();
});
// $('[data-pl="uho"]').on('click', '[data-pl-action="list-email"]', function (e) {
// e.preventDefault();
// e.stopPropagation();
// var date = $('.pl-selected[data-pl-todo-date]').length ? $('.pl-selected[data-pl-todo-date]').data('pl-todo-date') : 'today';
// $('').waDialog({
// 'url': '?module=list&action=emailDialog&date=' + date,
// onLoad: function () {
// },
// onSubmit: function (d) {
// var $this = $(this);
//
// $this.after($.pocketlists.$loading);
// $.post('?module=list&action=email', $this.serialize(), function(r) {
// $.pocketlists.$loading.remove();
// if (r.status === 'ok') {
// d.trigger('close');
// } else {
// alert(r.errors);
// }
// }, 'json');
// return false;
// },
// onClose: function () {
// this.remove();
// }
// });
// });
}());
```
--------------------------------
### Logbook Initialization JavaScript
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/logbook/Logbook.html
Initializes the Pocketlists Items and Comments plugins for the Logbook view. Configures item display and loading behavior.
```javascript
(function () {
var $all_items_wrapper = $('#pl-list-content');
new $.pocketlists.Items($all_items_wrapper, {
enableAddLinkOnHover: false,
enableChangeLevel: false,
enableSortItems: false,
userHasLinkedApps: {$user->hasLinkedApps()},
current_user_id: {$user->getContact()->getId()},
externalApp: '{$externalApp|default:''}'
});
new $.pocketlists.Comments($all_items_wrapper);
$.pocketlists.setTitle($_( 'Logbook'));
$.pocketlists.lazyItems({
$loading: $('#pl-list-content .lazyloading'),
html_selector: '\[data-pl-items="undone"\] > .menu-v',
url: '?module=logbook'
});
}());
```
--------------------------------
### Initialize Item Wrapper
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/hooks/backend_item_add.html
Initializes the item wrapper for PocketLists Pro, preventing multiple initializations and logging the state. It also handles storage initialization and sets up data attributes.
```javascript
function init($wrapper) {
if (!$wrapper.length) {
return;
}
if ($wrapper.data('pl2pro-item-add')) {
return;
}
$.pocketlists_pro.log({ 'labels&shortcuts inited': $wrapper });
$.store && !$.storage && ($.storage = new $.store());
$wrapper.data('pl2pro-item-add', 1);
$wrapper.removeData('pl2pro-label-selected');
var focus = function($textarea) {
setTimeout(function () {
var val = $textarea.val();
$textarea.trigger('focus.pl2pro').val('').val(val);
}, 10);
};
function labels() {
var $labels = $wrapper.find('[data-pl2pro-label]'),
labelId = parseInt($.storage.get('pocketlists/pro/label')),
labelsAreHidden = function () { return !!$labels.filter(':hidden').length };
$labels
.off('click.pl2pro')
.on('click.pl2pro', function (e) {
e.preventDefault();
var $this = $(this);
if (labelsAreHidden()) {
$wrapper.addClass('pl2pro-all-labels-shown');
$labels.addClass('shown');
return;
} else {
$wrapper.removeClass('pl2pro-all-labels-shown');
}
$labels.removeClass('selected');
$wrapper.removeData('pl2pro-label-selected');
if (isNew) {
$.storage && !$.storage.set('pocketlists/pro/label', $this.data('pl2pro-label'));
}
$labels.removeClass('shown');
$this.addClass('selected shown');
$wrapper.data('pl2pro-label-selected', $this.data('pl2pro-label'));
});
$(document)
.off('beforeAddItemSync.pl2 beforeUpdateItemSync.pl2 keydown.pl2pro_labels')
.on('beforeAddItemSync.pl2', function (e, eventData) {
eventData.response.data[0]['pro_label_id'] = parseInt($wrapper.data('pl2pro-label-selected')) || 0;
})
.on('beforeUpdateItemSync.pl2', function (e, $form) {
$('', {
type: 'hidden',
name: 'pro_label_id',
value: parseInt($wrapper.data('pl2pro-label-selected')) || 0
}).appendTo($form);
});
}
labels();
}
```
--------------------------------
### Initialize and Handle Order List Appending
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/include/app_hook/shop.backend_orders.sidebar_bottom_li.html
JavaScript code to detach a template, set up an event listener for appending order lists, and handle the order list data to display custom item counts.
```javascript
{\* \* This
will be cloned into each .item.order inside ul#order-list \*}
(function() { "use strict"; var wa_app_static_url = {$params.wa_app_static_url|json_encode}, plurl = {$params.plurl|json_encode}; var $template = $('#pl2-order-icon-template').detach().removeAttr('id'); if (!$template.length) { return; // paranoid } var title_msg = $template.attr('title'); $(function() { $('#s-content') .off('append_order_list.pl2') .on('append_order_list.pl2', '#order-list', order_list_handler); }); function order_list_handler(evt, data) { var $this = $(this); if(!$.isArray(data) || !data.length) { return; } var order_ids = $.map(data, function (datum) { return datum['id']; }); $.post(plurl + '?module=shop&action=loadOrdersIcon', { orders: order_ids }, function (r) { if (r.status !== 'ok' || !r.data) { return; } $.each(r.data, function(i, datum) { var $order = $this.find('[data-order-id='+datum.entity_id+']'); if (!$order.length) { return; } $order.find('.pl2-shop-item-count').remove(); var $count_wrapper = $template.clone(); $count_wrapper.attr('title', title_msg.replace('%s', datum.count_entities)); $count_wrapper.find('.js-item-count').html(datum.count_entities); if ($.order_list.options.view == 'split') { $order.find('.details').find('.tablebox').after($count_wrapper); } else { $order.find('td:last').find('div').prepend($count_wrapper); } }); }); } }());
```
--------------------------------
### Initialize PocketLists Items and Comments
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/team/Team.html
Initializes the PocketLists JavaScript components for managing items and comments. It configures various options like enabling/disabling add links, sorting, and assigning users.
```javascript
(function () { 'use strict'; var $all_items_wrapper = $('#pl-list-items'); new $.pocketlists.Items($all_items_wrapper, { enableAddLinkOnHover: false, enableChangeLevel: false, enableSortItems: false, assignUser: parseInt($('#pl-assigned-contact-id').val()), showMessageOnEmptyList: true, // list: new $.pocketlists.List($('.pl-title')), userHasLinkedApps: {$user->hasLinkedApps()}, current_user_id: {$user->getContact()->getId()}, standAloneItemAdd: {if $external}1{else}0{/if}, appUrl: '{$plurl}', wa_url: '{$wa_url}', fileUpload: {if $external}0{else}1{/if}, externalApp: '{$externalApp|default:''}' }); new $.pocketlists.Comments($all_items_wrapper); $.pocketlists.setTitle('{$current_teammate->getName()|escape|addslashes}');
```
--------------------------------
### Pocketlists Pro Label Settings Initialization
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/actions/settings/SettingsLabels.html
Initializes label-related functionalities including color pickers and sortable lists. This code is typically run once when the settings page loads.
```javascript
initSortable();
$labels.on('click', '[data-pl2pro-label-action="create"]', function (e) {
e.preventDefault();
removeForm();
addForm({
id: 0,
name: '',
color: '000000'
}).insertBefore($done);
});
$labels.on('click', '[data-pl2pro-label-action="delete"]', function (e) {
e.preventDefault();
var $label = $(this).closest('[data-pl2pro-label-id]');
labelId = $label.data('pl2pro-label-id');
$.get('?plugin=pro&module=label&action=deleteDialog&id=' + labelId)
.done(function (html) {
$.waDialog({
html: html,
onOpen: function ($dialog, dialog_instance) {
var $form = $dialog.find('form');
$form.on("submit", function (e) {
e.preventDefault();
$.post('?plugin=pro&module=labelCrud&action=delete',
$form.serialize(),
function (r) {
if (r.status === 'ok') {
$label.remove();
initSortable();
}
else {
console.log(r.errors);
}
dialog_instance.close();
}, 'json')
}).on("click", ".cancel", function(e) {
e.preventDefault();
dialog_instance.close();
});
}
});
});
});
$labels.on('click', '[data-pl2pro-label-action="update"]', function (e) {
e.preventDefault();
var $label = $(this).closest('[data-pl2pro-label-id]');
labelId = $label.data('pl2pro-label-id');
removeForm();
$.get('?plugin=pro&module=labelCrud&action=get', {
id: labelId
}, function (r) {
if (r.status === 'ok') {
var $form = addForm(r.data);
$label.replaceWith($form);
}
else {
console.log(r.errors);
}
}, 'json');
});
(function () {
var $form = $("#pl2pro-label-form");
var $inputs = $form.find(":input");
var $button = $("#pl2pro-label-save-button");
var $cancel = $("#pl2pro-label-cancel-button");
var action = 'create';
var data = $inputs.serialize();
function save() {
$.post('?plugin=pro&module=labelCrud&action=' + action, $form.serialize(), function (r) {
if (r.status === 'ok') {
if (r.data['id']) {
$form.data('pl2pro-label-id', r.data.id)
.find('[name="id"]')
.val(r.data.id);
action = 'update';
}
$inputs = $form.find(':input');
data = $inputs.serialize();
$button.removeClass('yellow red');
removeForm();
}
else {
$button.removeClass('yellow green').addClass('red');
}
}, 'json');
};
initColorPicker($form);
initSortable();
$inputs.on('change keyup paste', function (e) {
e.preventDefault();
if (data === $inputs.serialize()) {
$button.removeClass('yellow red').addClass('green');
}
else {
$button.removeClass('green red').addClass('yellow');
}
}).on('keydown', function (e) {
if (e.which === 13) {
e.preventDefault();
save();
}
});
$cancel.on('click', function (e) {
e.preventDefault();
removeForm();
});
$button.on('click', function () {
save();
});
return $form;
}());
```
--------------------------------
### Initialize Kanban Board with Drag-and-Drop
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/board/Board.html
Initializes the Kanban board UI, enabling drag-and-drop functionality for items and setting up droppable areas for columns. It also configures event handlers for item completion and label changes.
```javascript
'use strict';
(function () {
$.pocketlists.setTitle("{$pocket->getName()|escape|addslashes}", true);
var $wrapper = $("["data-pl2pro-wrapper=""board""]");
var $columns = $wrapper.find("["data-pl2pro-label""]");
var dropInAction = false;
var $sourceLabel = null;
$('#pl-kanban-board-filter').waDropdown();
$("["data-pl2pro-item""]", $wrapper).draggable({
distance: 5,
opacity: 0.75,
appendTo: 'body',
tolerance: 'pointer',
revert: true,
revertDuration: 0,
classes: {
'ui-sortable-helper': 'shadowed'
}
});
$columns.droppable({
accept: '["data-pl2pro-item""]',
disabled: false,
greedy: true,
tolerance: 'pointer',
classes: {
'ui-droppable': 'pl-droppable'
},
over: function (event, ui) {
dropInAction = true;
$(this).addClass('highlighted-background');
$sourceLabel = $sourceLabel || $(this);
},
out: function (event, ui) {
dropInAction = false;
$(this).removeClass('highlighted-background');
},
drop: function (event, ui) {
var $item = ui.draggable;
var $label = $(event.target);
var labelId = $label.data('pl2pro-label');
var itemId = $item.data('pl2pro-item');
var $curSourceLabel = $sourceLabel;
$sourceLabel = null;
if (labelId != $curSourceLabel.data('pl2pro-label')) {
$label.find('.pl2pro-column-items').prepend($item);
dropInAction = false;
if (labelId) {
$.post('?module=label&action=addToItem', {
id: labelId,
item_id: itemId
}, function (r) {
if (r.status === 'ok') {
$(document).trigger('itemLabelChanged.pl2pro', {
label: labelId,
item: itemId,
drop: this
});
labelCount($label, 1);
labelCount($curSourceLabel, -1);
if (!$curSourceLabel.data('pl2pro-label')) {
completeItem($item, 0, function () {});
}
}
}, 'json');
} else {
completeItem($item, 1, function () {
labelCount($label, 1);
labelCount($curSourceLabel, -1);
});
}
}
$(this).removeClass('highlighted-background');
$item.addClass('pl-dropped');
}
});
$columns.on('click', "["data-pl2pro-done""]", function (e) {
e.preventDefault();
var $item = $(this).closest("["data-pl2pro-item""]"), status = !!$item.data('pl2pro-item-status');
completeItem($item, status ? 0 : 1, function () {
labelCount($item.closest("["data-pl2pro-label""]"), status ? 1 : -1);
});
});
function labelCount($column, count) {
var $count = $column.find('.count');
count = count || 1;
$count.text(parseInt($count.text()) + count);
}
function completeItem($item, status, callback) {
var id = parseInt($item.data('pl2pro-item')),
$checkbox = $item.find(':checkbox');
$item.toggleClass('gray');
$checkbox.prop('checked', status);
$item.data('pl2pro-item-status', status);
$.post('?module=item&action=complete', {
id: id,
status: status
}, function (r) {
if (r.status === 'ok') {
$.pocketlists.updateAppCounter();
$.isFunction(callback) && callback.call();
} else {
console.log(r.errors);
$checkbox.prop('checked', status ? 0 : 1);
$item.data('pl2pro-item-status', status ? 0 : 1);
}
}, 'json');
}
}())
```
--------------------------------
### JavaScript Initialization for Pocketlists
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/actions/favorites/FavoritesDate.html
Initializes Pocketlists JavaScript components, including item management, comments, and lazy loading for completed items. Configures options like date filtering and external app integration.
```javascript
{if !$print} (function(){ $.pocketlists.initNotice('#pl-stream-notice'); var $all_items_wrapper = $('#pl-list-items'); new $.pocketlists.Items($all_items_wrapper, { enableAddLinkOnHover: false, enableChangeLevel: false, enableSortItems: false, // assignUser: parseInt('{$wa->user()->getId()}'), showMessageOnEmptyList: {if $date}false{else}true{/if}, dueDate: '{if $timestamp}{$timestamp}{/if}', filter: 'favorites', userHasLinkedApps: {$user->hasLinkedApps()}, current_user_id: {$user->getContact()->getId()}, externalApp: '{$externalApp|default:''}' }); new $.pocketlists.Comments($all_items_wrapper); $.pocketlists.lazyItems({ $loading: $('#pl-list-content .lazyloading'), html_selector: '#pl-complete-log > .menu-v', url: '?module=item&action=lazyDone&type=favorites&date={$date}&external_app={$externalApp|default:''|escape}' }); }()); {else} {/if}
```
--------------------------------
### JavaScript for Board Initialization and Drag-and-Drop
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/actions/board/Board.html
Initializes the board UI, including making items draggable and columns droppable. Handles item movement between columns and updating item status.
```javascript
'use strict';
(function () {
$.pocketlists.setTitle("{$pocket->getName()|escape|addslashes}", true);
var $wrapper = $('[data-pl2pro-wrapper="board"]'),
$columns = $wrapper.find('[data-pl2pro-label]');
var dropInAction = false,
$sourceLabel = null;
$(' [data-pl2pro-item]', $wrapper).draggable({
// handle: '[data-pl-action="item-sort"]',
distance: 5,
opacity: 0.75,
appendTo: 'body',
// connectWith: $columns,
tolerance: 'pointer',
revert: true,
revertDuration: 0,
classes: {
'ui-sortable-helper': 'shadowed'
}
// forcePlaceholderSize: true,
// forceHelperSize: true,
});
$columns.droppable({
accept: '[data-pl2pro-item]',
disabled: false,
greedy: true,
tolerance: 'pointer',
classes: {
'ui-droppable': 'pl-droppable'
},
over: function (event, ui) {
dropInAction = true;
$(this).addClass('highlighted-background');
$sourceLabel = $sourceLabel || $(this);
},
out: function (event, ui) {
dropInAction = false;
$(this).removeClass('highlighted-background');
},
drop: function (event, ui) {
var $item = ui.draggable,
$label = $(event.target),
labelId = $label.data('pl2pro-label'),
itemId = $item.data('pl2pro-item'),
$curSourceLabel = $sourceLabel;
$sourceLabel = null;
if (labelId != $curSourceLabel.data('pl2pro-label')) {
$label.find('.pl2pro-column-items').prepend($item);
dropInAction = false;
if (labelId) {
$.post('?plugin=pro&module=label&action=addToItem', {
id: labelId,
item_id: itemId
}, function (r) {
if (r.status === 'ok') {
$(document).trigger('itemLabelChanged.pl2pro', {
label: labelId,
item: itemId,
drop: this
});
labelCount($label, 1);
labelCount($curSourceLabel, -1);
if (!$curSourceLabel.data('pl2pro-label')) {
completeItem($item, 0, function () {});
}
}
}, 'json');
} else {
completeItem($item, 1, function () {
labelCount($label, 1);
labelCount($curSourceLabel, -1);
});
}
}
$(this).removeClass('highlighted-background');
$item.addClass('pl-dropped');
}
});
$columns.on('click', '[data-pl2pro-done]', function (e) {
e.preventDefault();
var $item = $(this).closest('[data-pl2pro-item]');
var status = !!$item.data('pl2pro-item-status');
completeItem($item, status ? 0 : 1, function () {
labelCount($item.closest('[data-pl2pro-label]'), status ? 1 : -1);
});
});
function labelCount($column, count) {
var $count = $column.find('.count');
count = count || 1;
$count.text(parseInt($count.text()) + count);
}
function completeItem($item, status, callback) {
var id = parseInt($item.data('pl2pro-item'));
var $checkbox = $item.find(':checkbox');
$item.toggleClass('gray');
$checkbox.prop('checked', status);
// check nesting items
$item.data('pl2pro-item-status', status);
$.post('?module=item&action=complete', {
id: id,
status: status
}, function (r) {
if (r.status === 'ok') {
$.pocketlists.updateAppCounter();
$.isFunction(callback) && callback.call();
} else {
console.log(r.errors);
$checkbox.prop('checked', status ? 0 : 1);
$item.data('pl2pro-item-status', status ? 0 : 1);
}
}, 'json');
}
}());
```
--------------------------------
### Initialize Pocket Lists Webasyst State
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/client/index.html
Sets the global application state with API credentials and base URL for Pocket Lists in Webasyst. Ensure the apiToken and apiBaseUrl are correctly configured for your Webasyst instance.
```javascript
window.appState = {"apiToken":"fdd56c986db48b2aa66a9e66b3c36bba","apiBaseUrl":"/wa2sndbx/api.php"};
window.appState.datetime = new Date().toISOString();
```
--------------------------------
### Initialize New UI Toggle
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/templates/include/app_hook/tasks.backend_task.after_description.html
Initializes a switch to toggle between the old and new UI for the task list. It uses local storage to remember the user's preference.
```javascript
(function($) { const isNewWidget = localStorage.getItem('tasks/plNewWidget'); changeWidgetUI(isNewWidget); $("#switch-2").waSwitch({ active: !!isNewWidget, change: (active) => { changeWidgetUI(active); if (active) { localStorage.setItem('tasks/plNewWidget', '1'); } else { localStorage.removeItem('tasks/plNewWidget') } } }); function changeWidgetUI (isNewWidget) { const oldUI = document.querySelector('#pl-list-items'); const newUI = document.querySelector('#pl-list-items-new'); newUI.style.display = isNewWidget ? 'block' : 'none'; oldUI.style.display = isNewWidget ? 'none' : 'block'; } })(jQuery);
```
--------------------------------
### Activity Log Display Logic
Source: https://github.com/1312inc/pocketlists-webasyst/blob/master/plugins/pro/templates/actions/activity/Activity.html
This section handles the display of activity logs. It iterates through each log entry, showing the log details, action performed, and creation timestamp. It also includes placeholders for additional information and a 'loading' indicator.
```HTML/Smarty
{* @var $log pocketlistsLog *}
{if $type|strtolower == 'activity' || $type|strtolower == 'pocket'}
[`Activity log`] {if $type|strtolower == 'pocket'}POCKET NAME{/if}
======================================================================
{else}
##### [`Activity log`]
{/if}
{foreach $logs as $log}
{$log->getLogEntry()|escape} {$log->getActionExplained()} {$log->getCreateDatetime()|wa_datetime:'humandatetime'} {$log->getMoreHtml()}
{/foreach}
{if !$logs}
[`No activity logged.`]
{/if}
[`Loading...`]
{if !$lazy && $logs && count($logs) == pocketlistsProPluginActivityActivityAction::LIMIT}
[**_[`Show more`]_**](#)
{/if}
```