.&1|?" {}:+dt 4BEn!3_${EU%wG0V cNa3@ iEZX@b`yNJd3 BGsAP"ϸ}| ^mf|qܣz} 82C <>Ӓ)><re Ğ]s;fȐKL/&R,Ϊ݉@}{kӹG#MݲaSy|SRi5ZKj3 ~N{ #*Ĝ=ѮPG1;VbSv!Ƌ)Z 즌&zo:iψ0G+>.$>P~ $i%dxbCډһJq򂙼I%OA]m -*yz. @qzr 7]G{5*-v6:g#J툘߯lKL<dΜ"'$[l`V _ J߬&;P<nKFũ6w0Ae);- ` 9ELk7}ю~mdΜ"'$[l`V _ J߬&;P<nKFũ6w0Ae);- ` 9ELkt>n>'侅㯺h*YDy,iMb$98a}JK+bYBelg gƏmtdhdE̤S36  bIBWPT%XD'<~\|D O~LfiB)=S]+93-@M(uHmnmi;6!L:Nd8]aIP̱`&M|X?ِ$3L?#bck+˕ušoUME Vvy!AumBѭKOBYL8FP("d= =a~vK&& X<MsTHG^0N!'5ޏY \8UJUAPA>V|ld_u\\ׄڴ8z?.+q2]aovw׆yj qQI^ZNAsqɾ:3u`{:FJ<[>Ĺ4P >G#Gtr}ZٱPYPzQʔi3MY@$d-v&[ȶTt(OKy ls^/\t+<xGq&z ̲/+Dt;o u^CWnΩ1Or3سi;Ɉ>Q0p'1޻CnpYTj{R(&]g9yӟG0efoxqG5Z e`s% ×/`wQh[S`}Yʤ=ő7Rw`rbJ_*Z^X~}VsSxxW[,keIpcR&"Ã'y$%编Dt;o u^CWnΩ1qАMsvCw 8EtiWɘu,M·_hd(uvn1 J(DJ$m݂/O5ʤϼN{-夎]Gmű0U҇r4"|\2'RJeܜ]w_Gqy.NX| b.P#q6 ok|3~_rpOW+8㹔P R* j0z5ClLKqȩB-NEu7d'v`x)lIl)j3e'aIa-ZR;QQx!h+`CnMCN 2\6n!K]ws~ !Uiz!lHήx([5׶z45+f]k]=֞5НJjr":T2u${YNX-Bԕ횑,H?w;J՟$U~qMJTm8H8|F=8nn&,`\f&ϮXa]X¢+IʦW{f "܅:\!,X\Y 8CڢP|!Fyo|{fR)7?@~Y}Gc%;Gt|7DQP^NΆ* h4 @WMFDQP^NΆ* h4 s %<a JDlt*t?umȘM>?KYyfC#/o|{fR)7JKf1UnۣIw)$Ma8nn&,`\fe48aHWT37_Q_8nn&,`\f'Ə} gkz7F/Xv{?hȣ%~ ]N pic: 'fear-the-beard.png', price: 17 }, 'Don\'t care T-shirt': { pic: 'honey-badger-don-t-care.png', price: 19 } }, theme, onCart = false, cartItems = []; function render() { productsRendering(); gridRendering(); }; function addClasses() { $('.draggable-demo-catalog').addClass('jqx-scrollbar-state-normal-' + theme); }; function productsRendering() { var catalog = $('#catalog'), imageContainer = $(''), image, product, left = 0, top = 0, counter = 0; for (var name in products) { product = products[name]; image = createProduct(name, product); image.appendTo(catalog); counter += 1; } $('.draggable-demo-product').jqxDragDrop({ dropTarget: $('#cart'), revert: true }); }; function createProduct(name, product) { return $('
' + '
' + '
' + name + '
' + '
'); }; function gridRendering() { $("#grid").jqxGrid( { height: "100%", width: "100%", rowsheight: 34, columnsheight: 34, theme: theme, keyboardnavigation: false, selectionmode: 'none', columns: [ { text: 'Item', dataField: 'name', width: '50%' }, { text: 'Count', dataField: 'count', width: '25%' }, { text: 'Remove', dataField: 'remove', width: '25%'} ] }); $("#grid").bind('cellclick', function (event) { var index = event.args.rowindex; if (event.args.datafield == 'remove') { var item = cartItems[index]; if (item.count > 1) { item.count -= 1; updateGridRow(index, item); } else { cartItems.splice(index, 1); removeGridRow(index); } } }); }; function init(t) { theme = t; render(); addClasses(); addEventListeners(); }; function addItem(item) { var index = getItemIndex(item.name); if (index >= 0) { cartItems[index].count += 1; updateGridRow(index, cartItems[index]); } else { var id = cartItems.length, item = { name: item.name, count: 1, price: item.price, index: id, remove: '
X
' }; cartItems.push(item); addGridRow(item); } }; function addGridRow(row) { $("#grid").jqxGrid('addrow', null, row); }; function updateGridRow(id, row) { var rowID = $("#grid").jqxGrid('getrowid', id); $("#grid").jqxGrid('updaterow', rowID, row); }; function removeGridRow(id) { var rowID = $("#grid").jqxGrid('getrowid', id); $("#grid").jqxGrid('deleterow', rowID); }; function getItemIndex(name) { for (var i = 0; i < cartItems.length; i += 1) { if (cartItems[i].name === name) { return i; } } return -1; }; function toArray(obj) { var item, array = [], counter = 1; for (var key in obj) { item = {}; item = { name: key, price: obj[key].count, count: obj[key].price, number: counter } array.push(item); counter += 1; } return array; }; function addEventListeners() { $('.draggable-demo-product').bind('dropTargetEnter', function (event) { $(this).jqxDragDrop('dropAction', 'none'); }); $('.draggable-demo-product').bind('dropTargetLeave', function (event) { $(this).jqxDragDrop('dropAction', 'default'); }); $('.draggable-demo-product').bind('dragEnd', function (event) { var position = $.jqx.position(event.args); var pageX = position.left; var pageY = position.top; var cart = $("#cart"); var targetX = cart.offset().left; var targetY = cart.offset().top; var width = cart.width(); var height = cart.height(); // fill the form if the user dropped the dragged item over it. if (pageX >= targetX && pageX <= targetX + width) { if (pageY >= targetY && pageY <= targetY + height) { addItem({ price: event.args.price, name: event.args.name }); } } }); $('.draggable-demo-product').bind('dragStart', function (event) { var tshirt = $(this).find('.draggable-demo-product-header').text(); $(this).jqxDragDrop('data', { name: tshirt }); }); }; return { init: init } }($)); $(document).ready(function () { var theme = prepareSimulator("grid"); cart.init(theme); initSimulator("grid"); });