ecomp-portal-FE/client/bower_components/jqTree/src/elements_renderer.coffee

   1 node_element = require './node_element'
   2 NodeElement = node_element.NodeElement
   3
   4 util = require './util'
   5 html_escape = util.html_escape
   6
   7
   8 $ = jQuery
   9
  10
  11 class ElementsRenderer
  12     constructor: (tree_widget) ->
  13         @tree_widget = tree_widget
  14
  15         @opened_icon_element = @createButtonElement(tree_widget.options.openedIcon)
  16         @closed_icon_element = @createButtonElement(tree_widget.options.closedIcon)
  17
  18     render: (from_node) ->
  19         if from_node and from_node.parent
  20             @renderFromNode(from_node)
  21         else
  22             @renderFromRoot()
  23
  24     renderFromRoot: ->
  25         $element = @tree_widget.element
  26         $element.empty()
  27
  28         @createDomElements($element[0], @tree_widget.tree.children, true, true, 1)
  29
  30     renderFromNode: (node) ->
  31         # remember current li
  32         $previous_li = $(node.element)
  33
  34         # create element
  35         li = @createLi(node, node.getLevel())
  36         @attachNodeData(node, li)
  37
  38         # add element to dom
  39         $previous_li.after(li)
  40
  41         # remove previous li
  42         $previous_li.remove()
  43
  44         # create children
  45         if node.children
  46             @createDomElements(li, node.children, false, false, node.getLevel() + 1)
  47
  48     createDomElements: (element, children, is_root_node, is_open, level) ->
  49         ul = @createUl(is_root_node)
  50         element.appendChild(ul)
  51
  52         for child in children
  53             li = @createLi(child, level)
  54             ul.appendChild(li)
  55
  56             @attachNodeData(child, li)
  57
  58             if child.hasChildren()
  59                 @createDomElements(li, child.children, false, child.is_open, level + 1)
  60
  61         return null
  62
  63     attachNodeData: (node, li) ->
  64         node.element = li
  65         $(li).data('node', node)
  66
  67     createUl: (is_root_node) ->
  68         if !is_root_node
  69             class_string = ''
  70             role = 'group'
  71         else
  72             class_string = 'jqtree-tree'
  73             role = 'tree'
  74
  75             if @tree_widget.options.rtl
  76                 class_string += ' jqtree-rtl'
  77
  78         ul = document.createElement('ul')
  79         ul.className = "jqtree_common #{ class_string }"
  80
  81         ul.setAttribute('role', role)
  82
  83         return ul
  84
  85     createLi: (node, level) ->
  86         is_selected = @tree_widget.select_node_handler and @tree_widget.select_node_handler.isNodeSelected(node)
  87
  88         if node.isFolder()
  89             li = @createFolderLi(node, level, is_selected)
  90         else
  91             li = @createNodeLi(node, level, is_selected)
  92
  93         if @tree_widget.options.onCreateLi
  94             @tree_widget.options.onCreateLi(node, $(li))
  95
  96         return li
  97
  98     createFolderLi: (node, level, is_selected) ->
  99         button_classes = @getButtonClasses(node)
 100         folder_classes = @getFolderClasses(node, is_selected)
 101
 102         if node.is_open
 103             icon_element = @opened_icon_element
 104         else
 105             icon_element = @closed_icon_element
 106
 107         # li
 108         li = document.createElement('li')
 109         li.className = "jqtree_common #{ folder_classes }"
 110         li.setAttribute('role', 'presentation')
 111
 112         # div
 113         div = document.createElement('div')
 114         div.className = "jqtree-element jqtree_common"
 115         div.setAttribute('role', 'presentation')
 116
 117         li.appendChild(div)
 118
 119         # button link
 120         button_link = document.createElement('a')
 121         button_link.className = button_classes
 122
 123         button_link.appendChild(
 124             icon_element.cloneNode(false)
 125         )
 126
 127         button_link.setAttribute('role', 'presentation')
 128         button_link.setAttribute('aria-hidden', 'true')
 129
 130         if @tree_widget.options.buttonLeft
 131             div.appendChild(button_link)
 132
 133         # title span
 134         div.appendChild(
 135             @createTitleSpan(node.name, level, is_selected, node.is_open, is_folder=true)
 136         )
 137
 138         if not @tree_widget.options.buttonLeft
 139             div.appendChild(button_link)
 140
 141         return li
 142
 143     createNodeLi: (node, level, is_selected) ->
 144         li_classes = ['jqtree_common']
 145
 146         if is_selected
 147             li_classes.push('jqtree-selected')
 148
 149         class_string = li_classes.join(' ')
 150
 151         # li
 152         li = document.createElement('li')
 153         li.className = class_string
 154         li.setAttribute('role', 'presentation')
 155
 156         # div
 157         div = document.createElement('div')
 158         div.className = "jqtree-element jqtree_common"
 159         div.setAttribute('role', 'presentation')
 160
 161         li.appendChild(div)
 162
 163         # title span
 164         div.appendChild(
 165             @createTitleSpan(node.name, level, is_selected, node.is_open, is_folder=false)
 166         )
 167
 168         return li
 169
 170     createTitleSpan: (node_name, level, is_selected, is_open, is_folder) ->
 171         title_span = document.createElement('span')
 172
 173         classes = "jqtree-title jqtree_common"
 174
 175         if is_folder
 176             classes += " jqtree-title-folder"
 177
 178         title_span.className = classes
 179
 180         title_span.setAttribute('role', 'treeitem')
 181         title_span.setAttribute('aria-level', level)
 182
 183         title_span.setAttribute('aria-selected', util.getBoolString(is_selected))
 184         title_span.setAttribute('aria-expanded', util.getBoolString(is_open))
 185
 186         if is_selected
 187             title_span.setAttribute('tabindex', 0)
 188
 189         title_span.innerHTML = @escapeIfNecessary(node_name)
 190
 191         return title_span
 192
 193     getButtonClasses: (node) ->
 194         classes = ['jqtree-toggler', 'jqtree_common']
 195
 196         if not node.is_open
 197             classes.push('jqtree-closed')
 198
 199         if @tree_widget.options.buttonLeft
 200             classes.push('jqtree-toggler-left')
 201         else
 202             classes.push('jqtree-toggler-right')
 203
 204         return classes.join(' ')
 205
 206     getFolderClasses: (node, is_selected) ->
 207         classes = ['jqtree-folder']
 208
 209         if not node.is_open
 210             classes.push('jqtree-closed')
 211
 212         if is_selected
 213             classes.push('jqtree-selected')
 214
 215         if node.is_loading
 216             classes.push('jqtree-loading')
 217
 218         return classes.join(' ')
 219
 220     escapeIfNecessary: (value) ->
 221         if @tree_widget.options.autoEscape
 222             return html_escape(value)
 223         else
 224             return value
 225
 226     createButtonElement: (value) ->
 227         if typeof value == 'string'
 228             # convert value to html
 229             div = document.createElement('div')
 230             div.innerHTML = value
 231
 232             return document.createTextNode(div.innerHTML)
 233         else
 234             return $(value)[0]
 235
 236
 237 module.exports = ElementsRenderer