ryuno-ki
/
Share-Backported
mirror of https://github.com/Ryuno-Ki/Share-Backported.git
1
0
Fork 0
Code Releases Activity

#15 (page_action icon light/dark added), #110 and few improvements GUI (#112)

Browse Source 
* #111 and few improvements GUI
126-button-sizes
Saverio Morelli 3 years ago committed by Daniele Scasciafratte
parent f48cff2bc9
commit 8e84f61ca5
5 changed files with 204 additions and 105 deletions
Show Stats Download Patch File Download Diff File

73
background.js
Unescape View File

@ -1,5 +1,8 @@
/* global browser, console */
// call function which get the address bar color (toolbar_field)
getIconColour();
var sbId, sbPrevUrl;
// Create the window and save the tab id
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
@ -37,28 +40,52 @@ browser.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
}
});
// Add pageaction
browser.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var getting = browser.storage.local.get('pageaction');
getting.then(function(result) {
var pageaction = result.pageaction;
if (!pageaction) {
if (tab.url.indexOf('about:') !== 0 && tab.url.indexOf('moz-extension:') !== 0) {
browser.pageAction.setIcon({
tabId: tab.id,
path: 'icon.svg'
});
browser.pageAction.setTitle({
tabId: tab.id,
title: 'Share'
});
browser.pageAction.show(tab.id);
browser.pageAction.setPopup({
tabId,
popup: '/modal/modal.html'
});
}
setPageActionIcon("light");
function getStyle(themeInfo) {
var rgb_list = ["rgb(71, 71, 73)", "rgb(50, 50, 52)"]; // list of RGB where icon_theme should be light
if (themeInfo.colors) {
var colour = "" + themeInfo.colors.toolbar_field;
if (colour != "light") {
if (!rgb_list.includes(colour))
colour = "dark";
else
colour = "light";
}
}, function(error) {
console.log(`Error: ${error}`);
setPageActionIcon(colour);
}
}
async function getIconColour() {
var themeInfo = await browser.theme.getCurrent();
getStyle(themeInfo);
}
function setPageActionIcon(colour) {
var theme_colour_temp = "icon-" + colour + ".svg";
browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
var getting = browser.storage.local.get('pageaction');
getting.then(function (result) {
var pageaction = result.pageaction;
if (!pageaction) {
if (tab.url.indexOf('about:') !== 0 && tab.url.indexOf('moz-extension:') !== 0) {
browser.pageAction.setIcon({
tabId: tab.id,
path: theme_colour_temp
});
browser.pageAction.setTitle({
tabId: tab.id,
title: 'Share'
});
browser.pageAction.show(tab.id);
browser.pageAction.setPopup({
tabId,
popup: '/modal/modal.html'
});
}
}
}, function (error) {
console.log(`Error: ${error}`);
});
});
});
}

0
icon-dark.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 316 B

6
modal/modal.css
Unescape View File

