@oat-sa/tao-core-ui 3.18.5 → 3.18.6
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/dist/mediaplayer.js +2 -1
- package/package.json +1 -1
- package/scss/inc/_base.scss +58 -33
- package/src/css/basic.css +41 -14
- package/src/css/basic.css.map +1 -1
- package/src/mediaplayer.js +4 -2
package/dist/mediaplayer.js
CHANGED
|
@@ -339,6 +339,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
|
|
|
339
339
|
*/
|
|
340
340
|
render(to) {
|
|
341
341
|
const renderTo = to || this.config.renderTo || this.$container;
|
|
342
|
+
const isVertical = ($$1('body').hasClass('item-writing-mode-vertical-rl') || $$1(renderTo).closest('.qti-interaction, .custom-text-box').hasClass('writing-mode-vertical-rl')) && !$$1(renderTo).closest('.qti-interaction, .custom-text-box').hasClass('writing-mode-horizontal-tb');
|
|
342
343
|
if (this.$component) {
|
|
343
344
|
this.destroy();
|
|
344
345
|
}
|
|
@@ -352,7 +353,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
|
|
|
352
353
|
this._playingState(false, true);
|
|
353
354
|
this._initPlayer();
|
|
354
355
|
this._initSize();
|
|
355
|
-
if (
|
|
356
|
+
if (isVertical) {
|
|
356
357
|
// Change size axis for vertical writing view mode
|
|
357
358
|
this.resize(this.config.height, this.config.width);
|
|
358
359
|
} else {
|
package/package.json
CHANGED
package/scss/inc/_base.scss
CHANGED
|
@@ -673,28 +673,25 @@ body {
|
|
|
673
673
|
}
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
-
ruby rt {
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
left: auto;
|
|
685
|
-
}
|
|
676
|
+
ruby rb:has(.txt-wavy) + rt {
|
|
677
|
+
@include writing-mode-vertical-rl {
|
|
678
|
+
position: relative;
|
|
679
|
+
left: 5px;
|
|
680
|
+
}
|
|
681
|
+
@include writing-mode-horizontal-tb {
|
|
682
|
+
position: relative;
|
|
683
|
+
left: auto;
|
|
686
684
|
}
|
|
685
|
+
}
|
|
687
686
|
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
left: auto;
|
|
697
|
-
}
|
|
687
|
+
ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
688
|
+
@include writing-mode-vertical-rl {
|
|
689
|
+
position: relative;
|
|
690
|
+
left: 2px;
|
|
691
|
+
}
|
|
692
|
+
@include writing-mode-horizontal-tb {
|
|
693
|
+
position: relative;
|
|
694
|
+
left: auto;
|
|
698
695
|
}
|
|
699
696
|
}
|
|
700
697
|
|
|
@@ -704,6 +701,20 @@ body {
|
|
|
704
701
|
direction: rtl;
|
|
705
702
|
height: 100%;
|
|
706
703
|
width: auto;
|
|
704
|
+
margin: 0;
|
|
705
|
+
|
|
706
|
+
div[data-src][data-type] {
|
|
707
|
+
// script sets inline width only — override it; height fills container for nesting
|
|
708
|
+
width: auto !important;
|
|
709
|
+
height: 100%;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.mediaplayer .player {
|
|
713
|
+
.media:not(.youtube) {
|
|
714
|
+
width: auto;
|
|
715
|
+
height: 100%;
|
|
716
|
+
}
|
|
717
|
+
}
|
|
707
718
|
|
|
708
719
|
.mediaplayer .controls {
|
|
709
720
|
display: inline-block;
|
|
@@ -719,7 +730,7 @@ body {
|
|
|
719
730
|
.mediaplayer .controls .control {
|
|
720
731
|
display: block;
|
|
721
732
|
|
|
722
|
-
&.actions .action{
|
|
733
|
+
&.actions .action {
|
|
723
734
|
position: relative;
|
|
724
735
|
top: 3px;
|
|
725
736
|
}
|
|
@@ -732,6 +743,25 @@ body {
|
|
|
732
743
|
}
|
|
733
744
|
}
|
|
734
745
|
|
|
746
|
+
.qti-item .writing-mode-horizontal-tb .media-container,
|
|
747
|
+
.qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
|
|
748
|
+
direction: ltr;
|
|
749
|
+
width: 100%;
|
|
750
|
+
height: auto;
|
|
751
|
+
|
|
752
|
+
div[data-src][data-type] {
|
|
753
|
+
width: inherit !important;
|
|
754
|
+
height: auto;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.mediaplayer .player {
|
|
758
|
+
.media:not(.youtube) {
|
|
759
|
+
width: 100%;
|
|
760
|
+
height: auto;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
|
|
735
765
|
[data-useragent-browser='safari'] {
|
|
736
766
|
&.writing-mode-vertical-rl,
|
|
737
767
|
.writing-mode-vertical-rl {
|
|
@@ -739,12 +769,11 @@ body {
|
|
|
739
769
|
.txt-dashed {
|
|
740
770
|
text-underline-offset: -0.1em;
|
|
741
771
|
}
|
|
742
|
-
ruby rt {
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
}
|
|
772
|
+
ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
|
|
773
|
+
left: 0;
|
|
774
|
+
}
|
|
775
|
+
ruby rb:has(.txt-wavy) + rt {
|
|
776
|
+
left: 0;
|
|
748
777
|
}
|
|
749
778
|
}
|
|
750
779
|
&,
|
|
@@ -753,12 +782,8 @@ body {
|
|
|
753
782
|
.txt-dashed {
|
|
754
783
|
text-underline-offset: auto;
|
|
755
784
|
}
|
|
756
|
-
ruby rt {
|
|
757
|
-
|
|
758
|
-
& > .txt-underline,
|
|
759
|
-
& > .txt-dashed {
|
|
760
|
-
left: auto;
|
|
761
|
-
}
|
|
785
|
+
ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
|
|
786
|
+
left: auto;
|
|
762
787
|
}
|
|
763
788
|
}
|
|
764
789
|
}
|
package/src/css/basic.css
CHANGED
|
@@ -1619,30 +1619,30 @@ html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-wavy ruby rt {
|
|
|
1619
1619
|
inset-block-start: auto;
|
|
1620
1620
|
}
|
|
1621
1621
|
|
|
1622
|
-
html .writing-mode-vertical-rl ruby
|
|
1622
|
+
html .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
|
|
1623
1623
|
position: relative;
|
|
1624
1624
|
left: 5px;
|
|
1625
1625
|
}
|
|
1626
1626
|
|
|
1627
|
-
html ruby
|
|
1627
|
+
html ruby rb:has(.txt-wavy) + rt {
|
|
1628
1628
|
position: relative;
|
|
1629
1629
|
left: auto;
|
|
1630
1630
|
}
|
|
1631
|
-
html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby
|
|
1631
|
+
html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rb:has(.txt-wavy) + rt {
|
|
1632
1632
|
position: relative;
|
|
1633
1633
|
left: auto;
|
|
1634
1634
|
}
|
|
1635
1635
|
|
|
1636
|
-
html .writing-mode-vertical-rl ruby
|
|
1636
|
+
html .writing-mode-vertical-rl ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
1637
1637
|
position: relative;
|
|
1638
1638
|
left: 2px;
|
|
1639
1639
|
}
|
|
1640
1640
|
|
|
1641
|
-
html ruby
|
|
1641
|
+
html ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
1642
1642
|
position: relative;
|
|
1643
1643
|
left: auto;
|
|
1644
1644
|
}
|
|
1645
|
-
html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby
|
|
1645
|
+
html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
1646
1646
|
position: relative;
|
|
1647
1647
|
left: auto;
|
|
1648
1648
|
}
|
|
@@ -1653,6 +1653,17 @@ html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.me
|
|
|
1653
1653
|
direction: rtl;
|
|
1654
1654
|
height: 100%;
|
|
1655
1655
|
width: auto;
|
|
1656
|
+
margin: 0;
|
|
1657
|
+
}
|
|
1658
|
+
html .qti-item .writing-mode-vertical-rl .media-container div[data-src][data-type],
|
|
1659
|
+
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
|
|
1660
|
+
width: auto !important;
|
|
1661
|
+
height: 100%;
|
|
1662
|
+
}
|
|
1663
|
+
html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .player .media:not(.youtube),
|
|
1664
|
+
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
|
|
1665
|
+
width: auto;
|
|
1666
|
+
height: 100%;
|
|
1656
1667
|
}
|
|
1657
1668
|
html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls,
|
|
1658
1669
|
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls {
|
|
@@ -1682,16 +1693,34 @@ html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls
|
|
|
1682
1693
|
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls .control.infos.timer {
|
|
1683
1694
|
white-space: nowrap;
|
|
1684
1695
|
}
|
|
1696
|
+
html .qti-item .writing-mode-horizontal-tb .media-container,
|
|
1697
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
|
|
1698
|
+
direction: ltr;
|
|
1699
|
+
width: 100%;
|
|
1700
|
+
height: auto;
|
|
1701
|
+
}
|
|
1702
|
+
html .qti-item .writing-mode-horizontal-tb .media-container div[data-src][data-type],
|
|
1703
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
|
|
1704
|
+
width: inherit !important;
|
|
1705
|
+
height: auto;
|
|
1706
|
+
}
|
|
1707
|
+
html .qti-item .writing-mode-horizontal-tb .media-container .mediaplayer .player .media:not(.youtube),
|
|
1708
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
|
|
1709
|
+
width: 100%;
|
|
1710
|
+
height: auto;
|
|
1711
|
+
}
|
|
1685
1712
|
html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-underline,
|
|
1686
1713
|
html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-dashed,
|
|
1687
1714
|
html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-underline,
|
|
1688
1715
|
html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-dashed {
|
|
1689
1716
|
text-underline-offset: -0.1em;
|
|
1690
1717
|
}
|
|
1691
|
-
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby
|
|
1692
|
-
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby
|
|
1693
|
-
|
|
1694
|
-
|
|
1718
|
+
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
|
|
1719
|
+
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
|
|
1720
|
+
left: 0;
|
|
1721
|
+
}
|
|
1722
|
+
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt,
|
|
1723
|
+
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
|
|
1695
1724
|
left: 0;
|
|
1696
1725
|
}
|
|
1697
1726
|
html [data-useragent-browser=safari] .txt-underline,
|
|
@@ -1700,10 +1729,8 @@ html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-underline,
|
|
|
1700
1729
|
html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-dashed {
|
|
1701
1730
|
text-underline-offset: auto;
|
|
1702
1731
|
}
|
|
1703
|
-
html [data-useragent-browser=safari] ruby
|
|
1704
|
-
html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby
|
|
1705
|
-
html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rt > .txt-underline,
|
|
1706
|
-
html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rt > .txt-dashed {
|
|
1732
|
+
html [data-useragent-browser=safari] ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
|
|
1733
|
+
html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
|
|
1707
1734
|
left: auto;
|
|
1708
1735
|
}
|
|
1709
1736
|
html .txt-combine-upright-all {
|