CyberChef/docs/views_html_RecipeWaiter.js.html
2016-11-28 11:01:54 +00:00

646 lines
20 KiB
HTML
Executable file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CyberChef Source: views/html/RecipeWaiter.js</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img class="branding-logo" src="../build/prod/images/cyberchef-32x32.png"
alt="logo"/>CyberChef</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="FlowControl.html">FlowControl</a></li><li><a href="Utils.html">Utils</a></li><li><a href="Base.html">Base</a></li><li><a href="Base64.html">Base64</a></li><li><a href="BitwiseOp.html">BitwiseOp</a></li><li><a href="ByteRepr.html">ByteRepr</a></li><li><a href="CharEnc.html">CharEnc</a></li><li><a href="Checksum.html">Checksum</a></li><li><a href="Cipher.html">Cipher</a></li><li><a href="Code.html">Code</a></li><li><a href="Compress.html">Compress</a></li><li><a href="Convert.html">Convert</a></li><li><a href="DateTime.html">DateTime</a></li><li><a href="Endian.html">Endian</a></li><li><a href="Entropy.html">Entropy</a></li><li><a href="Extract.html">Extract</a></li><li><a href="FileType.html">FileType</a></li><li><a href="HTML.html">HTML</a></li><li><a href="HTTP.html">HTTP</a></li><li><a href="Hash.html">Hash</a></li><li><a href="Hexdump.html">Hexdump</a></li><li><a href="IP.html">IP</a></li><li><a href="JS.html">JS</a></li><li><a href="MAC.html">MAC</a></li><li><a href="Numberwang.html">Numberwang</a></li><li><a href="OS.html">OS</a></li><li><a href="PublicKey.html">PublicKey</a></li><li><a href="Punycode.html">Punycode</a></li><li><a href="QuotedPrintable.html">QuotedPrintable</a></li><li><a href="Rotate.html">Rotate</a></li><li><a href="SeqUtils.html">SeqUtils</a></li><li><a href="StrUtils.html">StrUtils</a></li><li><a href="Tidy.html">Tidy</a></li><li><a href="URL_.html">URL_</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Unicode.html">Unicode</a></li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="Chef.html">Chef</a></li><li><a href="Dish.html">Dish</a></li><li><a href="Ingredient.html">Ingredient</a></li><li><a href="Operation.html">Operation</a></li><li><a href="Recipe.html">Recipe</a></li><li><a href="ControlsWaiter.html">ControlsWaiter</a></li><li><a href="HTMLApp.html">HTMLApp</a></li><li><a href="HTMLCategory.html">HTMLCategory</a></li><li><a href="HTMLIngredient.html">HTMLIngredient</a></li><li><a href="HTMLOperation.html">HTMLOperation</a></li><li><a href="HighlighterWaiter.html">HighlighterWaiter</a></li><li><a href="InputWaiter.html">InputWaiter</a></li><li><a href="Manager.html">Manager</a></li><li><a href="OperationsWaiter.html">OperationsWaiter</a></li><li><a href="OptionsWaiter.html">OptionsWaiter</a></li><li><a href="OutputWaiter.html">OutputWaiter</a></li><li><a href="RecipeWaiter.html">RecipeWaiter</a></li><li><a href="SeasonalWaiter.html">SeasonalWaiter</a></li><li><a href="WindowWaiter.html">WindowWaiter</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="Manager.html#event:appstart">Manager#event:appstart</a></li><li><a href="Manager.html#event:operationadd">Manager#event:operationadd</a></li><li><a href="Manager.html#event:operationremove">Manager#event:operationremove</a></li><li><a href="Manager.html#event:oplistcreate">Manager#event:oplistcreate</a></li><li><a href="Manager.html#event:statechange">Manager#event:statechange</a></li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="global.html#Categories">Categories</a></li><li><a href="global.html#OperationConfig">OperationConfig</a></li><li><a href="global.html#main">main</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-12">
<div id="main">
<h1 class="page-title">Source: views/html/RecipeWaiter.js</h1>
<section>
<article>
<pre
class="sunlight-highlight-javascript linenums">/* globals Sortable */
/**
* Waiter to handle events related to the recipe.
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2016
* @license Apache-2.0
*
* @constructor
* @param {HTMLApp} app - The main view object for CyberChef.
* @param {Manager} manager - The CyberChef event manager.
*/
var RecipeWaiter = function(app, manager) {
this.app = app;
this.manager = manager;
this.remove_intent = false;
};
/**
* Sets up the drag and drop capability for operations in the operations and recipe areas.
*/
RecipeWaiter.prototype.initialise_operation_drag_n_drop = function() {
var rec_list = document.getElementById("rec_list"),
op_lists = document.querySelectorAll(".category .op_list");
// Recipe list
Sortable.create(rec_list, {
group: "recipe",
sort: true,
animation: 0,
delay: 0,
filter: ".arg-input,.arg", // Relies on commenting out a line in Sortable.js which calls evt.preventDefault()
setData: function(dataTransfer, drag_el) {
dataTransfer.setData("Text", drag_el.querySelector(".arg-title").textContent);
},
onEnd: function(evt) {
if (this.remove_intent) {
evt.item.remove();
evt.target.dispatchEvent(this.manager.operationremove);
}
}.bind(this)
});
Sortable.utils.on(rec_list, "dragover", function() {
this.remove_intent = false;
}.bind(this));
Sortable.utils.on(rec_list, "dragleave", function() {
this.remove_intent = true;
this.app.progress = 0;
}.bind(this));
// Favourites category
document.querySelector("#categories a").addEventListener("dragover", this.fav_dragover.bind(this));
document.querySelector("#categories a").addEventListener("dragleave", this.fav_dragleave.bind(this));
document.querySelector("#categories a").addEventListener("drop", this.fav_drop.bind(this));
};
/**
* Creates a drag-n-droppable seed list of operations.
*
* @param {element} list_el - The list the initialise
*/
RecipeWaiter.prototype.create_sortable_seed_list = function(list_el) {
Sortable.create(list_el, {
group: {
name: "recipe",
pull: "clone",
put: false
},
sort: false,
setData: function(dataTransfer, drag_el) {
dataTransfer.setData("Text", drag_el.textContent);
},
onStart: function(evt) {
$(evt.item).popover("destroy");
evt.item.setAttribute("data-toggle", "popover-disabled");
},
onEnd: this.op_sort_end.bind(this)
});
};
/**
* Handler for operation sort end events.
* Removes the operation from the list if it has been dropped outside. If not, adds it to the list
* at the appropriate place and initialises it.
*
* @fires Manager#operationadd
* @param {event} evt
*/
RecipeWaiter.prototype.op_sort_end = function(evt) {
if (this.remove_intent) {
if (evt.item.parentNode.id == "rec_list") {
evt.item.remove();
}
return;
}
// Reinitialise the popover on the original element in the ops list because for some reason it
// gets destroyed and recreated.
$(evt.clone).popover();
$(evt.clone).children("[data-toggle=popover]").popover();
if (evt.item.parentNode.id !== "rec_list") {
return;
}
this.build_recipe_operation(evt.item);
evt.item.dispatchEvent(this.manager.operationadd);
};
/**
* Handler for favourite dragover events.
* If the element being dragged is an operation, displays a visual cue so that the user knows it can
* be dropped here.
*
* @param {event} e
*/
RecipeWaiter.prototype.fav_dragover = function(e) {
if (e.dataTransfer.effectAllowed !== "move")
return false;
e.stopPropagation();
e.preventDefault();
if (e.target.className &amp;&amp; e.target.className.indexOf("category-title") > -1) {
// Hovering over the a
e.target.classList.add("favourites-hover");
} else if (e.target.parentNode.className &amp;&amp; e.target.parentNode.className.indexOf("category-title") > -1) {
// Hovering over the Edit button
e.target.parentNode.classList.add("favourites-hover");
} else if (e.target.parentNode.parentNode.className &amp;&amp; e.target.parentNode.parentNode.className.indexOf("category-title") > -1) {
// Hovering over the image on the Edit button
e.target.parentNode.parentNode.classList.add("favourites-hover");
}
};
/**
* Handler for favourite dragleave events.
* Removes the visual cue.
*
* @param {event} e
*/
RecipeWaiter.prototype.fav_dragleave = function(e) {
e.stopPropagation();
e.preventDefault();
document.querySelector("#categories a").classList.remove("favourites-hover");
};
/**
* Handler for favourite drop events.
* Adds the dragged operation to the favourites list.
*
* @param {event} e
*/
RecipeWaiter.prototype.fav_drop = function(e) {
e.stopPropagation();
e.preventDefault();
e.target.classList.remove("favourites-hover");
var op_name = e.dataTransfer.getData("Text");
this.app.add_favourite(op_name);
};
/**
* Handler for ingredient change events.
*
* @fires Manager#statechange
*/
RecipeWaiter.prototype.ing_change = function() {
window.dispatchEvent(this.manager.statechange);
};
/**
* Handler for disable click events.
* Updates the icon status.
*
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.disable_click = function(e) {
var icon = e.target;
if (icon.getAttribute("disabled") == "false") {
icon.setAttribute("disabled", "true");
icon.classList.add("disable-icon-selected");
icon.parentNode.parentNode.classList.add("disabled");
} else {
icon.setAttribute("disabled", "false");
icon.classList.remove("disable-icon-selected");
icon.parentNode.parentNode.classList.remove("disabled");
}
this.app.progress = 0;
window.dispatchEvent(this.manager.statechange);
};
/**
* Handler for breakpoint click events.
* Updates the icon status.
*
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.breakpoint_click = function(e) {
var bp = e.target;
if (bp.getAttribute("break") == "false") {
bp.setAttribute("break", "true");
bp.classList.add("breakpoint-selected");
} else {
bp.setAttribute("break", "false");
bp.classList.remove("breakpoint-selected");
}
window.dispatchEvent(this.manager.statechange);
};
/**
* Handler for operation doubleclick events.
* Removes the operation from the recipe and auto bakes.
*
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.operation_dblclick = function(e) {
e.target.remove();
window.dispatchEvent(this.manager.statechange);
};
/**
* Handler for operation child doubleclick events.
* Removes the operation from the recipe.
*
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.operation_child_dblclick = function(e) {
e.target.parentNode.remove();
window.dispatchEvent(this.manager.statechange);
};
/**
* Generates a configuration object to represent the current recipe.
*
* @returns {recipe_config}
*/
RecipeWaiter.prototype.get_config = function() {
var config = [], ingredients, ing_list, disabled, bp, item,
operations = document.querySelectorAll("#rec_list li.operation");
for (var i = 0; i &lt; operations.length; i++) {
ingredients = [];
disabled = operations[i].querySelector(".disable-icon");
bp = operations[i].querySelector(".breakpoint");
ing_list = operations[i].querySelectorAll(".arg");
for (var j = 0; j &lt; ing_list.length; j++) {
if (ing_list[j].getAttribute("type") == "checkbox") {
// checkbox
ingredients[j] = ing_list[j].checked;
} else if (ing_list[j].classList.contains("toggle-string")) {
// toggle_string
ingredients[j] = {
option: ing_list[j].previousSibling.children[0].textContent.slice(0, -1),
string: ing_list[j].value
};
} else {
// all others
ingredients[j] = ing_list[j].value;
}
}
item = {
op: operations[i].querySelector(".arg-title").textContent,
args: ingredients
};
if (disabled &amp;&amp; disabled.getAttribute("disabled") == "true") {
item.disabled = true;
}
if (bp &amp;&amp; bp.getAttribute("break") == "true") {
item.breakpoint = true;
}
config.push(item);
}
return config;
};
/**
* Moves or removes the breakpoint indicator in the recipe based on the position.
*
* @param {number} position
*/
RecipeWaiter.prototype.update_breakpoint_indicator = function(position) {
var operations = document.querySelectorAll("#rec_list li.operation");
for (var i = 0; i &lt; operations.length; i++) {
if (i == position) {
operations[i].classList.add("break");
} else {
operations[i].classList.remove("break");
}
}
};
/**
* Given an operation stub element, this function converts it into a full recipe element with
* arguments.
*
* @param {element} el - The operation stub element from the operations pane
*/
RecipeWaiter.prototype.build_recipe_operation = function(el) {
var op_name = el.textContent;
var op = new HTMLOperation(op_name, this.app.operations[op_name], this.app, this.manager);
el.innerHTML = op.to_full_html();
if (this.app.operations[op_name].flow_control) {
el.classList.add("flow-control-op");
}
// Disable auto-bake if this is a manual op - this should be moved to the 'operationadd'
// handler after event restructuring
if (op.manual_bake &amp;&amp; this.app.auto_bake_) {
this.manager.controls.set_auto_bake(false);
this.app.alert("Auto-Bake is disabled by default when using this operation.", "info", 5000);
}
};
/**
* Adds the specified operation to the recipe.
*
* @fires Manager#operationadd
* @param {string} name - The name of the operation to add
* @returns {element}
*/
RecipeWaiter.prototype.add_operation = function(name) {
var item = document.createElement("li");
item.classList.add("operation");
item.innerHTML = name;
this.build_recipe_operation(item);
document.getElementById("rec_list").appendChild(item);
item.dispatchEvent(this.manager.operationadd);
return item;
};
/**
* Removes all operations from the recipe.
*
* @fires Manager#operationremove
*/
RecipeWaiter.prototype.clear_recipe = function() {
var rec_list = document.getElementById("rec_list");
while (rec_list.firstChild) {
rec_list.removeChild(rec_list.firstChild);
}
rec_list.dispatchEvent(this.manager.operationremove);
};
/**
* Handler for operation dropdown events from toggle_string arguments.
* Sets the selected option as the name of the button.
*
* @param {event} e
*/
RecipeWaiter.prototype.dropdown_toggle_click = function(e) {
var el = e.target,
button = el.parentNode.parentNode.previousSibling;
button.innerHTML = el.textContent + " &lt;span class='caret'>&lt;/span>";
this.ing_change();
};
/**
* Handler for operationadd events.
*
* @listens Manager#operationadd
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.op_add = function(e) {
window.dispatchEvent(this.manager.statechange);
};
/**
* Handler for operationremove events.
*
* @listens Manager#operationremove
* @fires Manager#statechange
* @param {event} e
*/
RecipeWaiter.prototype.op_remove = function(e) {
window.dispatchEvent(this.manager.statechange);
};</pre>
</article>
</section>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="copyright">
&copy; Crown Copyright 2016
</span>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
on Mon Nov 28th 2016
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : true,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>