Skip to content

Commit

Permalink
Issue-269: Resolved merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgalievEPAM
rgalievEPAM committed Aug 10, 2021
2 parents 8f690f6 + 4e1154e commit bec99db
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 36 deletions.
14 changes: 14 additions & 0 deletions src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,19 @@ const AutoFindProvider = inject("mainModel")(
});
};

const changeElementName = (id, name) => {
setPredictedElements((previousValue) => {
const renamed = previousValue.map((el) => {
if (el.element_id === id) {
el.jdi_class_name = name;
sendMessage.changeElementName(el);
}
return el;
});
return renamed;
});
};

const reportProblem = (predictedElements) => {
chrome.storage.sync.set(
{ predictedElements },
Expand Down Expand Up @@ -159,6 +172,7 @@ const AutoFindProvider = inject("mainModel")(
HIGHLIGHT_OFF: clearElementsState,
REMOVE_ELEMENT: hideElement,
CHANGE_TYPE: changeType,
CHANGE_ELEMENT_NAME: changeElementName,
PREDICTION_IS_UNACTUAL: () => setUnactualPrediction(true),
};

Expand Down
1 change: 1 addition & 0 deletions src/js/blocks/autoFind/autoFindProvider/connector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export const sendMessage = {
toggle: (el) => connector.sendMessage("HIGHLIGHT_TOGGLED", el),
hide: (el) => connector.sendMessage("HIDE_ELEMENT", el),
changeType: (el) => connector.sendMessage("ASSIGN_TYPE", el),
changeElementName: (el) => connector.sendMessage("CHANGE_ELEMENT_NAME", el),
elementData: (payload) => connector.sendMessage("ELEMENT_DATA", payload),
setHighlight: (payload) => connector.sendMessage("SET_HIGHLIGHT", payload),
killHighlight: (payload, onResponse) =>
Expand Down
130 changes: 98 additions & 32 deletions src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,66 @@ export const runContextMenu = () => {
},
};

const changeElementNameModal = (element_id, jdi_class_name) => {

// MODAL
const modal = document.createElement('div');
modal.classList.add("jdn-change-element-name-modal");

// MODAL CLOSE LINK
const modalCloseLink = document.createElement('a');
modalCloseLink.innerHTML = "×";
modalCloseLink.classList.add('jdn-change-element-name-modal__close-link');
modal.append(modalCloseLink);

// MODAL TITLE
const modalTitle = document.createElement('p');
modalTitle.innerText = "Change Name";
modalTitle.classList.add('jdn-change-element-name-modal__title');
modal.append(modalTitle);

// MODAL FORM
const form = document.createElement('form');

// MODAL FORM INPUT
const formInput = document.createElement('input');
formInput.classList.add('jdn-change-element-name-modal__form-input');
formInput.value = jdi_class_name;
form.append(formInput);

// MODAL FORM BUTTON
const formButton = document.createElement('button');
formButton.classList.add('jdn-change-element-name-modal__form-button');
formButton.innerText = "Save";
form.append(formButton);

// MODAL INITIALIZATION
modal.append(form);
document.body.appendChild(modal);
formInput.focus();

// ACTION: CHANGE ELEMENT NAME
formButton.addEventListener("click", (event) => {
event.preventDefault();
chrome.runtime.sendMessage({
message: "CHANGE_ELEMENT_NAME",
param: { id: element_id, name: formInput.value },
});
nameBeenSuccessfullyChanged();
});

// ACTION: SHOW SUCCESS STATUS
const nameBeenSuccessfullyChanged = () => {
form.remove();
modal.classList.add('jdn-change-element-name-modal--success');
modalTitle.innerText = "Name Changed";
modalTitle.classList.add("jdn-change-element-name-modal__title--success");
};

// ACTION: CLOSE MODAL
modalCloseLink.addEventListener("click", () => modal.remove());
};

// <-----

/*global chrome*/
Expand All @@ -297,43 +357,49 @@ export const runContextMenu = () => {
{ jdi_class_name, element_id, skipGeneration },
types
) => [
{
text: `<b>Block type: ${jdi_class_name}</b>`,
sub: typesMenu(types),
{
text: `Change name: ${jdi_class_name} <i class='cm_text_icon'>&#9998;</i>`,
events: {
click: () => changeElementNameModal(element_id, jdi_class_name),
},
{
text: "Remove",
events: {
click: () =>
chrome.runtime.sendMessage({
message: "REMOVE_ELEMENT",
param: element_id,
}),
},
},
{
text: `<b>Block type: ${jdi_class_name}</b>`,
sub: typesMenu(types),
},
{
text: `Switch ${skipGeneration ? "on" : "off"}`,
events: {
click: () =>
chrome.runtime.sendMessage({
message: "TOGGLE_ELEMENT",
param: element_id,
}),
},
{
text: `Switch ${skipGeneration ? "on" : "off"}`,
events: {
click: () =>
chrome.runtime.sendMessage({
message: "TOGGLE_ELEMENT",
param: element_id,
}),
},
},
{
text: `Bring to front`,
events: {
click: () => chrome.storage.local.set({ JDN_BRING_TO_FRONT: { hash: Date.now(), element_id } }),
},
{
text: `Bring to front`,
events: {
click: () => chrome.storage.local.set({ JDN_BRING_TO_FRONT: { hash: Date.now(), element_id } }),
},
},
{
text: `Bring to background`,
events: {
click: () => chrome.storage.local.set({ BRING_TO_BACKGROUND: { hash: Date.now(), element_id } }),
},
{
text: `Bring to background`,
events: {
click: () => chrome.storage.local.set({ BRING_TO_BACKGROUND: { hash: Date.now(), element_id } }),
},
},
{
text: "Remove",
events: {
click: () =>
chrome.runtime.sendMessage({
message: "REMOVE_ELEMENT",
param: element_id,
}),
},
];
}
];

const typesMenu = (types) => {
return types.map((type) => {
Expand Down
134 changes: 130 additions & 4 deletions src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,25 @@
list-style-type: none;
padding: 0;
margin: 0;
background-color: #ccc;
background-color: #000;
color: #fff;
box-shadow: 0 0 5px #333;
}

.cm_container li {
padding: 5px 10px;
padding: 10px 17px;
padding-right: 1.7em;
cursor: pointer;
white-space: nowrap;
}

.cm_container li:hover {
background-color: #bbb;
background-color: #212228;
color: #1582D8;
}

.cm_container li:last-child {
color: #D82C15;
}

.cm_container li .cm_icon_span {
Expand All @@ -52,6 +58,12 @@
text-align: center;
}

.cm_container li .cm_text_icon {
display: inline-block;
margin: 0 0 0 10px;
transform: scale(-1, 1);
}

.cm_container li .cm_sub_span {
width: 1em;
display: inline-block;
Expand Down Expand Up @@ -150,4 +162,118 @@

.jdn-error .jdn-label {
background-color: rgba(216, 44, 21, 1);
}
}

/***************************
CHANGE ELEMENT NAME MODAL
****************************/
.jdn-change-element-name-modal {
position: fixed;
top: 50%;
left: 50%;
width: 270px;
height: 86px;
padding: 9px 18px 17px;
background-color: #000;
transform: translate(-50%, -50%);
z-index: 11111;
transition: all 0.5s ease-in-out;
}

.jdn-change-element-name-modal--success {
width: 145px;
height: 100px;
}

.jdn-change-element-name-modal__close-link {
position: absolute;
top: 1px;
right: 15px;
font-size: 23px;
text-decoration: none;
color: #fff;
cursor: pointer;
}

.jdn-change-element-name-modal__close-link:hover {
color: #1582D8;
}

.jdn-change-element-name-modal__title {
margin: 0 0 14px;
font-weight: 700;
color: #fff;
transition: all 0.5s ease-in-out;
}

.jdn-change-element-name-modal__title--success {
margin: 0 0 5px;
padding: 50px 9px 0px;
}

.jdn-change-element-name-modal__title--success::before {
content: "";
position: absolute;
top: 27px;
right: 66px;
transform: rotate(-45deg);
animation-name: appearance;
animation-duration: 0.25s;
animation-delay: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: running;
}

@keyframes appearance {
0% {
width: 0;
height: 0;
}
100% {
width: 15px;
height: 8px;
border-bottom: 1px solid #1582D8;
border-left: 1px solid #1582D8;
}
}

.jdn-change-element-name-modal__title--success::after {
content: "";
position: absolute;
top: 18px;
right: 59px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #1582D8;
opacity: 0;
animation-name: cirlce;
animation-duration: 0.25s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: running;
}

@keyframes cirlce {
0% { opacity: 0; }
100% { opacity: 1; }
}

.jdn-change-element-name-modal__form-input {
width: 180px;
padding: 3px 5px 4px;
margin: 0 5px 0 0;
color: #000;
border: 1px solid #1582D8;
border-radius: 3px;
}

.jdn-change-element-name-modal__form-button {
padding: 5px 10px;
background: #1582D8;
color: #fff;
border: none;
border-radius: 3px;
}
9 changes: 9 additions & 0 deletions src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export const highlightOnPage = () => {
div.querySelector(".jdn-class").textContent = element.jdi_class_name;
};

const changeElementName = (element) => {
const div = document.getElementById(element.element_id);
div.querySelector(".jdn-class").textContent = element.jdi_class_name;
};

const drawRectangle = (
element,
{ element_id, jdi_class_name, predicted_probability }
Expand Down Expand Up @@ -228,6 +233,10 @@ export const highlightOnPage = () => {
assignType(param);
}

if (message === "CHANGE_ELEMENT_NAME") {
changeElementName(param);
}

if (message === "PING_SCRIPT" && (param.scriptName === "highlightOnPage")) {
sendResponse({ message: true });
}
Expand Down

0 comments on commit bec99db

Please sign in to comment.