Skip to content

bugzilla
bugzilla
Commit 313d4e2c authored by Давид Добряков's avatar Давид Добряков
Browse files
Options

Saving work time to localStorage for safe page refresh, some markup & style fixes

parent 3777f2c8
Show whitespace changes
Inline Side-by-side
Showing with 97 additions and 288 deletions
js/etersoft/focusManager.js
View file @ 313d4e2c
......@@ -192,5 +192,3 @@ var focusManager = {
focusFirstInElement: focusFirstInElement,
focusLastInElement: focusLastInElement
};
export.default = focusManager;
js/etersoft/timer.js
View file @ 313d4e2c
// focusManager
function isAncestor(ancestor, descendant) {
var element = descendant;
while (element) {
if (element === ancestor) {
return true;
}
element = element.parentElement;
}
return false;
}
function isDisabled(element) {
return element.disabled === true;
}
function isFocusable(element) {
return Boolean(element) && element.tabIndex >= 0 && !isDisabled(element);
}
function makeFocusable(element) {
// A tabIndex is needed to make the element focusable
// A tabIndex of -1 means that the element is only programmatically focusable
if (isDisabled(element)) {
element.disabled = false;
}
if (!isFocusable(element)) {
element.tabIndex = -1;
}
}
// Find the first focusable element.
// The candidates are the element and it's descendants.
// The search is performed depth-first.
function findFirstFocusableElement(element) {
if (isFocusable(element)) {
return element;
}
var children = element.children;
var length = children.length;
var child;
var focusableDescendant;
for (var i = 0; i < length; i += 1) {
child = children[i];
focusableDescendant = findFirstFocusableElement(child);
if (focusableDescendant) {
return focusableDescendant;
}
}
return null;
}
// Find the first focusable element.
// The candidates are the element and it's descendants.
// The search is performed depth-first.
function findLastFocusableElement(element) {
var children = element.children;
var length = children.length;
var child;
var focusableDescendant;
for (var i = length -1; i >= 0; i -= 1) {
child = children[i];
focusableDescendant = findLastFocusableElement(child);
if (focusableDescendant) {
return focusableDescendant;
}
}
if (isFocusable(element)) {
return element;
}
return null;
}
function focus(element) {
makeFocusable(element);
element.focus();
state.lastFocus = element;
}
function resolveFocus(parent, defaultFocus) {
var focusElement;
if (defaultFocus) {
focusElement = defaultFocus;
} else {
focusElement = findFirstFocusableElement(parent) || parent;
if (focusElement === state.lastFocus) {
focusElement = findLastFocusableElement(parent) || parent;
}
}
focus(focusElement);
}
function focusFirstInElement(element) {
var focusElement = findFirstFocusableElement(element) || element;
focus(focusElement);
}
function focusLastInElement(element) {
var focusElement = findLastFocusableElement(element) || element;
focus(focusElement);
}
// State is kept is these variables.
// Since only one modal dialog can capture focus at a time the state is a singleton.
var state = {
eventListenerArguments: null,
eventListenerContext: null,
lastFocus: null
};
function releaseModalFocus(focusElement) {
var eventListenerContext = state.eventListenerContext;
var eventListenerArguments = state.eventListenerArguments;
if (eventListenerContext && eventListenerArguments) {
eventListenerContext.removeEventListener.apply(eventListenerContext, eventListenerArguments);
}
// Reset the state object
state.eventListenerContext = null;
state.eventListenerArguments = null;
state.lastFocus = null;
if (focusElement) {
focusElement.focus();
}
}
// Keep focus inside the modal
function restrictFocus(modal, focusedElement) {
if (isAncestor(modal, focusedElement)) {
state.lastFocus = focusedElement;
} else {
resolveFocus(modal);
}
}
// modal, the element in which to contain focus
// focusElement (optional), the element inside the modal to focus when opening
// backgroundElement (optional), All focus events within this element are redirected to the modal. Defaults to document
function captureModalFocus(modal, focusElement, backgroundElement) {
// without a modal there is nothing to capture
if (!modal) {
return null;
}
// If any focus is already being captured, release it now
releaseModalFocus();
// focus the modal so the user knows it was opened
resolveFocus(modal, focusElement);
// Whenever an element outside of the modal is focused, the modal is focused instead
function focusCallback(evnt) {
restrictFocus(modal, evnt.target);
}
// The focus event does not bubble
// however it can be captured on an ancestor element
// by setting useCapture to true
var eventListenerContext = backgroundElement || document;
var eventListenerArguments = ["focus", focusCallback, true];
// Save the eventListener data in the state object so it can be removed later
// by the releaseModalFocus function
state.eventListenerContext = eventListenerContext;
state.eventListenerArguments = eventListenerArguments;
eventListenerContext.addEventListener.apply(eventListenerContext, eventListenerArguments);
}
var focusManager = {
capture: captureModalFocus,
release: releaseModalFocus,
focusFirstInElement: focusFirstInElement,
focusLastInElement: focusLastInElement
};
///////////////////////////////////////////////
//Номер баги
var bugId = getIdFromUrl() || getBugIdFromField();
......@@ -209,7 +13,7 @@ var protocol = window.location.protocol;
var changed_remain = 0;
//Создание баги
var etersoft_create = window.location.href.search('enter') !== -1 ? 1 : 0;
var etersoft_create = window.location.href.search("enter") !== -1 ? 1 : 0;
// Объект таймера, создается при инициализации
// Подробнее про таймер см. timer_common.js
......@@ -293,8 +97,8 @@ function isworker() {
return email == assignemail;
}
window.addEventListener('load', function () {
function getTimespentValue() {
window.addEventListener("load", function() {
function getTimespentValue() {
let timespent = document.querySelector("#timespent").value;
let timespentValue = timespent.split(":");
......@@ -306,15 +110,15 @@ function getTimespentValue() {
timespentValue = hours + minutes + seconds;
return timespentValue;
}
}
// add listener for comment commit
//let commitBtn = document.querySelector("#commit");
let openButton = document.querySelector("#commit");
let closeButton = document.querySelectorAll("#timeQuestionDiv .close");
let dialog = document.querySelector("#timeQuestionDiv");
// add listener for comment commit
//let commitBtn = document.querySelector("#commit");
let openButton = document.querySelector("#commit");
let closeButton = document.querySelectorAll("#timeQuestionDiv .close");
let dialog = document.querySelector("#timeQuestionDiv");
openButton.addEventListener("click", function(event) {
openButton.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
......@@ -324,36 +128,49 @@ openButton.addEventListener("click", function(event) {
focusManager.capture(dialog);
// write work time in input value
document.querySelector("#realworktime").value = timespentValue;
document.querySelector("#saveTime").dataset['time'] = timespentValue;
});
document.querySelector("#realworktime").addEventListener("change", function() {
document.querySelector("#saveTime").dataset["time"] = document.querySelector("#realworktime").value;
console.log('time changed:', document.querySelector("#saveTime").dataset["time"]);
});
document.querySelector("#realworktime").value =
localStorage.time === undefined ? timespentValue : localStorage.time;
document.querySelector("#saveTime").dataset["time"] = timespentValue;
});
document.querySelector("#realworktime").addEventListener("paste", function() {
document.querySelector("#saveTime").dataset["time"] = document.querySelector("#realworktime").value;
console.log('time changed:', document.querySelector("#saveTime").dataset["time"]);
});
document
.querySelector("#realworktime")
.addEventListener("change", function() {
document.querySelector("#saveTime").dataset["time"] = this.value;
localStorage.time = this.value;
console.log(
"time changed:",
document.querySelector("#saveTime").dataset["time"]
);
});
document.querySelector("#realworktime").addEventListener("paste", function() {
document.querySelector("#saveTime").dataset["time"] = this.value;
localStorage.time = this.value;
console.log(
"time changed:",
document.querySelector("#saveTime").dataset["time"]
);
});
// add listener for time commit
let btn = document.querySelector("#saveTime");
// add listener for time commit
let btn = document.querySelector("#saveTime");
btn.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
// let's calc time for #work_time input
let workTime = parseInt(document.querySelector('#realworktime').value);
workTime = workTime === parseInt(btn.dataset["time"]) ? parseInt(btn.dataset["time"]) : workTime;
let workTime = parseInt(document.querySelector("#realworktime").value);
workTime =
workTime === parseInt(btn.dataset["time"])
? parseInt(btn.dataset["time"])
: workTime;
workTime = workTime > 0 ? workTime : 1;
let workTimeValue = Math.ceil(workTime / 60 * 100) / 100;
let productiveTime = parseInt(document.querySelector('#ProductTime').value);
let workTimeValue = Math.ceil((workTime / 60) * 100) / 100;
let productiveTime = parseInt(document.querySelector("#ProductTime").value);
productiveTime = productiveTime > 0 ? productiveTime : 1;
let productiveTimeValue = Math.ceil(productiveTime / 60 * 100) / 100;
let productiveTimeValue = Math.ceil((productiveTime / 60) * 100) / 100;
document.querySelector("#work_time").value = workTimeValue;
document.querySelector("#productive_time").value = productiveTimeValue;
......@@ -366,19 +183,24 @@ let btn = document.querySelector("#saveTime");
if (comment.length !== 0) {
if (comment.length < 9) {
alert("Слишком короткий комментарий");
}
else if (productiveTimeValue > 8 || workTimeValue > 8) {
alert("Недопустимо указывать отработанное/продуктивное время более восьми часов. Правильным следованием рабочему процессу было бы выполнение работы по частям, о каждой из которых будет написано отдельно.");
}
else if (productiveTimeValue > 2 && comment.length < productiveTimeValue * 60) {
alert("Недопустимо коротко комментировать длительные работы. Мы ожидаем не менее 60 символов на каждый указанный час.");
}
else if (productiveTimeValue > workTimeValue) {
} else if (productiveTimeValue > 8 || workTimeValue > 8) {
alert(
"Недопустимо указывать отработанное/продуктивное время более восьми часов. Правильным следованием рабочему процессу было бы выполнение работы по частям, о каждой из которых будет написано отдельно."
);
} else if (
productiveTimeValue > 2 &&
comment.length < productiveTimeValue * 60
) {
alert(
"Недопустимо коротко комментировать длительные работы. Мы ожидаем не менее 60 символов на каждый указанный час."
);
} else if (productiveTimeValue > workTimeValue) {
alert("Продуктивное время не может быть больше отработанного!");
} else {
let bugForm = etersoft_create === 1 ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
timer.clear();
localStorage.removeItem("time");
}
} else {
alert("Поле комментария не может быть пустым!");
......@@ -390,29 +212,29 @@ let btn = document.querySelector("#saveTime");
function validate(evt) {
let theEvent = evt || window.event;
let key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
key = String.fromCharCode(key);
let regex = /[0-9\s]/;
if( !regex.test(key) ) {
if (!regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
document.querySelector('#realworktime').onkeypress = function() {
document.querySelector("#realworktime").onkeypress = function() {
validate(event);
}
};
document.querySelector('#realworktime').onpaste = function() {
document.querySelector("#realworktime").onpaste = function() {
validate(event);
}
};
document.querySelector('#ProductTime').onkeypress = function() {
document.querySelector("#ProductTime").onkeypress = function() {
validate(event);
}
};
document.querySelector('#ProductTime').onpaste = function() {
document.querySelector("#ProductTime").onpaste = function() {
validate(event);
}
};
//////////////////////////////////////////////////////////////
......
js/etersoft/timersplash.css
View file @ 313d4e2c
......@@ -145,7 +145,7 @@ fieldset {
resize: none;
}
.workTime button[type="submit"], .workTime__button {
.workTime button[type="submit"], .workTime__button, .workTime__button--save {
cursor: pointer;
width: 100%;
border: none;
......@@ -155,7 +155,7 @@ fieldset {
font-size: 15px;
}
.workTime__button{
.workTime__button {
margin-left: 5px;
}
......@@ -176,45 +176,34 @@ fieldset {
.workTime__input:focus,
.workTime__button:focus,
.workTime__button--save:focus,
.close:focus {
outline: 2px solid rgba(82, 157, 236, 0.8);
box-sizing: border-box;
}
.workTimeInner{
.workTimeInner {
display: flex;
margin-top: 0.5rem;
}
.close {
position: absolute;
right: 10px;
top: 10px;
width: 25px;
height: 25px;
right: 5px;
top: 0;
opacity: 0.4;
cursor: pointer;
font-size: 48px;
border: none;
box-sizing: border-box;
background: none;
text-decoration: none;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: #000;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
::-webkit-input-placeholder {
color: #888;
}
......
template/en/default/etersoft/timersplash.html.tmpl
View file @ 313d4e2c
......@@ -16,11 +16,10 @@
<div class="container">
<div class="workTime">
<h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset>
Отработанное время:
<div class="workTimeInner">
<input class="workTime__input" id="realworktime" name="realworktime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus>
<input class="workTime__input" id="realworktime" name="realworktime" data-time="" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="2">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="3">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="4">15</button>
......@@ -30,7 +29,7 @@
<fieldset>
Продуктивное время:
<div class="workTimeInner">
<input id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required>
<input class="workTime__input" id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="7">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="8">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="9">15</button>
......@@ -38,12 +37,13 @@
</div>
</fieldset>
<fieldset>
<button class="workTime__button" id="saveTime" tabindex="11">Сохранить</button>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<a onclick="closeDiv();" class="close" tabindex="12"></a>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script>
template/ru/default/etersoft/timersplash.html.tmpl
View file @ 313d4e2c
......@@ -16,34 +16,34 @@
<div class="container">
<div class="workTime">
<h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset>
Отработанное время:
<div class="workTimeInner">
<input class="workTime__input" id="realworktime" name="realworktime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#realworktime').value=this.dataset['time']">30</button>
<input class="workTime__input" id="realworktime" name="realworktime" data-time="" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="2">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="3">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="4">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="5">30</button>
</div>
</fieldset>
<fieldset>
Продуктивное время:
<div class="workTimeInner">
<input id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="2" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">30</button>
<input class="workTime__input" id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="7">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="8">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="9">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="10">30</button>
</div>
</fieldset>
<fieldset>
<button class="workTime__button" id="saveTime">Сохранить</button>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<a onclick="closeDiv();" class="close"></a>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment