function BottomPanel(scope) {
var _this = this;
_classCallCheck(this, BottomPanel);
this.subscriptions = new _atom.CompositeDisposable();
this.element = document.createElement('linter-panel'); // TODO(steelbrain): Make this a `div`
this.element.tabIndex = '-1';
this.messagesElement = document.createElement('div');
this.panel = atom.workspace.addBottomPanel({ item: this.element, visible: false, priority: 500 });
this.visibility = false;
this.visibleMessages = 0;
this.alwaysTakeMinimumSpace = atom.config.get('linter.alwaysTakeMinimumSpace');
this.errorPanelHeight = atom.config.get('linter.errorPanelHeight');
this.configVisibility = atom.config.get('linter.showErrorPanel');
this.scope = scope;
this.messages = new Map();
// Keep messages contained to measure height.
this.element.appendChild(this.messagesElement);
this.subscriptions.add(atom.config.onDidChange('linter.alwaysTakeMinimumSpace', function (_ref) {
var newValue = _ref.newValue;
var oldValue = _ref.oldValue;
_this.alwaysTakeMinimumSpace = newValue;
_this.updateHeight();
}));
this.subscriptions.add(atom.config.onDidChange('linter.errorPanelHeight', function (_ref2) {
var newValue = _ref2.newValue;
var oldValue = _ref2.oldValue;
_this.errorPanelHeight = newValue;
_this.updateHeight();
}));
this.subscriptions.add(atom.config.onDidChange('linter.showErrorPanel', function (_ref3) {
var newValue = _ref3.newValue;
var oldValue = _ref3.oldValue;
_this.configVisibility = newValue;
_this.updateVisibility();
}));
this.subscriptions.add(atom.workspace.observeActivePaneItem(function (paneItem) {
_this.paneVisibility = paneItem === atom.workspace.getActiveTextEditor();
_this.updateVisibility();
}));
Interact(this.element).resizable({ edges: { top: true } }).on('resizemove', function (event) {
event.target.style.height = event.rect.height + 'px';
}).on('resizeend', function (event) {
atom.config.set('linter.errorPanelHeight', event.target.clientHeight);
});
}
export default function ( st ) {
function restrict() {
restrictBox( st );
}
function onMove( event ) {
const {boxPos} = st;
boxPos.translateX += event.dx;
boxPos.translateY += event.dy;
}
/* istanbul ignore next */
if ( process.env.NODE_ENV === 'testing' ) {
st.__restrict = restrict;
st.__onMove = onMove;
} else {
st.$on( 'after translate' , ()=> {
st.$nextTick( restrict );
} );
interact( st.$els.stDrag )
.styleCursor( false )
.draggable( {
onmove : onMove ,
onend : restrict
} );
}
}
constructor(scope) {
this.subscriptions = new CompositeDisposable
this.visibility = false
this.visibleMessages = 0
this.alwaysTakeMinimumSpace = atom.config.get('linter.alwaysTakeMinimumSpace')
this.errorPanelHeight = atom.config.get('linter.errorPanelHeight')
this.configVisibility = atom.config.get('linter.showErrorPanel')
this.scope = scope
this.editorMessages = new Map()
this.messages = new Map()
const element = document.createElement('linter-panel') // TODO(steelbrain): Make this a `div`
element.tabIndex = '-1'
this.messagesElement = document.createElement('div')
element.appendChild(this.messagesElement)
this.panel = atom.workspace.addBottomPanel({item: element, visible: false, priority: 500})
Interact(element).resizable({edges: {top: true}})
.on('resizemove', event => {
event.target.style.height = `${event.rect.height}px`
})
.on('resizeend', event => {
atom.config.set('linter.errorPanelHeight', event.target.clientHeight)
})
element.addEventListener('keydown', function(e) {
if (e.which === 67 && e.ctrlKey) {
Clipboard.writeText(getSelection().toString())
}
})
this.subscriptions.add(atom.config.onDidChange('linter.alwaysTakeMinimumSpace', ({newValue}) => {
this.alwaysTakeMinimumSpace = newValue
this.updateHeight()
}))
this.subscriptions.add(atom.config.onDidChange('linter.errorPanelHeight', ({newValue}) => {
this.errorPanelHeight = newValue
this.updateHeight()
}))
this.subscriptions.add(atom.config.onDidChange('linter.showErrorPanel', ({newValue}) => {
this.configVisibility = newValue
this.updateVisibility()
}))
this.subscriptions.add(atom.workspace.observeActivePaneItem(paneItem => {
this.paneVisibility = paneItem === atom.workspace.getActiveTextEditor()
this.updateVisibility()
}))
// Container for messages with no filePath
const defaultContainer = document.createElement('div')
this.editorMessages.set(null, defaultContainer)
this.messagesElement.appendChild(defaultContainer)
if (scope !== 'Project') {
defaultContainer.setAttribute('hidden', true)
}
}
link: function(scope, element, attrs, dragContainerCtrl){
var htmlElement = element[0];
var targetDropArea = null;
var eventOptions = { element: element, scope: scope };
interact(htmlElement).draggable({
onmove: function (event) {
$rootScope.$apply(function(){
var target = event.target,
x = (parseInt(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseInt(target.getAttribute('data-y')) || 0) + event.dy,
xpos = event.clientX,
ypos = event.clientY;
var newDropArea = dragContainerCtrl.getDropAreaContaining(xpos, ypos);
if(newDropArea !== targetDropArea){
if(targetDropArea) { targetDropArea.controller.dragLeave(event, eventOptions); }
if(newDropArea) { newDropArea.controller.dragEnter(event, eventOptions); }
targetDropArea = newDropArea;
}
element.css({
'transition': '',
'z-index': 1000,
'transform': 'translate(' + x + 'px, ' + y + 'px)'
});
element.attr('data-x', x);
element.attr('data-y', y);
element.addClass('transparent');
});
},
onend: function (event) {
$rootScope.$apply(function(){
element.css({
'z-index': 0,
'transform': ''
});
element.attr('data-x', 0);
element.attr('data-y', 0);
element.removeClass('transparent');
if(targetDropArea){
targetDropArea.controller.drop(event, eventOptions);
}
if(targetDropArea.controller === element.controller('dropArea')) {
element.css('transition','transform 0.3s cubic-bezier(.33,1,.66,1), ' +
'z-index 0.3s cubic-bezier(.33,1,.66,1)');
}
});
}
});
}
link: function (scope, element) {
var htmlElement = element[0],
interactible;
interactible = interact(htmlElement);
interactible.dropzone({
accept: '.draggable',
overlap: 'pointer',
ondragenter: function () {
if (!scope.onDragEnter) {
return;
}
var args = arguments;
scope.$apply(function () {
scope.onDragEnter.apply(scope, args);
});
},
ondragleave: function () {
if (!scope.onDragLeave) {
return;
}
var args = arguments;
scope.$apply(function () {
scope.onDragLeave.apply(scope, args);
});
},
ondrop: function () {
if (!scope.onDrop) {
return;
}
var args = arguments;
scope.$apply(function () {
scope.onDrop.apply(scope, args);
});
}
});
}
function BottomPanel(scope) {
var _this = this;
_classCallCheck(this, BottomPanel);
this.subscriptions = new _atom.CompositeDisposable();
this.visibility = false;
this.visibleMessages = 0;
this.alwaysTakeMinimumSpace = atom.config.get('linter.alwaysTakeMinimumSpace');
this.errorPanelHeight = atom.config.get('linter.errorPanelHeight');
this.configVisibility = atom.config.get('linter.showErrorPanel');
this.scope = scope;
this.editorMessages = new Map();
this.messages = new Map();
var element = document.createElement('linter-panel'); // TODO(steelbrain): Make this a `div`
element.tabIndex = '-1';
this.messagesElement = document.createElement('div');
element.appendChild(this.messagesElement);
this.panel = atom.workspace.addBottomPanel({ item: element, visible: false, priority: 500 });
Interact(element).resizable({ edges: { top: true } }).on('resizemove', function (event) {
event.target.style.height = event.rect.height + 'px';
}).on('resizeend', function (event) {
atom.config.set('linter.errorPanelHeight', event.target.clientHeight);
});
element.addEventListener('keydown', function (e) {
if (e.which === 67 && e.ctrlKey) {
atom.clipboard.write(getSelection().toString());
}
});
this.subscriptions.add(atom.config.onDidChange('linter.alwaysTakeMinimumSpace', function (_ref) {
var newValue = _ref.newValue;
_this.alwaysTakeMinimumSpace = newValue;
_this.updateHeight();
}));
this.subscriptions.add(atom.config.onDidChange('linter.errorPanelHeight', function (_ref2) {
var newValue = _ref2.newValue;
_this.errorPanelHeight = newValue;
_this.updateHeight();
}));
this.subscriptions.add(atom.config.onDidChange('linter.showErrorPanel', function (_ref3) {
var newValue = _ref3.newValue;
_this.configVisibility = newValue;
_this.updateVisibility();
}));
this.subscriptions.add(atom.workspace.observeActivePaneItem(function (paneItem) {
_this.paneVisibility = paneItem === atom.workspace.getActiveTextEditor();
_this.updateVisibility();
}));
// Container for messages with no filePath
var defaultContainer = document.createElement('div');
this.editorMessages.set(null, defaultContainer);
this.messagesElement.appendChild(defaultContainer);
if (scope !== 'Project') {
defaultContainer.setAttribute('hidden', true);
}
}
}, function(){
interact(element).resizable({ enabled : !scope.display.hide });
})
link : function(scope, element){
var el = $(element);
var element = element[0];
var { elX, elY, elW, elH } = $localStorage;
elW && el.css({ width : `${elW}px` });
elH && el.css({ height : `${elH}px` });
/** Enable drag */
var draggie = new draggabilly(element, {
handle: '.grabber'
}).on('dragEnd', function(event, pointer) {
var { left, top } = fit(el.position(), el.width());
el.css({
top : `${top}px`,
left : `${left}px`
});
$localStorage.elX = left;
$localStorage.elY = top;
});
/**
* Since draggabilly set position to relative
* this reset the css properties
*/
$timeout(function(){
el.css({
position : 'fixed',
top : `${elY || 0}px`,
left : `${elX || 0}px`
});
});
scope.$watch(function(){
return scope.display.hide;
}, function(){
interact(element).resizable({ enabled : !scope.display.hide });
})
/** Enable resize */
interact(element).resizable({
edges: { left: true, right: true, bottom: true }
}).on('resizemove', function (event) {
/** This function is copied from interact.js example */
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}).on('resizeend', function(event){
var { left, top } = fit(el.position());
el.css({
top : `${top}px`,
left : `${left}px`
});
$localStorage.elW = el.width();
$localStorage.elH = el.height();
$localStorage.elX = left;
$localStorage.elY = top;
var target = event.target;
target.style.webkitTransform =
target.style.transform =
'translate(0px, 0px)';
target.setAttribute('data-x', 0);
target.setAttribute('data-y', 0);
});
}
componentWillReceiveProps() {
this.interact = interact(findDOMNode(this.node))
this.setInteractions()
}
componentDidMount() {
this.interact = interact(findDOMNode(this.node))
this.setInteractions()
}