public
/
vasl-templates
1
0
Fork 0
Code Issues Pull Requests Projects Releases 29 Wiki Activity

Generate sortable hints programatically.

Browse Source
master
Pacman Ghost 6 years ago
parent ecfcf093f6
commit a9309f5f1f
3 changed files with 39 additions and 13 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      vasl_templates/webapp/static/css/sortable.css
  2. 35
      vasl_templates/webapp/static/sortable.js
  3. 12
      vasl_templates/webapp/templates/index.html

5
vasl_templates/webapp/static/css/sortable.css
Unescape View File

@ -12,7 +12,8 @@ img.sortable-add { vertical-align: middle ; height: 15px ; margin-right: 0.25em
.sortable li img.snippet { height: 1.25em ; margin: -2px -2px ; padding-left: 1em ; float: right ; }
.sortable-hint { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; font-style: italic ; }
.sortable-hint p { margin-bottom: 1em ; }
.sortable-hint { width:100% ; height: calc(100% - 1.5em) ; color: #666 ; }
.sortable-hint .instructions { margin: 1em 0 0 1em ; font-size: 80% ; font-style: italic ; color: #888 ; }
.sortable-hint .instructions li { margin-top: 0.5em ; }
.sortable-trash { margin: 3px 5px ; height: 24px ; }

35
vasl_templates/webapp/static/sortable.js
Unescape View File

@ -7,6 +7,15 @@ SORTABLE_DISPLAY_NAMES = {
ordnance: [ "ordnance", "ordnance", "an" ],
} ;
SORTABLE_HINTS = {
scenario_notes: "Add miscellaneous scenario notes here.",
ssr: "Add scenario SSR's here.",
ob_setups: "Add setup notes for the player's OB here.",
ob_notes: "Add miscellaneous setup notes here.",
vehicles: "Add vehicles in the player's OB here.",
ordnance: "Add ordnance in the player's OB here.",
} ;
// --------------------------------------------------------------------
( function( $ ) {
@ -16,9 +25,7 @@ $.fn.sortable2 = function( action, args )
"init": function( $sortable2 ) {
// get the display name
var id = $sortable2.prop( "id" ) ;
var pos = id.indexOf( "-sortable" ) ;
var display_name = SORTABLE_DISPLAY_NAMES[id.substring(0,pos)] ;
var display_name = SORTABLE_DISPLAY_NAMES[ get_sortable2_type($sortable2) ] ;
// initialize the sortable2 and support elements
$sortable2.data( "on_edit", args.edit ) ;
var $add_btn = find_helper( $sortable2, "add" ) ;
@ -112,6 +119,17 @@ $.fn.sortable2 = function( action, args )
var $hint = find_helper( $sortable2, "hint" ) ;
if ( $sortable2.children("li").length === 0 ) {
$sortable2.hide() ;
var display_name = SORTABLE_DISPLAY_NAMES[ get_sortable2_type($sortable2) ] ;
var img = "<img src='" + gImagesBaseUrl + "/sortable-add.png' style='height:1em;'>" ;
var buf = [
SORTABLE_HINTS[ get_sortable2_type($sortable2) ],
"<ul class='instructions'>",
"<li>Click on the " + img + " below to add a new " + display_name[0] + ".",
"<li>To re-order the " + display_name[1] + ", use the mouse to drag them around.",
"<li>Ctrl-click on " + display_name[2] + " " + display_name[0] + " to delete it, or drag it into the trashcan below.",
"</ul>",
] ;
$hint.html( buf.join("") ) ;
$hint.show() ;
} else {
$sortable2.show() ;
@ -122,8 +140,15 @@ $.fn.sortable2 = function( action, args )
function find_helper( $sortable2, type ) {
// find a helper element for the sortable2
var id = $sortable2.prop( "id" ) ;
var pos = id.indexOf( "sortable" ) ;
return $( "#" + id.substring(0,pos) + type+ id.substring(pos+8) ) ;
var pos = id.indexOf( "-sortable" ) ;
return $( "#" + get_sortable2_type($sortable2) + "-" + type + id.substring(pos+9) ) ;
}
function get_sortable2_type( $sortable2 ) {
// get the sortable2 type
var id = $sortable2.prop( "id" ) ;
var pos = id.indexOf( "-sortable" ) ;
return id.substring( 0, pos ) ;
}
// execute the specified action

12
vasl_templates/webapp/templates/index.html
Unescape View File

@ -81,7 +81,7 @@
<fieldset class="bl"> <legend>Notes</legend>
<div id="panel-scenario_notes">
<div class="content">
<div id="scenario_notes-hint" class="sortable-hint"> <p>Click on the "+" below to add a new scenario note. <p>To re-order the scenario notes, use the mouse to drag them around. <p>Ctrl-click on a scenario note to delete it, or drag it into the trashcan below. </div>
<div id="scenario_notes-hint" class="sortable-hint"></div>
<ul id="scenario_notes-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
@ -97,7 +97,7 @@
<fieldset class="br"> <legend>SSR's</legend>
<div id="panel-ssr">
<div class="content">
<div id="ssr-hint" class="sortable-hint"> <p>Click on the "+" below to add a new SSR, double-click on an SSR to edit it. <p>To re-order the SSR's, use the mouse to drag them around. <p>Ctrl-click on an SSR to delete it, or drag it into the trashcan below. </div>
<div id="ssr-hint" class="sortable-hint"></div>
<ul id="ssr-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
@ -121,7 +121,7 @@
<fieldset class="tl"> <legend>OB setup</legend>
<div id="panel-ob_setups1" class="panel-ob_setups">
<div class="content">
<div id="ob_setups-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new setup note. <p>To re-order the setup notes, use the mouse to drag them around. <p>Ctrl-click on a setup note to delete it, or drag it into the trashcan below. </div>
<div id="ob_setups-hint_1" class="sortable-hint"></div>
<ul id="ob_setups-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
@ -137,7 +137,7 @@
<fieldset class="bl"> <legend>Notes</legend>
<div id="panel-ob_notes1" class="panel-ob_notes">
<div class="content">
<div id="ob_notes-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new setup note. <p>To re-order the setup notes, use the mouse to drag them around. <p>Ctrl-click on a setup note to delete it, or drag it into the trashcan below. </div>
<div id="ob_notes-hint_1" class="sortable-hint"></div>
<ul id="ob_notes-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
@ -160,7 +160,7 @@
<fieldset class="tr"> <legend>Vehicles</legend>
<div id="panel-vehicles_1" class="panel-vehicles">
<div class="content">
<div id="vehicles-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new Vehicle. <p>To re-order the Vehicles, use the mouse to drag them around. <p>Ctrl-click on an Vehicle to delete it, or drag it into the trashcan below. </div>
<div id="vehicles-hint_1" class="sortable-hint"></div>
<ul id="vehicles-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
@ -178,7 +178,7 @@
<fieldset class="br"> <legend>Ordnance</legend>
<div id="panel-ordnance_1" class="panel-ordnance">
<div class="content">
<div id="ordnance-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new Gun. <p>To re-order the Gun's, use the mouse to drag them around. <p>Ctrl-click on an Gun to delete it, or drag it into the trashcan below. </div>
<div id="ordnance-hint_1" class="sortable-hint"></div>
<ul id="ordnance-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">

Write Preview
Loading…
Cancel
Save