@oat-sa/tao-core-ui 3.18.5 → 3.18.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/dist/mediaplayer.js +2 -1
- package/package.json +1 -1
- package/scss/inc/_base.scss +55 -24
- package/src/css/basic.css +45 -26
- 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,25 +673,28 @@ body {
|
|
|
673
673
|
}
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
676
|
+
&.writing-mode-vertical-rl,
|
|
677
|
+
.writing-mode-vertical-rl {
|
|
678
|
+
ruby {
|
|
679
|
+
rb:has(.txt-wavy) + rt {
|
|
679
680
|
position: relative;
|
|
680
681
|
left: 5px;
|
|
681
682
|
}
|
|
682
|
-
|
|
683
|
+
rb:has(.txt-underline, .txt-dashed) + rt {
|
|
683
684
|
position: relative;
|
|
684
|
-
left:
|
|
685
|
+
left: 2px;
|
|
685
686
|
}
|
|
686
687
|
}
|
|
688
|
+
}
|
|
687
689
|
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
690
|
+
&.writing-mode-horizontal-tb,
|
|
691
|
+
.writing-mode-horizontal-tb {
|
|
692
|
+
ruby {
|
|
693
|
+
rb:has(.txt-wavy) + rt {
|
|
691
694
|
position: relative;
|
|
692
|
-
left:
|
|
695
|
+
left: auto;
|
|
693
696
|
}
|
|
694
|
-
|
|
697
|
+
rb:has(.txt-underline, .txt-dashed) + rt {
|
|
695
698
|
position: relative;
|
|
696
699
|
left: auto;
|
|
697
700
|
}
|
|
@@ -704,6 +707,20 @@ body {
|
|
|
704
707
|
direction: rtl;
|
|
705
708
|
height: 100%;
|
|
706
709
|
width: auto;
|
|
710
|
+
margin: 0;
|
|
711
|
+
|
|
712
|
+
div[data-src][data-type] {
|
|
713
|
+
// script sets inline width only — override it; height fills container for nesting
|
|
714
|
+
width: auto !important;
|
|
715
|
+
height: 100%;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.mediaplayer .player {
|
|
719
|
+
.media:not(.youtube) {
|
|
720
|
+
width: auto;
|
|
721
|
+
height: 100%;
|
|
722
|
+
}
|
|
723
|
+
}
|
|
707
724
|
|
|
708
725
|
.mediaplayer .controls {
|
|
709
726
|
display: inline-block;
|
|
@@ -719,7 +736,7 @@ body {
|
|
|
719
736
|
.mediaplayer .controls .control {
|
|
720
737
|
display: block;
|
|
721
738
|
|
|
722
|
-
&.actions .action{
|
|
739
|
+
&.actions .action {
|
|
723
740
|
position: relative;
|
|
724
741
|
top: 3px;
|
|
725
742
|
}
|
|
@@ -732,6 +749,25 @@ body {
|
|
|
732
749
|
}
|
|
733
750
|
}
|
|
734
751
|
|
|
752
|
+
.qti-item .writing-mode-horizontal-tb .media-container,
|
|
753
|
+
.qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
|
|
754
|
+
direction: ltr;
|
|
755
|
+
width: 100%;
|
|
756
|
+
height: auto;
|
|
757
|
+
|
|
758
|
+
div[data-src][data-type] {
|
|
759
|
+
width: inherit !important;
|
|
760
|
+
height: auto;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.mediaplayer .player {
|
|
764
|
+
.media:not(.youtube) {
|
|
765
|
+
width: 100%;
|
|
766
|
+
height: auto;
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
|
|
735
771
|
[data-useragent-browser='safari'] {
|
|
736
772
|
&.writing-mode-vertical-rl,
|
|
737
773
|
.writing-mode-vertical-rl {
|
|
@@ -739,26 +775,21 @@ body {
|
|
|
739
775
|
.txt-dashed {
|
|
740
776
|
text-underline-offset: -0.1em;
|
|
741
777
|
}
|
|
742
|
-
ruby rt {
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
}
|
|
778
|
+
ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
|
|
779
|
+
left: 0;
|
|
780
|
+
}
|
|
781
|
+
ruby rb:has(.txt-wavy) + rt {
|
|
782
|
+
left: 0;
|
|
748
783
|
}
|
|
749
784
|
}
|
|
750
|
-
|
|
785
|
+
&.writing-mode-horizontal-tb,
|
|
751
786
|
.writing-mode-horizontal-tb {
|
|
752
787
|
.txt-underline,
|
|
753
788
|
.txt-dashed {
|
|
754
789
|
text-underline-offset: auto;
|
|
755
790
|
}
|
|
756
|
-
ruby rt {
|
|
757
|
-
|
|
758
|
-
& > .txt-underline,
|
|
759
|
-
& > .txt-dashed {
|
|
760
|
-
left: auto;
|
|
761
|
-
}
|
|
791
|
+
ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
|
|
792
|
+
left: auto;
|
|
762
793
|
}
|
|
763
794
|
}
|
|
764
795
|
}
|
package/src/css/basic.css
CHANGED
|
@@ -1619,40 +1619,43 @@ 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
|
|
1622
|
+
html.writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt,
|
|
1623
|
+
html .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
|
|
1623
1624
|
position: relative;
|
|
1624
1625
|
left: 5px;
|
|
1625
1626
|
}
|
|
1626
|
-
|
|
1627
|
-
html ruby
|
|
1628
|
-
position: relative;
|
|
1629
|
-
left: auto;
|
|
1630
|
-
}
|
|
1631
|
-
html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rt > .txt-wavy {
|
|
1632
|
-
position: relative;
|
|
1633
|
-
left: auto;
|
|
1634
|
-
}
|
|
1635
|
-
|
|
1636
|
-
html .writing-mode-vertical-rl ruby rt > .txt-underline, html .writing-mode-vertical-rl ruby rt > .txt-dashed {
|
|
1627
|
+
html.writing-mode-vertical-rl ruby rb:has(.txt-underline, .txt-dashed) + rt,
|
|
1628
|
+
html .writing-mode-vertical-rl ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
1637
1629
|
position: relative;
|
|
1638
1630
|
left: 2px;
|
|
1639
1631
|
}
|
|
1640
|
-
|
|
1641
|
-
html ruby
|
|
1632
|
+
html.writing-mode-horizontal-tb ruby rb:has(.txt-wavy) + rt,
|
|
1633
|
+
html .writing-mode-horizontal-tb ruby rb:has(.txt-wavy) + rt {
|
|
1642
1634
|
position: relative;
|
|
1643
1635
|
left: auto;
|
|
1644
1636
|
}
|
|
1645
|
-
html
|
|
1637
|
+
html.writing-mode-horizontal-tb ruby rb:has(.txt-underline, .txt-dashed) + rt,
|
|
1638
|
+
html .writing-mode-horizontal-tb ruby rb:has(.txt-underline, .txt-dashed) + rt {
|
|
1646
1639
|
position: relative;
|
|
1647
1640
|
left: auto;
|
|
1648
1641
|
}
|
|
1649
|
-
|
|
1650
1642
|
html .qti-item .writing-mode-vertical-rl .media-container,
|
|
1651
1643
|
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) {
|
|
1652
1644
|
writing-mode: horizontal-tb;
|
|
1653
1645
|
direction: rtl;
|
|
1654
1646
|
height: 100%;
|
|
1655
1647
|
width: auto;
|
|
1648
|
+
margin: 0;
|
|
1649
|
+
}
|
|
1650
|
+
html .qti-item .writing-mode-vertical-rl .media-container div[data-src][data-type],
|
|
1651
|
+
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
|
|
1652
|
+
width: auto !important;
|
|
1653
|
+
height: 100%;
|
|
1654
|
+
}
|
|
1655
|
+
html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .player .media:not(.youtube),
|
|
1656
|
+
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
|
|
1657
|
+
width: auto;
|
|
1658
|
+
height: 100%;
|
|
1656
1659
|
}
|
|
1657
1660
|
html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls,
|
|
1658
1661
|
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls {
|
|
@@ -1682,28 +1685,44 @@ html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls
|
|
|
1682
1685
|
html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls .control.infos.timer {
|
|
1683
1686
|
white-space: nowrap;
|
|
1684
1687
|
}
|
|
1688
|
+
html .qti-item .writing-mode-horizontal-tb .media-container,
|
|
1689
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
|
|
1690
|
+
direction: ltr;
|
|
1691
|
+
width: 100%;
|
|
1692
|
+
height: auto;
|
|
1693
|
+
}
|
|
1694
|
+
html .qti-item .writing-mode-horizontal-tb .media-container div[data-src][data-type],
|
|
1695
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
|
|
1696
|
+
width: inherit !important;
|
|
1697
|
+
height: auto;
|
|
1698
|
+
}
|
|
1699
|
+
html .qti-item .writing-mode-horizontal-tb .media-container .mediaplayer .player .media:not(.youtube),
|
|
1700
|
+
html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
|
|
1701
|
+
width: 100%;
|
|
1702
|
+
height: auto;
|
|
1703
|
+
}
|
|
1685
1704
|
html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-underline,
|
|
1686
1705
|
html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-dashed,
|
|
1687
1706
|
html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-underline,
|
|
1688
1707
|
html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-dashed {
|
|
1689
1708
|
text-underline-offset: -0.1em;
|
|
1690
1709
|
}
|
|
1691
|
-
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby
|
|
1692
|
-
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby
|
|
1693
|
-
|
|
1694
|
-
|
|
1710
|
+
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
|
|
1711
|
+
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
|
|
1712
|
+
left: 0;
|
|
1713
|
+
}
|
|
1714
|
+
html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt,
|
|
1715
|
+
html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
|
|
1695
1716
|
left: 0;
|
|
1696
1717
|
}
|
|
1697
|
-
html [data-useragent-browser=safari] .txt-underline,
|
|
1698
|
-
html [data-useragent-browser=safari] .txt-dashed,
|
|
1718
|
+
html [data-useragent-browser=safari].writing-mode-horizontal-tb .txt-underline,
|
|
1719
|
+
html [data-useragent-browser=safari].writing-mode-horizontal-tb .txt-dashed,
|
|
1699
1720
|
html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-underline,
|
|
1700
1721
|
html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-dashed {
|
|
1701
1722
|
text-underline-offset: auto;
|
|
1702
1723
|
}
|
|
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 {
|
|
1724
|
+
html [data-useragent-browser=safari].writing-mode-horizontal-tb ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
|
|
1725
|
+
html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
|
|
1707
1726
|
left: auto;
|
|
1708
1727
|
}
|
|
1709
1728
|
html .txt-combine-upright-all {
|