switch (m.data('menu')) {
case 'chapters':
- w = this.fluidbook.datas.chaptersColMaxWidth * 1.5;
+ this.fluidbook.datas.chaptersColumns = Math.max(1, Math.min(6, this.fluidbook.datas.chaptersColumns));
+ if (this.fluidbook.datas.chaptersCascade) {
+ this.fluidbook.datas.chaptersColumns = 1;
+ }
+
+ var w;
+ if (this.fluidbook.datas.chaptersColumns > 1) {
+ w = this.fluidbook.datas.chaptersColMaxWidth * this.fluidbook.datas.chaptersColumns;
+ } else {
+ w = Math.min(450, this.fluidbook.datas.chaptersColMaxWidth);
+ }
fullscreen = (w >= ww * 0.9);
+ if(fullscreen){
+ w=ww;
+ }
if (this.fluidbook.datas.chaptersCascade) {
h = hh * 0.8;
forceHeight = true;
}
+
+ if(this.fluidbook.datas.chaptersColumns > 1){
+ if(w<this.fluidbook.datas.chaptersColMaxWidth * this.fluidbook.datas.chaptersColumns){
+ $('.mview[data-menu=chapters] ul.chapters').addClass('onecolumn');
+ }else{
+ $('.mview[data-menu=chapters] ul.chapters').removeClass('onecolumn');
+ }
+ }
+
break;
case 'text':
w = parseInt(this.fluidbook.datas.textPopupWidth);
}
var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
- console.log('tabsScale', tabsScale);
this.bookScale *= tabsScale;
var fw = this.bookScale * fww;
var $this = this;
var base;
var baseLevel = 0;
- if (sub == 'null') {
+
+ // Columns setup
+ var nbItems = 0;
+ var columns = parseInt(this.fluidbook.datas.chaptersColumns);
+ $.each(this.chapters, function (k, v) {
+ if (v.label === '--' || v.label === '++') {
+
+ } else {
+ nbItems++;
+ }
+ });
+ var perCol = Math.round(nbItems / columns);
+ console.log(nbItems, perCol, columns);
+ var forgetCut = false;
+ var forceCut = false;
+ var ignore = false;
+ var columnId = 0;
+ var i = 0;
+ var columnsContainers = [];
+ for (var j = 0; j < columns; j++) {
+ columnsContainers[j] = [];
+ }
+
+ if (sub === 'null') {
base = this.chapters;
} else {
var base = [];
var vu = false;
var level;
$.each(this.chapters, function (k, v) {
+ if (v.label === '--' || v.label === '++') {
+
+ } else {
+ nbItems++;
+ }
if (!vu) {
if (v.page == '#' + sub) {
vu = true;
var $this = this;
this.html[sub] = '<ul class="chapters">';
+
+
$.each(base, function (k, v) {
- $this.html[sub] += $this.addItem(v, baseLevel);
+ if (!forgetCut) {
+ forgetCut = v.label.indexOf('++') === 0;
+ if (forgetCut) {
+ return;
+ }
+ }
+ forceCut = v.label.indexOf('--') === 0 || v.label.indexOf('!!!') === 0;
+ ignore = forceCut || v.label.indexOf('++') === 0;
+
+ // Next column
+ if (!forgetCut && ((columnId + 1) < columns && ((columns > 1 && v.level === 0 && i > (perCol * 0.8)) || (forceCut && i > 0)))) {
+ i = 0;
+ columnId++;
+ }
+
+ if (forgetCut) {
+ forgetCut = false;
+ }
+
+ columnsContainers[columnId].push($this.addItem(v, baseLevel));
+
+ if (!ignore) {
+ i++;
+ }
});
+
+ for (j = 0; j < columns; j++) {
+ this.html[sub] += '<div class="column">' + columnsContainers[j].join('') + '</div>';
+ }
this.html[sub] += '</ul>';
},
addItem: function (chapter, baseLevel) {
if (baseLevel == undefined) {
baseLevel = 0;
}
-
- if (chapter.label == '--' || chapter.label == '++') {
- return "";
- }
if (chapter.label == '----') {
return '<li class="separator"></li>';
}
--- /dev/null
+// Chapters
+
+ul.chapters {
+ list-style: none;
+ padding: 20px 0;
+
+ .column {
+ display: inline-block;
+ vertical-align: top;
+ width: unit(100/@menu-chapters-columns-count, %);
+ }
+
+ &.onecolumn {
+ .column {
+ width: 100%;
+ }
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ > li {
+ clear: both;
+ }
+
+ li {
+ position: relative;
+
+ &[data-level="1"] + [data-level="0"] {
+ margin-top: 15px;
+ }
+
+ &[data-level="2"] + [data-level="1"] {
+ margin-top: 10px;
+ }
+
+ &[data-level="3"] + [data-level="2"] {
+ margin-top: 5px;
+ }
+
+ &.separator {
+ height: 20px;
+
+ &:first-child {
+ height: 0;
+ }
+ }
+ }
+
+ a {
+ font-size: 16px;
+ display: block;
+ text-align: left;
+ padding: 5px 32px;
+ transition: background-color 250ms;
+
+ .rtl & {
+ text-align: right;
+ }
+
+ &.level-1 {
+ font-family: @font;
+ font-weight: 700;
+ text-align: left;
+
+ .right {
+ display: none;
+ }
+ }
+
+ &.level0 {
+ font-family: @font;
+ font-weight: 400;
+
+ .right .puce {
+ margin: 2px 0 0 0;
+ }
+
+ }
+
+ &.level1 {
+ padding-left: 50px;
+
+ .right {
+ top: 6px;
+ }
+
+ .rtl & {
+ padding-left: 0;
+ padding-right: 50px;
+ }
+
+ }
+
+ &.level2 {
+ padding-left: 80px;
+
+ .rtl & {
+ padding-left: 0;
+ padding-right: 80px;
+ }
+
+ .right {
+ top: 6px;
+ }
+
+ .right .puce {
+ margin: -2px 0 0 0;
+ }
+ }
+
+ .level3 {
+ padding-left: 110px;
+
+ .right {
+ top: 6px;
+ }
+
+ .rtl & {
+ padding-left: 0;
+ padding-right: 110px;
+ }
+ }
+
+ > nav {
+ display: none;
+ }
+ }
+
+ li > a > span {
+ display: block;
+ padding-right: 30px;
+
+ .rtl & {
+ padding-right: 0;
+ padding-left: 30px;
+ }
+
+ }
+
+ .right {
+ @size: 20px;
+
+ right: 32px;
+ top: 4px;
+ position: absolute;
+ display: inline-block;
+ vertical-align: top;
+ width: @size;
+ height: @size;
+ text-align: center;
+
+ .rtl & {
+ right: auto;
+ left: 32px;
+ }
+
+ .puce {
+ width: @size;
+ height: @size;
+ color: #fff;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .rtl & {
+ transform: rotate(180deg);
+ }
+
+ svg {
+ width: unit(@size - 8, px);
+ height: unit(@size - 8, px);
+ }
+
+ border-radius: 1px;
+
+ &.noshadow {
+ border-radius: 0px;
+
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+ -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+ -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+ -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+
+ margin: 0 0 0 15px;
+ float: right;
+ }
+ }
+ }
+}
\ No newline at end of file
}
}
-// Chapters
-
-ul.chapters {
- list-style: none;
- padding: 20px 0;
-
- ul {
- list-style: none;
- }
-
- > li {
- clear: both;
- }
-
- li {
- position: relative;
-
- &[data-level="1"] + [data-level="0"] {
- margin-top: 15px;
- }
-
- &[data-level="2"] + [data-level="1"] {
- margin-top: 10px;
- }
-
- &[data-level="3"] + [data-level="2"] {
- margin-top: 5px;
- }
-
- &.separator {
- height: 20px;
- }
- }
-
- a {
- font-size: 16px;
- display: block;
- text-align: left;
- padding: 5px 32px;
- transition: background-color 250ms;
-
- .rtl & {
- text-align: right;
- }
-
- &.level-1 {
- font-family: @font;
- font-weight: 400;
- text-align: center;
-
- .right {
- display: none;
- }
- }
-
- &.level0 {
- font-family: @font;
- font-weight: 400;
-
- .right .puce {
- margin: 2px 0 0 0;
- }
-
- }
-
- &.level1 {
- padding-left: 50px;
-
- .rtl & {
- padding-left: 0;
- padding-right: 50px;
- }
-
- }
-
- &.level2 {
- padding-left: 80px;
-
- .rtl & {
- padding-left: 0;
- padding-right: 80px;
- }
-
- .right .puce {
- margin: -2px 0 0 0;
- }
- }
-
- .level3 {
- padding-left: 110px;
-
- .rtl & {
- padding-left: 0;
- padding-right: 110px;
- }
- }
-
- > nav {
- display: none;
- }
- }
-
- li > a > span {
- display: block;
- padding-right: 30px;
-
- .rtl & {
- padding-right: 0;
- padding-left: 30px;
- }
-
- }
-
- .right {
- right: 32px;
- top: 5px;
- position: absolute;
- display: inline-block;
- vertical-align: top;
- width: 25px;
- height: 25px;
- text-align: center;
-
- .rtl & {
- right: auto;
- left: 32px;
- }
-
- .puce {
- width: 25px;
- height: 25px;
- color: #fff;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .rtl & {
- transform: rotate(180deg);
- }
-
- svg {
- width: 16px;
- height: 16px;
- }
-
- border-radius: 1px;
-
- &.noshadow {
- border-radius: 0px;
-
- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
- -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
- -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
- -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
- -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-
- margin: 0 0 0 15px;
- float: right;
- }
- }
- }
-}
+@import "chapters";
/* ipad mag */
.pad #pagesnumbers,
width: auto;
white-space: nowrap;
- &:first-child{
+ &:first-child {
margin-left: 0;
}
projects / fluidbook-html5.git / commitdiff