Skip to content

Commit

Permalink
improve row-props.html controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneit
joneit committed Jul 4, 2018
1 parent fe1db3c commit ef90282
Showing 1 changed file with 62 additions and 18 deletions.
80 changes: 62 additions & 18 deletions demo/row-props.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
div#behind {
position: absolute;
visibility: hidden;
top: 150px;
top: 350px;
left: 150px;
width: 400px;
height: 400px;
Expand All @@ -33,7 +33,13 @@
background-color: orange;
}
input[type=range] {
width: 100px
width: 100px;
height: 12px
}
input[type=color] {
width: 12px;
height: 12px;
padding: 0;
}
</style>
</head>
Expand All @@ -42,7 +48,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<

<div id="controls" class="nowrap">
<label id="controller" title="Uncheck to hide other controls.">
<input type="checkbox" onchange="this.parentElement.parentElement.classList.toggle('nowrap')">
<input type="checkbox" onchange="this.parentElement.parentElement.classList.toggle('nowrap');positionBehind()">
Wrap controls
</label>
<div class="radio-group">
Expand Down Expand Up @@ -108,34 +114,34 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
<div class="radio-group">
Text truncation:
<label title="grid.properties.truncateTextWithEllipsis = undefined; // can be overridden at a higher level">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = undefined">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = undefined; grid.repaint()">
none
</label>
<label title="grid.properties.truncateTextWithEllipsis = true; // can be overridden at a higher level">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = true" checked>
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = true; grid.repaint()" checked>
with ellipsis (&hellip;)
</label>
<label title="grid.properties.truncateTextWithEllipsis = false; // can be overridden at a higher level">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = false">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = false; grid.repaint()">
<em>before</em> partial char
</label>
<label title="grid.properties.truncateTextWithEllipsis = null; // can be overridden at a higher level">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = null">
<input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = null; grid.repaint()">
<em>after</em> partial char
</label>
</div>
<div class="radio-group">
Clip to:
<label title="grid.properties.columnClip = true">
<input type="radio" name="clipping" onclick="grid.properties.columnClip = true; // can be overridden at column level">
<input type="radio" name="clipping" onclick="grid.properties.columnClip = true; grid.repaint()">
all columns
</label>
<label title="grid.properties.columnClip = null">
<input type="radio" name="clipping" onclick="grid.properties.columnClip = null; // can be overridden at column level">
<input type="radio" name="clipping" onclick="grid.properties.columnClip = null; grid.repaint()">
last column only
</label>
<label title="grid.properties.columnClip = false">
<input type="radio" name="clipping" onclick="grid.properties.columnClip = false; // can be overridden at column level" checked>
<input type="radio" name="clipping" onclick="grid.properties.columnClip = false; grid.repaint()" checked>
none
</label>
</div>
Expand Down Expand Up @@ -218,8 +224,8 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
translucent blue
</label>
</div>
<label>
<input type="checkbox" onclick="document.querySelector('#behind').style.visibility=this.checked?'visible':'hidden'">
<label title="To see through the grid, you must also set grid color to transparent or translucent.">
<input type="checkbox" onclick="behindStyle.visibility=this.checked?'visible':'hidden';positionBehind()">
Behind-the-grid content
</label>
<div class="radio-group">
Expand All @@ -236,13 +242,48 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
<label>
Row height: <input type="range" min="15" max="75" value="34" oninput="nextElementSibling.innerHTML=grid.properties.defaultRowHeight=Number(this.value);grid.behavior.changed()"> (<span>34</span>)
</label>
<div class="radio-group">
Horiz. rules:
<input type="checkbox" checked oninput="grid.properties.gridLinesH=this.checked;grid.behavior.shapeChanged()">
<input type="color" value="brown" onchange="grid.properties.gridLinesHColor=this.value;grid.behavior.shapeChanged()">
<input type="range" min="0" max="8" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.gridLinesHWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
Vert. rules:
<input type="checkbox" checked oninput="grid.properties.gridLinesV=this.checked;grid.behavior.shapeChanged()">
<input type="color" value="brown" onchange="grid.properties.gridLinesVColor=this.value;grid.behavior.shapeChanged()">
<input type="range" min="0" max="8" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.gridLinesVWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
Box model:
<label title="grid.properties.backgroundColor='white'">
<input type="radio" name="box-sizing" value="border-box" onclick="grid.properties.boxSizing=this.value;grid.behavior.shapeChanged()" checked>
border-box
</label>
<label title="grid.properties.backgroundColor='transparent'">
<input type="radio" name="box-sizing" value="content-box" onclick="grid.properties.boxSizing=this.value;grid.behavior.shapeChanged()">
content-box
</label>
</div>
<label>
Fixed columns:
<input type="range" min="0" max="4" value="0" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedColumnCount=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
Fixed rows:
<input type="range" min="0" max="11" value="0" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedRowCount=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
</label>
<label>
Horiz. divider:
<input type="color" value="#a4a4a4" onchange="grid.properties.fixedLinesHColor=this.value;grid.behavior.shapeChanged()">
<input type="range" min="0" max="12" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesHWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
edge: <input type="range" min="0" max="5" value="0" style="width:22px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesHEdge=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
Vert. divider:
<input type="color" value="#a4a4a4" onchange="grid.properties.fixedLinesVColor=this.value;grid.behavior.shapeChanged()">
<input type="range" min="0" max="12" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesVWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
edge: <input type="range" min="0" max="5" value="0" style="width:22px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesVEdge=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
</label>
<label>
Columns: <input type="range" id="COLUMNS" title="" min="1" max="100" oninput="fixAll()"> (<span></span>) &nbsp;
Rows: <input type="range" id="ROWS" title="" min="10" max="9999" step="10" oninput="fixAll()"> (<span></span>) &nbsp;
Precision: <input type="range" id="PRECISION" title="Number of digits." min="1" max="30" oninput="fixAll()"> (<span></span>) &nbsp;
Scale: <input type="range" id="SCALE" title="Number of digits to right of decimal point." min="0" max="10" oninput="fixAll()"> (<span></span>) &nbsp;
<input type="button" value="Reset Data" onclick="init()">
<input type="button" value="Benchmark Data" onclick="benchmark()">
Precision: <input type="range" id="PRECISION" title="Number of digits." min="1" max="30" style="width:29px" oninput="fixAll()"> (<span></span>) &nbsp;
Scale: <input type="range" id="SCALE" title="Number of digits to right of decimal point." min="0" max="10" style="width:10px" oninput="fixAll()"> (<span></span>) &nbsp;
<input type="button" value="Reset Data" title="Recreate data using slider values." onclick="init()">
<input type="button" value="Benchmark Data" title="Set sliders to 100, 9999, 5, 2 and recreate data" onclick="benchmark()">
</label>
</div>

