Skip to content

Commit e82cf3c

Browse files
author
nboichev
committed
Fix keyboard shortcuts bug, that causes the PixelParallel methods to be triggered more than once. Resolve #2 
1 parent 8a14c05 commit e82cf3c

5 files changed

Lines changed: 202 additions & 112 deletions

File tree

‎extension/PixelParallel.js‎

Lines changed: 98 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9064,6 +9064,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
90649064

90659065
var db = new __WEBPACK_IMPORTED_MODULE_2__utils_db_js__["a" /* default */]();
90669066

9067+
var mousetrap = {
9068+
main: new __WEBPACK_IMPORTED_MODULE_0_mousetrap___default.a(window),
9069+
panel: null
9070+
};
9071+
90679072
/* harmony default export */ exports["default"] = {
90689073
name: 'pixelParallel',
90699074
data: function data() {
@@ -9181,7 +9186,8 @@ var db = new __WEBPACK_IMPORTED_MODULE_2__utils_db_js__["a" /* default */]();
91819186

91829187
this.enabled = false;
91839188

9184-
__WEBPACK_IMPORTED_MODULE_0_mousetrap___default.a.pause();
9189+
if (mousetrap.main) mousetrap.main.pause();
9190+
if (mousetrap.panel) mousetrap.panel.pause();
91859191

91869192
this.$children[0].detach();
91879193

@@ -9194,7 +9200,8 @@ var db = new __WEBPACK_IMPORTED_MODULE_2__utils_db_js__["a" /* default */]();
91949200

91959201
this.enabled = true;
91969202

9197-
__WEBPACK_IMPORTED_MODULE_0_mousetrap___default.a.unpause();
9203+
if (mousetrap.main) mousetrap.main.unpause();
9204+
if (mousetrap.panel) mousetrap.panel.unpause();
91989205

91999206
document.body.appendChild(this.$el);
92009207

@@ -9212,74 +9219,95 @@ var db = new __WEBPACK_IMPORTED_MODULE_2__utils_db_js__["a" /* default */]();
92129219

92139220
this.disable();
92149221
},
9215-
bindBindings: function bindBindings(bindings, element) {
9222+
bindKeyboard: function bindKeyboard(bindings, element) {
92169223
var _this3 = this;
92179224

9218-
Object.keys(bindings).forEach(function (key) {
9219-
var keyString = bindings[key].base ? 'ctrl+alt+' + bindings[key].key : bindings[key].key;
9220-
var keyStringWithShift = bindings[key].base ? 'ctrl+alt+shift+' + bindings[key].key : 'shift+' + bindings[key].key;
9221-
9222-
__WEBPACK_IMPORTED_MODULE_0_mousetrap___default()(element || window).bind(keyString, function (event) {
9223-
event.preventDefault();
9225+
var instance = __WEBPACK_IMPORTED_MODULE_0_mousetrap___default()(element || window);
92249226

9225-
switch (key) {
9226-
case 'minimize':
9227-
_this3.config.minimized = !_this3.config.minimized;
9228-
break;
9229-
9230-
case 'toggle':
9231-
_this3.config.visible = !_this3.config.visible;
9232-
break;
9227+
if (mousetrap.main) {
9228+
console.log('reset');
9229+
mousetrap.main.reset();
9230+
}
92339231

9234-
case 'lock':
9235-
_this3.config.image.lock = !_this3.config.image.lock;
9236-
break;
9232+
if (mousetrap.panel) {
9233+
console.log('reset');
9234+
mousetrap.panel.reset();
9235+
}
92379236

9238-
case 'resetPosition':
9239-
_this3.config.image.top = 0;
9240-
_this3.config.image.left = 0;
9241-
break;
9237+
setTimeout(function () {
9238+
Object.keys(bindings).forEach(function (key) {
9239+
console.log(key);
9240+
var keyString = bindings[key].base ? 'ctrl+alt+' + bindings[key].key : bindings[key].key;
9241+
var keyStringWithShift = bindings[key].base ? 'ctrl+alt+shift+' + bindings[key].key : 'shift+' + bindings[key].key;
92429242

9243-
case 'left':
9244-
_this3.config.image.left -= 1;
9245-
break;
9243+
instance.bind(keyString, function (event) {
9244+
event.preventDefault();
92469245

9247-
case 'right':
9248-
_this3.config.image.left += 1;
9249-
break;
9246+
switch (key) {
9247+
case 'minimize':
9248+
_this3.config.minimized = !_this3.config.minimized;
9249+
break;
92509250

9251-
case 'up':
9252-
_this3.config.image.top -= 1;
9253-
break;
9251+
case 'toggle':
9252+
_this3.config.visible = !_this3.config.visible;
9253+
break;
92549254

9255-
case 'down':
9256-
_this3.config.image.top += 1;
9257-
break;
9258-
}
9259-
});
9255+
case 'lock':
9256+
_this3.config.image.lock = !_this3.config.image.lock;
9257+
break;
92609258

9261-
if (key === 'left' || key === 'right' || key === 'up' || key === 'down') {
9262-
__WEBPACK_IMPORTED_MODULE_0_mousetrap___default()(element || window).bind(keyStringWithShift, function (event) {
9263-
event.preventDefault();
9259+
case 'resetPosition':
9260+
_this3.config.image.top = 0;
9261+
_this3.config.image.left = 0;
9262+
break;
92649263

9265-
switch (key) {
92669264
case 'left':
9267-
_this3.config.image.left -= 10;
9265+
_this3.config.image.left -= 1;
92689266
break;
92699267

92709268
case 'right':
9271-
_this3.config.image.left += 10;
9269+
_this3.config.image.left += 1;
92729270
break;
92739271

92749272
case 'up':
9275-
_this3.config.image.top -= 10;
9273+
_this3.config.image.top -= 1;
92769274
break;
92779275

92789276
case 'down':
9279-
_this3.config.image.top += 10;
9277+
_this3.config.image.top += 1;
92809278
break;
92819279
}
92829280
});
9281+
9282+
if (key === 'left' || key === 'right' || key === 'up' || key === 'down') {
9283+
instance.bind(keyStringWithShift, function (event) {
9284+
event.preventDefault();
9285+
9286+
switch (key) {
9287+
case 'left':
9288+
_this3.config.image.left -= 10;
9289+
break;
9290+
9291+
case 'right':
9292+
_this3.config.image.left += 10;
9293+
break;
9294+
9295+
case 'up':
9296+
_this3.config.image.top -= 10;
9297+
break;
9298+
9299+
case 'down':
9300+
_this3.config.image.top += 10;
9301+
break;
9302+
}
9303+
});
9304+
}
9305+
});
9306+
9307+
if (element) {
9308+
mousetrap.panel = instance;
9309+
} else {
9310+
mousetrap.main = instance;
92839311
}
92849312
});
92859313
},
@@ -9321,16 +9349,28 @@ var db = new __WEBPACK_IMPORTED_MODULE_2__utils_db_js__["a" /* default */]();
93219349
}
93229350
};
93239351

9324-
__WEBPACK_IMPORTED_MODULE_0_mousetrap___default.a.reset();
9352+
if (mousetrap.main) {
9353+
mousetrap.main.reset();
9354+
}
9355+
9356+
if (mousetrap.panel) {
9357+
mousetrap.panel.reset();
9358+
}
93259359

93269360
if ('chrome' in window && 'storage' in chrome && 'sync' in chrome.storage) {
93279361
chrome.storage.sync.get(defaultBindings, function (bindings) {
9328-
_this4.bindBindings(bindings);
9329-
_this4.bindBindings(bindings, _this4.$children[0].isolatorElement.contentWindow);
9362+
_this4.bindKeyboard(bindings);
9363+
9364+
if (_this4.$children[0].isolatorElement.contentWindow) {
9365+
_this4.bindKeyboard(bindings, _this4.$children[0].isolatorElement.contentWindow);
9366+
}
93309367
});
93319368
} else {
9332-
this.bindBindings(defaultBindings);
9333-
this.bindBindings(defaultBindings, this.$children[0].isolatorElement.contentWindow);
9369+
this.bindKeyboard(defaultBindings);
9370+
9371+
if (this.$children[0].isolatorElement.contentWindow) {
9372+
this.bindKeyboard(defaultBindings, this.$children[0].isolatorElement.contentWindow);
9373+
}
93349374
}
93359375
}
93369376
},
@@ -9904,6 +9944,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
99049944
};
99059945
},
99069946
mounted: function mounted() {
9947+
var _this = this;
9948+
99079949
this.isolatorElement = this.$el.querySelector('.pixelParallel-panel-isolator');
99089950
this.contentElement = this.$el.querySelector('.pixelParallel-panel-content');
99099951
this.styleElement = document.createElement('style');
@@ -9913,6 +9955,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
99139955
this.styleElement.textContent += __WEBPACK_IMPORTED_MODULE_2__styles_panel_js__["a" /* default */];
99149956

99159957
this.attach();
9958+
9959+
// Fix Firefox issue
9960+
this.isolatorElement.addEventListener('load', function () {
9961+
_this.attach();
9962+
});
99169963
},
99179964

99189965

‎extension/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifest_version": 2,
33
"name": "PixelParallel",
4-
"version": "1.0.5",
4+
"version": "1.0.6",
55

66
"description": "Frontend development and QA tool for pixel perfect designs.",
77
"icons": {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pixel-parallel",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "Frontend development and QA tool for pixel perfect designs.",
55
"main": "dist/PixelParallel.js",
66
"scripts": {

0 commit comments

Comments
 (0)