mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Extend layout directive to support custom togglers.
This commit is contained in:
parent
78eb56a262
commit
fc0be22c6d
1 changed files with 41 additions and 1 deletions
|
@ -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())
|
||||
|
|
Loading…
Reference in a new issue