UNPKG

kdf

Version:

KD: a non-document focused UI Framework for web applications.

112 lines (86 loc) 3.68 kB
KDView = require './../../core/view.coffee' module.exports = class KDTabHandleView extends KDView constructor: (options = {}, data) -> options.hidden ?= no # yes or no options.title or= "Title" # a String options.pane ?= null # a KDTabPaneView instance options.view ?= null # a KDView instance to put in the tab handle options.sortable ?= no # yes or no options.closable ?= yes # yes or no options.addTitleAttribute ?= yes # yes or no if options.sortable options.draggable = axis: "x" @dragStartPosX = null super options, data @on "DragStarted", (event, dragState) => @startedDragFromCloseElement = $(event.target).hasClass "close-tab" @handleDragStart event, dragState @on "DragInAction", (x, y) => @dragIsAllowed = no if @startedDragFromCloseElement @handleDragInAction x, y @on "DragFinished", (event) => @handleDragFinished event @getDelegate().showPaneByIndex @index setDomElement:(cssClass="")-> {hidden, closable, tagName, title, addTitleAttribute} = @getOptions() cssClass = if hidden then "#{cssClass} hidden" else cssClass closeHandle = if closable then "<span class='close-tab'></span>" else "" title = if addTitleAttribute then "title='#{title}'" else "" @domElement = $ "<#{tagName} #{title} class='kdtabhandle #{cssClass}'>#{closeHandle}</#{tagName}>" viewAppended:-> {view} = @getOptions() if view and view instanceof KDView then @addSubView view else @setPartial @partial() partial:-> "<b>#{@getOptions().title or 'Default Title'}</b>" makeActive:-> @getDomElement().addClass "active" makeInactive:-> @getDomElement().removeClass "active" setTitle:(title)-> @setAttribute "title", title # @getDomElement().find("span.close-tab").css "color", @getDelegate().getDomElement().css "background-color" isHidden:-> @getOptions().hidden getWidth:-> @$().outerWidth(no) or 0 cloneElement: (x) -> {pane} = @getOptions() tabView = pane.getDelegate() holder = tabView.tabHandleContainer.tabs @$cloned = @$().clone() holder.$().append @$cloned @$cloned.css marginLeft: -(tabView.handles.length - @index) * @getWidth() reorderTabHandles: (x) -> dragDir = @dragState.direction width = @getWidth() if dragDir.current.x is 'left' targetIndex = @index - 1 targetDiff = -(width * @draggedItemIndex - width * targetIndex - width / 2) if x < targetDiff @emit "HandleIndexHasChanged", @index, 'left' @index-- else targetIndex = @index + 1 targetDiff = width * targetIndex - width * @draggedItemIndex - width / 2 if x > targetDiff @emit "HandleIndexHasChanged", @index, 'right' @index++ handleDragStart: (event, dragState) -> {pane} = @getOptions() tabView = pane.getDelegate() {handles} = tabView @index = handles.indexOf @ @draggedItemIndex = @index handleDragInAction: (x, y) -> return unless @dragIsAllowed return @$().css 'left': 0 if -(@draggedItemIndex * @getWidth()) > x @cloneElement x unless @$cloned @$().css opacity: 0 @$cloned.css left : x @reorderTabHandles x handleDragFinished: (event) -> return unless @$cloned @$cloned.remove() @$().css { left: '', opacity: 1, marginLeft: '' } @$().css left: 0 if not @targetTabHandle and @draggedItemIndex is 0 @targetTabHandle = null @$cloned = null