@ -49,11 +49,10 @@ button {
button:hover {
background-color: #DDDEDF;
}
button:active {
button:active, button:focus {
width: 64px;
height: 64px;
margin: 6px;
background-color: #D2D2D3;
box-shadow: 0px 0px 0px 2px #0A84FF, 0px 0px 0px 5px #B1D6FC;
}
input[type=number] {
@ -92,8 +91,7 @@ button img {
color: blue;
}
span#error_msg
{
span#error_msg {
text-align: center;
width: 100%;
font-size: 14px;

179
options/options.html
Unescape View File

@ -86,6 +86,13 @@
.row {
position: relative;
width: 100%;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid transparent;
border-radius: 3px;
transition: 0.2s;
}
.row [class^="col"] {
@ -148,9 +155,12 @@
clear: both;
}
.widths, .heights, .positions {
.widths, .heights {
width: 100px;
}
.positions {
width: 46px;
}
button {
background-color: #E1E1E2;
@ -168,6 +178,19 @@
background-color: #B1B1B2;
}
.move-up, .move-down {
min-width: 32px;
height: 32px;
display: inline-block;
margin-left: 3px;
}
.move-up::before{
content: "▲";
}
.move-down::before {
content: "▼";
}
input[type=url], input[type=number] {
border-radius: 3px;
border: 1px solid #B5B5B5;
@ -185,8 +208,12 @@
border: 1px solid #0A84FF;
}
.hr
{
.row_focus {
box-shadow: 0px 0px 0px 1px #0A84FF, 0px 0px 0px 4px #B1D6FC;
border: 1px solid #0A84FF;
}
.hr {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #D7D7DB;
@ -223,9 +250,9 @@
<h5>Position</h5>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="facebook">Facebook</label>
<label class="browser-style"><input type="checkbox" id="facebook">Facebook</label>
</div>
<div class="col-3">
<label><input type="number" id="facebook-width" value="575" class="widths"></label>
@ -234,12 +261,12 @@
<label><input type="number" id="facebook-height" value="800" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="facebook-priority" value="1" min="1" step="1" class="positions"></label>
<label><input type="number" id="facebook-priority" value="1" min="1" step="1" class="positions"><button type="button" id="facebook-move-up" class="move-up"></button><button type="button" id="facebook-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="twitter">Twitter</label>
<label class="browser-style"><input type="checkbox" id="twitter">Twitter</label>
</div>
<div class="col-3">
<label><input type="number" id="twitter-width" value="700" class="widths"></label>
@ -248,12 +275,12 @@
<label><input type="number" id="twitter-height" value="300" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="twitter-priority" value="2" min="1" step="1" class="positions"></label>
<label><input type="number" id="twitter-priority" value="2" min="1" step="1" class="positions"><button type="button" id="twitter-move-up" class="move-up"></button><button type="button" id="twitter-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="linkedin">LinkedIn</label>
<label class="browser-style"><input type="checkbox" id="linkedin">LinkedIn</label>
</div>
<div class="col-3">
<label><input type="number" id="linkedin-width" value="700" class="widths"></label>
@ -262,12 +289,12 @@
<label><input type="number" id="linkedin-height" value="500" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="linkedin-priority" value="3" min="1" step="1" class="positions"></label>
<label><input type="number" id="linkedin-priority" value="3" min="1" step="1" class="positions"><button type="button" id="linkedin-move-up" class="move-up"></button><button type="button" id="linkedin-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="tumblr">Tumblr</label>
<label class="browser-style"><input type="checkbox" id="tumblr">Tumblr</label>
</div>
<div class="col-3">
<label><input type="number" id="tumblr-width" value="600" class="widths"></label>
@ -276,12 +303,12 @@
<label><input type="number" id="tumblr-height" value="400" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="tumblr-priority" value="4" min="1" step="1" class="positions"></label>
<label><input type="number" id="tumblr-priority" value="4" min="1" step="1" class="positions"><button type="button" id="tumblr-move-up" class="move-up"></button><button type="button" id="tumblr-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="reddit">Reddit</label>
<label class="browser-style"><input type="checkbox" id="reddit">Reddit</label>
</div>
<div class="col-3">
<label><input type="number" id="reddit-width" value="950" class="widths"></label>
@ -290,12 +317,12 @@
<label><input type="number" id="reddit-height" value="915" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="reddit-priority" value="5" min="1" step="1" class="positions"></label>
<label><input type="number" id="reddit-priority" value="5" min="1" step="1" class="positions"><button type="button" id="reddit-move-up" class="move-up"></button><button type="button" id="reddit-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="telegram">Telegram</label>
<label class="browser-style"><input type="checkbox" id="telegram">Telegram</label>
</div>
<div class="col-3">
<label><input type="number" id="telegram-width" value="600" class="widths"></label>
@ -304,12 +331,12 @@
<label><input type="number" id="telegram-height" value="400" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="telegram-priority" value="6" min="1" step="1" class="positions"></label>
<label><input type="number" id="telegram-priority" value="6" min="1" step="1" class="positions"><button type="button" id="telegram-move-up" class="move-up"></button><button type="button" id="telegram-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="gmail">GMail</label>
<label class="browser-style"><input type="checkbox" id="gmail">GMail</label>
</div>
<div class="col-3">
<label><input type="number" id="gmail-width" value="700" class="widths"></label>
@ -318,12 +345,12 @@
<label><input type="number" id="gmail-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="gmail-priority" value="7" min="1" step="1" class="positions"></label>
<label><input type="number" id="gmail-priority" value="7" min="1" step="1" class="positions"><button type="button" id="gmail-move-up" class="move-up"></button><button type="button" id="gmail-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="diaspora">Diaspora</label>
<label class="browser-style"><input type="checkbox" id="diaspora">Diaspora</label>
</div>
<div class="col-3">
<label><input type="number" id="diaspora-width" value="700" class="widths"></label>
@ -332,12 +359,12 @@
<label><input type="number" id="diaspora-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="diaspora-priority" value="8" min="1" step="1" class="positions"></label>
<label><input type="number" id="diaspora-priority" value="8" min="1" step="1" class="positions"><button type="button" id="diaspora-move-up" class="move-up"></button><button type="button" id="diaspora-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="vkontakte">VKontakte</label>
<label class="browser-style"><input type="checkbox" id="vkontakte">VKontakte</label>
</div>
<div class="col-3">
<label><input type="number" id="vkontakte-width" value="700" class="widths"></label>
@ -346,26 +373,26 @@
<label><input type="number" id="vkontakte-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="vkontakte-priority" value="9" min="1" step="1" class="positions"></label>
<label><input type="number" id="vkontakte-priority" value="9" min="1" step="1" class="positions"><button type="button" id="vkontakte-move-up" class="move-up"></button><button type="button" id="vkontakte-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="yahoo">Yahoo! Mail</label>
<label class="browser-style"><input type="checkbox" id="yahoo">Yahoo! Mail</label>
</div>
<div class="col-3">
<label><input type="number" id="yahoo-width" value="700" class="widths"></label>
<label><input type="number" id="yahoo-width" value="1050" class="widths"></label>
</div>
<div class="col-3">
<label><input type="number" id="yahoo-height" value="340" class="heights"></label>
<label><input type="number" id="yahoo-height" value="500" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="yahoo-priority" value="10" min="1" step="1" class="positions"></label>
<label><input type="number" id="yahoo-priority" value="10" min="1" step="1" class="positions"><button type="button" id="yahoo-move-up" class="move-up"></button><button type="button" id="yahoo-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="pinboard">Pinboard.in</label>
<label class="browser-style"><input type="checkbox" id="pinboard">Pinboard.in</label>
</div>
<div class="col-3">
<label><input type="number" id="pinboard-width" value="700" class="widths"></label>
@ -374,12 +401,12 @@
<label><input type="number" id="pinboard-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="pinboard-priority" value="11" min="1" step="1" class="positions"></label>
<label><input type="number" id="pinboard-priority" value="11" min="1" step="1" class="positions"><button type="button" id="pinboard-move-up" class="move-up"></button><button type="button" id="pinboard-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="mewe">MeWe</label>
<label class="browser-style"><input type="checkbox" id="mewe">MeWe</label>
</div>
<div class="col-3">
<label><input type="number" id="mewe-width" value="700" class="widths"></label>
@ -388,12 +415,12 @@
<label><input type="number" id="mewe-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="mewe-priority" value="12" min="1" step="1" class="positions"></label>
<label><input type="number" id="mewe-priority" value="12" min="1" step="1" class="positions"><button type="button" id="mewe-move-up" class="move-up"></button><button type="button" id="mewe-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="outlook">Outlook</label>
<label class="browser-style"><input type="checkbox" id="outlook">Outlook</label>
</div>
<div class="col-3">
<label><input type="number" id="outlook-width" value="700" class="widths"></label>
@ -402,12 +429,12 @@
<label><input type="number" id="outlook-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="outlook-priority" value="13" min="1" step="1" class="positions"></label>
<label><input type="number" id="outlook-priority" value="13" min="1" step="1" class="positions"><button type="button" id="outlook-move-up" class="move-up"></button><button type="button" id="outlook-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="weibo">Weibo</label>
<label class="browser-style"><input type="checkbox" id="weibo">Weibo</label>
</div>
<div class="col-3">
<label><input type="number" id="weibo-width" value="700" class="widths"></label>
@ -416,12 +443,12 @@
<label><input type="number" id="weibo-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="weibo-priority" value="14" min="1" step="1" class="positions"></label>
<label><input type="number" id="weibo-priority" value="14" min="1" step="1" class="positions"><button type="button" id="weibo-move-up" class="move-up"></button><button type="button" id="weibo-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="skype">Skype</label>
<label class="browser-style"><input type="checkbox" id="skype">Skype</label>
</div>
<div class="col-3">
<label><input type="number" id="skype-width" value="700" class="widths"></label>
@ -430,12 +457,12 @@
<label><input type="number" id="skype-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="skype-priority" value="15" min="1" step="1" class="positions"></label>
<label><input type="number" id="skype-priority" value="15" min="1" step="1" class="positions"><button type="button" id="skype-move-up" class="move-up"></button><button type="button" id="skype-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="wayback">Wayback</label>
<label class="browser-style"><input type="checkbox" id="wayback">Wayback</label>
</div>
<div class="col-3">
<label><input type="number" id="wayback-width" value="700" class="widths"></label>
@ -444,12 +471,12 @@
<label><input type="number" id="wayback-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="wayback-priority" value="16" min="1" step="1" class="positions"></label>
<label><input type="number" id="wayback-priority" value="16" min="1" step="1" class="positions"><button type="button" id="wayback-move-up" class="move-up"></button><button type="button" id="wayback-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="whatsapp">WhatsApp</label>
<label class="browser-style"><input type="checkbox" id="whatsapp">WhatsApp</label>
</div>
<div class="col-3">
<label><input type="number" id="whatsapp-width" value="700" class="widths"></label>
@ -458,12 +485,12 @@
<label><input type="number" id="whatsapp-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="whatsapp-priority" value="17" min="1" step="1" class="positions"></label>
<label><input type="number" id="whatsapp-priority" value="17" min="1" step="1" class="positions"><button type="button" id="whatsapp-move-up" class="move-up"></button><button type="button" id="whatsapp-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="pinterest">Pinterest</label>
<label class="browser-style"><input type="checkbox" id="pinterest">Pinterest</label>
</div>
<div class="col-3">
<label><input type="number" id="pinterest-width" value="700" class="widths"></label>
@ -472,12 +499,12 @@
<label><input type="number" id="pinterest-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="pinterest-priority" value="18" min="1" step="1" class="positions"></label>
<label><input type="number" id="pinterest-priority" value="18" min="1" step="1" class="positions"><button type="button" id="pinterest-move-up" class="move-up"></button><button type="button" id="pinterest-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="evernote">Evernote</label>
<label class="browser-style"><input type="checkbox" id="evernote">Evernote</label>
</div>
<div class="col-3">
<label><input type="number" id="evernote-width" value="700" class="widths"></label>
@ -486,12 +513,12 @@
<label><input type="number" id="evernote-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="evernote-priority" value="19" min="1" step="1" class="positions"></label>
<label><input type="number" id="evernote-priority" value="19" min="1" step="1" class="positions"><button type="button" id="evernote-move-up" class="move-up"></button><button type="button" id="evernote-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="instapaper">Instapaper</label>
<label class="browser-style"><input type="checkbox" id="instapaper">Instapaper</label>
</div>
<div class="col-3">
<label><input type="number" id="instapaper-width" value="700" class="widths"></label>
@ -500,12 +527,12 @@
<label><input type="number" id="instapaper-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="instapaper-priority" value="20" min="1" step="1" class="positions"></label>
<label><input type="number" id="instapaper-priority" value="20" min="1" step="1" class="positions"><button type="button" id="instapaper-move-up" class="move-up"></button><button type="button" id="instapaper-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="scoopit">Scoop.it</label>
<label class="browser-style"><input type="checkbox" id="scoopit">Scoop.it</label>
</div>
<div class="col-3">
<label><input type="number" id="scoopit-width" value="700" class="widths"></label>
@ -514,12 +541,12 @@
<label><input type="number" id="scoopit-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="scoopit-priority" value="21" min="1" step="1" class="positions"></label>
<label><input type="number" id="scoopit-priority" value="21" min="1" step="1" class="positions"><button type="button" id="scoopit-move-up" class="move-up"></button><button type="button" id="scoopit-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label><input type="checkbox" id="googletranslate">Google Translate</label>
<label class="browser-style"><input type="checkbox" id="googletranslate">Google Translate</label>
</div>
<div class="col-3">
<label><input type="number" id="googletranslate-width" value="700" class="widths"></label>
@ -528,10 +555,10 @@
<label><input type="number" id="googletranslate-height" value="700" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="googletranslate-priority" value="22" min="1" step="1" class="positions"></label>
<label><input type="number" id="googletranslate-priority" value="22" min="1" step="1" class="positions"><button type="button" id="googletranslate-move-up" class="move-up"></button><button type="button" id="googletranslate-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label>Shaarli</label>
</div>
@ -542,10 +569,10 @@
<label><input type="number" id="shaarli-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="shaarli-priority" value="23" min="1" step="1" class="positions"></label>
<label><input type="number" id="shaarli-priority" value="23" min="1" step="1" class="positions"><button type="button" id="shaarli-move-up" class="move-up"></button><button type="button" id="shaarli-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row">
<div class="row service">
<div class="col-3">
<label>Mastodon</label>
</div>
@ -556,7 +583,7 @@
<label><input type="number" id="mastodon-height" value="340" class="heights"></label>
</div>
<div class="col-3">
<label><input type="number" id="mastodon-priority" value="24" min="1" step="1" class="positions"></label>
<label><input type="number" id="mastodon-priority" value="24" min="1" step="1" class="positions"><button type="button" id="mastodon-move-up" class="move-up"></button><button type="button" id="mastodon-move-down" class="move-down"></button></label>
</div>
</div>
<div class="row hr">
@ -571,7 +598,7 @@
<div class="col-12">
<h1>PageAction</h1>
<h4>You can hide the <i>PageAction</i> icon (so the shortcut shown in the address bar) - just put a check in the following field, and the press "Save"</h4>
<label><input type="checkbox" id="pageaction">Disable</label>
<label class="browser-style"><input type="checkbox" id="pageaction">Disable</label>
</div>
</div>
<div class="row hr">

51
options/options.js
Unescape View File

@ -19,6 +19,17 @@ function restoreOptions() {
var value = '';
var getting = '';
// set event click for "move-up" and "move-down" and set the text of those buttons
document.querySelectorAll('button[id]').forEach(function(item) {
document.getElementById(item.id).addEventListener('click', function () {
if (item.id.endsWith("move-up")) {
moveUpDown(item.id, "up");
return;
}
moveUpDown(item.id, "down");
});
});
var elements = Promise.all(
[].slice.call(document.querySelectorAll('input[id]')).map(function(el) {
var item = el.id;
@ -35,12 +46,12 @@ function restoreOptions() {
if (isInt || isUrl) {
if(value !== undefined) {
el.value = value;
el.setAttribute('value', value);
el.setAttribute('value', value);
}
} else {
el.checked = value;
}
return Promise.resolve(el);
return Promise.resolve(el);
}, function(error) {
console.log(`Error: ${error}`);
});
@ -144,3 +155,39 @@ function updateState() {
option.value = newValue;
});
}
function moveUpDown(id, way) {
// move the element up/down -> base on "way" variable
var id_temp = (id.toString()).replace("-move-"+way,"");
var priority = document.getElementById(id_temp+"-priority");
way == "up" ? priority.value = parseInt(priority.value)-1 : priority.value = parseInt(priority.value)+1;
// call "onchange" event (forced)
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
priority.dispatchEvent(evt);
}
else {
priority.fireEvent("onchange");
}
setFocusRowTemp(parseInt(priority.value)-1);
priority.focus();
}
function setFocusRowTemp(index) {
// set "focus" on row modified, before clear eventually wrong "class"
clearFocusRowTemp();
service = document.getElementsByClassName("service")[index];
service.classList.add('row_focus');
setTimeout(function() {
service.classList.remove('row_focus')
}, 1000);
}
function clearFocusRowTemp() {
document.querySelectorAll('div').forEach(function (item) {
if (item.classList.contains("service")) {
item.classList.remove('row_focus');
}
});
}

Write Preview
Loading…
Cancel
Save