Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mainpanel: Set exclude first and last rows #18

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

mainpanel: Set exclude first and last rows #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
765ece4
saving work
miafrancesca Nov 7, 2018
673fd8f
exclude first working
miafrancesca Jan 9, 2019
1f09dca
brought current exclude last val to mainpanel
miafrancesca Jan 9, 2019
c78d632
changed input events to use same function to reduce redundancy
miafrancesca Jan 9, 2019
1b09b52
Merge https://github.com/schasins/helena
miafrancesca Jan 10, 2019
9a940a2
exclude_rows: edge cases and cleanup
miafrancesca Jan 17, 2019
b26d244
exclude: UI finish and bounds logic
miafrancesca Feb 5, 2019
0aafaa4
Merge https://github.com/schasins/helena
miafrancesca Feb 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions src/pages/mainpanel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,17 +256,24 @@ <h3>I see unexpected empty or incomplete cells.</h3>
<div id="relation_editing" class="new_script_message_stage">
<div id="instructions_part_1">
<div>
Ok, we've opened the first page of the table in your browser. If you don't see the table you expect to see, interact with the page until the table appears. Once the page shows the table, press the "Page Shows My Table" button.
</div>
Ok, we've opened the first page of the table in your browser. </div>
<br>
<div id="page_looks_right">Page Shows My Table</div>
<br><br>
<div>
If you don't see the table you expect to see, interact with the page until the table appears. Once the page shows the table, press the "Page Shows My Table" button.
</div>
</div>
<div id="instructions_part_2" style="display:none">
<button id="relation_editing_ready">&#x2190; I'm done!</button>
<br>
<div>
We'll highlight the table elements that we currently extract. To remove highlighted cells from the table, click on them. To add unhighlighted cells to the table, first select the appropriate color below, then click on them. As the table changes, we'll show the first page of table data below. When you're happy with the table, just press the "I'm done!" button.
We'll highlight the table elements that we currently extract. As the table changes, we'll show the first page of table data in the preview below. When you're happy with the table, just press the "I'm done!" button.
</div>
<div>
<h3>'Next' Buttons and 'Show More' Buttons:</h3>
Additional items in this table are found with:
</div>

<br>
<div>Additional items in this table are found with:</div>
<div id="next_type">
<input type="radio" id="next_type_1" class="next_type" name="next_type_b" value="1">
<label for="next_type_1">No More Items</label>
Expand All @@ -277,13 +284,23 @@ <h3>I see unexpected empty or incomplete cells.</h3>
<input type="radio" id="next_type_4" class="next_type" name="next_type_b" value="4">
<label for="next_type_4">Scroll for More</label>
</div>
<div>
<h3>Headers and Footers</h3>
<div id="exclude_rows_selector"></div>
</div>
<div>
<h3>Adding, Removing, and Altering Rows and Columns:</h3>
To remove highlighted cells from the table, click on them. To add unhighlighted cells to the table, first select the appropriate color below, then click on them.
</div>
<div id="next_type_explanation"></div>
<br>
<div id="color_selector"></div>
<br>

<button id="relation_editing_ready">I'm done!</button>
<div id="output_preview"><table></table></div>

<h3>Table preview:</h3>
<div id="output_preview">
<table></table>
</div>
</div>
</div>

