GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.97k stars 399 forks source link

Putting the ToolboxUI on a fix location #120

Closed dirkjacobs closed 8 years ago

dirkjacobs commented 8 years ago

Is it possible to disable the drag and drop capability of the ToolBox and position the ToolBoxUI on a fix position ?

anthonyjb commented 8 years ago

@dirkjacobs it's not currently possible to dock or fix the toolbox as part of the standard CT library though a number of other users including @bfintal and @eelija have achieved docked and fixed position toolboxes.

I think in both cases this was a combination of modifying both the default SASS/CSS and at least in the case of the fixed toolbox CoffeeScript/JavaScript was required to achieve the effect. One simple way to disable the dragging ability is to simple hide the element that allows this using CSS, e.g:

.ct-toolbox__grip { 
    display: none; 
}

When I get around to tackling support for mobile devices then support for fixing the position of the toolbox is planned as this is a required change for mobile devices (the floating toolbox isn't practical on smaller touch devices).

If you provide a visual for what your looking to achieve I'd be happy to discuss possible approaches and offer up some coding examples of how this might be achieved.

oodavid commented 8 years ago

My approach was to use this CSS:

.ct-widget.ct-toolbox {
  top: 80px;
  left: 5px;
}
.ct-toolbox__grip {
  display: none;
}

You'll also need to run localStorage.removeItem('ct-toolbox-position'); to remove the stored position of the widget as ContentTools sets the top and left inline styles which have the highest priority of all CSS rules.

Alternatively you could leverage the localStorage value by manually overriding it, ie:

localStorage.setItem('ct-toolbox-position', '5,80')