wait #4630 @1

diff --git a/resources/views/fields/fluidbook_composition.blade.php b/resources/views/fields/fluidbook_composition.blade.php
index 21bbc4b965746d03a8ff80043d3e98c7fdcd762c..1b86ceeb7d96edcf0ed5dd94f7dc6fa82b260a9c 100644 (file)
--- a/resources/views/fields/fluidbook_composition.blade.php
+++ b/resources/views/fields/fluidbook_composition.blade.php
@@ -21,26 +21,37 @@
                         animation: 150,
                         multiDragKey: 'CTRL',
                         avoidImplicitDeselect: true,
+                        handle: '.handle',
                         onSort: function (e) {
                             updateComposition();
                         }
                     });
 
-                    $(document).on('blur', '#pagenumber_input', function () {
-                        $("#pagenumber_input").remove();
-                    });
+                    // $(document).on('blur', '#pagenumber_input', function () {
+                    //     $("#pagenumber_input").remove();
+                    // });
+
+                    $(document).on('change blur', '#pagenumber_input', function () {
 
-                    $(document).on('change', '#pagenumber_input', function () {
                         var v = $(this).val();
                         var p = $(this).closest('.page').index() + 1;
                         $("#pagenumber_input").remove();
-                        updateNumFromEdit(v,p);
+
+                        if (v !== $(this).attr('data-orig-value')) {
+                            console.log('change', v, $(this).data('orig-value'));
+                            updateNumFromEdit(v, p);
+                        }
+
                     });
 
                     $(document).on('click', '#composition_pages .page span', function () {
+                        if ($(this).find('#pagenumber_input').length > 0) {
+                            return false;
+                        }
                         $("#pagenumber_input").remove();
-                        $(this).append('<input type="text" id="pagenumber_input" value="' + $(this).text() + '" />');
-                        $("#pagenumber_input").focus();
+                        $(this).append('<input type="text" id="pagenumber_input" />');
+
+                        $("#pagenumber_input").val($(this).text()).attr('data-orig-value', $(this).text()).focus();
                         $("#pagenumber_input").get(0).setSelectionRange(0, $(this).text().length);
 
                         return false;
@@ -138,7 +149,7 @@
                 }
 
                 function addPage(document_id, document_page, pageNumber, size) {
-                    $("#composition_pages").append('<div class="page" data-id="[' + document_id + ',' + document_page + ']"><img width="' + size[0] + '" height="' + size[1] + '" src="/fluidbook-publication/docs/' + document_id + '/thumb_' + document_page + '.jpg" /><span>' + pageNumber + '</span></div>');
+                    $("#composition_pages").append('<div class="page" data-id="[' + document_id + ',' + document_page + ']"><div class="handle"><img width="' + size[0] + '" height="' + size[1] + '" src="/fluidbook-publication/docs/' + document_id + '/thumb_' + document_page + '.jpg" /></div><span>' + pageNumber + '</span></div>');
                 }
 
                 function compositionContextMulti() {
@@ -245,67 +256,47 @@
 
                     var j = start;
                     var pages = getPageNumber();
-                    console.log(type, from, start);
                     for (var i = from; i <= pages; i++) {
                         var n = prefix + separator + getNumByType(j, type);
-                        console.log(n);
+
                         $("#composition_pages .page").eq(i - 1).find('span').text(n);
                         j++;
                     }
                     updateComposition();
                 }
 
-                function updateNumFromEdit(v,p){
-                    /*var from:int = e.info.from;
-                    var text:String = e.info.text;
-                    var type:String;
-                    var start:int;
-                    var prefix:String = '';
-                    var separator:String = '';
-
-                    if (text.indexOf('.') != -1)
-                    {
+                function updateNumFromEdit(v, p) {
+                    var separator = '';
+                    var type;
+                    var start;
+                    var prefix = '';
+                    if (v.indexOf('.') != -1) {
                         separator = '.';
-                    }
-                    else if (text.indexOf(' ') != -1)
-                    {
+                    } else if (v.indexOf(' ') != -1) {
                         separator = ' ';
                     }
-
-                    if (separator != '')
-                    {
-                        var ex:Array = text.split(separator);
-                        text = ex.pop();
+                    if (separator != '') {
+                        var ex = v.split(separator);
+                        v = ex.pop();
                         prefix = ex.join(separator);
                     }
-
-                    if (text == '')
-                    {
+                    if (v == '') {
                         type = 'nonum';
                         start = 1;
-                    }
-                    else if (CubeMath.isRoman(text))
-                    {
-                        if (CubeString.isUpperCase(text))
-                        {
+                    } else if (isRoman(v)) {
+                        if (isUpperCase(v)) {
                             type = 'romnum';
-                        }
-                        else
-                        {
+                        } else {
                             type = 'lromnum';
                         }
-                        start = CubeMath.deromanize(text.toUpperCase());
-                    }
-                    else if (CubeMath.isInt(text))
-                    {
+                        start = romanToInt(v);
+                    } else if (v.toString().match(/^\d+$/)) {
                         type = 'decnum';
-                        start = parseInt(text);
-                    }
-                    else
-                    {
+                        start = parseInt(v);
+                    } else {
                         return;
                     }
-                    updateNum(type, from, start, prefix, separator);*/
+                    updateNum(type, p, start, prefix, separator);
                 }
 
                 function getNumByType(val, type) {
@@ -321,6 +312,30 @@
                     return '';
                 }
 
+                function isRoman(s) {
+                    return s.toString().match(/^[IVXLCDMivxlcdm]+$/);
+                }
+
+                function isUpperCase(s) {
+                    return s.toString().match(/^[A-Z]/);
+                }
+
+                function romanToInt(s) {
+                    s = s.toUpperCase();
+                    let romanVal = {I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000};
+                    let result = 0;
+                    if (s === '') return;
+                    let inputs = Array.of(...s);
+                    let inputsVal = [];
+                    inputs.map((e) => ((e = romanVal[e]), inputsVal.push(e)));
+                    for (let i = 0; i < inputsVal.length; i++) {
+                        inputsVal[i] < inputsVal[i + 1]
+                            ? (result -= inputsVal[i])
+                            : (result += inputsVal[i]);
+                    }
+                    return result;
+                };
+
                 function romanize(num) {
                     var lookup = {
                         M: 1000,
@@ -376,12 +391,13 @@
             #composition_pages .page {
                 display: inline-block;
                 width: 100px;
-                padding: 8px;
+
                 margin: 5px;
                 vertical-align: top;
                 border: 1px solid transparent;
                 border-radius: 4px;
                 cursor: pointer;
+                position: relative;
             }
 
             #composition_pages .page:hover, #composition_pages .page.selected {
@@ -392,26 +408,40 @@
                 background-color: #b5cbf5;
             }
 
+            #composition_pages .page .handle {
+                position: relative;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 0;
+                padding: 8px 8px 28px 8px;
+            }
+
             #composition_pages .page span {
                 display: block;
                 text-align: center;
                 font-size: 12px;
                 cursor: text;
-                min-width: 20px;
-                height: 20px;
-                margin-top: 2px;
-                position: relative;
+                width: calc(100% - 16px);
+                position: absolute;
+                z-index: 1;
+                bottom: 8px;
+                left: 8px;
+                height: 18px;
             }
 
             #composition_pages .page span input {
                 position: absolute;
-                top: 0;
+                top: 1px;
                 left: 0;
                 width: 100%;
                 height: 100%;
-                z-index: 1;
+                z-index: 2;
                 outline: 0;
                 text-align: center;
+                border-width: 0 0 1px 0;
+                font-size: 12px;
             }
 
             #composition_pages .page img {