andrewplummer / positionable Goto Github PK

View Code? Open in Web Editor NEW

10.0 3.0 5.0 808 KB

Positionable Chrome extension.

Home Page: https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp

JavaScript 87.16% CSS 6.30% HTML 6.51% Shell 0.03%

positionable's Introduction

Positionable

Positionable Chrome extension.

https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp

positionable's People

Contributors

Stargazers

Watchers

Forkers

steamypassion inline-help nura-a11y neochief

positionable's Issues

Resize handles for small elements

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

Positionable suddenly needs access to browsing history

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

Fix Copying Multiple Styles When Multiple Selected

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):

Nothing clicked + Select all => Works
Click Field1 + Select all => Works
Click Field2 + Select all => Works
Click Field3 + Select all => FAILS
Click Field4 + Select all => FAILS
Click Field5 + Select all => FAILS

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.

In Positionable, how do I select element to resize or move?

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

Dragging Form Field Elements Not Supported

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>

Inkscape generated svg

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>

...

Relative position elements support

Awesome extension!

Any chance of making this work on relatively positioned elements?

Is it possible to make Positionable work in chrome app mode?

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 :)

Positionable not working for local file

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>

Positionable 2.1.0 not loading

After updating to 2.1.0, the extension no longer works on Chrome 89.0.4389.90. When I look at the chrome console on the extensions worker, I see the following:

Add support for css transform: translate3d(...)

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.

Extremely difficult to pick up the DOM element you need

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?