Extend layout directive to support custom togglers.

This commit is contained in:
Paulo Reis 2018-03-20 15:08:34 +00:00
parent 78eb56a262
commit fc0be22c6d

View file

@ -2,12 +2,17 @@ define [
"base"
"libs/jquery-layout"
], (App) ->
App.directive "layout", ["$parse", "ide", ($parse, ide) ->
App.directive "layout", ["$parse", "$compile", "ide", ($parse, $compile, ide) ->
return {
compile: () ->
pre: (scope, element, attrs) ->
name = attrs.layout
customTogglerPane = scope.$eval(attrs.customTogglerPane)
customTogglerTooltipOpen = scope.$eval(attrs.customTogglerTooltipOpen)
customTogglerTooltipClose = scope.$eval(attrs.customTogglerTooltipClose)
hasCustomToggler = customTogglerPane? and customTogglerTooltipOpen? and customTogglerTooltipClose?
if attrs.spacingOpen?
spacingOpen = parseInt(attrs.spacingOpen, 10)
else
@ -62,6 +67,21 @@ define [
right: state.east.size
})
repositionCustomToggler = () ->
if !customTogglerEl?
return
state = element.layout().readState()
if customTogglerPane == "east"
if state.east?
customTogglerEl.css({
right: if state.east.initClosed then 0 else state.east.size
})
else if customTogglerPane == "west"
if state.west?
customTogglerEl.css({
left: if state.west.initClosed then 0 else state.west.size
})
resetOpenStates = () ->
state = element.layout().readState()
if attrs.openEast? and state.east?
@ -73,6 +93,8 @@ define [
state = element.layout().readState()
scope.$broadcast "layout:#{name}:resize", state
repositionControls()
if hasCustomToggler
repositionCustomToggler()
resetOpenStates()
oldWidth = element.width()
@ -94,6 +116,24 @@ define [
if attrs.resizeOn?
scope.$on attrs.resizeOn, () -> onExternalResize()
if hasCustomToggler
state = element.layout().readState()
customTogglerScope = scope.$new()
if state.east?.initClosed
customTogglerScope.customTogglerTooltip = customTogglerTooltipOpen
else
customTogglerScope.customTogglerTooltip = customTogglerTooltipClose
customTogglerEl = $compile("
<a href
class=\"custom-toggler\"
tooltip=\"{{ customTogglerTooltip }}\"
tooltip-placement=\"#{ if customTogglerPane == "east" then "left" else "right" }\">
")(customTogglerScope)
element.append(customTogglerEl)
# if hasCustomToggler
# element.find("> .custom-toggler").on "click", () ->
# element.layout().toggle("east")
# repositionCustomToggler()
# Save state when exiting
$(window).unload () ->
ide.localStorage("layout.#{name}", element.layout().readState())