Commit bee15b69 authored by Remon Huijts's avatar Remon Huijts
Browse files

Apply JSBeautify code formatting standard

parent 619739e9
......@@ -3,15 +3,14 @@ function GraphEditorXBlock(runtime, element, data) {
// can only be used if we know that all keys are defined in the language
// specific file) mxResources.loadDefaultBundle = false;
var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage);
//|| mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
//|| mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
// Add indie resources.
mxResources.add(mxClient.basePath + '/resources/icons');
// Fixes possible asynchronous requests
mxUtils.getAll([bundle, [data.resource_url]], function(xhr)
{
mxUtils.getAll([bundle, [data.resource_url]], function(xhr) {
// Adds bundle text to resources
mxResources.parse(xhr[0].getText());
......@@ -23,8 +22,7 @@ function GraphEditorXBlock(runtime, element, data) {
var read_only = (data.read_only == 'true');
// Main
$(element).find('.mx-graph-editor').each(function(i, editorDiv)
{
$(element).find('.mx-graph-editor').each(function(i, editorDiv) {
// Add the Totem icons to the StencilRegistry
mxStencilRegistry.loadStencilSet(STENCIL_PATH + '/totem-security.indie',
null);
......@@ -55,15 +53,18 @@ function GraphEditorXBlock(runtime, element, data) {
// This makes edX update the graph in the course preview
// when saving succeeded.
var callback = function() {
runtime.notify('save', {state: 'end'});
runtime.notify('save', {
state: 'end'
});
};
runtime.notify('save', {state: 'start'});
runtime.notify('save', {
state: 'start'
});
editorUi.saveFile(false, callback);
});
}
});
}, function()
{
}, function() {
document.body.innerHTML =
'<center style="margin-top:10%;">Error loading resource files. ' +
'Please check browser console.</center>';
......@@ -82,8 +83,7 @@ function GraphEditorXBlock(runtime, element, data) {
* graph - graph object to operate on
* callback - callback function to run after picking cell
*/
function pickCell(graph, callback)
{
function pickCell(graph, callback) {
var listener = {
mouseDown: function(sender, evt) {},
mouseMove: function(sender, evt) {},
......@@ -124,8 +124,7 @@ function pickCell(graph, callback)
* forceDialog - ignored parameter from original implementation
* callback - function that gets called on success (optional)
*/
EditorUi.prototype.saveFile = function(forceDialog, callback)
{
EditorUi.prototype.saveFile = function(forceDialog, callback) {
var ui = this;
$.ajax({
type: 'POST',
......@@ -136,7 +135,7 @@ EditorUi.prototype.saveFile = function(forceDialog, callback)
success: function(data) {
// Disable the "Are you sure you want to leave the page?" dialog
ui.editor.setModified(false);
if (typeof callback === "function") {
callback();
}
......@@ -159,26 +158,19 @@ EditorUi.prototype.saveFile = function(forceDialog, callback)
*
* @return {Menus} the edited menu
*/
EditorUi.prototype.createMenus = function()
{
EditorUi.prototype.createMenus = function() {
var menus = new Menus(this);
menus.put('file',
new Menu(mxUtils.bind(menus, function(menu, parent)
{
menus.addMenuItems(
menu,
['save', '-', 'pageSetup', 'print'], parent);
}
)
)
new Menu(mxUtils.bind(menus, function(menu, parent) {
menus.addMenuItems(
menu,
['save', '-', 'pageSetup', 'print'], parent);
}))
);
menus.put('help',
new Menu(mxUtils.bind(menus, function(menu, parent)
{
this.addMenuItems(menu, ['about']);
}
)
)
new Menu(mxUtils.bind(menus, function(menu, parent) {
this.addMenuItems(menu, ['about']);
}))
);
return menus;
};
......@@ -207,28 +199,28 @@ mxGraph.prototype.pageFormat = new mxRectangle(0, 0, 760, 740);
*/
Sidebar.prototype.init = function() {
this.addSearchPalette(true);
var title = mxResources.get('totem-security');
var style = ';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2';
var stencilFile = STENCIL_PATH + '/totem-security.xml';
this.addStencilPalette('totem-security', title, stencilFile, style);
title = mxResources.get('totem-security-line');
stencilFile = STENCIL_PATH + '/totem-security-line.xml';
this.addStencilPalette('totem-security-line', title, stencilFile, style);
this.addGeneralPalette(false);
this.addMiscPalette(false);
this.addAdvancedPalette(false);
this.addBasicPalette(STENCIL_PATH);
title = mxResources.get('arrows');
stencilFile = STENCIL_PATH + '/arrows.xml';
this.addStencilPalette('arrows', title, stencilFile, style);
this.addUmlPalette(false);
this.addBpmnPalette(STENCIL_PATH, false);
stencilFile = STENCIL_PATH + '/flowchart.xml';
this.addStencilPalette('flowchart', 'Flowchart', stencilFile, style);
};
......@@ -255,9 +247,9 @@ Sidebar.prototype.addPaletteFunctions = function(id, title, expanded, fns) {
* prevent that call, without modifying the library code.
*/
var oldHTMLFocus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function () {
HTMLElement.prototype.focus = function() {
// Only prevent execution for this specific div:
if (this.className !== 'geDiagramContainer') {
oldHTMLFocus.apply(this, arguments);
}
};
\ No newline at end of file
oldHTMLFocus.apply(this, arguments);
}
};
......@@ -12,8 +12,7 @@ mxStencil.prototype.old_evaluateAttribute = mxStencil.prototype.evaluateAttribut
* This will make sure that all Stencil XMLs that contain relative paths will
* serach for images in the `STENCIL_PATH`.
*/
mxStencil.prototype.evaluateAttribute = function(node, attribute, shape)
{
mxStencil.prototype.evaluateAttribute = function(node, attribute, shape) {
var result = this.old_evaluateAttribute(node, attribute, shape);
// Check if the src is some kind of protocol (say https:// for example) or
......@@ -22,7 +21,7 @@ mxStencil.prototype.evaluateAttribute = function(node, attribute, shape)
// Prefix with STENCIL_PATH if the attribute was src and the path was
// relative
if (attribute == 'src' && ! absoluteRegex.test(result))
if (attribute == 'src' && !absoluteRegex.test(result))
result = STENCIL_PATH + '/' + result;
return result;
......@@ -36,8 +35,7 @@ ArrangePanel.prototype.old_init = ArrangePanel.prototype.init;
/**
* Override init function to add an interaction panel
*/
ArrangePanel.prototype.init = function()
{
ArrangePanel.prototype.init = function() {
this.old_init();
if (this.editorUi.editor.graph.getSelectionCount() == 1) {
this.addInteractionPanel();
......@@ -54,22 +52,21 @@ ArrangePanel.prototype.addNoInteractionPanel = function() {
var title = this.createTitle(mxResources.get('no-interaction'));
div.appendChild(title);
var p = document.createElement('p');
mxUtils.write(p, mxResources.get('why-no-interaction'));
p.style.width = title.style.width;
p.style.whiteSpace = 'normal';
p.style.textAlign = title.style.textAlign;
div.appendChild(p);
this.container.appendChild(div);
};
/**
* Add a panel that defines an interaction.
*/
ArrangePanel.prototype.addInteractionPanel = function()
{
ArrangePanel.prototype.addInteractionPanel = function() {
var div = this.createPanel();
var title = this.createTitle('Interaction');
......@@ -80,8 +77,7 @@ ArrangePanel.prototype.addInteractionPanel = function()
var events = {};
for (var i = 0; i < this.eventTypes.length; i++)
{
for (var i = 0; i < this.eventTypes.length; i++) {
events[this.eventTypes[i]] = new EventRules(this.eventTypes[i], this);
div = events[this.eventTypes[i]].render(div);
}
......@@ -102,8 +98,7 @@ ArrangePanel.prototype.addInteractionPanel = function()
* We parse the rules from a corresponding attribute on an element; this is the
* reason that each interaction can only be defined on one single element/group.
*/
EventRules = function(eventName, panel)
{
EventRules = function(eventName, panel) {
this.rules = [];
this.eventName = eventName;
this.parentPanel = panel;
......@@ -115,23 +110,20 @@ EventRules = function(eventName, panel)
var match = false;
var oldTrigger = false; // treat existing hover rules as click rules
for (var i = 0; i < attrs.length; i++)
{
for (var i = 0; i < attrs.length; i++) {
match = 'on' + this.eventName == attrs[i].nodeName;
oldTrigger = this.eventName == 'click' && attrs[i].nodeName == 'onhover';
if (match || oldTrigger) {
rules = JSON.parse(attrs[i].nodeValue);
if (!rules)
{
if (!rules) {
debug('Warning: Could not parse these rules:');
debug(rules);
continue;
}
rules.forEach(function(rule)
{
var ruleObj = new Rule(thisEventRules, rule);
thisEventRules.rules.push(ruleObj);
});
rules.forEach(function(rule) {
var ruleObj = new Rule(thisEventRules, rule);
thisEventRules.rules.push(ruleObj);
});
}
}
};
......@@ -139,13 +131,12 @@ EventRules = function(eventName, panel)
/**
* Render all the rules that are currently in action and under that a button to
* add new rules.
*
*
* By changing any of these rules, the event will be saved and re-rendered. This
* re-rendering is caused by the `this.graph.getModel().setValue()` function,
* which always re-renders the panels on the right of the screen.
*/
EventRules.prototype.render = function(div)
{
EventRules.prototype.render = function(div) {
/* We no longer have multiple triggers, so there is no need for a title
var title = this.parentPanel.createTitle('On ' + this.eventName);
title.style.paddingTop = '10px';
......@@ -154,7 +145,7 @@ EventRules.prototype.render = function(div)
*/
var thisEventRules = this;
// Render the rules that are already in place
this.rules.forEach(function(rule) {
thisEventRules.rulesDiv = rule.render(thisEventRules.rulesDiv);
......@@ -179,11 +170,9 @@ EventRules.prototype.render = function(div)
* Get the "value" that contains all the attributes for a cell. The code to
* create this if it's not a node is copied from grapheditor code.
*/
EventRules.prototype.getCellValue = function()
{
EventRules.prototype.getCellValue = function() {
var value = this.graph.getModel().getValue(this.cell);
if (!mxUtils.isNode(value))
{
if (!mxUtils.isNode(value)) {
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', value || '');
......@@ -202,12 +191,10 @@ EventRules.prototype.getCellValue = function()
* existing attributes, you **will** break currently existing interactive
* graphs.
*/
EventRules.prototype.save = function()
{
EventRules.prototype.save = function() {
var value = [];
// Loop through rules
for (var i = 0; i < this.rules.length; i++)
{
for (var i = 0; i < this.rules.length; i++) {
value.push(this.rules[i].attributes);
}
var cellValue = this.getCellValue();
......@@ -226,8 +213,7 @@ EventRules.prototype.save = function()
*
* rule - A `Rule` that should be removed
*/
EventRules.prototype.removeRule = function(rule)
{
EventRules.prototype.removeRule = function(rule) {
var index = -1;
this.rules.forEach(function(r, i) {
if (r === rule)
......@@ -252,16 +238,14 @@ EventRules.prototype.removeRule = function(rule)
* Note that you should not change existing attributes, because
* that will risk breaking existing interactive graphs.
*/
Rule = function(parentEventRules, attributes)
{
Rule = function(parentEventRules, attributes) {
this.parentEventRules = parentEventRules;
// default action:
if (typeof(attributes) == 'undefined')
{
this.attributes = {'action': 'highlight'};
}
else
{
if (typeof(attributes) == 'undefined') {
this.attributes = {
'action': 'highlight'
};
} else {
this.attributes = attributes;
}
this.ruleDiv = document.createElement('div');
......@@ -270,8 +254,7 @@ Rule = function(parentEventRules, attributes)
/**
* Style the ruleDiv
*/
Rule.prototype.addStyle = function()
{
Rule.prototype.addStyle = function() {
this.ruleDiv.style.border = '1px solid gray';
this.ruleDiv.style.padding = '3px';
this.ruleDiv.style.margin = '3px';
......@@ -286,8 +269,7 @@ Rule.prototype.addStyle = function()
*
* div - The div that should contain this rule's HTML.
*/
Rule.prototype.render = function(div)
{
Rule.prototype.render = function(div) {
this.addStyle();
// Add button to remove this rule to the ruleDiv
this.ruleDiv = this.addRemoveButton();
......@@ -301,8 +283,7 @@ Rule.prototype.render = function(div)
var thisRule = this;
// Add action-specific settings
switch (this.attributes['action'])
{
switch (this.attributes['action']) {
case 'highlight':
var colourTextField = new RuleSettingColourInput(
thisRule,
......@@ -352,9 +333,10 @@ Rule.prototype.render = function(div)
* Currently only works for 1 cell, but the data format is future proof for
* actions that work for several cells.
*/
Rule.prototype.setTargetCell = function(id)
{
this.setAttribute('targets', [{'cell_id': id}]);
Rule.prototype.setTargetCell = function(id) {
this.setAttribute('targets', [{
'cell_id': id
}]);
};
/**
......@@ -365,8 +347,7 @@ Rule.prototype.setTargetCell = function(id)
*
* ruleDiv - The div that displays the interaction
*/
Rule.prototype.addRemoveButton = function()
{
Rule.prototype.addRemoveButton = function() {
var removeAttr = document.createElement('a');
var img = mxUtils.createImage(Dialog.prototype.closeImage);
......@@ -408,8 +389,7 @@ Rule.prototype.addRemoveButton = function()
* existing interactive graphs.
* value - value of the attribute (you *can* change this of course)
*/
Rule.prototype.setAttribute = function(attributeName, value)
{
Rule.prototype.setAttribute = function(attributeName, value) {
this.attributes[attributeName] = value;
this.parentEventRules.save();
};
......@@ -429,8 +409,7 @@ Rule.prototype.setAttribute = function(attributeName, value)
* parentRule - Rule object under which this setting falls
* name - Name of this setting, used as label text
*/
RuleSetting = function(parentRule, name)
{
RuleSetting = function(parentRule, name) {
this.settingName = name;
this.parentRule = parentRule;
......@@ -454,8 +433,7 @@ RuleSetting = function(parentRule, name)
* You need to set `this.setting` in the constructor of your Setting
* implementation before this function is called.
*/
RuleSetting.prototype.addStyle = function()
{
RuleSetting.prototype.addStyle = function() {
this.settingDiv.style.display = 'inline-block';
this.settingDiv.style.width = '100%';
......@@ -473,8 +451,7 @@ RuleSetting.prototype.addStyle = function()
*
* div - The div that should contain this setting.
*/
RuleSetting.prototype.render = function(div)
{
RuleSetting.prototype.render = function(div) {
this.addStyle();
this.label.appendChild(document.createTextNode(this.settingName + ': '));
this.settingDiv.appendChild(this.label);
......@@ -486,8 +463,7 @@ RuleSetting.prototype.render = function(div)
/**
* Add the setting's dom element to the containing `settingDiv`.
*/
RuleSetting.prototype.renderSettingValue = function()
{
RuleSetting.prototype.renderSettingValue = function() {
this.settingDiv.appendChild(this.setting);
return this.settingDiv;
};
......@@ -495,8 +471,7 @@ RuleSetting.prototype.renderSettingValue = function()
/**
* Save the value of this setting (triggers event save & re-render)
*/
RuleSetting.prototype.saveSetting = function()
{
RuleSetting.prototype.saveSetting = function() {
this.parentRule.setAttribute(this.settingName, this.setting.value);
};
......@@ -508,8 +483,7 @@ RuleSetting.prototype.saveSetting = function()
* options - options to add to selection dropdown
* selected - (optional) currently selected value or default
*/
RuleSettingSelect = function(parentRule, name, options, selected)
{
RuleSettingSelect = function(parentRule, name, options, selected) {
RuleSetting.apply(this, arguments);
this.options = options;
this.selected = selected;
......@@ -523,20 +497,17 @@ RuleSettingSelect.prototype.constructor = RuleSettingSelect;
* Render the select input. Adds all options strings `this.options` as option
* elements to `this.setting` and returns that.
*/
RuleSettingSelect.prototype.renderSettingValue = function()
{
RuleSettingSelect.prototype.renderSettingValue = function() {
var thisRuleSettingSelect = this;
// On change, save the new values
mxEvent.addListener(this.setting, 'change', function() {
thisRuleSettingSelect.saveSetting();
});
for (var i = 0; i < this.options.length; i++)
{
for (var i = 0; i < this.options.length; i++) {
var option = document.createElement('option');
option.setAttribute('value', this.options[i]);
if (this.options[i] == this.selected)
{
if (this.options[i] == this.selected) {
option.setAttribute('selected', 'selected');
}
mxUtils.write(option, this.options[i]);
......@@ -557,30 +528,29 @@ RuleSettingSelect.prototype.renderSettingValue = function()
* At the moment it is only possible to choose 1 target cell per rule, but the
* data structure supports adding more than one so we don't have to change that
* some time in the future.
*
*
* If the target has children, it is currently considered to be a group and the
* interaction will be applied to each of the children, not the parent.
* Otherwise we get weird things like a highlight around the bounding box of
* of the whole group and not around its children.
*/
RuleSettingSelectCell =
function(parentRule, name, buttonName, callback, targets)
{
RuleSetting.apply(this, arguments);
this.buttonName = buttonName;
this.callback = callback;
this.targets = [];
var buttonText = buttonName;
if (typeof(targets) != 'undefined' && targets.length > 0) {
this.targets = targets;
// For now, we assume there's only 1 target per SelectCell:
buttonText = this.targets[0].cell_id + ' (Pick another)';
}
function(parentRule, name, buttonName, callback, targets) {
RuleSetting.apply(this, arguments);
this.buttonName = buttonName;
this.callback = callback;
this.targets = [];
var buttonText = buttonName;
if (typeof(targets) != 'undefined' && targets.length > 0) {
this.targets = targets;
// For now, we assume there's only 1 target per SelectCell:
buttonText = this.targets[0].cell_id + ' (Pick another)';
}
this.setting = mxUtils.button(buttonText, this.callback);
};
this.setting = mxUtils.button(buttonText, this.callback);
};
RuleSettingSelectCell.prototype = Object.create(RuleSetting.prototype);
RuleSettingSelectCell.prototype.constructor = RuleSettingSelectCell;
......@@ -592,8 +562,7 @@ RuleSettingSelectCell.prototype.constructor = RuleSettingSelectCell;
*
* value - current value
*/
RuleSettingTextField = function(parentRule, name, value)
{
RuleSettingTextField = function(parentRule, name, value) {
RuleSetting.apply(this, arguments);
this.setting = document.createElement('input');
this.setting.type = 'text';
......@@ -601,8 +570,7 @@ RuleSettingTextField = function(parentRule, name, value)
// Override normal width because text boxes have padding by default
this.settingWidth = 96;
if (typeof(value) !== 'undefined')
{
if (typeof(value) !== 'undefined') {
this.setting.value = value;
}
var thisRuleSettingTextField = this;
......@@ -622,8 +590,7 @@ RuleSettingTextField.prototype.constructor = RuleSettingTextField;
*
* value - current value in hex notation
*/
RuleSettingColourInput = function(parentRule, name, value)
{
RuleSettingColourInput = function(parentRule, name, value) {
RuleSetting.apply(this, arguments);
this.setting = document.createElement('input');
this.setting.type = 'color';
......@@ -647,8 +614,7 @@ RuleSettingColourInput.prototype.constructor = RuleSettingColourInput;
// style of the textarea. Otherwise, when you doubleclick an element to add text
// to it, the textarea shows up at the top left corner of the editor.
var mxCellEditorResize = mxCellEditor.prototype.resize;
mxCellEditor.prototype.resize = function()
{
mxCellEditor.prototype.resize = function() {
if (this.textarea != null) {
this.textarea.style.position = "absolute";
}
......
......@@ -32,13 +32,13 @@ var interactions = {
// Check if this cell has a getAttribute function; if not it's not
// relevant here.
if (typeof cell.value.getAttribute != 'function') {
return;
return;
}
// Get the node and all nodes of the children of cell:
var triggerNodes = interactions.cellNodes(graph, cell, true);
var handlers = [];
var actionString = cell.value.getAttribute('onclick');
if (actionString != null && actionString != '') {
handlers = interactions.createEventHandlers(graph, actionString);
......@@ -49,7 +49,7 @@ var interactions = {
interactions.installHover(handler, graph, triggerNodes);
});
}
actionString = cell.value.getAttribute('onhover');
if (actionString != null && actionString != '') {
handlers = interactions.createEventHandlers(graph, actionString);
......@@ -156,8 +156,7 @@ var interactions = {
// FALSE before and after the event. For 'hide' it is the
// other way around.
var visibleDuringEvent = rule.action === 'popup';
if (Array.isArray(rule.targets))
{
if (Array.isArray(rule.targets)) {
rule.targets.forEach(function(target) {
var cells = interactions.getTargetCells(graph, target);