Expand Down
67 changes: 58 additions & 9 deletions src/scripts/background/mainpanel_script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -492,17 +492,18 @@ var RecorderUI = (function (pub) {
utilities.listenForMessageWithKey("content", "mainpanel", "editRelation", "editRelation",
function(msg){
heardAnswer = true;
if (msg.demonstration_time_relation.length >= bestLengthSoFar){
if (msg.demonstration_time_relation.length >= 1){
bestLengthSoFar = msg.demonstration_time_relation.length;
if (bestLengthSoFar > 0){
relation.setNewAttributes(msg.selector, msg.selector_version, msg.exclude_first, msg.columns, msg.demonstration_time_relation, msg.num_rows_in_demo, msg.next_type, msg.next_button_selector);
relation.setNewAttributes(msg.selector, msg.selector_version, msg.exclude_first, msg.exclude_last, msg.columns, msg.demonstration_time_relation, msg.num_rows_in_demo, msg.next_type, msg.next_button_selector);
RecorderUI.updateDisplayedRelation(relation, msg.colors);
RecorderUI.setColumnColors(msg.colors, msg.columns, msg.tab_id);
}
else{
// still need to give the user the option to add a new column, even if we have no selector so far
RecorderUI.setColumnColors([], [], msg.tab_id);
}
RecorderUI.setExcludeRowsSelectors(relation, msg.tab_id);
}
}); // remember this will overwrite previous editRelation listeners, since we're providing a key
}
Expand Down Expand Up @@ -730,22 +731,70 @@ var RecorderUI = (function (pub) {
$relDiv.append(table);
};

pub.setExcludeRowsSelectors = function _setExcludeRowsSelectors(relation, tabId) {
var relationObj = relation.messageRelationRepresentation();
var length = relation.numRowsInDemo;
var changeExcludeParameter = function(messageName, oldValue, otherExcludeValue) {
return function(event) {
var value = event.target.value;
value = parseInt(value, 10);
if (value != oldValue && value >= 0) {
if (length - value - otherExcludeValue < 1) { value = length - otherExcludeValue - 1; } // reset the value to make 1 row in demo
utilities.sendMessage("mainpanel", "content", "editRelation", relationObj, null, null, [tabId]);
utilities.sendMessage("mainpanel", "content", messageName, {numRows: value}, null, null, [tabId]);
}
}
}

var exclude_first_selector = $("<input type='number' name='exclude_first' min='0' value='" + relation.excludeFirst + "'>");
exclude_first_selector.change(changeExcludeParameter("excludeFirstRows", relation.excludeFirst, relation.excludeLast));

var exclude_last_selector = $("<input type='number' name='exclude_last' min='0' value='" + relation.excludeLast + "'>");
exclude_last_selector.change(changeExcludeParameter("excludeLastRows", relation.excludeLast, relation.excludeFirst));

var $div = $("#new_script_content").find("#exclude_rows_selector");
$div.html($("<span>Exclude the first </span>"));
$div.append(exclude_first_selector);
$div.append($("<span> row(s)</span>"));
$div.append($("<br/>"));
$div.append($("<span>Exclude the last </span>"));
$div.append(exclude_last_selector);
$div.append($("<span> row(s)</span>"));
}

pub.setColumnColors = function _setColumnColors(colorLs, columnLs, tabid){
var $div = $("#new_script_content").find("#color_selector");
$div.html("Select the right color for the cell you want to add: ");
$div.html("Select the right color for the cell you want to add: ").css("border", "2px solid transparent");
for (var i = 0; i < columnLs.length; i++){
var colorDiv = $("<div class='edit-relation-color-block' style='background-color:"+colorLs[i]+"'></div>");
var colorDiv = $("<div class='edit-relation-color-block' style='background-color:"+colorLs[i]+";border:2px solid transparent'></div>");
(function(){
var col = columnLs[i].index;
colorDiv.click(function(){utilities.sendMessage("mainpanel", "content", "currentColumnIndex", {index: col}, null, null, [tabid]);});
colorDiv.click(function(event){
var target = $(event.target);
var siblings = $(target).parent().children();
for (var i = 0; i < siblings.length; i++) {
$(siblings[i]).css("border", "2px solid transparent");
$(siblings[i]).css("outline", "none");
}
$(target).css("border", "2px solid red");
utilities.sendMessage("mainpanel", "content", "currentColumnIndex", {index: col}, null, null, [tabid]);
});
})();
$div.append(colorDiv);
}
// todo: now going to allow folks to make a new column, but also need to communicate with content script about color to show
var separatorDiv = $("<div class='edit-relation-color-block'>or</div>");
var colorDiv = $("<div class='edit-relation-color-block' id='edit-relation-new-col-button'>New Col</div>");
var separatorDiv = $("<div class='edit-relation-color-block'>or</div>").css("border", "2px solid transparent");
var colorDiv = $("<div class='edit-relation-color-block' id='edit-relation-new-col-button' style='border:2px solid transparent'>New Col</div>");
(function(){
colorDiv.click(function(){utilities.sendMessage("mainpanel", "content", "currentColumnIndex", {index: "newCol"}, null, null, [tabid]);});
colorDiv.click(function(event){
utilities.sendMessage("mainpanel", "content", "currentColumnIndex", {index: "newCol"}, null, null, [tabid]);
var target = $(event.target);
var siblings = $(target).parent().children();
for (var i = 0; i < siblings.length; i++) {
$(siblings[i]).css("border", "2px solid transparent");
}
$(target).css("outline", "2px solid red");
});
})();
$div.append(separatorDiv);
$div.append(colorDiv);
Expand All @@ -759,7 +808,7 @@ var RecorderUI = (function (pub) {
if (true){ // should probably stop keeping this text version at all todo
scriptPreviewDiv.remove();
}
else{
else {
var scriptString = program.toString();
DOMCreationUtilities.replaceContent(scriptPreviewDiv, $("<div>"+scriptString+"</div>")); // let's put the script string in the script_preview node
}
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/lib/helena-library
Open in desktop
Submodule helena-library updated 7 files
+32 −6 common/misc_utilities.js
+59 −18 content/relation_finding.js
+3 −0 content/setup.js
+407 −96 mainpanel/helena.js
+4 −3 mainpanel/output_handling.js
+1 −1 mainpanel/ringer_manipulation_for_helena.js
+10 −2 ringer-record-replay/mainpanel/mainpanel_main.js
16 changes: 16 additions & 0 deletions src/style/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,22 @@ kbd{
cursor:pointer;
}

#exclude_rows_selector input[type='number']{
border: none;
border-bottom: 1px solid gray;
outline: none;
max-width: 40px;
text-align: center;
-moz-appearance: textfield;
background: transparent;
}

#exclude_rows_selector input[type="number"]::-webkit-outer-spin-button,
#exclude_rows_selector input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.done_note {
display:none;
background-color: #D1FFDA;
Expand Down