remote-calibrator 0.3.0-beta.6 → 0.3.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/panel.js CHANGED
@@ -119,6 +119,9 @@ RemoteCalibrator.prototype.panel = async function (
119
119
 
120
120
  const panel = document.createElement('div')
121
121
  panel.className = panel.id = 'rc-panel'
122
+ if (this.LD === this._CONST.RTL) panel.className += ' rc-lang-rtl'
123
+ else panel.className += ' rc-lang-ltr'
124
+
122
125
  panel.innerHTML = `<h1 class="rc-panel-title" id="rc-panel-title">${options.headline}</h1>`
123
126
  panel.innerHTML += `<p class="rc-panel-description" id="rc-panel-description">${options.description}</p>`
124
127
  panel.innerHTML += '<div class="rc-panel-steps" id="rc-panel-steps"></div>'
@@ -129,11 +132,12 @@ RemoteCalibrator.prototype.panel = async function (
129
132
  const steps = panel.querySelector('#rc-panel-steps')
130
133
 
131
134
  // Observe panel size for adjusting steps
135
+ const RC = this
132
136
  const panelObserver = new ResizeObserver(() => {
133
- _setStepsClassesSL(steps, panel.offsetWidth)
137
+ _setStepsClassesSL(steps, panel.offsetWidth, RC.LD)
134
138
  })
135
139
  panelObserver.observe(panel)
136
- _setStepsClassesSL(steps, panel.offsetWidth)
140
+ _setStepsClassesSL(steps, panel.offsetWidth, this.LD)
137
141
 
138
142
  if (tasks.length === 0) {
139
143
  steps.className += ' rc-panel-no-steps'
@@ -296,13 +300,22 @@ const _nextStepBlock = (index, options) => {
296
300
  return b
297
301
  }
298
302
 
299
- const _setStepsClassesSL = (steps, panelWidth) => {
303
+ const _setStepsClassesSL = (steps, panelWidth, LD) => {
300
304
  if (panelWidth < 640) {
301
305
  steps.classList.add('rc-panel-steps-s')
302
306
  steps.classList.remove('rc-panel-steps-l')
307
+
308
+ steps.childNodes.forEach(e => {
309
+ e.classList.add(`rc-lang-${LD.toLowerCase()}`)
310
+ })
303
311
  } else {
304
312
  steps.classList.add('rc-panel-steps-l')
305
313
  steps.classList.remove('rc-panel-steps-s')
314
+
315
+ steps.childNodes.forEach(e => {
316
+ e.classList.remove(`rc-lang-ltr`)
317
+ e.classList.remove(`rc-lang-rtl`)
318
+ })
306
319
  }
307
320
  }
308
321