/* ------------------------------------------------------------------------------ * * # Handsontable - Excel-like tables with extensive funtionality * * Specific JS code additions for handsontable_custom_checks.html page * * Version: 1.0 * Latest update: Nov 1, 2015 * * ---------------------------------------------------------------------------- */ $(function() { // Numeric type // ------------------------------ // Define element var hot_html_cells_data = [ { cover: "https://thumb-tf.s3.envato.com/files/154866588/icon.png", title: "<a href='http://themeforest.net/item/limitless-responsive-web-application-kit/13080328' target='_blank'>Limitless - Responsive Web Application Kit</a>", description: "Limitless is one of the best application templates ever built. Very flexible and clean admin template based on Bootstrap and Less. Available in 4 different layouts.", sales: "<strong>12930</strong>", comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 35 ratings", }, { cover: "https://thumb-tf.s3.envato.com/files/91482991/icon.png", title: "<a href='http://themeforest.net/item/londinium-responsive-bootstrap-3-admin-template/6978619' target='_blank'>Londinium - responsive bootstrap 3 admin template</a>", description: "Londinium – a new premium admin skin with lots of custom elements, plugins and very flexible content structure. Londinium is powered with Bootstrap framework.", sales: "<strong>8509</strong>", comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 56 ratings", }, { cover: "https://thumb-tf.s3.envato.com/files/84750409/icon.png", title: "<a href='http://themeforest.net/item/its-brain-responsive-bootstrap-3-admin-template/909197' target='_blank'>It's Brain - Responsive Bootstrap 3 Admin Template</a>", description: "It's Brain admin template is based on Bootstrap framework and includes a lot of different features. Comes with fixed and liquid layouts in both light and dark versions.", sales: "<strong>3902</strong>", comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 453 ratings", } ]; // Define element var hot_html_cells = document.getElementById('hot_html_cells'); // Initialize with options var hot_html_cells_init = new Handsontable(hot_html_cells, { data: hot_html_cells_data, colWidths: [50, 120, 200, 60, 50], rowHeights: 111, // 80px img height + 30px margin + 1px border stretchH: 'all', colHeaders: ["Icon", "Name", "Description", "Sales", "Rating"], columns: [ {data: "cover", renderer: coverRenderer}, {data: "title", renderer: "html"}, {data: "description", renderer: "html"}, {data: "sales", renderer: "html", className: 'htCenter'}, {data: "comments", renderer: "html", className: 'htCenter'}, ] }); // Original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) function strip_tags(input, allowed) { var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi; // Making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>) allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) { return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''; }); } // Renderer for image function coverRenderer (instance, td, row, col, prop, value, cellProperties) { var escaped = Handsontable.helper.stringify(value), img; if (escaped.indexOf('http') === 0) { img = document.createElement('IMG'); img.className = 'img-responsive'; img.style.margin = '15px auto'; img.style.height = 80; img.src = value; Handsontable.Dom.addEvent(img, 'mousedown', function (e){ e.preventDefault(); // prevent selection quirk }); Handsontable.Dom.empty(td); td.appendChild(img); } else { Handsontable.renderers.TextRenderer.apply(this, arguments); // render as text } return td; } // Rendering custom HTML in header // ------------------------------ // Demo data for 2 examples var car_data = [ {car: "Mercedes", model: "GL500", date: "11/01/2015", price: 32500, share: 0.64}, {car: "Chevrolet", model: "Camaro", date: "11/02/2015", price: 42400, share: 0.37}, {car: "Dodge", model: "Charger", date: "11/03/2015", price: 24900, share: 0.33}, {car: "Hummer", model: "H3", date: "11/04/2015", price: 54000, share: 0.15}, {car: "Chevrolet", model: "Tahoe", date: "11/05/2015", price: 29300, share: 0.27}, {car: "Toyota", model: "Land Cruiser", date: "11/06/2015", price: 54500, share: 0.43}, {car: "Nissan", model: "GTR", date: "11/07/2015", price: 44900, share: 0.35}, {car: "Porsche", model: "Cayenne", date: "11/08/2015", price: 35000, share: 0.63}, {car: "Volkswagen", model: "Touareg", date: "11/09/2015", price: 41000, share: 0.15}, {car: "BMW", model: "X5", date: "11/10/2015", price: 48800, share: 0.35}, {car: "Audi", model: "Q7", date: "11/11/2015", price: 21000, share: 0.53}, {car: "Cadillac", model: "Escalade", date: "11/12/2015", price: 63900, share: 0.38} ]; // Define element var hot_html_header = document.getElementById('hot_html_header'); // Initialize with options var hot_html_header_init = new Handsontable(hot_html_header, { data: car_data, stretchH: 'all', columns: [ { data: 'car', renderer: customRenderer }, { data: 'model' }, { data: 'date', type: 'date', dateFormat: 'MM/DD/YYYY', correctFormat: true }, { data: 'price', type: 'numeric', className: 'htLeft', format: '0,0.00 $' }, { data: 'share', type: 'numeric', className: 'htLeft', format: '0%' } ], colHeaders: function (col) { var txt; switch (col) { case 0: txt = "<span class='position-left'>Brand</span> <input type='checkbox' class='hot-checker' "; txt += isChecked ? 'checked="checked">' : '>'; return txt; case 1: return '<strong>Model</strong>'; case 2: return '<i class="icon-calendar3 position-left"></i> Date'; case 3: return '<u><i>Price</i></u>'; case 4: return 'Share <sup>%</sup>'; } } }); // Setup custom renderer var isChecked; function customRenderer(instance, td) { Handsontable.renderers.TextRenderer.apply(this, arguments); if (isChecked) { td.style.backgroundColor = '#F1F8E9'; } else { td.style.backgroundColor = ''; } return td; } // Mousedown event Handsontable.Dom.addEvent(hot_html_header, 'mousedown', function (event) { if (event.target.nodeName == 'INPUT' && event.target.className == 'hot-checker') { event.stopPropagation(); } }); // Mouseup event Handsontable.Dom.addEvent(hot_html_header, 'mouseup', function (event) { if (event.target.nodeName == 'INPUT' && event.target.className == 'hot-checker') { isChecked = !event.target.checked; hot_html_header_init.render(); } }); // Change column type // ------------------------------ // Define element var hot_change_type = document.getElementById('hot_change_type'); // Setup columns var columns = [ {type: 'numeric', data: 'car'}, {type: 'numeric', data: 'model'}, {type: 'date', data: 'date'}, {type: 'numeric', data: 'price', className: 'htLeft', format: '0,0.00 $'}, {type: 'numeric', data: 'share', className: 'htLeft', format: '0%'} ]; // Initialize with options var hot_change_type = new Handsontable(hot_change_type,{ data: car_data, colHeaders: true, stretchH: 'all', columns: columns, afterGetColHeader: function(col, TH) { var instance = this, menu = buildMenu(columns[col].type), button = buildButton(); addButtonMenuEvent(button, menu); // Click event Handsontable.Dom.addEvent(menu, 'click', function (event) { if (event.target.nodeName == 'LI') { setColumnType(col, event.target.data['colType'], instance); } }); if (TH.firstChild.lastChild.nodeName === 'BUTTON') { TH.firstChild.removeChild(TH.firstChild.lastChild); } TH.firstChild.appendChild(button); TH.style['white-space'] = 'normal'; } }); // Add button in headers function addButtonMenuEvent(button, menu) { Handsontable.Dom.addEvent(button, 'click', function (event) { var changeTypeMenu, position, removeMenu; // Append menu document.body.appendChild(menu); // Cancel click events event.preventDefault(); event.stopImmediatePropagation(); // Add class name changeTypeMenu = document.querySelectorAll('.changeTypeMenu'); // Hide menu for (var i = 0, len = changeTypeMenu.length; i < len; i++) { changeTypeMenu[i].style.display = 'none'; } // Show menu menu.style.display = 'block'; // Mneu positioning position = button.getBoundingClientRect(); menu.style.top = (position.top + (window.scrollY || window.pageYOffset)) + 2 + 'px'; menu.style.left = (position.left) - 137 + 'px'; // Remove menu removeMenu = function (event) { if (event.target.nodeName == 'LI' && event.target.parentNode.className.indexOf('changeTypeMenu') !== -1) { if (menu.parentNode) { menu.parentNode.removeChild(menu); } } }; // Events Handsontable.Dom.removeEvent(document, 'click', removeMenu); Handsontable.Dom.addEvent(document, 'click', removeMenu); }); } // Build menu function buildMenu(activeCellType){ // Define elements var menu = document.createElement('UL'), types = ['text', 'numeric', 'date'], item; // Add class name menu.className = 'changeTypeMenu'; // Menu items for (var i = 0, len = types.length; i< len; i++) { item = document.createElement('LI'); if('innerText' in item) { item.innerText = types[i]; } else { item.textContent = types[i]; } item.data = {'colType': types[i]}; if (activeCellType == types[i]) { item.className = 'active'; } menu.appendChild(item); } return menu; } // Build button function buildButton() { // Define element var button = document.createElement('BUTTON'); // Add attributes and extra content button.innerHTML = '<i class="icon-arrow-down22"></i>'; button.className = 'changeType'; return button; } // Set columns type function setColumnType(i, type, instance) { columns[i].type = type; instance.updateSettings({columns: columns}); instance.validateCells(function() { instance.render(); }); } // Checkbox true/false values // ------------------------------ // Add data var hot_checks_values_data = [ {car: "Mercedes", model: "GL500", year: 2012, price: 32500, available: true}, {car: "Chevrolet", model: "Camaro", year: 2012, price: 42400, available: false}, {car: "Dodge", model: "Charger", year: 2012, price: 24900, available: true}, {car: "Hummer", model: "H3", year: 2012, price: 54000, available: true}, {car: "Chevrolet", model: "Tahoe", year: 2012, price: 29300, available: false}, {car: "Toyota", model: "Land Cruiser", year: 2012, price: 54500, available: true}, {car: "Nissan", model: "GTR", year: 2012, price: 44900, available: false}, {car: "Porsche", model: "Cayenne", year: 2012, price: 35000, available: false}, {car: "Volkswagen", model: "Touareg", year: 2012, price: 41000, available: true}, {car: "BMW", model: "X5", year: 2012, price: 48800, available: true}, {car: "Audi", model: "Q7", year: 2012, price: 21000, available: false}, {car: "Cadillac", model: "Escalade", year: 2012, price: 63900, available: true} ]; // Define element var hot_checks_values = document.getElementById('hot_checks_values'); // Initialize with options var hot_checks_values_init = new Handsontable(hot_checks_values, { data: hot_checks_values_data, stretchH: 'all', colHeaders: ['Brand', 'Model', 'Year', 'Price', 'Available'], columns: [ { data: 'car' }, { data: 'model' }, { data: 'year', type: 'numeric', className: 'htLeft', }, { data: 'price', type: 'numeric', className: 'htLeft', format: '0,0.00 $' }, { data: 'available', type: 'checkbox', className: 'htCenter', width: 20 } ] }); // Checkbox labels // ------------------------------ // Add sample data var hot_checks_labels_data = [ {car: "Mercedes", model: "GL500", date: "11/01/2015", price: 32500, share: 0.64, available: 'yes'}, {car: "Chevrolet", model: "Camaro", date: "11/02/2015", price: 42400, share: 0.37, available: 'yes'}, {car: "Dodge", model: "Charger", date: "11/03/2015", price: 24900, share: 0.33, available: 'no'}, {car: "Hummer", model: "H3", date: "11/04/2015", price: 54000, share: 0.15, available: 'no'}, {car: "Chevrolet", model: "Tahoe", date: "11/05/2015", price: 29300, share: 0.27, available: 'yes'}, {car: "Toyota", model: "Land Cruiser", date: "11/06/2015", price: 54500, share: 0.43, available: 'yes'}, {car: "Nissan", model: "GTR", date: "11/07/2015", price: 44900, share: 0.35, available: 'no'}, {car: "Porsche", model: "Cayenne", date: "11/08/2015", price: 35000, share: 0.63, available: 'no'}, {car: "Volkswagen", model: "Touareg", date: "11/09/2015", price: 41000, share: 0.15, available: 'yes'}, {car: "BMW", model: "X5", date: "11/10/2015", price: 48800, share: 0.35, available: 'no'}, {car: "Audi", model: "Q7", date: "11/11/2015", price: 21000, share: 0.53, available: 'no'}, {car: "Cadillac", model: "Escalade", date: "11/12/2015", price: 63900, share: 0.38, available: 'yes'} ]; // Define element var hot_checks_labels = document.getElementById('hot_checks_labels'); // Initialize with options var hot_checks_labels_init = new Handsontable(hot_checks_labels, { data: hot_checks_labels_data, stretchH: 'all', colHeaders: ['Brand', 'Model', 'Date', 'Price', 'Share'], columns: [ { data: 'car' }, { data: 'available', type: 'checkbox', checkedTemplate: 'yes', uncheckedTemplate: 'no', label: { property: 'model' // Read value from row object } }, { data: 'date', type: 'date' }, { data: 'price', type: 'numeric', className: 'htLeft', format: '0,0.00 $' }, { data: 'share', type: 'numeric', className: 'htLeft', format: '0%', width: 30 } ] }); // Checkbox template // ------------------------------ // Add data var hot_checks_template_data = [ {car: "Mercedes", model: "GL500", year: 2012, price: 32500, available: 'no'}, {car: "Chevrolet", model: "Camaro", year: 2012, price: 42400, available: 'yes'}, {car: "Dodge", model: "Charger", year: 2012, price: 24900, available: 'no'}, {car: "Hummer", model: "H3", year: 2012, price: 54000, available: 'yes'}, {car: "Chevrolet", model: "Tahoe", year: 2012, price: 29300, available: 'yes'}, {car: "Toyota", model: "Land Cruiser", year: 2012, price: 54500, available: 'no'}, {car: "Nissan", model: "GTR", year: 2012, price: 44900, available: 'yes'}, {car: "Porsche", model: "Cayenne", year: 2012, price: 35000, available: 'no'}, {car: "Volkswagen", model: "Touareg", year: 2012, price: 41000, available: 'yes'}, {car: "BMW", model: "X5", year: 2012, price: 48800, available: 'no'}, {car: "Audi", model: "Q7", year: 2012, price: 21000, available: 'no'}, {car: "Cadillac", model: "Escalade", year: 2012, price: 63900, available: 'yes'} ]; // Define element var hot_checks_template = document.getElementById('hot_checks_template'); // Initialize with options var hot_checks_template_init = new Handsontable(hot_checks_template, { data: hot_checks_template_data, stretchH: 'all', colHeaders: ['Brand', 'Model', 'Year', 'Price', 'Available'], columns: [ { data: 'car' }, { data: 'model' }, { data: 'year', type: 'numeric', className: 'htLeft', }, { data: 'price', type: 'numeric', className: 'htLeft', format: '0,0.00 $' }, { data: 'available', type: 'checkbox', checkedTemplate: 'yes', className: 'htCenter', uncheckedTemplate: 'no', width: 20 } ] }); });