/** * configurator.js * * Marlin Configuration Utility * - Web form for entering configuration options * - A reprap calculator to calculate movement values * - Uses HTML5 to generate downloadables in Javascript * - Reads and parses standard configuration files from local folders * * Supporting functions * - Parser to read Marlin Configuration.h and Configuration_adv.h files * - Utilities to replace values in configuration files */ "use strict"; $(function(){ /** * Github API useful GET paths. (Start with "https://api.github.com/repos/:owner/:repo/") * * contributors Get a list of contributors * tags Get a list of tags * contents/[path]?ref=branch/tag/commit Get the contents of a file */ // GitHub // Warning! Limited to 60 requests per hour! var config = { type: 'github', host: 'https://api.github.com', owner: 'MarlinFirmware', repo: 'Marlin', ref: 'Development', path: 'Marlin/configurator/config' }; /**/ /* // Remote var config = { type: 'remote', host: 'http://www.thinkyhead.com', path: '_marlin/config' }; /**/ /* // Local var config = { type: 'local', path: 'config' }; /**/ function github_command(conf, command, path) { var req = conf.host+'/repos/'+conf.owner+'/'+conf.repo+'/'+command; if (path) req += '/' + path; return req; } function config_path(item) { var path = '', ref = ''; switch(config.type) { case 'github': path = github_command(config, 'contents', config.path); if (config.ref !== undefined) ref = '?ref=' + config.ref; break; case 'remote': path = config.host + '/' + config.path + '/'; break; case 'local': path = config.path + '/'; break; } return path + '/' + item + ref; } // Extend builtins String.prototype.lpad = function(len, chr) { if (chr === undefined) { chr = ' '; } var s = this+'', need = len - s.length; if (need > 0) { s = new Array(need+1).join(chr) + s; } return s; }; String.prototype.prePad = function(len, chr) { return len ? this.lpad(len, chr) : this; }; String.prototype.zeroPad = function(len) { return this.prePad(len, '0'); }; String.prototype.toHTML = function() { return jQuery('<div>').text(this).html(); }; String.prototype.regEsc = function() { return this.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&"); } String.prototype.lineCount = function(ind) { var len = (ind === undefined ? this : this.substr(0,ind*1)).split(/\r?\n|\r/).length; return len > 0 ? len - 1 : 0; }; String.prototype.line = function(num) { var arr = this.split(/\r?\n|\r/); return num < arr.length ? arr[1*num] : ''; }; String.prototype.replaceLine = function(num,txt) { var arr = this.split(/\r?\n|\r/); if (num < arr.length) { arr[num] = txt; return arr.join('\n'); } else return this; } String.prototype.toLabel = function() { return this.replace(/[\[\]]/g, '').replace(/_/g, ' ').toTitleCase(); } String.prototype.toTitleCase = function() { return this.replace(/([A-Z])(\w+)/gi, function(m,p1,p2) { return p1.toUpperCase() + p2.toLowerCase(); }); } Number.prototype.limit = function(m1, m2) { if (m2 == null) return this > m1 ? m1 : this; return this < m1 ? m1 : this > m2 ? m2 : this; }; Date.prototype.fileStamp = function(filename) { var fs = this.getFullYear() + ((this.getMonth()+1)+'').zeroPad(2) + (this.getDate()+'').zeroPad(2) + (this.getHours()+'').zeroPad(2) + (this.getMinutes()+'').zeroPad(2) + (this.getSeconds()+'').zeroPad(2); if (filename !== undefined) return filename.replace(/^(.+)(\.\w+)$/g, '$1-['+fs+']$2'); return fs; } /** * selectField.addOptions takes an array or keyed object */ $.fn.extend({ addOptions: function(arrObj) { return this.each(function() { var sel = $(this); var isArr = Object.prototype.toString.call(arrObj) == "[object Array]"; $.each(arrObj, function(k, v) { sel.append( $('<option>',{value:isArr?v:k}).text(v) ); }); }); }, noSelect: function() { return this .attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }, unblock: function(on) { on ? this.removeClass('blocked') : this.addClass('blocked'); return this; } }); // The app is a singleton window.configuratorApp = (function(){ // private variables and functions go here var self, pi2 = Math.PI * 2, has_boards = false, has_config = false, has_config_adv = false, boards_file = 'boards.h', config_file = 'Configuration.h', config_adv_file = 'Configuration_adv.h', $msgbox = $('#message'), $form = $('#config_form'), $tooltip = $('#tooltip'), $cfg = $('#config_text'), $adv = $('#config_adv_text'), $config = $cfg.find('pre'), $config_adv = $adv.find('pre'), config_file_list = [ boards_file, config_file, config_adv_file ], config_list = [ $config, $config_adv ], define_info = {}, // info for all defines, by name define_list = [[],[]], // arrays with all define names define_occur = [{},{}], // lines where defines occur in each file define_groups = [{},{}], // similarly-named defines that group in the form define_section = {}, // the section of each define dependent_groups = {}, boards_list = {}, therms_list = {}, total_config_lines, total_config_adv_lines, hover_timer, pulse_offset = 0; // Return this anonymous object as configuratorApp return { my_public_var: 4, logging: 1, init: function() { self = this; // a 'this' for use when 'this' is something else // Set up the form, creating fields and fieldsets as-needed this.initConfigForm(); // Make tabs for all the fieldsets this.makeTabsForFieldsets(); // No selection on errors // $msgbox.noSelect(); // Make a droppable file uploader, if possible var $uploader = $('#file-upload'); var fileUploader = new BinaryFileUploader({ element: $uploader[0], onFileLoad: function(file) { self.handleFileLoad(file, $uploader); } }); if (!fileUploader.hasFileUploaderSupport()) this.setMessage("Your browser doesn't support the file reading API.", 'error'); // Make the disclosure items work $('.disclose').click(function(){ var $dis = $(this), $pre = $dis.nextAll('pre:first'); var didAnim = function() {$dis.toggleClass('closed almost');}; $dis.addClass('almost').hasClass('closed') ? $pre.slideDown(200, didAnim) : $pre.slideUp(200, didAnim); }); // Adjust the form layout for the window size $(window).bind('scroll resize', this.adjustFormLayout).trigger('resize'); // Read boards.h, Configuration.h, Configuration_adv.h var ajax_count = 0, success_count = 0; var loaded_items = {}; var isGithub = config.type == 'github'; var rateLimit = 0; $.each(config_file_list, function(i,fname){ var url = config_path(fname); $.ajax({ url: url, type: 'GET', dataType: isGithub ? 'jsonp' : undefined, async: true, cache: false, error: function(req, stat, err) { self.log(req, 1); if (req.status == 200) { if (typeof req.responseText === 'string') { var txt = req.responseText; loaded_items[fname] = function(){ self.fileLoaded(fname, txt, true); }; success_count++; // self.setMessage('The request for "'+fname+'" may be malformed.', 'error'); } } else { self.setRequestError(req.status ? req.status : '(Access-Control-Allow-Origin?)', url); } }, success: function(txt) { if (isGithub && typeof txt.meta.status !== undefined && txt.meta.status != 200) { self.setRequestError(txt.meta.status, url); } else { // self.log(txt, 1); if (isGithub) { rateLimit = { quota: 1 * txt.meta['X-RateLimit-Remaining'], timeLeft: Math.floor(txt.meta['X-RateLimit-Reset'] - Date.now()/1000), }; } loaded_items[fname] = function(){ self.fileLoaded(fname, isGithub ? decodeURIComponent(escape(atob(txt.data.content))) : txt, true); }; success_count++; } }, complete: function() { ajax_count++; if (ajax_count >= config_file_list.length) { // If not all files loaded set an error if (success_count < ajax_count) self.setMessage('Unable to load configurations. Try the upload field.', 'error'); // Is the request near the rate limit? Set an error. var r; if (r = rateLimit) { if (r.quota < 20) { self.setMessage( 'Approaching request limit (' + r.quota + ' remaining.' + ' Reset in ' + Math.floor(r.timeLeft/60) + ':' + (r.timeLeft%60+'').zeroPad(2) + ')', 'warning' ); } } // Post-process all the loaded files $.each(config_file_list, function(){ if (loaded_items[this]) loaded_items[this](); }); } } }); }); }, /** * Make a download link visible and active */ activateDownloadLink: function(cindex) { var filename = config_file_list[cindex+1]; var $c = config_list[cindex], txt = $c.text(); $c.prevAll('.download:first') .unbind('mouseover click') .mouseover(function() { var d = new Date(), fn = d.fileStamp(filename); $(this).attr({ download:fn, href:'download:'+fn, title:'download:'+fn }); }) .click(function(){ var $button = $(this); $(this).attr({ href:'data:text/plain;charset=utf-8,' + encodeURIComponent($c.text()) }); setTimeout(function(){ $button.attr({ href:$button.attr('title') }); }, 100); return true; }) .css({visibility:'visible'}); }, /** * Make the download-all link visible and active */ activateDownloadAllLink: function() { $('.download-all') .unbind('mouseover click') .mouseover(function() { var d = new Date(), fn = d.fileStamp('MarlinConfig.zip'); $(this).attr({ download:fn, href:'download:'+fn, title:'download:'+fn }); }) .click(function(){ var $button = $(this); var zip = new JSZip(); for (var e in [0,1]) zip.file(config_file_list[e+1], config_list[e].text()); var zipped = zip.generate({type:'blob'}); saveAs(zipped, $button.attr('download')); return false; }) .css({visibility:'visible'}); }, /** * Init the boards array from a boards.h file */ initBoardsFromText: function(txt) { boards_list = {}; var r, findDef = new RegExp('[ \\t]*#define[ \\t]+(BOARD_[\\w_]+)[ \\t]+(\\d+)[ \\t]*(//[ \\t]*)?(.+)?', 'gm'); while((r = findDef.exec(txt)) !== null) { boards_list[r[1]] = r[2].prePad(3, ' ') + " — " + r[4].replace(/\).*/, ')'); } this.log("Loaded boards:\n" + Object.keys(boards_list).join('\n'), 3); has_boards = true; }, /** * Init the thermistors array from the Configuration.h file */ initThermistorList: function(txt) { // Get all the thermistors and save them into an object var r, s, findDef = new RegExp('(//.*\n)+\\s+(#define[ \\t]+TEMP_SENSOR_0)', 'g'); r = findDef.exec(txt); findDef = new RegExp('^//[ \\t]*([-\\d]+)[ \\t]+is[ \\t]+(.*)[ \\t]*$', 'gm'); while((s = findDef.exec(r[0])) !== null) { therms_list[s[1]] = s[1].prePad(4, ' ') + " — " + s[2]; } }, /** * Get all the unique define names, building lists that will be used * when gathering info about each define. * * define_list[c][j] : Define names in each config (in order of occurrence) * define_section[name] : Section where define should appear in the form * define_occur[c][name][i] : Lines in each config where the same define occurs * .cindex Config file index * .lineNum Line number of the occurrence * .line The occurrence line */ initDefineList: function(cindex) { var section = 'hidden', leave_out_defines = ['CONFIGURATION_H', 'CONFIGURATION_ADV_H'], define_sect = {}, occ_list = {}, txt = config_list[cindex].text(), r, findDef = new RegExp('^.*(@section|#define)[ \\t]+(\\w+).*$', 'gm'); while((r = findDef.exec(txt)) !== null) { var name = r[2]; if (r[1] == '@section') { section = name; } else if ($.inArray(name, leave_out_defines) < 0) { var lineNum = txt.lineCount(r.index), inst = { cindex:cindex, lineNum:lineNum, line:r[0] }, in_sect = (name in define_sect); if (!in_sect) { occ_list[name] = [ inst ]; } if (!(name in define_section) && !in_sect) { define_sect[name] = section; // new first-time define } else { occ_list[name].push(inst); } } } define_list[cindex] = Object.keys(define_sect); define_occur[cindex] = occ_list; $.extend(define_section, define_sect); this.log(define_list[cindex], 2); this.log(occ_list, 2); this.log(define_sect, 2); }, /** * Find the defines in one of the configs that are just variants. * Group them together for form-building and other uses. * * define_groups[c][name] * .pattern regexp matching items in the group * .title title substitution * .count number of items in the group */ refreshDefineGroups: function(cindex) { var findDef = /^(|.*_)(([XYZE](MAX|MIN))|(E[0-3]|[XYZE01234])|MAX|MIN|(bed)?K[pid]|HOTEND|HPB|JAPAN|WESTERN|CYRILLIC|LEFT|RIGHT|BACK|FRONT|[XYZ]_POINT)(_.*|)$/i; var match_prev, patt, title, nameList, groups = {}, match_section; $.each(define_list[cindex], function(i, name) { if (match_prev) { if (match_prev.exec(name) && define_section[name] == match_section) { nameList.push(name); } else { if (nameList.length > 1) { $.each(nameList, function(i,n){ groups[n] = { pattern: patt, title: title, count: nameList.length }; }); } match_prev = null; } } if (!match_prev) { var r = findDef.exec(name); if (r != null) { title = ''; switch(r[2].toUpperCase()) { case '0': patt = '([0123])'; title = 'N'; break; case 'X': patt = '([XYZE])'; title = 'AXIS'; break; case 'E0': patt = 'E([0-3])'; title = 'E'; break; case 'BEDKP': patt = 'bed(K[pid])'; title = 'BED_PID'; break; case 'KP': patt = '(K[pid])'; title = 'PID'; break; case 'LEFT': case 'RIGHT': case 'BACK': case 'FRONT': patt = '([LRBF])(EFT|IGHT|ACK|RONT)'; break; case 'MAX': case 'MIN': patt = '(MAX|MIN)'; break; case 'HOTEND': case 'HPB': patt = '(HOTEND|HPB)'; break; case 'JAPAN': case 'WESTERN': case 'CYRILLIC': patt = '(JAPAN|WESTERN|CYRILLIC)'; break; case 'XMIN': case 'XMAX': patt = '([XYZ])'+r[4]; title = 'XYZ_'+r[4]; break; default: patt = null; break; } if (patt) { patt = '^' + r[1] + patt + r[7] + '$'; title = r[1] + title + r[7]; match_prev = new RegExp(patt, 'i'); match_section = define_section[name]; nameList = [ name ]; } } } }); define_groups[cindex] = groups; this.log(define_groups[cindex], 2); }, /** * Get all conditional blocks and their line ranges * and store them in the dependent_groups list. * * dependent_groups[condition][i] * * .cindex config file index * .start starting line * .end ending line * */ initDependentGroups: function() { var findBlock = /^[ \t]*#(ifn?def|if|else|endif)[ \t]*(.*)([ \t]*\/\/[^\n]+)?$/gm, leave_out_defines = ['CONFIGURATION_H', 'CONFIGURATION_ADV_H']; dependent_groups = {}; $.each(config_list, function(i, $v) { var ifStack = []; var r, txt = $v.text(); while((r = findBlock.exec(txt)) !== null) { var lineNum = txt.lineCount(r.index); var code = r[2].replace(/[ \t]*\/\/.*$/, ''); switch(r[1]) { case 'if': var code = code .replace(/([A-Z][A-Z0-9_]+)/g, 'self.defineValue("$1")') .replace(/defined[ \t]*\(?[ \t]*self.defineValue\(("[A-Z][A-Z0-9_]+")\)[ \t]*\)?/g, 'self.defineIsEnabled($1)'); ifStack.push(['('+code+')', lineNum]); // #if starts on next line self.log("push if " + code, 4); break; case 'ifdef': if ($.inArray(code, leave_out_defines) < 0) { ifStack.push(['self.defineIsEnabled("' + code + '")', lineNum]); self.log("push ifdef " + code, 4); } else { ifStack.push(0); } break; case 'ifndef': if ($.inArray(code, leave_out_defines) < 0) { ifStack.push(['!self.defineIsEnabled("' + code + '")', lineNum]); self.log("push ifndef " + code, 4); } else { ifStack.push(0); } break; case 'else': case 'endif': var c = ifStack.pop(); if (c) { var cond = c[0], line = c[1]; self.log("pop " + c[0], 4); if (dependent_groups[cond] === undefined) dependent_groups[cond] = []; dependent_groups[cond].push({cindex:i,start:line,end:lineNum}); if (r[1] == 'else') { // Reverse the condition cond = (cond.indexOf('!') === 0) ? cond.substr(1) : ('!'+cond); ifStack.push([cond, lineNum]); self.log("push " + cond, 4); } } else { if (r[1] == 'else') ifStack.push(0); } break; } } }); // text blobs loop }, /** * Init all the defineInfo structures after reload * The "enabled" field may need an update for newly-loaded dependencies */ initDefineInfo: function() { $.each(define_list, function(e,def_list){ $.each(def_list, function(i, name) { define_info[name] = self.getDefineInfo(name, e); }); }); }, /** * Create fields for defines in a config that have none * Use define_groups data to group fields together */ createFieldsForDefines: function(cindex) { // var n = 0; var grouping = false, group = define_groups[cindex], g_pattern, g_regex, g_subitem, g_section, g_class, fail_list = []; $.each(define_list[cindex], function(i, name) { var section = define_section[name]; if (section != 'hidden' && !$('#'+name).length) { var inf = define_info[name]; if (inf) { var label_text = name, sublabel; // Is this field in a sequence? // Then see if it's the second or after if (grouping) { if (name in group && g_pattern == group[name].pattern && g_section == section) { g_subitem = true; sublabel = g_regex.exec(name)[1]; } else grouping = false; } // Start grouping? if (!grouping && name in group) { grouping = true; g_subitem = false; var grp = group[name]; g_section = section; g_class = 'one_of_' + grp.count; g_pattern = grp.pattern; g_regex = new RegExp(g_pattern, 'i'); label_text = grp.title; sublabel = g_regex.exec(name)[1]; } var $ff = $('#'+section), $newfield, avail = eval(inf.enabled); if (!(grouping && g_subitem)) { var $newlabel = $('<label>',{for:name,class:'added'}).text(label_text.toLabel()); $newlabel.unblock(avail); // if (!(++n % 3)) $newlabel.addClass('newline'); $ff.append($newlabel); } // Multiple fields? if (inf.type == 'list') { for (var i=0; i<inf.size; i++) { var fieldname = i > 0 ? name+'-'+i : name; $newfield = $('<input>',{type:'text',size:6,maxlength:10,id:fieldname,name:fieldname,class:'subitem added',disabled:!avail}).unblock(avail); if (grouping) $newfield.addClass(g_class); $ff.append($newfield); } } else { // Items with options, either toggle or select // TODO: Radio buttons for other values if (inf.options !== undefined) { if (inf.type == 'toggle') { $newfield = $('<input>',{type:'checkbox'}); } else { // Otherwise selectable $newfield = $('<select>'); } // ...Options added when field initialized } else { $newfield = inf.type == 'switch' ? $('<input>',{type:'checkbox'}) : $('<input>',{type:'text',size:10,maxlength:40}); } $newfield.attr({id:name,name:name,class:'added',disabled:!avail}).unblock(avail); if (grouping) { $newfield.addClass(g_class); if (sublabel) { $ff.append($('<label>',{class:'added sublabel',for:name}).text(sublabel.toTitleCase()).unblock(avail)); } } // Add the new field to the form $ff.append($newfield); } } else fail_list.push(name); } }); if (fail_list.length) this.log('Unable to parse:\n' + fail_list.join('\n'), 2); }, /** * Handle a file being dropped on the file field */ handleFileLoad: function(txt, $uploader) { txt += ''; var filename = $uploader.val().replace(/.*[\/\\](.*)$/, '$1'); if ($.inArray(filename, config_file_list)) this.fileLoaded(filename, txt); else this.setMessage("Can't parse '"+filename+"'!"); }, /** * Process a file after it's been successfully loaded */ fileLoaded: function(filename, txt, wait) { this.log("fileLoaded:"+filename,4); var err, cindex; switch(filename) { case boards_file: this.initBoardsFromText(txt); $('#MOTHERBOARD').html('').addOptions(boards_list); if (has_config) this.initField('MOTHERBOARD'); break; case config_file: if (has_boards) { $config.text(txt); total_config_lines = txt.lineCount(); // this.initThermistorList(txt); if (!wait) cindex = 0; has_config = true; if (has_config_adv) { this.activateDownloadAllLink(); if (wait) cindex = 2; } } else { err = boards_file; } break; case config_adv_file: if (has_config) { $config_adv.text(txt); total_config_adv_lines = txt.lineCount(); if (!wait) cindex = 1; has_config_adv = true; if (has_config) { this.activateDownloadAllLink(); if (wait) cindex = 2; } } else { err = config_file; } break; } // When a config file loads defines need update if (cindex != null) this.prepareConfigData(cindex); this.setMessage(err ? 'Please upload a "' + boards_file + '" file first!' : '"' + filename + '" loaded successfully.', err ? 'error' : 'message' ); }, prepareConfigData: function(cindex) { var inds = (cindex == 2) ? [ 0, 1 ] : [ cindex ]; $.each(inds, function(i,e){ // Purge old fields from the form, clear the define list self.purgeAddedFields(e); // Build the define_list self.initDefineList(e); // TODO: Find sequential names and group them // Allows related settings to occupy one line in the form self.refreshDefineGroups(e); }); // Build the dependent defines list this.initDependentGroups(); // all config text // Get define_info for all known defines this.initDefineInfo(); // all config text $.each(inds, function(i,e){ // Create new fields self.createFieldsForDefines(e); // create new fields // Init the fields, set values, etc self.refreshConfigForm(e); self.activateDownloadLink(e); }); }, /** * Add initial enhancements to the existing form */ initConfigForm: function() { // Modify form fields and make the form responsive. // As values change on the form, we could update the // contents of text areas containing the configs, for // example. // while(!$config_adv.text() == null) {} // while(!$config.text() == null) {} // Go through all form items with names $form.find('[name]').each(function() { // Set its id to its name var name = $(this).attr('name'); $(this).attr({id: name}); // Attach its label sibling var $label = $(this).prev('label'); if ($label.length) $label.attr('for',name); }); // Get all 'switchable' class items and add a checkbox // $form.find('.switchable').each(function(){ // $(this).after( // $('<input>',{type:'checkbox',value:'1',class:'enabler added'}) // .prop('checked',true) // .attr('id',this.id + '-switch') // .change(self.handleSwitch) // ); // }); // Add options to the popup menus // $('#SERIAL_PORT').addOptions([0,1,2,3,4,5,6,7]); // $('#BAUDRATE').addOptions([2400,9600,19200,38400,57600,115200,250000]); // $('#EXTRUDERS').addOptions([1,2,3,4]); // $('#POWER_SUPPLY').addOptions({'1':'ATX','2':'Xbox 360'}); // Replace the Serial popup menu with a stepper control /* $('#serial_stepper').jstepper({ min: 0, max: 3, val: $('#SERIAL_PORT').val(), arrowWidth: '18px', arrowHeight: '15px', color: '#FFF', acolor: '#F70', hcolor: '#FF0', id: 'select-me', textStyle: {width:'1.5em',fontSize:'120%',textAlign:'center'}, onChange: function(v) { $('#SERIAL_PORT').val(v).trigger('change'); } }); */ }, /** * Make tabs to switch between fieldsets */ makeTabsForFieldsets: function() { // Make tabs for the fieldsets var $fset = $form.find('fieldset'), $tabs = $('<ul>',{class:'tabs'}), ind = 1; $fset.each(function(){ var tabID = 'TAB'+ind; $(this).addClass(tabID); var $leg = $(this).find('legend'); var $link = $('<a>',{href:'#'+ind,id:tabID}).text($leg.text()); $tabs.append($('<li>').append($link)); $link.click(function(e){ e.preventDefault; var ind = this.id; $tabs.find('.active').removeClass('active'); $(this).addClass('active'); $fset.hide(); $fset.filter('.'+this.id).show(); return false; }); ind++; }); $('#tabs').html('').append($tabs); $('<br>',{class:'clear'}).appendTo('#tabs'); $tabs.find('a:first').trigger('click'); }, /** * Update all fields on the form after loading a configuration */ refreshConfigForm: function(cindex) { /** * Any manually-created form elements will remain * where they are. Unknown defines (currently most) * are added to tabs based on section * * Specific exceptions can be managed by applying * classes to the associated form fields. * Sorting and arrangement can come from an included * Javascript file that describes the configuration * in JSON, or using information added to the config * files. * */ // Refresh the motherboard menu with new options $('#MOTHERBOARD').html('').addOptions(boards_list); // Init all existing fields, getting define info for those that need it // refreshing the options and updating their current values $.each(define_list[cindex], function(i, name) { if ($('#'+name).length) { self.initField(name); self.initFieldValue(name); } else self.log(name + " is not on the page yet.", 2); }); // Set enabled state based on dependencies // this.enableForDependentConditions(); }, /** * Enable / disable fields in dependent groups * based on their dependencies. */ refreshDependentFields: function() { $.each(define_list, function(e,def_list){ $.each(def_list, function(i, name) { var inf = define_info[name]; if (inf && inf.enabled != 'true') { var $elm = $('#'+name), ena = eval(inf.enabled); var isEnabled = (inf.type == 'switch') || self.defineIsEnabled(name); $('#'+name+'-switch').attr('disabled', !ena); $elm.attr('disabled', !(ena && isEnabled)).unblock(ena); $('label[for="'+name+'"]').unblock(ena); } }); }); }, /** * Make a field responsive, tooltip its label(s), add enabler if needed */ initField: function(name) { this.log("initField:"+name,4); var $elm = $('#'+name), inf = define_info[name]; $elm[0].defineInfo = inf; // Create a tooltip on the label if there is one if (inf.tooltip) { // label for the item var $tipme = $('label[for="'+name+'"]'); if ($tipme.length) { $tipme.unbind('mouseenter mouseleave'); $tipme.hover( function() { if ($('#tipson input').prop('checked')) { var pos = $tipme.position(), px = $tipme.width()/2; $tooltip.html(inf.tooltip) .append('<span>') .css({bottom:($tooltip.parent().outerHeight()-pos.top+10)+'px',left:(pos.left+px)+'px'}) .show(); if (hover_timer) { clearTimeout(hover_timer); hover_timer = null; } } }, function() { hover_timer = setTimeout(function(){ hover_timer = null; $tooltip.fadeOut(400); }, 400); } ); } } // Make the element(s) respond to events if (inf.type == 'list') { // Multiple fields need to respond for (var i=0; i<inf.size; i++) { if (i > 0) $elm = $('#'+name+'-'+i); $elm.unbind('input'); $elm.on('input', this.handleChange); } } else { var elmtype = $elm.attr('type'); // Set options on single fields if there are any if (inf.options !== undefined && elmtype === undefined) $elm.html('').addOptions(inf.options); $elm.unbind('input change'); $elm.on(elmtype == 'text' ? 'input' : 'change', this.handleChange); } // Add an enabler checkbox if it needs one if (inf.switchable && $('#'+name+'-switch').length == 0) { // $elm = the last element added $elm.after( $('<input>',{type:'checkbox',value:'1',class:'enabler added'}) .prop('checked',self.defineIsEnabled(name)) .attr({id: name+'-switch'}) .change(self.handleSwitch) ); } }, /** * Handle any value field being changed * this = the field */ handleChange: function() { self.updateDefineFromField(this.id); self.refreshDependentFields(); }, /** * Handle a switch checkbox being changed * this = the switch checkbox */ handleSwitch: function() { var $elm = $(this), name = $elm[0].id.replace(/-.+/,''), inf = define_info[name], on = $elm.prop('checked') || false; self.setDefineEnabled(name, on); if (inf.type == 'list') { // Multiple fields? for (var i=0; i<inf.size; i++) { $('#'+name+(i?'-'+i:'')).attr('disabled', !on); } } else { $elm.prev().attr('disabled', !on); } }, /** * Get the current value of a #define */ defineValue: function(name) { this.log('defineValue:'+name,4); var inf = define_info[name]; if (inf == null) return 'n/a'; var r = inf.regex.exec(inf.line), val = r[inf.val_i]; this.log(r,2); return (inf.type == 'switch') ? (val === undefined || val.trim() != '//') : val; }, /** * Get the current enabled state of a #define */ defineIsEnabled: function(name) { this.log('defineIsEnabled:'+name,4); var inf = define_info[name]; if (inf == null) return false; var r = inf.regex.exec(inf.line); this.log(r,2); var on = r[1] != null ? r[1].trim() != '//' : true; this.log(name + ' = ' + on, 2); return on; }, /** * Set a #define enabled or disabled by altering the config text */ setDefineEnabled: function(name, val) { this.log('setDefineEnabled:'+name,4); var inf = define_info[name]; if (inf) { var slash = val ? '' : '//'; var newline = inf.line .replace(/^([ \t]*)(\/\/)([ \t]*)/, '$1$3') // remove slashes .replace(inf.pre+inf.define, inf.pre+slash+inf.define); // add them back this.setDefineLine(name, newline); } }, /** * Update a #define (from the form) by altering the config text */ updateDefineFromField: function(name) { this.log('updateDefineFromField:'+name,4); // Drop the suffix on sub-fields name = name.replace(/-\d+$/, ''); var $elm = $('#'+name), inf = define_info[name]; if (inf == null) return; var isCheck = $elm.attr('type') == 'checkbox', val = isCheck ? $elm.prop('checked') : $elm.val().trim(); var newline; switch(inf.type) { case 'switch': var slash = val ? '' : '//'; newline = inf.line.replace(inf.repl, '$1'+slash+'$3'); break; case 'list': case 'quoted': case 'plain': if (isCheck) this.setMessage(name + ' should not be a checkbox!', 'error'); case 'toggle': if (isCheck) { val = val ? inf.options[1] : inf.options[0]; } else { if (inf.type == 'list') for (var i=1; i<inf.size; i++) val += ', ' + $('#'+name+'-'+i).val().trim(); } newline = inf.line.replace(inf.repl, '$1'+(''+val).replace('$','\\$')+'$3'); break; } this.setDefineLine(name, newline); }, /** * Set the define's line in the text to a new line, * then update, highlight, and scroll to the line */ setDefineLine: function(name, newline) { this.log('setDefineLine:'+name+'\n'+newline,4); var inf = define_info[name]; var $c = $(inf.field), txt = $c.text(); var hilite_token = '[HIGHLIGHTER-TOKEN]'; txt = txt.replaceLine(inf.lineNum, hilite_token + newline); // for override line and lineNum would be changed inf.line = newline; // Convert txt into HTML before storing var html = txt.toHTML().replace(hilite_token, '<span></span>'); // Set the final text including the highlighter $c.html(html); // Scroll to reveal the define if ($c.is(':visible')) this.scrollToDefine(name); }, /** * Scroll a pre box to reveal a #define */ scrollToDefine: function(name, always) { this.log('scrollToDefine:'+name,4); var inf = define_info[name], $c = $(inf.field); // Scroll to the altered text if it isn't visible var halfHeight = $c.height()/2, scrollHeight = $c.prop('scrollHeight'), lineHeight = scrollHeight/[total_config_lines, total_config_adv_lines][inf.cindex], textScrollY = (inf.lineNum * lineHeight - halfHeight).limit(0, scrollHeight - 1); if (always || Math.abs($c.prop('scrollTop') - textScrollY) > halfHeight) { $c.find('span').height(lineHeight); $c.animate({ scrollTop: textScrollY }); } }, /** * Set a form field to the current #define value in the config text */ initFieldValue: function(name) { var $elm = $('#'+name), inf = define_info[name], val = this.defineValue(name); this.log('initFieldValue:' + name + ' to ' + val, 2); // If the item is switchable then set enabled state too var $cb = $('#'+name+'-switch'), avail = eval(inf.enabled), on = true; if ($cb.length) { on = self.defineIsEnabled(name); $cb.prop('checked', on); } if (inf.type == 'list') { $.each(val.split(','),function(i,v){ var $e = i > 0 ? $('#'+name+'-'+i) : $elm; $e.val(v.trim()); $e.attr('disabled', !(on && avail)).unblock(avail); }); } else { if (inf.type == 'toggle') val = val == inf.options[1]; $elm.attr('type') == 'checkbox' ? $elm.prop('checked', val) : $elm.val(''+val); $elm.attr('disabled', !(on && avail)).unblock(avail); // enable/disable the form field (could also dim it) } $('label[for="'+name+'"]').unblock(avail); }, /** * Purge added fields and all their define info */ purgeAddedFields: function(cindex) { $.each(define_list[cindex], function(i, name){ $('#'+name + ",[id^='"+name+"-'],label[for='"+name+"']").filter('.added').remove(); }); define_list[cindex] = []; }, /** * Get information about a #define from configuration file text: * * - Pre-examine the #define for its prefix, value position, suffix, etc. * - Construct RegExp's for the #define to find and replace values. * - Store the existing #define line as a fast key to finding it later. * - Determine the line number of the #define * - Gather nearby comments to be used as tooltips. * - Look for JSON in nearby comments for use as select options. * * define_info[name] * .type type of define: switch, list, quoted, plain, or toggle * .size the number of items in a "list" type * .options select options, if any * .cindex config index * .field pre containing the config text (config_list[cindex][0]) * .line the full line from the config text * .pre any text preceding #define * .define the "#define NAME" text (may have leading spaces) * .post the text following the "#define NAME val" part * .regex regexp to get the value from the line * .repl regexp to replace the value in the line * .val_i the value's index in the .regex result */ getDefineInfo: function(name, cindex) { if (cindex === undefined) cindex = 0; this.log('getDefineInfo:'+name,4); var $c = config_list[cindex], txt = $c.text(), info = { type:0, cindex:cindex, field:$c[0], val_i:2 }, post; // a switch line with no value var find = new RegExp('^([ \\t]*//)?([ \\t]*#define[ \\t]+' + name + ')([ \\t]*(/[*/].*)?)$', 'm'), r = find.exec(txt); if (r !== null) { post = r[3] == null ? '' : r[3]; $.extend(info, { type: 'switch', val_i: 1, regex: new RegExp('([ \\t]*//)?([ \\t]*' + r[2].regEsc() + post.regEsc() + ')', 'm'), repl: new RegExp('([ \\t]*)(\/\/)?([ \\t]*' + r[2].regEsc() + post.regEsc() + ')', 'm') }); } else { // a define with curly braces find = new RegExp('^(.*//)?(.*#define[ \\t]+' + name + '[ \\t]+)(\{[^\}]*\})([ \\t]*(/[*/].*)?)$', 'm'); r = find.exec(txt); if (r !== null) { post = r[4] == null ? '' : r[4]; $.extend(info, { type: 'list', size: r[3].split(',').length, regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '\{([^\}]*)\}' + post.regEsc(), 'm'), repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '\{)[^\}]*(\}' + post.regEsc() + ')', 'm') }); } else { // a define with quotes find = new RegExp('^(.*//)?(.*#define[ \\t]+' + name + '[ \\t]+)("[^"]*")([ \\t]*(/[*/].*)?)$', 'm'); r = find.exec(txt); if (r !== null) { post = r[4] == null ? '' : r[4]; $.extend(info, { type: 'quoted', regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '"([^"]*)"' + post.regEsc(), 'm'), repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '")[^"]*("' + post.regEsc() + ')', 'm') }); } else { // a define with no quotes find = new RegExp('^([ \\t]*//)?([ \\t]*#define[ \\t]+' + name + '[ \\t]+)(\\S*)([ \\t]*(/[*/].*)?)$', 'm'); r = find.exec(txt); if (r !== null) { post = r[4] == null ? '' : r[4]; $.extend(info, { type: 'plain', regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '(\\S*)' + post.regEsc(), 'm'), repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + ')\\S*(' + post.regEsc() + ')', 'm') }); if (r[3].match(/false|true/)) { info.type = 'toggle'; info.options = ['false','true']; } } } } } // Success? if (info.type) { $.extend(info, { line: r[0], pre: r[1] == null ? '' : r[1].replace('//',''), define: r[2], post: post }); // Get the end-of-line comment, if there is one var tooltip = '', eoltip = ''; find = new RegExp('.*#define[ \\t].*/[/*]+[ \\t]*(.*)'); if (info.line.search(find) >= 0) eoltip = tooltip = info.line.replace(find, '$1'); // Get all the comments immediately before the item, also include #define lines preceding it var s; // find = new RegExp('(([ \\t]*(//|#)[^\n]+\n){1,4})' + info.line.regEsc(), 'g'); find = new RegExp('(([ \\t]*//+[^\n]+\n)+([ \\t]*(//)?#define[^\n]+\n)*)' + info.line.regEsc(), 'g'); if (r = find.exec(txt)) { var temp = [], tips = []; // Find each line in forward order, store in reverse find = new RegExp('^[ \\t]*//+[ \\t]*(.*)[ \\t]*$', 'gm'); while((s = find.exec(r[1])) !== null) temp.unshift(s[1]); console.log(name+":\n"+temp.join('\n')); // Go through the reversed lines and add comment lines on $.each(temp, function(i,v) { // @ annotation breaks the comment chain if (v.match(/^[ \\t]*\/\/+[ \\t]*@/)) return false; // A #define breaks the chain, after a good tip if (v.match(/^[ \\t]*(\/\/+)?[ \\t]*#define/)) return (tips.length < 1); // Skip unwanted lines if (v.match(/^[ \\t]*(={5,}|#define[ \\t]+.*)/g)) return true; tips.unshift(v); }); // Build the final tooltip, extract embedded options $.each(tips, function(i,tip) { // if (tip.match(/^#define[ \\t]/) != null) tooltip = eoltip; // JSON data? Save as select options if (!info.options && tip.match(/:[\[{]/) != null) { // TODO // :[1-6] = value limits var o; eval('o=' + tip.substr(1)); info.options = o; if (Object.prototype.toString.call(o) == "[object Array]" && o.length == 2 && !eval(''+o[0])) info.type = 'toggle'; } else { // Other lines added to the tooltip tooltip += ' ' + tip + '\n'; } }); // Add .tooltip and .lineNum properties to the info find = new RegExp('^'+name); // Strip the name from the tooltip var lineNum = this.getLineNumberOfText(info.line, txt); // See if this define is enabled conditionally var enable_cond = ''; $.each(dependent_groups, function(cond,dat){ $.each(dat, function(i,o){ if (o.cindex == cindex && lineNum > o.start && lineNum < o.end) { if (enable_cond != '') enable_cond += ' && '; enable_cond += '(' + cond + ')'; } }); }); $.extend(info, { tooltip: '<strong>'+name+'</strong> '+tooltip.trim().replace(find,'').toHTML(), lineNum: lineNum, switchable: (info.type != 'switch' && info.line.match(/^[ \t]*\/\//)) || false, // Disabled? Mark as "switchable" enabled: enable_cond ? enable_cond : 'true' }); } // found comments } // if info.type else info = null; this.log(info, 2); return info; }, /** * Count the number of lines before a match, return -1 on fail */ getLineNumberOfText: function(line, txt) { var pos = txt.indexOf(line); return (pos < 0) ? pos : txt.lineCount(pos); }, /** * Add a temporary message to the page */ setMessage: function(msg,type) { if (msg) { if (type === undefined) type = 'message'; var $err = $('<p class="'+type+'">'+msg+'<span>x</span></p>').appendTo($msgbox), err = $err[0]; var baseColor = $err.css('color').replace(/rgba?\(([^),]+,[^),]+,[^),]+).*/, 'rgba($1,'); err.pulse_offset = (pulse_offset += 200); err.startTime = Date.now() + pulse_offset; err.pulser = setInterval(function(){ var pulse_time = Date.now() + err.pulse_offset; var opac = 0.5+Math.sin(pulse_time/200)*0.4; $err.css({color:baseColor+(opac)+')'}); if (pulse_time - err.startTime > 2500 && opac > 0.899) { clearInterval(err.pulser); } }, 50); $err.click(function(e) { $(this).remove(); self.adjustFormLayout(); return false; }).css({cursor:'pointer'}); } else { $msgbox.find('p.error, p.warning').each(function() { if (this.pulser !== undefined && this.pulser) clearInterval(this.pulser); $(this).remove(); }); } self.adjustFormLayout(); }, adjustFormLayout: function() { var wtop = $(window).scrollTop(), ctop = $cfg.offset().top, thresh = $form.offset().top+100; if (ctop < thresh) { var maxhi = $form.height(); // pad plus heights of config boxes can't be more than this var pad = wtop > ctop ? wtop-ctop : 0; // pad the top box to stay in view var innerpad = Math.ceil($cfg.height() - $cfg.find('pre').height()); // height to use for the inner boxes var hi = ($(window).height() - ($cfg.offset().top - pad) + wtop - innerpad)/2; if (hi < 200) hi = 200; $cfg.css({ paddingTop: pad }); var $pre = $('pre.config'); $pre.css({ height: Math.floor(hi) - $pre.position().top }); } else { $cfg.css({ paddingTop: wtop > ctop ? wtop-ctop : 0, height: '' }); } }, setRequestError: function(stat, path) { self.setMessage('Error '+stat+' – ' + path.replace(/^(https:\/\/[^\/]+\/)?.+(\/[^\/]+)$/, '$1...$2'), 'error'); }, log: function(o,l) { if (l === undefined) l = 0; if (this.logging>=l*1) console.log(o); }, logOnce: function(o) { if (o.didLogThisObject === undefined) { this.log(o); o.didLogThisObject = true; } }, EOF: null }; })(); // Typically the app would be in its own file, but this would be here window.configuratorApp.init(); });