Expand All @@ -253,6 +294,8 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
<script>

var grid = new fin.Hypergrid();
var behindStyle = document.querySelector('#behind').style;
function positionBehind() { behindStyle.top=Math.ceil(grid.canvas.canvas.getBoundingClientRect().top) + 100 + 'px'; }

var COLUMNS = 12;
var ROWS = 9999;
Expand Down Expand Up @@ -317,7 +360,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
columnClip: false,
defaultRowHeight: 34,
editor: 'textfield',
// showRowNumbers: false,
rowHeaderCheckboxes: false,
rowHeaderColor: 'brown',
lineColor: 'brown',
renderFalsy: true,
Expand Down Expand Up @@ -391,6 +434,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
}

function setBackgroundColor(backgroundColor) {
grid.repaint();
grid.properties.backgroundColor = backgroundColor;
rebundle();
}
Expand Down Expand Up @@ -538,7 +582,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench<
function simulate(checked) {
var paintRadioButtons = document.querySelectorAll('[name=paint]'),
paintOnFlagSetRadioButton = paintRadioButtons[0],
paintBlastRadioButton = paintRadioButtons[2]
paintBlastRadioButton = paintRadioButtons[2],
paintBlastLabel = paintBlastRadioButton.parentElement;

if (!checked && paintBlastRadioButton.checked) {
Expand Down

0 comments on commit ef90282

Please sign in to comment.