Skip to content

Commit 61267ec

Browse files
artfartf
authored
Merge pull request #1397 from artf/touch-support-plg
Touch support
2 parents 927fd70 + 87652d4 commit 61267ec

File tree

14 files changed

+63
-38
lines changed

14 files changed

+63
-38
lines changed

‎dist/css/grapes.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/grapes.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32044,7 +32044,11 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({
3204432044
* @private
3204532045
*/
3204632046
initToolbar: function initToolbar() {
32047+
var em = this.em;
32048+
3204732049
var model = this;
32050+
var ppfx = em && em.getConfig('stylePrefix') || '';
32051+
3204832052
if (!model.get('toolbar')) {
3204932053
var tb = [];
3205032054
if (model.collection) {
@@ -32055,7 +32059,10 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({
3205532059
}
3205632060
if (model.get('draggable')) {
3205732061
tb.push({
32058-
attributes: { class: 'fa fa-arrows', draggable: true },
32062+
attributes: {
32063+
class: 'fa fa-arrows ' + ppfx + 'no-touch-actions',
32064+
draggable: true
32065+
},
3205932066
//events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
3206032067
command: 'tlb-move'
3206132068
});
@@ -37684,7 +37691,7 @@ module.exports = function () {
3768437691
plugins: plugins,
3768537692

3768637693
// Will be replaced on build
37687-
version: '0.14.27',
37694+
version: '0.14.28-rc.2-touch',
3768837695

3768937696
/**
3769037697
* Initializes an editor based on passed options
@@ -37718,7 +37725,7 @@ module.exports = function () {
3771837725
// Try to search in global context
3771937726
if (!plugin) {
3772037727
var wplg = window[pluginId];
37721-
plugin = wplg && wplg.defaults ? wplg.defaults : wplg;
37728+
plugin = wplg && wplg.default ? wplg.default : wplg;
3772237729
}
3772337730

3772437731
if (plugin) {
@@ -38554,6 +38561,7 @@ var ItemsView = void 0;
3855438561
module.exports = _backbone2.default.View.extend({
3855538562
events: {
3855638563
'mousedown [data-toggle-move]': 'startSort',
38564+
'touchstart [data-toggle-move]': 'startSort',
3855738565
'click [data-toggle-visible]': 'toggleVisibility',
3855838566
'click [data-toggle-select]': 'handleSelect',
3855938567
'mouseover [data-toggle-select]': 'handleHover',
@@ -38762,7 +38770,7 @@ module.exports = _backbone2.default.View.extend({
3876238770
e.stopPropagation();
3876338771
var sorter = this.sorter;
3876438772
// Right or middel click
38765-
if (e.button !== 0) return;
38773+
if (e.button && e.button !== 0) return;
3876638774
sorter && sorter.startSort(e.target);
3876738775
},
3876838776

@@ -44897,14 +44905,17 @@ module.exports = _backbone2.default.View.extend({
4489744905
events: {
4489844906
click: 'active',
4489944907
'click [data-close-layer]': 'remove',
44900-
'mousedown [data-move-layer]': 'initSorter'
44908+
'mousedown [data-move-layer]': 'initSorter',
44909+
'touchstart [data-move-layer]': 'initSorter'
4490144910
},
4490244911

4490344912
template: function template(model) {
44904-
var pfx = this.pfx;
44913+
var pfx = this.pfx,
44914+
ppfx = this.ppfx;
44915+
4490544916
var label = 'Layer ' + model.get('index');
4490644917

44907-
return '\n <div id="' + pfx + 'move" data-move-layer>\n <i class="fa fa-arrows"></i>\n </div>\n <div id="' + pfx + 'label">' + label + '</div>\n <div id="' + pfx + 'preview-box">\n \t<div id="' + pfx + 'preview" data-preview></div>\n </div>\n <div id="' + pfx + 'close-layer" class="' + pfx + 'btn-close" data-close-layer>\n &Cross;\n </div>\n <div id="' + pfx + 'inputs" data-properties></div>\n <div style="clear:both"></div>\n ';
44918+
return '\n <div id="' + pfx + 'move" class="' + ppfx + 'no-touch-actions" data-move-layer>\n <i class="fa fa-arrows"></i>\n </div>\n <div id="' + pfx + 'label">' + label + '</div>\n <div id="' + pfx + 'preview-box">\n \t<div id="' + pfx + 'preview" data-preview></div>\n </div>\n <div id="' + pfx + 'close-layer" class="' + pfx + 'btn-close" data-close-layer>\n &Cross;\n </div>\n <div id="' + pfx + 'inputs" data-properties></div>\n <div style="clear:both"></div>\n ';
4490844919
},
4490944920
initialize: function initialize() {
4491044921
var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -44913,6 +44924,7 @@ module.exports = _backbone2.default.View.extend({
4491344924
this.stackModel = o.stackModel || {};
4491444925
this.config = o.config || {};
4491544926
this.pfx = this.config.stylePrefix || '';
44927+
this.ppfx = this.config.pStylePrefix || '';
4491644928
this.sorter = o.sorter || null;
4491744929
this.propsConfig = o.propsConfig || {};
4491844930
this.customPreview = o.onPreview;
@@ -48994,7 +49006,7 @@ exports.default = function ($, undefined) {
4899449006
return stop();
4899549007
}
4899649008

48997-
var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];
49009+
var t0 = e && e.touches && e.touches[0];
4899849010
var pageX = t0 && t0.pageX || e.pageX;
4899949011
var pageY = t0 && t0.pageY || e.pageY;
4900049012

@@ -50720,7 +50732,7 @@ var Droppable = function () {
5072050732
value: function getContentByData(dataTransfer) {
5072150733
var em = this.em;
5072250734
var types = dataTransfer.types;
50723-
var files = dataTransfer.files;
50735+
var files = dataTransfer.files || [];
5072450736
var dragContent = em.get('dragContent');
5072550737
var content = dataTransfer.getData('text');
5072650738

@@ -51642,7 +51654,7 @@ module.exports = _backbone2.default.View.extend({
5164251654
}
5164351655

5164451656
(0, _mixins.on)(container, 'mousemove dragover', this.onMove);
51645-
(0, _mixins.on)(docs, 'mouseup dragend', this.endMove);
51657+
(0, _mixins.on)(docs, 'mouseup dragend touchend', this.endMove);
5164651658
(0, _mixins.on)(docs, 'keydown', this.rollback);
5164751659
onStart && onStart();
5164851660

@@ -52278,7 +52290,7 @@ module.exports = _backbone2.default.View.extend({
5227852290
lastPos = this.lastPos;
5227952291

5228052292
(0, _mixins.off)(container, 'mousemove dragover', this.onMove);
52281-
(0, _mixins.off)(docs, 'mouseup dragend', this.endMove);
52293+
(0, _mixins.off)(docs, 'mouseup dragend touchend', this.endMove);
5228252294
(0, _mixins.off)(docs, 'keydown', this.rollback);
5228352295
//this.$document.off('mouseup', this.endMove);
5228452296
//this.$document.off('keydown', this.rollback);

‎dist/grapes.min.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/grapes.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "grapesjs",
33
"description": "Free and Open Source Web Builder Framework",
4-
"version": "0.14.27",
4+
"version": "0.14.28-rc.2-touch",
55
"author": "Artur Arseniev",
66
"license": "BSD-3-Clause",
77
"homepage": "http://grapesjs.com",

‎src/dom_components/model/Component.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -547,7 +547,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
547547
* @private
548548
*/
549549
initToolbar() {
550-
var model = this;
550+
const { em } = this;
551+
const model = this;
552+
const ppfx = (em && em.getConfig('stylePrefix')) || '';
553+
551554
if (!model.get('toolbar')) {
552555
var tb = [];
553556
if (model.collection) {
@@ -558,7 +561,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
558561
}
559562
if (model.get('draggable')) {
560563
tb.push({
561-
attributes: { class: 'fa fa-arrows', draggable: true },
564+
attributes: {
565+
class: `fa fa-arrows ${ppfx}no-touch-actions`,
566+
draggable: true
567+
},
562568
//events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
563569
command: 'tlb-move'
564570
});

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module.exports = (() => {
6060
// Try to search in global context
6161
if (!plugin) {
6262
const wplg = window[pluginId];
63-
plugin = wplg && wplg.defaults ? wplg.defaults : wplg;
63+
plugin = wplg && wplg.default ? wplg.default : wplg;
6464
}
6565

6666
if (plugin) {

‎src/navigator/view/ItemView.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ let ItemsView;
99
module.exports = Backbone.View.extend({
1010
events: {
1111
'mousedown [data-toggle-move]': 'startSort',
12+
'touchstart [data-toggle-move]': 'startSort',
1213
'click [data-toggle-visible]': 'toggleVisibility',
1314
'click [data-toggle-select]': 'handleSelect',
1415
'mouseover [data-toggle-select]': 'handleHover',
@@ -225,7 +226,7 @@ module.exports = Backbone.View.extend({
225226
e.stopPropagation();
226227
const sorter = this.sorter;
227228
// Right or middel click
228-
if (e.button !== 0) return;
229+
if (e.button && e.button !== 0) return;
229230
sorter && sorter.startSort(e.target);
230231
},
231232

‎src/style_manager/view/LayerView.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ module.exports = Backbone.View.extend({
44
events: {
55
click: 'active',
66
'click [data-close-layer]': 'remove',
7-
'mousedown [data-move-layer]': 'initSorter'
7+
'mousedown [data-move-layer]': 'initSorter',
8+
'touchstart [data-move-layer]': 'initSorter'
89
},
910

1011
template(model) {
11-
const pfx = this.pfx;
12+
const { pfx, ppfx } = this;
1213
const label = `Layer ${model.get('index')}`;
1314

1415
return `
15-
<div id="${pfx}move" data-move-layer>
16+
<div id="${pfx}move" class="${ppfx}no-touch-actions" data-move-layer>
1617
<i class="fa fa-arrows"></i>
1718
</div>
1819
<div id="${pfx}label">${label}</div>
@@ -32,6 +33,7 @@ module.exports = Backbone.View.extend({
3233
this.stackModel = o.stackModel || {};
3334
this.config = o.config || {};
3435
this.pfx = this.config.stylePrefix || '';
36+
this.ppfx = this.config.pStylePrefix || '';
3537
this.sorter = o.sorter || null;
3638
this.propsConfig = o.propsConfig || {};
3739
this.customPreview = o.onPreview;

‎src/styles/scss/main.scss

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -213,12 +213,18 @@ $prefix: $app-prefix;
213213
@include user-select(none);
214214
}
215215

216-
.#{$app-prefix}editor {
217-
font-family: $mainFont;
218-
font-size: $fontSizeS;
219-
position: relative;
220-
box-sizing: border-box;
221-
height: 100%;
216+
.#{$app-prefix} {
217+
&no-touch-actions {
218+
touch-action: none;
219+
}
220+
221+
&editor {
222+
font-family: $mainFont;
223+
font-size: $fontSizeS;
224+
position: relative;
225+
box-sizing: border-box;
226+
height: 100%;
227+
}
222228
}
223229

224230
.#{$app-prefix}freezed,

‎src/utils/ColorPicker.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1172,10 +1172,7 @@ export default function($, undefined) {
11721172
return stop();
11731173
}
11741174

1175-
var t0 =
1176-
e.originalEvent &&
1177-
e.originalEvent.touches &&
1178-
e.originalEvent.touches[0];
1175+
var t0 = e && e.touches && e.touches[0];
11791176
var pageX = (t0 && t0.pageX) || e.pageX;
11801177
var pageY = (t0 && t0.pageY) || e.pageY;
11811178

‎src/utils/Droppable.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default class Droppable {
113113
getContentByData(dataTransfer) {
114114
const em = this.em;
115115
const types = dataTransfer.types;
116-
const files = dataTransfer.files;
116+
const files = dataTransfer.files || [];
117117
const dragContent = em.get('dragContent');
118118
let content = dataTransfer.getData('text');
119119

‎src/utils/Sorter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ module.exports = Backbone.View.extend({
279279
}
280280

281281
on(container, 'mousemove dragover', this.onMove);
282-
on(docs, 'mouseup dragend', this.endMove);
282+
on(docs, 'mouseup dragend touchend', this.endMove);
283283
on(docs, 'keydown', this.rollback);
284284
onStart && onStart();
285285

@@ -912,7 +912,7 @@ module.exports = Backbone.View.extend({
912912
const onEndMove = this.onEndMove;
913913
const { target, lastPos } = this;
914914
off(container, 'mousemove dragover', this.onMove);
915-
off(docs, 'mouseup dragend', this.endMove);
915+
off(docs, 'mouseup dragend touchend', this.endMove);
916916
off(docs, 'keydown', this.rollback);
917917
//this.$document.off('mouseup', this.endMove);
918918
//this.$document.off('keydown', this.rollback);

‎webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ module.exports = env => {
4040
plugins: plugins,
4141
mode: isProd ? 'production' : 'development',
4242
devtool: isProd ? 'source-map' : (!env ? 'cheap-module-eval-source-map' : false),
43+
devServer: { headers: { 'Access-Control-Allow-Origin': '*' } },
4344
module: {
4445
rules: [{
4546
test: /\/index\.js$/,

0 commit comments

Comments
 (0)