CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change CSS transforms to work with older browsers (#879)

Browse Source 
* Change the setting of the CSS transform properties on SVG nodes to set both the unprefixed version and the `-webkit-` prefixed version so that Blockly correctly renders in order browsers, such as Safari < 9 and iOS Safari < 9.2. For discussion of this issue, see https://groups.google.com/forum/#!topic/blockly/o3pERaRQhSg

* Correct the separation between the CSS transform property and the rest of the CSS that was in the variable misleadingly called "transform".
This commit is contained in:
Tim Dawborn
2017-01-28 04:19:58 +11:00
committed by picklesrus
parent 20d0730558
commit 39731c6ddc
5 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/block_drag_surface.js
View File

@@ -137,16 +137,15 @@ Blockly.BlockDragSurfaceSvg.prototype.translateAndScaleGroup = function(x, y, sc
* @param {number} y Y translation for the entire surface.
*/
Blockly.BlockDragSurfaceSvg.prototype.translateSurface = function(x, y) {
var transform;
x *= this.scale_;
y *= this.scale_;
// This is a work-around to prevent a the blocks from rendering
// fuzzy while they are being dragged on the drag surface.
x = x.toFixed(0);
y = y.toFixed(0);
transform =
'transform: translate3d(' + x + 'px, ' + y + 'px, 0px); display: block;';
this.SVG_.setAttribute('style', transform);
this.SVG_.style.display = 'block';
Blockly.utils.setCssTransform(this.SVG_,
'translate3d(' + x + 'px, ' + y + 'px, 0px)');
};
/**

2
core/flyout.js
View File

@@ -500,7 +500,7 @@ Blockly.Flyout.prototype.position = function() {
this.svgGroup_.setAttribute("width", this.width_);
this.svgGroup_.setAttribute("height", this.height_);
var transform = 'translate(' + x + 'px,' + y + 'px)';
this.svgGroup_.style.transform = transform;
Blockly.utils.setCssTransform(this.svgGroup_, transform);
// Update the scrollbar (if one exists).
if (this.scrollbar_) {

2
core/scrollbar.js
View File

@@ -384,7 +384,7 @@ Blockly.Scrollbar.prototype.setPosition = function(x, y) {
var tempX = this.position_.x + this.origin_.x;
var tempY = this.position_.y + this.origin_.y;
var transform = 'translate(' + tempX + 'px,' + tempY + 'px)';
this.outerSvg_.style.transform = transform;
Blockly.utils.setCssTransform(this.outerSvg_, transform);
};
/**

12
core/utils.js
View File

@@ -856,3 +856,15 @@ Blockly.utils.runAfterPageLoad = function(fn) {
}, 10);
}
};
/**
* Sets the CSS transform property on an element. This function sets the
* non-vendor-prefixed and vendor-prefixed versions for backwards compatibility
* with older browsers. See http://caniuse.com/#feat=transforms2d
* @param {!Element} node The node which the CSS transform should be applied.
* @param {string} transform The value of the CSS `transform` property.
*/
Blockly.utils.setCssTransform = function(node, transform) {
node.style['transform'] = transform;
node.style['-webkit-transform'] = transform;
};

4
core/workspace_drag_surface_svg.js
View File

@@ -115,7 +115,7 @@ Blockly.workspaceDragSurfaceSvg.prototype.translateSurface = function(x, y) {
var transform =
'transform: translate3d(' + x + 'px, ' + y + 'px, 0px); display: block;';
this.SVG_.setAttribute('style', transform);
Blockly.utils.setCssTransform(this.SVG_, transform);
};
/**
@@ -158,7 +158,7 @@ Blockly.workspaceDragSurfaceSvg.prototype.clearAndHide = function(newSurface) {
this.SVG_.style.display = 'none';
goog.asserts.assert(this.SVG_.childNodes.length == 0,
'Drag surface was not cleared.');
this.SVG_.style.transform = '';
Blockly.utils.setCssTransform(this.SVG_, '');
this.previousSibling_ = null;
};