Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use rootEl method in storybook-root

Best JavaScript code snippet using storybook-root

coral-virtual.js

Source:coral-virtual.js

1var virtualBinder = function (rootEl, children, parent) {2  parent = parent || document.body3  if (rootEl.coralVirtual) return rootEl.coralVirtual4  var defheight = 305  var cached = []6  var rowdata = []7  var gcs = window.getComputedStyle(rootEl)8  var props = {9    paddingLeft: toPX(gcs.paddingLeft),10    paddingRight: toPX(gcs.paddingRight),11    paddingTop: toPX(gcs.paddingTop),12    paddingBottom: toPX(gcs.paddingBottom),13    height: rootEl.style.height14  }15  function scrollTracker (ev, eventType, x, y) {16    // if (eventType === 'move') console.log(eventType, x, y)17    if (eventType === 'down') {18      scrollTracker.scrollTop = rootEl.scrollTop19      scrollTracker.scrollLeft = rootEl.scrollLeft20    } else if (eventType === 'move') {21      rootEl.scrollTop = scrollTracker.scrollTop - y22      rootEl.scrollLeft = scrollTracker.scrollLeft - x23      // if (y >= 0 && rootEl.clientHeight + rootEl.scrollTop + 1 >= rootEl.scrollHeight) { return true }24      // if (y <= 0 && rootEl.scrollTop <= 0) { return true }25    }26  }27  var imp28  if (0) {29    imp = new Impetus({30      source: rootEl.nextElementSibling,31      update: scrollTracker32    })33  }34  velocityIt(rootEl.nextElementSibling, scrollTracker)35  if (0 && window.ScrollSensor) {36    const scrollSensor = new ScrollSensor({37      element: rootEl.nextElementSibling,38      options: {39        // maxScrollLeft: rootEl.scrollWidth - rootEl.clientWidth,40        // maxScrollTop: rootEl.scrollHeight - rootEl.clientHeight,41        mouseMoveIsEnable: false,42        mouseWheelInertiaXDeceleration: 5000,43        mouseWheelInertiaYDeceleration: 5000,44        mouseMoveInertiaXDeceleration: 5000,45        mouseMoveInertiaYDeceleration: 5000,46        touchInertiaXDeceleration: 5000,47        touchInertiaYDeceleration: 500048      }49    })50    scrollSensor.on('scroll', event => {51      rootEl.scrollTop = event.scrollTop52      rootEl.scrollLeft = event.scrollLeft53    })54  }55  cached.circular = 10056  function genrow (row) {57    var h = ''58    for (var i = 0; i < row.length; i++) {59      h += '<div style="white-space:nowrap;background-color:green;padding:4px; border-top: 4px solid black; border-left: 8px solid black">' +60            '<div contenteditable=true style="overflow:visible;border:1px solid white; margin:2px">' +61            row[i] +62            '</div>' +63            '</div>'64    }65    var el = document.createElement('div')66    el.innerHTML = h67    el.style.display = 'flex'68    return el69  }70  rootEl.addEventListener('scroll', function (e) {71    console.time('update scroll')72    update()73    console.timeEnd('update scroll')74    e.stopPropagation()75  })76  var pause = false77  function update (retry) {78    if (pause) return79    props.height = rootEl.style.height80    var data = children; if (!data.length) return81    var rr = rootEl.getBoundingClientRect()82    var pr = parent.getBoundingClientRect()83    var l = Math.max(rr.left, pr.left)84    var t = Math.max(rr.top, pr.top)85    var r = Math.min(rr.right, pr.right)86    var b = Math.min(rr.bottom, pr.bottom)87    l = Math.max(l, 0)88    t = Math.max(t, 0)89    r = Math.min(r, window.screen.width)90    b = Math.min(b, window.screen.height)91    if (t >= b || l >= r) {92      return93    }94    rootEl.style.height = rr.height + 'px'95    rootEl.style.paddingTop = (props.paddingTop) + 'px'96    rootEl.style.paddingBottom = (props.paddingBottom) + 'px'97    function bounds (el) {98      return {99        left: 0, top: 0, bottom: defheight, right: r - l, width: r - l, height: defheight100      }101    }102    var scrollLeft = rootEl.scrollLeft103    var scrollTop = rootEl.scrollTop104    var y = -scrollTop105    var marginTop = 0106    var marginBottom = 0107    var h = 0108    var be = rootEl.be109    if (!rootEl.be) {110      rootEl.classList.add('cui-manual')111      // rootEl.style.position = 'relative'112      rootEl.be = be = document.createElement('div')113      rootEl.append(be)114      be.style.position = 'relative'115      be.style.padding = 0116      be.style.border = 'none'117      be.style.height = defheight * data.length + 'px'118    }119    // while (rootEl.children.length > 1) rootEl.removeChild(rootEl.children[1])120    var ndh = 0121    var ndhc = 0122    var rel = rootEl.nextElementSibling123    var grc = 0124    // /be.style.minWidth = 'initial'//('min-width')125    if (true) {126      for (var i = 0; i < data.length; i++) {127        var rd = rowdata[i]128        var row = data[i]129        var er = rd || bounds(row)130        var show = false131        if (y + er.height <= 0 + props.paddingTop) { marginTop += er.height } else if (y >= b - t + props.paddingTop) { marginBottom += er.height } else { h += er.height; show = true }132        // el.style.display = show ? 'block' : 'none'133        var el = circularArray(cached, i)134        if (show && true) {135          if (!el) {136            el = genrow(row)137            rel.append(el)138            var pel = circularArray(cached, i, el)139            if (pel && pel.parentNode) rel.removeChild(pel)140          } else if (el.parenteNode !== rel) {141            rel.appendChild(el)142          }143          if (retry) adjustWidths(el, retry)144          // el.style.position = 'absolute'145          var cels = el.children146          for (var j = 0; j < cels.length; j++) {147          // cels[j].style.minHeight = 'initial'// cels[j].style.removeProperty('min-width')148            cels[j].style.minWidth = 'initial'// cels[j].style.removeProperty('min-width')149            if (i === 0) cels[j].style.borderTop = 'none'150            if (j === 0) cels[j].style.borderLeft = 'none'151          }152          er = rowdata[i] = grect(el)// el.getBoundingClientRect()153          el.style.top = y /* + scrollTop */ + 'px'154          el.style.left = -scrollLeft + 'px'155          grc++156        } else if (el) {157          if (el.parentNode) rel.removeChild(el)158        }159        var eh = (er.height + 0.0) | 0160        y += eh161        if (show) {162          ndh += eh163          ndhc++164        }165      }166    } else {167      ndh = y = data.length * defheight168      ndc = data.length169    }170    ndh = ndhc ? (ndh / ndhc) : defheight171    var widths = []172    be.style.height = y + scrollTop + 'px'173    rel.style.right = (rootEl.offsetWidth - rootEl.clientWidth) + 'px'174    rel.style.bottom = (rootEl.offsetHeight - rootEl.clientHeight) + 'px'175    var nw = normalizeWidths(rel, retry || widths)176    // console.log('width', nw)177    be.style.minWidth = (nw - 1 * cellrectwidth(rootEl)) + 'px'178    rootEl.scrollLeft = scrollLeft179    if (props.height) rootEl.style.height = props.height; else rootEl.style.removeProperty('height')180    if (defheight !== ndh) {181      defheight = ndh182      console.log('----------- retry height ---------')183      if (!retry) return update(widths)184    }185    if (!retry && nw > r - l) {186      // update (true)187      // console.log('----------- retry width ---------')188      // return update(widths)189    }190    console.log('grc', grc)191  }192  function adjustWidths (el, widths, cr) {193    var cels = el.children194    if (!cels || !cels.length) return195    var x = 0196    for (var i = 0; i < cels.length; i++) {197      cels[i].style.left = x + 'px'198      cels[i].style.minWidth = (widths[i] - cr[i]) + 'px'199      x += widths[i]200    }201  }202  function normalizeWidths (rel, widths) {203    var els = rel.children204    var mw = widths || []205    for (var j = 0; j < els.length; j++) {206      var cels = els[j].children207      if (!cels || !cels.length) continue208      for (var i = 0; i < cels.length; i++) {209        mw[i] = Math.max(mw[i] || 0, cels[i].getBoundingClientRect().width)210      }211    }212    var x = 0213    var cr = []214    for (var i = 0; i < mw.length; i++) {215      cr[i] = cellrectwidth(cels[i])216      // mw[i] = ((mw[i] + cr[i]) | 0)217      x += mw[i] + 2218    }219    // x += 8220    for (var j = 0; j < els.length; j++) adjustWidths(els[j], mw, cr)221    return x222  }223  function cellrectwidth (el) {224    var gcs = window.getComputedStyle(el)225    var hp = toPX(gcs.paddingLeft) + toPX(gcs.paddingRight)226    if (1) return el.offsetWidth - el.clientWidth + hp227    var w = el.offsetWidth - hp228    var vp = toPX(gcs.paddingTop) + toPX(gcs.paddingBottom)229    var h = el.offsetHeight - vp230    return {231      left: 0, top: 0, bottom: h, right: w, width: w, height: h232    }233  }234  function grect (el) {235    var els = el.children236    var r237    for (var i = 0; i < els.length; i++) {238      var ecb = els[i].getBoundingClientRect()239      if (r) {240        r.right = Math.max(r.right, ecb.right)241        r.left = Math.min(r.left, ecb.left)242        r.bottom = Math.max(r.bottom, ecb.bottom)243        r.top = Math.min(r.top, ecb.top)244      } else {245        r = {}246        r.right = ecb.right247        r.left = ecb.left248        r.bottom = ecb.bottom249        r.top = ecb.top250      }251    }252    r.width = r.right - r.left253    r.height = r.bottom - r.top254    return r255    var cb = el.getBoundingClientRect()256    return {257      left: cb.left, top: cb.top, bottom: cb.botton, right: cb.right, width: cb.width, height: cb.height258    }259  }260  function circularArray (arr, i, v) {261    var ci = i % (arr.circular || i)262    if (v === undefined) {263      v = arr[ci]264      return v && v.childIndex === i ? v : undefined265    }266    var p = arr[ci]267    arr[ci] = v268    arr[ci].childIndex = i269    return p270  }271  rootEl.coralVirtual = {272    parent: function (p) { if (p !== undefined) parent = p; return parent },273    update: update,274    pause: function (p) { pause = p }275  }276  return rootEl.coralVirtual277}278var toPX = (function () {279  var PIXELS_PER_INCH = 96280  var defaults = {281    'ch': 8,282    'ex': 7.15625,283    'em': 16,284    'rem': 16,285    'in': PIXELS_PER_INCH,286    'cm': PIXELS_PER_INCH / 2.54,287    'mm': PIXELS_PER_INCH / 25.4,288    'pt': PIXELS_PER_INCH / 72,289    'pc': PIXELS_PER_INCH / 6,290    'px': 1291  }292  function parseUnit (str, out) {293    if (!out) out = [ 0, '' ]294    var num = parseFloat(str, 10)295    out[0] = num296    out[1] = str.match(/[\d.\-\+]*\s*(.*)/)[1] || ''297    return out298  }299  function toPX (str) {300    if (!str && str !== 0) return null301    if (defaults[str]) return defaults[str]302    // detect number of units303    var parts = parseUnit(str)304    if (!isNaN(parts[0])) {305      if (parts[1]) {306        var px = toPX(parts[1])307        return typeof px === 'number' ? parts[0] * px : null308      } else {309        return parts[0]310      }311    }312    return null313  }314  return toPX315})()316function velocityIt (container, update) {317  var FRICTION_COEFF = 0.95318  var BOUNCE = 0.2319  // var handle = document.querySelector('#handle')320  var bounds = container.getBoundingClientRect()321  // var radius = handle.offsetWidth / 2322  var dragging = false323  var mouse = { x: 0, y: 0 }324  var position = { x: 0, y: 0 }325  var previous = { x: position.x, y: position.y } // in case position is initialised at non-zero values326  var velocity = { x: 0, y: 0 }327  var start = { x: 0, y: 0 }328  var xmultiplier = 1329  var ymultiplier = 1330  function step () {331    requestAnimationFrame(step)332    if (Math.abs(velocity.x) < 1 && Math.abs(velocity.y) < 1 && !dragging) return333    if (dragging) {334      previous.x = position.x335      previous.y = position.y336      position.x = mouse.x337      position.y = mouse.y338      velocity.x = (position.x - previous.x)339      velocity.y = (position.y - previous.y)340    } else {341      position.x += velocity.x * xmultiplier342      position.y += velocity.y * ymultiplier343      velocity.x *= FRICTION_COEFF344      velocity.y *= FRICTION_COEFF345    }346    /*347    if (position.x > bounds.width - radius) {348      velocity.x *= -BOUNCE349      position.x = bounds.width - radius350    }351    if (position.x < radius) {352      velocity.x *= -BOUNCE353      position.x = radius354    }355    if (position.y > bounds.height - radius) {356      velocity.y *= -BOUNCE357      position.y = bounds.height - radius358    }359    if (position.y < radius) {360      velocity.y *= -BOUNCE361      position.y = radius362    }363*/364    // could use css transforms365    // handle.style.left = position.x + 'px'366    // handle.style.top = position.y + 'px'367    console.log(velocity.y)368    if (update(null, 'move', position.x - start.x, position.y - start.y)) {369      dragging = false370      velocity.x = velocity.y = 0371    }372  }373  // attach to handle instead to init drag only when grabbing the handle374  container.addEventListener('touchstart', function (event) {375    var e = trackIt.cleanEvent(event)376    console.log('touchdown')377    var yv = Math.abs(velocity.y)378    ymultiplier = 1// yv > 10 ? yv / 2 : 1379    console.log(ymultiplier)380    start.x = mouse.x = position.x = previous.x = e.x381    start.y = mouse.y = position.y = previous.y = e.y382    dragging = true383    update(e, 'down', 0, 0)384  })385  document.addEventListener('touchend', function (e) { dragging = false; update(e, 'up') })386  document.addEventListener('touchmove', function (event) {387    if (!dragging) return388    var e = trackIt.cleanEvent(event)389    mouse.x = e.x // - bounds.left390    mouse.y = e.y // - bounds.top391  })392  step()393}394// =================================================================================================395//396// from https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events397//398// =================================================================================================399var allModifiers = ['Alt', 'AltGraph', 'CapsLock', 'Control',400  'Meta', 'NumLock', 'Scroll', 'Shift', 'Win']401function redispatchEvent (original, newtarget) {402  if (typeof Event === 'function') {403    var eventCopy = new original.constructor(original.type, original)404  } else {405    // Internet Explorer406    var eventType = original.constructor.name407    var eventCopy = document.createEvent(eventType)408    if (original.getModifierState) {409      var modifiersList = allModifiers.filter(410        original.getModifierState,411        original412      ).join(' ')413    }414    if (eventType === 'MouseEvent') {415      original.initMouseEvent(416        original.type, original.bubbles, original.cancelable,417        original.view, original.detail, original.screenX, original.screenY,418        original.clientX, original.clientY, original.ctrlKey,419        original.altKey, original.shiftKey, original.metaKey,420        original.button, original.relatedTarget421      )422    }423    if (eventType === 'DragEvent') {424      original.initDragEvent(425        original.type, original.bubbles, original.cancelable,426        original.view, original.detail, original.screenX, original.screenY,427        original.clientX, original.clientY, original.ctrlKey,428        original.altKey, original.shiftKey, original.metaKey,429        original.button, original.relatedTarget, original.dataTransfer430      )431    }432    if (eventType === 'WheelEvent') {433      original.initWheelEvent(434        original.detail, original.screenX, original.screenY,435        original.clientX, original.clientY, original.button,436        original.relatedTarget, modifiersList,437        original.deltaX, original.deltaY, original.deltaZ, original.deltaMode438      )439    }440    if (eventType === 'PointerEvent') {441      original.initPointerEvent(442        original.type, original.bubbles, original.cancelable,443        original.view, original.detail, original.screenX, original.screenY,444        original.clientX, original.clientY, original.ctrlKey,445        original.altKey, original.shiftKey, original.metaKey,446        original.button, original.relatedTarget,447        original.offsetX, original.offsetY, original.width, original.height,448        original.pressure, original.rotation,449        original.tiltX, original.tiltY,450        original.pointerId, original.pointerType,451        original.timeStamp, original.isPrimary452      )453    }454    if (eventType === 'TouchEvent') {455      original.initTouchEvent(456        original.type, original.bubbles, original.cancelable,457        original.view, original.detail, original.screenX, original.screenY,458        original.clientX, original.clientY, original.ctrlKey,459        original.altKey, original.shiftKey, original.metaKey,460        original.touches, original.targetTouches, original.changedTouches,461        original.scale, original.rotation462      )463    }464    if (eventType === 'TextEvent') {465      original.initTextEvent(466        original.type, original.bubbles, original.cancelable,467        original.view,468        original.data, original.inputMethod, original.locale469      )470    }471    if (eventType === 'CompositionEvent') {472      original.initTextEvent(473        original.type, original.bubbles, original.cancelable,474        original.view,475        original.data, original.inputMethod, original.locale476      )477    }478    if (eventType === 'KeyboardEvent') {479      original.initKeyboardEvent(480        original.type, original.bubbles, original.cancelable,481        original.view, original.char, original.key,482        original.location, modifiersList, original.repeat483      )484    }485    if (eventType === 'InputEvent' || eventType === 'UIEvent') {486      original.initUIEvent(487        original.type, original.bubbles, original.cancelable,488        original.view, original.detail489      )490    }491    if (eventType === 'FocusEvent') {492      original.initFocusEvent(493        original.type, original.bubbles, original.cancelable,494        original.view, original.detail, original.relatedTarget495      )496    }497  }498  newtarget.dispatchEvent(eventCopy)499  if (eventCopy.defaultPrevented) original.preventDefault()...

coral-uiapply.js

Source:coral-uiapply.js

1;(function () {2  // ==========================================================3  // constructor4  // ==========================================================5  function UIApply () {6    this.fragment = {}7    this.els = new WeakMap()8    this.uimap = {}9    this.funcmap = { name: {}, prop: {}, type: {} }10  }11  // ==========================================================12  // prep13  // ==========================================================14  function getChildIndex (node) { return [].indexOf.call(node.parentNode.childNodes, node) }15  function getChildPath (d, node) {16    var a = []17    do {18      a.push(getChildIndex(node))19      node = node.parentNode20    } while (node && d !== node)21    return a.reverse()22  }23  function findEl (node, sel) {24    var w = sel[0]25    w = isdigit(w) ? 'num' : w26    switch (w) {27      case 'num':28        var n = sel.split('.')29        for (var i = 0; i < n.length; i++) {30          node = node.childNodes[n[i] | 0]31          if (!node) return null32        }33        return node34      case '^':35        var i = sel.substring(1) | 036        while (i) node = node.parentNode37        return node38      default: return node.querySelector(sel)39    }40  }41  UIApply.prototype._mapper = function (u, rootEl, rootO, cEl, o, path) {42    cEl = cEl || rootEl43    path = path || ''44    o = {}45    rootO = rootO || o46    for (var k in u) {47      var uk = u[k]48      var sel = Array.isArray(uk) ? uk[0] : uk49      var el = typeof (sel) === 'number' ? cEl.childNodes[sel] : findEl(cEl, sel)50      if (!el) {51        console.error(rootEl, cEl)52        throw Error('selector ' + sel + ' not found for "' + k + '"')53      }54      var rp = rootO[path + k] = getChildPath(rootEl, el)55      rp.tel = el56      rp.path = k.split('.')57      if (sel !== uk) {58        var uk1 = uk[1]59        if (typeof (uk1) === 'object') {60          rp.ui = this._mapper(uk1, rootEl, rootO, el, o, path + k + '.')61        } else rp.func = this.funcmap.prop[path + k] = typeof (uk1) === 'string' ? uk1.split('.') : uk162      }63    }64    return o65  }66  UIApply.prototype.prep = function (root, html, uimap) {67    this.clear()68    html = html.replace(/\>(\t|\s|\n|\r)*\</g, '><').trim()69    var f = this.fragment = coral.ui.hydrate(root, html)70    this.uimap = this._mapper(uimap, f)71    return this72  }73  // ==========================================================74  // clear75  // ==========================================================76  function clearmap (u) {77    for (var k in u) {78      var uk = u[k]79      if (k === 'children') clearmap(uk)80      if (uk.el && uk.el.parentNode) uk.el.parentNode.removeChild(uk.el)81    }82  }83  UIApply.prototype.clear = function () {84    this.fragment = undefined85    clearmap(this.uimap)86    this.uimap = {}87  }88  // ==========================================================89  // hydrate - initial90  // ==========================================================91  function elbind (el, u) {92    for (var k in u) {93      var uk = u[k]94      if (k === 'ui') elbind(el, uk)95      else uk.el = pathEl(el, uk, [])96    }97  }98  UIApply.prototype.hydrate = function (rootEl) {99    var e = this.fragment100    for (var i = 0; i < e.childNodes.length; i++) { rootEl.appendChild(e.childNodes[i].cloneNode(true)) }101    elbind(rootEl, this.uimap)102  }103  // ==========================================================104  // element modify105  // ==========================================================106  function isdigit (str) { var c = str.charCodeAt(0); return c > 47 && c < 58 }107  function isfunction (obj) { return !!(obj && obj.constructor && obj.call && obj.apply) }108  function changeEl (el, value, func) {109    // if (value === 1) debugger;110    if (func) {111      var v = coral.dot(el, func)112      // if (v.value !== value) v.apply(value) ;return113      if (isfunction(v.value)) v.value.call(v.obj, value)114      else if (v.obj && v.value !== value) v.obj[v.prop] = value115      return116    }117    el.origNodes = null118    if (el.nodeType === 3) { el.nodeValue = value } else if (el.nodeName === 'TEXTAREA' || el.nodeName == 'INPUT') { el.value = value } else {119      if (el.childNodes.length === 1 && el.firstChild.nodeType === 3) {120        if (el.firstChild.nodeValue !== value) { el.firstChild.nodeValue = value }121      } else if (el.textContent !== value) { el.textContent = value }122    }123  }124  function callElFunc (el, path, value, f) {125    f = f ? (f.prop[path] || f.name[el.nodeName] || f.type[el.nodeType]) : null126    changeEl(el, value, f)127  }128  // ==========================================================129  // data apply130  // ====== ====================================================131  function insertAfter (newNode, afterNode) {132    afterNode.parentNode.insertBefore(newNode, afterNode.nextSibling)133  }134  function pathEl (el, pa, offsets) {135    for (var i = 0; i < pa.length; i++) {136      if (!el) debugger137      el = el.childNodes[pa[i] + (offsets[i] || 0)]138    }139    return el140  }141  function pathElNew (el, pa, offsets) {142    for (var i = 0; i < pa.length; i++) {143      if (!el) debugger144      el = (el.origNodes || el.childNodes)[pa[i]]145      var o = (offsets[i] || 0)146      while (o--) el = el.nextSibling147      //if (o) el = el.parentNode.childNodes[getChildIndex(el) + o]148    }149    return el150  }151  function retarget (rootEl, el, patharr, offsets) {152    //return pathEl (rootEl, patharr, offsets)153      return pathElNew (rootEl, patharr, offsets)154    var newpath = getChildPath(rootEl, el)155    var off = []156    var ol = offsets.length157    if (ol) {158      off[ol - 1] = offsets[ol - 1]159    }160    newpath.el = pathEl(rootEl, newpath, offsets)161    return newpath.el162  }163  function applier (ui, rootEl, o, path, offsets) {164    offsets = offsets || []165    var u = ui.uimap166    var f = ui.funcmap167    if (Array.isArray(o)) {168      var au = u[path]; if (!au) return169      var pel = retarget(rootEl, au.el, au, offsets) //|| pathEl(rootEl, au, offsets); if (!pel) return170      var wmap = pel.uiwm = pel.uiwm || {}//new WeakMap()171      var arrEl = wmap[path] =  wmap[path] || [pel]//wmap.get(au)172      //if (!arrEl) { arrEl = [pel]; wmap.set(au, arrEl) }173      // var arrEl = pel.arrEl = pel.arrEl ||  [pel]174      var coffsets175      pel = pel.parentNode176      pel.origNodes = pel.origNodes || 177                      [].slice.call(pel.childNodes)178      if (o.length) {179        for (var i in o) {//var i = 0; i < o.length; i++) {180          if (i >= arrEl.length || arrEl[0].nodeName === '#comment') {181            var el = au.tel.cloneNode(true)182            if (i) {183              insertAfter(el, arrEl[i - 1])184            } else {185              au.el = el186              insertAfter(el, arrEl[0])187              pel.removeChild(arrEl[0])188            }189            arrEl[i] = el190          }191          var e = o[i]192          if (e === undefined) continue193          if (Array.isArray(e) && 0) {194          } else if (!Array.isArray(e) && typeof (e) === 'object') {195            coffsets = coffsets || offsets.slice()196            coffsets[au.length - 1] = i197            applier(ui, rootEl, e, path, coffsets)198          } else {199            if (au.ui) { console.error(au); throw new Error ('expected object')}200            callElFunc(arrEl[i], path, e, f)201          }202        }203        while (o.length < arrEl.length) {204          pel.removeChild(arrEl[arrEl.length - 1])205          arrEl.length--206        }207      } else if (arrEl.length > 1 || arrEl[0].nodeName !== '#comment') {208        var ce = au.el = document.createComment('coral.ui placeholder') // save one placeholder if we go to zero209        pel.insertBefore(ce, arrEl[0])210        for (i = 0; i < arrEl.length; i++) pel.removeChild(arrEl[i])211        arrEl = [ce]212      }213      return214    }215    var op = path216    path = (path && path + '.') || ''217    for (var k in o) {218      var ok = o[k]219      var pk = path + k220      var au = u[pk]221      if ((k | 0) == k) {222        var uop = u[op]; if (!uop) continue223        if (typeof (ok) === 'object') {224          // offsets = offsets.slice()225          // offsets[uop.length - 1] = k226          applier(ui, rootEl, ok, op, offsets)227          continue228        }229        var el = pathEl(rootEl, uop, offsets)230        if (el && el.arrEl) {231          callElFunc(el.arrEl[k], op, ok, f)232          continue233        }234      }235      if (typeof (ok) === 'object') { applier(ui, rootEl, ok, pk, offsets); continue }236      if (!au) continue237      if (au.ui) { console.error(au); throw new Error ('expected object')}238      var el = retarget(rootEl, au.el, au, offsets) //|| pathEl(rootEl, u[pk], offsets)239      if (el) {240        if (0 && el.arrEl) applier(ui, rootEl, [ok], pk, offsets)241        else callElFunc(el, pk, ok, f)242      }243    }244  }245  UIApply.prototype.data = function (rootEl, o, path, offsets) {246    if (!rootEl.childNodes.length) this.hydrate(rootEl)247    applier(this, rootEl, o, path, offsets)248    return this249  }250  // ==========================================================251  // element modify252  // ==========================================================253  UIApply.prototype.react = function (el, state) {254    var ui = this255    var u = ui.uimap256    coral.observe(state, function (updates) {257      var o = Array.isArray(updates.obj) ? [] : {}258      o[updates.prop] = updates.value259      if (Array.isArray(updates.obj)) o.length = updates.obj.length260      var pp261      var offsets = []262      var c = updates.chain263      var path = ''264      if (!c) return265      for (var i = 0; i < c.length; i++) {266        var ci = c[i]267        if (Array.isArray(ci.o)) {268          if (!u[path]) return269          offsets[u[path].length - 1] = ci.p | 0270        } else {271          if (updates.action !== 'set') { o = {}; o[ci.p] = updates.obj; pp = '' + (path || '') }272          path = (path ? path + '.' : '') + ci.p273        }274      }275      ui.data(el, o, updates.action === 'set' ? path : pp, offsets)276    })277  }278  window.coral = window.coral || {}279  window.coral.uiapply = UIApply...

editmeeting.js

Source:editmeeting.js

1/*!2 * Copyright 2014 Apereo Foundation (AF) Licensed under the3 * Educational Community License, Version 2.0 (the "License"); you may4 * not use this file except in compliance with the License. You may5 * obtain a copy of the License at6 *7 *     http://opensource.org/licenses/ECL-2.08 *9 * Unless required by applicable law or agreed to in writing,10 * software distributed under the License is distributed on an "AS IS"11 * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express12 * or implied. See the License for the specific language governing13 * permissions and limitations under the License.14 */15define(['jquery', 'oae.core'], function ($, oae) {16    return function (uid) {17        // The widget container18        var $rootel = $('#' + uid);19        // Variable that keeps track of the meeting profile20        var meetingProfile = null;21        /**22         * Render the edit meeting form and initialize its validation23         */24        var setUpEditMeeting = function() {25            // Render the form elements26            oae.api.util.template().render($('#editmeeting-template', $rootel), {27                'meeting': meetingProfile28            }, $('.modal-body', $rootel));29            // Initialize jQuery validate on the form30            var validateOpts = {31                'submitHandler': editMeeting32            };33            oae.api.util.validation().validate($('#editmeeting-form', $rootel), validateOpts);34        };35        /**36         * Edit the meeting37         */38        var editMeeting = function() {39            // Disable the form40            $('#editmeeting-form *', $rootel).prop('disabled', true);41            var params = {42                'displayName': $.trim($('#editmeeting-name', $rootel).val()),43                'description': $.trim($('#editmeeting-description', $rootel).val()),44                'record': ($('#editmeeting-record', $rootel).is(":checked").toString()),45                'allModerators': ($('#editmeeting-allmoderators', $rootel).is(":checked").toString()),46                'waitModerator': ($('#editmeeting-waitmoderator', $rootel).is(":checked").toString())47            };48            oae.api.meeting.updateMeeting(meetingProfile.id, params, function (err, data) {49                // If the update succeeded, trigger the `oae.editmeeting.done` event,50                // show a success notification and close the modal51                if (!err) {52                    $('#editmeeting-modal', $rootel).modal('hide');53                    oae.api.util.notification(54                        oae.api.i18n.translate('__MSG__MEETING_EDITED__', 'editmeeting'),55                        oae.api.i18n.translate('__MSG__MEETING_EDIT_SUCCESS__', 'editmeeting'));56                    $(document).trigger('oae.editmeeting.done', data);57                // If the update failed, enable the form and show an error notification58                } else {59                    oae.api.util.notification(60                        oae.api.i18n.translate('__MSG__MEETING_NOT_EDITED__', 'editmeeting'),61                        oae.api.i18n.translate('__MSG__MEETING_EDIT_FAIL__', 'editmeeting'),62                        'error');63                    // Enable the form64                    $('#editmeeting-form *', $rootel).prop('disabled', false);65                }66            });67            // Avoid default form submit behavior68            return false;69        };70        /**71         * Reset the widget to its original state when the modal dialog is opened and closed.72         * Ideally this would only be necessary when the modal is hidden, but IE10+ fires `input`73         * events while Bootstrap is rendering the modal, and those events can "undo" parts of the74         * reset. Hooking into the `shown` event provides the chance to compensate.75         */76        var setUpReset = function() {77            $('#editmeeting-modal', $rootel).on('shown.bs.modal hidden.bs.modal', function() {78                // Reset the form79                var $form = $('#editmeeting-form', $rootel);80                $form[0].reset();81                oae.api.util.validation().clear($form);82                // Enable the form and disable the submit button83                $('#editmeeting-form *', $rootel).prop('disabled', false);84                $('#editmeeting-form button[type="submit"]', $rootel).prop('disabled', true);85            });86        };87        /**88         * Initialize the visibility options and bind an event listener to the89         * change event of the checkboxes90         */91        var setUpVisibility = function() {92            $(document).on('click', '#editmeeting-allmoderators', function() {93                if($(this).is(":checked")) {94                    $('.editmeeting-waitmoderator').addClass('hidden');95                    $('#editmeeting-waitmoderator').prop('checked', false);96                } else {97                    $('.editmeeting-waitmoderator').removeClass('hidden');98                }99            });100        };101        /**102         * Initialize the edit meeting modal dialog103         */104        var setUpEditMeetingModal = function() {105        	setUpVisibility();106        	$(document).on('click', '.oae-trigger-editmeeting', function() {107                $('#editmeeting-modal', $rootel).modal({108                    'backdrop': 'static'109                });110                $(document).trigger('oae.context.get', 'editmeeting');111            });112            $(document).on('oae.context.send.editmeeting', function(ev, data) {113                meetingProfile = data;114                setUpEditMeeting();115            });116            // Detect changes in the form and enable the submit button117            $('#editmeeting-form', $rootel).on(oae.api.util.getFormChangeEventNames(), function() {118                $('#editmeeting-form button[type="submit"]', $rootel).prop('disabled', false);119            });120            $('#editmeeting-modal', $rootel).on('shown.bs.modal', function() {121                // Set focus to the meeting description field122                $('#editmeeting-name', $rootel).focus();123            });124        };125        setUpReset();126        setUpEditMeetingModal();127    };...

Using AI Code Generation

1import { rootEl } from 'storybook-root-decorator';2import { render } from '@testing-library/react';3import { Button } from './Button';4test('renders learn react link', () => {5  const { getByText } = render(<Button />, { container: rootEl() });6  const linkElement = getByText(/learn react/i);7  expect(linkElement).toBeInTheDocument();8});

Using AI Code Generation

1import { rootEl } from "storybook-root-elm";2import { Elm } from "./Main.elm";3export default {4};5export const Default = () => {6  const app = Elm.Main.init({7    node: rootEl(),8  });9  return app.ports.outgoing.subscribe((msg) => {10    console.log(msg);11  });12};13import { configure, addDecorator } from "@storybook/html";14import { withRootEl } from "storybook-root-elm";15addDecorator(withRootEl);16function loadStories() {17  require("../test.js");18}19configure(loadStories, module);20import { addons } from "@storybook/addons";21import { withRootEl } from "storybook-root-elm";22addons.setConfig({23  sidebar: {24  },25  panel: {26  },27  toolbar: {28  },29  previewTabs: {30    canvas: { hidden: false },31    "storybook/docs/panel": { hidden: true },32  },33  sidebar: {34  },35  panel: {36  },37  toolbar: {38  },39  previewTabs: {40    canvas: { hidden: false },41    "storybook/docs/panel": { hidden: true },42  },43});44addons.add("storybook-root-elm", withRootEl);

Using AI Code Generation

1import { rootEl } from 'storybook-root-elm';2const root = rootEl('elmRoot');3root.init({4  flags: {5  }6});7export default {8};9export const Elm = () => root;

Using AI Code Generation

1import { rootEl } from 'storybook-root-require';2import { configure } from '@storybook/react';3const req = require.context('../src/components', true, /.stories.js$/);4function loadStories() {5  req.keys().forEach((filename) => req(filename));6}7configure(loadStories, module);8import React from 'react';9import { storiesOf } from '@storybook/react';10import { Button } from '../src/components/Button';11storiesOf('Button', module)12  .add('with text', () => (13  .add('with some emoji', () => (14  ));15import React from 'react';16import PropTypes from 'prop-types';17import styled from 'styled-components';18  padding: 1rem;19  font-size: 1.5rem;20  background: #fff;21  border: 1px solid #000;22`;23export const Button = ({ children }) => (24  <StyledButton>{children}</StyledButton>25);26Button.propTypes = {27};28import styled from 'styled-components';29  padding: 1rem;30  font-size: 1.5rem;31  background: #fff;32  border: 1px solid #000;33`;34import React from 'react';35import { storiesOf } from '@storybook/react';36import { Button } from '../src/components/Button';37storiesOf('Button', module)38  .add('with text', () => (39  .add('with some emoji', () => (40  ));41import React from 'react';42import { shallow } from 'enzyme';43import { Button } from '../src/components/Button';44describe('<Button />', () => {45  it('should render without crashing', () => {

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.