andrewplummer / positionable Goto Github PK
View Code? Open in Web Editor NEWPositionable Chrome extension.
Home Page: https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp
Positionable Chrome extension.
Home Page: https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp
Hi Andrew,
A few days ago I received the following message in Chrome:
Why does a working plugin suddenly need access to private browsing history? Browsing history seems to be unreIated to the function of this extension. Furthermore, when I look into the manifest.json, I don't see that this permission is required. The version of the extension in Chrome is 2.1.1, while the manifest.json in Github is 2.1.0. So it seems like a 2.1.1 update is pushed for which the code isn't shown in Github.
I have used this extension in the past and would like to use it in the future if necessary. Is it possible to explain why this permission is needed and show the code in Github? It would also be good if the need for this permission is explained in the Chrome web store.
Thanks in advance,
Arjan
Hi!
I could get Positionable to show up for sites that are online. But it doesn't react to my mouse at all when I have a local html file. I made this really simple test and Positionable is not loading when clicked for this page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container { position: relative; }
.square{position: absolute; width: 200px; height: 200px; background-color: blueviolet;}
</style>
</head>
<body>
<div id="container">
<div class="square">Hello</div>
</div>
</body>
</html>
From web store: "Good but not able to move element when it's smaller than resize handler area. drag handler are is overlapped by drag handler areas" c/o Aritra Hazra
Awesome extension!
Any chance of making this work on relatively positioned elements?
Hello Andrew,
Very cool tool... I think it is just what I need.... but I cannot figure out how to select the elements.
I read I am supposed to use shift-leftmouseclick but that did not work. leftmouseclick also fails. rightmouseclick fails.
Not sure what I am doing wrong. Perhaps you can put a page up somewhere where it is supposed to work, and provide a few hints about how to select elements to move or resize.
Thanks so much,
Eric Dormer
Found Positionable through google after thinking... how is this still not possible?! I have a couple of elements I'd like to move into position.
With the overlay for dragging it seems very difficult to actually select the item you want to. I've got a couple of elements inside a modal and every time I click on them it just selects the modal.
Is it possible to just pick items directly from the developer tools Elements tab?
My page contains embeded svg created in Inkscape. It gives following error after using extension :
positionable.js:1659 Uncaught TypeError: Cannot read property 'background' of undefined
in line } else if (el.style.background.match(/positionable-extension/)) {
After quick debuging it seems sodipodi:namedview
tag was problem.
Win 10, Chrome 51.0.2704.84 m (64-bit)
Tag that was responsible for error in listing below.
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xml:space="preserve" width="1525" height="597.5" version="1.1" style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision" viewBox="0 0 28422.717 11136.578" id="svg2" version="0.91 r13725" docname="Piętra full2.1.svg" class="svg-embed positionable-extension-positioned-element">
//This tag has no el.style.background
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" pageopacity="0" pageshadow="2" window-width="1920" window-height="1017" id="namedview100" showgrid="false" zoom="2.2156644" cx="1187.7229" cy="335.6779" window-x="-8" window-y="-8" window-maximized="1" current-layer="flats" units="px" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"></sodipodi:namedview>
<g groupmode="layer" id="layer1" label="Layer 1" transform="translate(0,635.57835)">
</g>
...
Please add support for the example below:
element.style {
position: absolute;
top: 0px;
left: 0px;
z-index: 10000;
transition: all 0.3s;
transform: translate3d(30px, 401px, 0px);
}
Elements like this are created by react-visualizer, but some are completely overlapping, which is why I would like to use Positionable to move them.
We can use the multiple select method to select all elements we have positioned, when we click Cmd+C to copy the styles for all of them, it doesn't always work. Here is a reproducible test case:
<html>
<head>
<title>Positionable! Test</title>
<style type="text/css">
input { position: absolute; }
#field1 { top: 0px; }
#field2 { top: 50px; }
#field3 { top: 100px; }
#field4 { top: 150px; }
#field5 { top: 200px; }
</style>
</head>
<body>
<input id="field1" type="text" />
<input id="field2" type="number" />
<input id="field3" type="password" />
<input id="field4" type="checkbox" />
<input id="field5" type="radio" />
</body>
</html>
Reproducible steps (using either "Cmd+A & Cmd+C" or the dragging method to select all):
So it seems that if certain elements are last selected (password/checkbox/radio fields), then positionable is not properly copying styles when multiple are selected. Work around is to make sure we last clicked a plain text field, but that is a bit cumbersome.
I am using Positionable! to position form fields on top of PNG images.
It seems that dragging a form field around the page (no matter the type) isn't support.
I can click to select a form field and use arrow keys, along with shift key, to move them around the page, but this is obviously much slower than quickly dragging it to where it needs to be.
Here is a reproducible test case:
<html>
<head>
<title>Positionable! Test</title>
<style type="text/css">
input { position: absolute; }
#field1 { top: 0px; }
#field2 { top: 50px; }
#field3 { top: 100px; }
#field4 { top: 150px; }
#field5 { top: 200px; }
</style>
</head>
<body>
<input id="field1" type="text" />
<input id="field2" type="number" />
<input id="field3" type="password" />
<input id="field4" type="checkbox" />
<input id="field5" type="radio" />
</body>
</html>
Hello and thanks for all teh hard efforts making this plugin :)
I have a really specific request to get more screen real estate and I found Positionable to be the best solution to make a webpage with a big top banner go slimmer. Only problem is that I cant get Positionable to work in app mode which sadly breaks the whole idea of using it.
So my question is if its possible to add Positionable to the chrome "right click context menu" to make it work in app mode as well or if there is some other way to do it?
Any help on this matter would be most appreciated :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.