evs-chris on dev
safer, though maybe slightly le… minifiable undefineds (compare)
evs-chris on dev
fix parent context of component… (compare)
evs-chris on dev
fix shuffling when more than on… shuffling binding mystery bug t… don't shuffle an autoshuffling … (compare)
evs-chris on dev
fix a few corner cases on autom… (compare)
evs-chris on dev
add support for automatically l… (compare)
/**
* Handles global logic within CSS Portal.
*
* Version:
* 1.10.19
*
* Depends:
* jquery.js > 1.8.3 ?
*
* Demo and Documentation:
* http://datatables.net/
* Serviceportal.Site/Documentation/index.html
*
*
* Automatic onClick event listener for elements:
* Elements with the class "dt-clickable" automatically recieve an onClick listener, which reads all data-* attributes and forwards them to either the default or the given function.
* The default function which is called, is the "dt.elementClicked" function and can be overwritten by defining an 'data-fire=""' attribute
* e.g. with default function
* Element: <button class="dt-clickable" data-location-id="5138" data-order-id="2186">Details</button>
* Function call: dt.elementClicked(context, {orderId: 2186, locationId: 5138});
* e.g. with defined function
* Element: <button class="dt-clickable" data-location-id="5138" data-order-id="2186" data-fire="onShowDetails">Details</button>
* Function call: onShowDetails(context, {fire: "onShowDetails", orderId: 2186, locationId: 5138})
**/
var datatablesdecorator = function (node, data, options) {
var instance = this;
var isLegacy = !$(node).hasClass('block');
initBSDataTables('en'); //set Bootstrap styling and i18n
var $options = $.extend(true,{
//LC: 'en',
order: [[0, 'asc']],
pagingType: 'simple_numbers',
paging: true,
pageLength: 10,
lengthMenu: [10, 25, 50, 100],
autoWidth: true,
scrollX: false,
searching: true,
info: true,
columns: [],
columnDefs: [],
buttons: $.fn.dataTable.defaults.buttons,
hideHeader: false,
fnInitComplete: function (oSettings, json) {
$('#' + node.id + '_length select').select2({
minimumResultsForSearch: -1
//TODO: language should be set here with language: langForSelect2
});
if (options.hideHeader) {
$('#' + node.id + '_wrapper .dataTable thead').hide();
}
},
}, options);
console.log($options);
var table;
if (isLegacy)
table = $(node).DataTable($options);
else
table = $(node).find('table').first().DataTable($options);
if (data) {
table.rows.add(data);
}
table.draw();
$(node).on("click", '.dt-clickable', function () {
var data = $(this).data();
if (data.fire) {
instance.fire(data.fire, data);
} else {
instance.fire("dt.elementClicked", data);
}
});
$(node).on('processing.dt', function (e, settings, processing) {
if (processing && !isLegacy)
SSI.loader.loading('#' + node.id);
else
SSI.loader.stoploading('#' + node.id);
instance.fire('processed', node.id);
})
return {
teardown: function () {
table.destroy();
},
update: function (data) {
SSI.debugger.info('Data from datatablesdecorator-Update');
SSI.debugger.info(data);
if (data) {
table.clear();
table.rows.add(data);
table.draw();
} else {
table.clear();
table.draw();
}
}
};
};
Ractive({
template: `
<button type="button" on-hover-click="@this.someMethod()">Push me!</button>
`,
someMethod () {
console.log('Fires on hover and on click!')
}
})
ractive.set
, that could be useful.
element.animate
invalidate
callback of a decorator if you're on 1.3 or edge e.g. https://jsbin.com/cayokixafe/1/edit?html,js,output
<span as-foo>{{bar}}</span><input value="{{bar}}" />
css
initialization prop in my component. But If I put a <style>
tag in the component template instead, it just throws it into a style tag unmodified in the <body>
. This bit of the docs seems to imply that component scoped css is supported if I put my css in the component template. https://ractive.js.org/api/#component-files