How to use rootEl method in storybook-root

Best JavaScript code snippet using storybook-root

coral-virtual.js

Source:coral-virtual.js Github

copy

Full Screen

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()...

Full Screen

Full Screen

coral-uiapply.js

Source:coral-uiapply.js Github

copy

Full Screen

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...

Full Screen

Full Screen

editmeeting.js

Source:editmeeting.js Github

copy

Full Screen

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 };...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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', () => {

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful