Javascript for automatic switch between portable versions of template

port_switch.js

// -*- mode: js; coding: utf-8 -*-

(function ($) {
  'use strict'
  
  var module = {
    view_mode_get: function() {
      var width = $(window).width()
      
      if (width < 768) {
        return 'xs'
      }
      
      if (width < 992) {
        return 'sm'
      }
      
      if (width < 1200) {
        return 'md'
      }
      
      return 'lg'
    },
    
    elem_view_mode_update: function(port_switch_ctx) {
      var outer_elem = port_switch_ctx.outer_elem_map[port_switch_ctx.view_mode]
      
      $.each(port_switch_ctx.outer_elem_map, function(k, v) {
        var mode = k
        var other_outer_elem = v
        
        if (other_outer_elem == outer_elem) {
          return
        }
        
        other_outer_elem.css({
          display: 'none',
        })
      })
      
      if (!outer_elem) {
        return
      }
      
      $.each(port_switch_ctx.name_list, function(k, v) {
        var name = v
        var inner_child = port_switch_ctx.inner_child_elem_map[name]
        var outer_child = port_switch_ctx.outer_child_elem_map[port_switch_ctx.view_mode][name]
        
        if (!inner_child || !outer_child) {
          return
        }
        
        inner_child.remove()
        inner_child.appendTo(outer_child)
      })
      
      outer_elem.css({
        display: '',
      })
    },
    
    elem_view_mode_init: function(port_switch_ctx) {
      port_switch_ctx.name_list = []
      port_switch_ctx.inner_child_elem_map = {}
      port_switch_ctx.outer_elem_map = {}
      port_switch_ctx.outer_child_elem_map = {}
      
      port_switch_ctx.elem.children().each(function() {
        var child = $(this)
        var role = child.data('port-switch-role')
        
        if (role == 'inner') {
          var inner_elem = child
          
          inner_elem.children().each(function() {
            var child = $(this)
            var name_str = child.data('port-switch-name')
            
            if (!name_str) {
              return
            }
            
            var name_list = name_str.split(' ')
            
            $.each(name_list, function(k, v) {
              var name = v
              
              if (port_switch_ctx.inner_child_elem_map[name]) {
                return
              }
              
              port_switch_ctx.inner_child_elem_map[name] = child
              port_switch_ctx.name_list.push(name)
            })
          })
          
          inner_elem.css({
            display: 'none',
          })
          
          return
        }
        
        if (role == 'outer') {
          var outer_elem = child
          
          var mode_str = outer_elem.data('port-switch-mode')
          
          if (!mode_str) {
            return
          }
          
          var mode_list = mode_str.split(' ')
          
          $.each(mode_list, function(k, v) {
            var mode = v
            
            if (port_switch_ctx.outer_elem_map[mode] ||
                port_switch_ctx.outer_child_elem_map[mode]) {
              return
            }
            
            port_switch_ctx.outer_elem_map[mode] = outer_elem
            port_switch_ctx.outer_child_elem_map[mode] = {}
            
            outer_elem.find('*').each(function() {
              var child = $(this)
              var name_str = child.data('port-switch-name')
              
              if (!name_str) {
                return
              }
              
              var name_list = name_str.split(' ')
              
              $.each(name_list, function(k, v) {
                var name = v
                
                if (port_switch_ctx.outer_child_elem_map[mode][name]) {
                  return
                }
                
                port_switch_ctx.outer_child_elem_map[mode][name] = child
              })
            })
          })
          
          outer_elem.css({
            display: 'none',
          })
          
          return
        }
      })
    },
    
    elem_handler: function(port_switch_ctx) {
      if (!$(document).find(port_switch_ctx.elem).length) {
        port_switch_ctx.handler_off()
        return
      }
      
      var curr_view_mode = module.view_mode_get()
      
      if (port_switch_ctx.view_mode == curr_view_mode) {
        return
      }
      
      port_switch_ctx.view_mode = curr_view_mode
      module.elem_view_mode_update(port_switch_ctx)
    },
    
    elem_init: function(elem) {
      var port_switch_ctx = {
        elem: elem,
        
        handler_func: function(evt) {
          module.elem_handler(port_switch_ctx)
        },
        
        handler_on: function() {
          $(window).on('load', port_switch_ctx.handler_func)
          $(window).on('resize', port_switch_ctx.handler_func)
        },
        
        handler_off: function() {
          $(window).off('load', port_switch_ctx.handler_func)
          $(window).off('resize', port_switch_ctx.handler_func)
        },
      }
      
      module.elem_view_mode_init(port_switch_ctx)
      port_switch_ctx.handler_on()
      module.elem_handler(port_switch_ctx)
    },
    
    raw_elems_init: function(raw_elems) {
      var elems = raw_elems.find('.port-switch-object')
      elems.removeClass('port-switch-object')
      
      elems.each(function() {
        var elem = $(this)
        module.elem_init(elem)
      })
    },
  }
  
  this.app__port_switch = module
  
  module.raw_elems_init($(document))
}).call(this, jQuery)