Create attractive VASL scenarios, with loads of useful information embedded to assist with game play.
https://vasl-templates.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
12 KiB
257 lines
12 KiB
// NOTE: This module manage simple notes (some text and an optional width),
|
|
// which is used by OB setups and OB notes (which differ only in their templates,
|
|
// the code to manage them is almost identical).
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
function add_scenario_note() { _do_edit_simple_note( "scenario_note", null, $("#scenario_notes-sortable"), null, gDefaultScenario._SCENARIO_NOTE_WIDTH ) ; }
|
|
function do_add_scenario_note( $sortable2, data ) { _do_add_simple_note($sortable2,data) ; }
|
|
function edit_scenario_note( $sortable2, $entry ) { _do_edit_simple_note( "scenario_note", null, $sortable2, $entry, null ) ; }
|
|
|
|
function add_ssr() { _do_edit_simple_note( "ssr", null, $("#ssr-sortable"), null, null ) ; }
|
|
function do_add_ssr( $sortable2, data ) { _do_add_simple_note($sortable2,data) ; }
|
|
function edit_ssr( $sortable2, $entry ) { _do_edit_simple_note( "ssr", null, $sortable2, $entry, null ) ; }
|
|
|
|
function add_ob_setup( player_no ) { _do_edit_simple_note( "ob_setup", player_no, $("#ob_setups-sortable_"+player_no), null, gDefaultScenario._OB_SETUP_WIDTH ) ; }
|
|
function do_add_ob_setup( $sortable2, data ) { _do_add_simple_note($sortable2,data) ; }
|
|
function edit_ob_setup( $sortable2, $entry ) { _do_edit_simple_note( "ob_setup", get_player_no_for_element($sortable2), $sortable2, $entry, null ) ; }
|
|
|
|
function add_ob_note( player_no ) { _do_edit_simple_note( "ob_note", player_no, $("#ob_notes-sortable_"+player_no), null, gDefaultScenario._OB_NOTE_WIDTH ) ; }
|
|
function do_add_ob_note( $sortable2, data ) { _do_add_simple_note($sortable2,data) ; }
|
|
function edit_ob_note( $sortable2, $entry ) { _do_edit_simple_note( "ob_note", get_player_no_for_element($sortable2), $sortable2, $entry, null ) ; }
|
|
|
|
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
|
|
function _do_edit_simple_note( template_id, player_no, $sortable2, $entry, default_width )
|
|
{
|
|
// figure out what we're editing
|
|
var note_type = _get_note_type_for_sortable( $sortable2 ) ;
|
|
var note_type0 = note_type.substring( 0, note_type.length-1 ) ; // plural -> singular :-/
|
|
|
|
// determine the next available ID
|
|
var usedIds = {} ;
|
|
$sortable2.children( "li" ).each( function() {
|
|
usedIds[ $(this).data("sortable2-data").id ] = true ;
|
|
} ) ;
|
|
var nextAvailableId = auto_assign_id( usedIds, "id" ) ;
|
|
|
|
function makeSimpleSnippet( evt ) {
|
|
// initialize
|
|
var $btnPane = $( ".ui-dialog.edit-simple_note .ui-dialog-buttonpane" ) ;
|
|
var $btn = $btnPane.find( "button.snippet" ) ;
|
|
var data = unloadData() ;
|
|
// prepare the template parameters
|
|
// NOTE: We don't bother handling the case of an empty caption.
|
|
var extraParams = {} ;
|
|
if ( template_id === "ssr" ) {
|
|
// NOTE: All the SSR's are combined into a single snippet, so it doesn't actually make sense
|
|
// to have a snippet button for individual SSR's, but it's convenient. We unload all the SSR's
|
|
// from the UI, then update the content for the one being edited (if it already exists), or
|
|
// add it to the end of the list (if it's a new one).
|
|
var ssrs = unload_ssrs() ;
|
|
if ( $entry ) {
|
|
// find and update the SSR being edited
|
|
$( "#ssr-sortable > li" ).each( function( index ) {
|
|
if ( $(this)[0] === $entry[0] )
|
|
ssrs[ index ] = data.caption ;
|
|
} ) ;
|
|
} else {
|
|
// add the new SSR to the end of the list
|
|
ssrs.push( data.caption ) ;
|
|
}
|
|
extraParams.SSR = ssrs ;
|
|
} else {
|
|
// override the template parameters unloaded from the UI with the current values from the dialog
|
|
var paramKey = template_id.toUpperCase() ;
|
|
extraParams[ paramKey ] = data.caption ;
|
|
extraParams[ paramKey+"_WIDTH" ] = data.width ;
|
|
}
|
|
// generate the snippet
|
|
generate_snippet( $btn, evt.shiftKey, extraParams ) ;
|
|
}
|
|
|
|
function unloadData() {
|
|
// unload the snippet data
|
|
return {
|
|
caption: $caption.val().trim(),
|
|
width: $width.val().trim(),
|
|
} ;
|
|
}
|
|
|
|
// let the user edit the note
|
|
var dlgTitle = ($entry ? "Edit " : "Add ") + SORTABLE_DISPLAY_NAMES[note_type][0] ;
|
|
var $caption, $width, origData ;
|
|
var $dlg = $("#edit-simple_note").dialog( {
|
|
dialogClass: "edit-simple_note",
|
|
title: dlgTitle,
|
|
modal: true,
|
|
closeOnEscape: false,
|
|
minWidth: 600,
|
|
minHeight: 250,
|
|
create: function() {
|
|
init_dialog( $(this), "OK", true ) ;
|
|
},
|
|
open: function() {
|
|
// initialize
|
|
$caption = $(this).children( "textarea" ) ;
|
|
on_dialog_open( $(this), $caption ) ;
|
|
add_flag_to_dialog_titlebar( $(this), get_player_no_for_element($sortable2) ) ;
|
|
var $btn_pane = $(".ui-dialog.edit-simple_note .ui-dialog-buttonpane") ;
|
|
var $btn = $btn_pane.find( "button.snippet" ) ;
|
|
$btn.prepend(
|
|
$( "<img src='" + gImagesBaseUrl+"/snippet.png" + "' style='height:0.9em;margin:0 0 -2px -2px;'>" )
|
|
) ;
|
|
$width = $btn_pane.find( "input[name='width']" ) ;
|
|
if ( $width.length === 0 ) {
|
|
// create the width controls
|
|
$btn_pane.prepend( $( "<div style='position:absolute;left:15px;height:28px;display:flex;align-items:center;'>" +
|
|
"<label for='width'>Width:</label> <input type='text' name='width' size='4' style='margin-top:-1px;'>" +
|
|
"</div>" ) ) ;
|
|
$width = $btn_pane.find( "input[name='width']" ) ;
|
|
}
|
|
// tweak the SNIPPETS button so that snippets will work
|
|
$btn.data( { id: template_id, "player-no": player_no } ) ;
|
|
var snippet_id = template_id ;
|
|
if ( player_no )
|
|
snippet_id += "_" + player_no ;
|
|
var entryData = $entry ? $entry.data("sortable2-data") : null ;
|
|
if ( template_id !== "ssr" )
|
|
snippet_id += "." + (entryData ? entryData.id : nextAvailableId) ;
|
|
$btn.data( "snippet-id", snippet_id ) ;
|
|
$btn.button( is_template_available( template_id ) ? "enable" : "disable" ) ;
|
|
// show/hide the width controls (nb: SSR's have a separate width setting that affects all of them)
|
|
var show = (note_type !== "ssr") ;
|
|
$btn_pane.find( "label[for='width']" ).css( "display", show?"inline":"none" ) ;
|
|
$width.css( "display", show?"inline":"none" ) ;
|
|
$btn.css( { position: "absolute", left:
|
|
show ? $width.offset().left + $width.width() - $btn_pane.find("label[for='width']").offset().left + 25 : 15
|
|
} ) ;
|
|
// enable auto-dismiss for the dialog
|
|
var $dlg = $(this) ;
|
|
$width.keydown( function(evt) { auto_dismiss_dialog( $dlg, evt, "OK" ) ; } ) ;
|
|
// set the titlebar color
|
|
var colors = get_player_colors_for_element($sortable2) || ["#d0d0d0","#c0c0c0","#a0a0a0"] ;
|
|
$(".ui-dialog.edit-simple_note .ui-dialog-titlebar").css( {
|
|
background: colors[0],
|
|
border: "1px solid "+colors[2]
|
|
} ) ;
|
|
// load the dialog
|
|
$caption.val( entryData ? entryData.caption : "" ).focus() ;
|
|
$width.val( entryData ? entryData.width : default_width ) ;
|
|
origData = unloadData() ;
|
|
$(this).height( $(this).height() ) ; // fudge: force the textarea to resize
|
|
},
|
|
buttons: {
|
|
Snippet: { text:" Snippet", class: "snippet", click: makeSimpleSnippet },
|
|
OK: function() {
|
|
var data = unloadData() ;
|
|
if ( $entry ) {
|
|
// update the existing note
|
|
if ( data.caption === "" )
|
|
$sortable2.sortable2( "delete", { entry: $entry } ) ;
|
|
else {
|
|
$entry.data("sortable2-data").caption = data.caption ;
|
|
$entry.data("sortable2-data").width = data.width ;
|
|
$entry.empty().append( _make_simple_note( note_type, data.caption ) ) ;
|
|
}
|
|
}
|
|
else {
|
|
// create a new note
|
|
if ( data.caption !== "" ) {
|
|
data = { caption: data.caption, width: data.width } ;
|
|
if ( note_type === "scenario_notes" || note_type === "ob_setups" || note_type === "ob_notes" )
|
|
data.id = nextAvailableId ;
|
|
$entry = _do_add_simple_note( $sortable2, data ) ;
|
|
}
|
|
}
|
|
// check if we should automatically generate a snippet
|
|
if ( isKeyDown( "Shift" ) ) {
|
|
var $elem = $entry.find( "img.snippet" ) ;
|
|
if ( $elem.length !== 0 )
|
|
$elem.click() ;
|
|
}
|
|
$(this).dialog( "close" ) ;
|
|
},
|
|
Cancel: function() {
|
|
if ( JSON.stringify( unloadData() ) != JSON.stringify( origData ) ) {
|
|
ask( dlgTitle, "Discard your changes?", {
|
|
ok: function() { $dlg.dialog( "close" ) ; },
|
|
} ) ;
|
|
return ;
|
|
}
|
|
$(this).dialog( "close" ) ;
|
|
},
|
|
},
|
|
} ) ;
|
|
}
|
|
|
|
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
|
|
function _do_add_simple_note( $sortable2, data )
|
|
{
|
|
// add a new sortable2 entry
|
|
var note_type = _get_note_type_for_sortable( $sortable2 ) ;
|
|
return $sortable2.sortable2( "add", {
|
|
content: _make_simple_note( note_type, data.caption ),
|
|
data: data,
|
|
} ) ;
|
|
}
|
|
|
|
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
|
|
function _make_simple_note( note_type, caption )
|
|
{
|
|
// generate the sortable entry
|
|
var buf = [ "<div>" ] ;
|
|
if ( ["scenario_notes","ob_setups","ob_notes"].indexOf( note_type ) !== -1 ) {
|
|
var note_type0 = note_type.substring( 0, note_type.length-1 ) ;
|
|
if ( is_template_available( note_type0 ) ) {
|
|
buf.push(
|
|
"<img src='" + gImagesBaseUrl + "/snippet.png'",
|
|
" class='snippet' data-id='" + note_type0 + "' title='" + GENERATE_SNIPPET_HINT + "'>"
|
|
) ;
|
|
}
|
|
}
|
|
buf.push( caption, "</div>" ) ;
|
|
var $content = $( buf.join("") ) ;
|
|
fixup_external_links( $content ) ;
|
|
makeSnippetHotHover( $content.children( "img" ) ) ;
|
|
|
|
// add a handler for the snippet button
|
|
$content.children("img.snippet").click( function( evt ) {
|
|
var extra_params = get_simple_note_snippet_extra_params( $(this) ) ;
|
|
generate_snippet( $(this), evt.shiftKey, extra_params ) ;
|
|
return false ;
|
|
} ) ;
|
|
|
|
return $content ;
|
|
}
|
|
|
|
function get_simple_note_snippet_extra_params( $img )
|
|
{
|
|
// get the extra parameters needed to generate the simple note's snippet
|
|
var extra_params = {} ;
|
|
var $sortable2 = $img.closest( ".sortable" ) ;
|
|
var note_type = _get_note_type_for_sortable( $sortable2 ) ;
|
|
var key ;
|
|
if ( note_type === "scenario_notes" )
|
|
key = "SCENARIO_NOTE" ;
|
|
else if ( note_type === "ob_setups" )
|
|
key = "OB_SETUP" ;
|
|
else if ( note_type == "ob_notes" )
|
|
key = "OB_NOTE" ;
|
|
var data = $img.parent().parent().data( "sortable2-data" ) ;
|
|
extra_params[key] = data.caption ;
|
|
extra_params[key+"_WIDTH"] = data.width ;
|
|
return extra_params ;
|
|
}
|
|
|
|
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
|
|
function _get_note_type_for_sortable( $sortable2 )
|
|
{
|
|
// figure out what type of note the sortable has
|
|
var id = $sortable2.prop( "id" ) ;
|
|
var match = /^((scenario_notes|ssr|ob_vehicles|ob_ordnance|ob_setups|ob_notes))-sortable(_\d)?$/.exec( id ) ;
|
|
return match[1] ;
|
|
}
|
|
|