feat(hyperlink): add hyperlink function

src/controllers/controlHistory.js

@@ -5,6 +5,7 @@ import conditionformat from './conditionformat';
 import luckysheetPostil from './postil';
 import imageCtrl from './imageCtrl';
 import dataVerificationCtrl from './dataVerificationCtrl';
+import hyperlinkCtrl from './hyperlinkCtrl';
 import {zoomRefreshView,zoomNumberDomBind} from './zoom';
 import { createFilter, createFilterOptions, labelFilterOptionState } from './filter';
 import formula from '../global/formula';
@@ -344,6 +345,9 @@ const controlHistory = {
         else if (ctr.type == "updateDataVerificationOfCheckbox"){
             dataVerificationCtrl.refOfCheckbox(ctr.currentDataVerification, ctr.historyDataVerification, ctr.sheetIndex, ctr.data, ctr.range);
         }
+        else if (ctr.type == "updateHyperlink"){
+            hyperlinkCtrl.ref(ctr.currentHyperlink, ctr.historyHyperlink, ctr.sheetIndex, ctr.data, ctr.range);
+        }
         else if (ctr.type == "updateCF"){
             let historyRules = ctr["data"]["historyRules"];
 
@@ -650,6 +654,9 @@ const controlHistory = {
         else if (ctr.type == "updateDataVerificationOfCheckbox"){
             dataVerificationCtrl.refOfCheckbox(ctr.historyDataVerification, ctr.currentDataVerification, ctr.sheetIndex, ctr.curData, ctr.range);
         }
+        else if (ctr.type == "updateHyperlink") {
+            hyperlinkCtrl.ref(ctr.historyHyperlink, ctr.currentHyperlink, ctr.sheetIndex, ctr.curData, ctr.range);
+        }
         else if (ctr.type == "updateCF"){
             let currentRules = ctr["data"]["currentRules"];
 

src/controllers/handler.js

@@ -5,6 +5,7 @@ import pivotTable from './pivotTable';
 import luckysheetDropCell from './dropCell';
 import luckysheetPostil from './postil';
 import imageCtrl from './imageCtrl';
+import hyperlinkCtrl from './hyperlinkCtrl';
 import dataVerificationCtrl from './dataVerificationCtrl';
 import menuButton from './menuButton';
 import conditionformat from './conditionformat';
@@ -338,6 +339,9 @@ export default function luckysheetHandler() {
         //数据验证 单元格聚焦
         dataVerificationCtrl.cellFocus(row_index, col_index, true);
 
+        //链接 单元格聚焦
+        hyperlinkCtrl.cellFocus(row_index, col_index);
+
         //若点击单元格部分不在视图内
         if (col_pre < $("#luckysheet-cell-main").scrollLeft()) {
             $("#luckysheet-scrollbar-x").scrollLeft(col_pre);
@@ -4531,6 +4535,24 @@ export default function luckysheetHandler() {
         }
     });
 
+    //菜单栏 插入链接按钮
+    $("#luckysheet-insertLink-btn-title").click(function () {
+        if(!checkProtectionNotEnable(Store.currentSheetIndex)){
+            return;
+        }
+
+        if (Store.luckysheet_select_save == null || Store.luckysheet_select_save.length == 0) {
+            return;
+        }
+
+        hyperlinkCtrl.createDialog();
+        hyperlinkCtrl.init();
+    })
+    $("#luckysheetInsertLink").click(function () {
+        $("#luckysheet-insertLink-btn-title").click();
+        $("#luckysheet-rightclick-menu").hide();
+    })
+
     //菜单栏 数据验证按钮
     $("#luckysheet-dataVerification-btn-title").click(function () {
         if(!checkProtectionNotEnable(Store.currentSheetIndex)){

src/controllers/hyperlinkCtrl.js

@@ -0,0 +1,265 @@
+import { replaceHtml } from '../utils/util';
+import { getcellvalue } from '../global/getdata';
+import { luckysheetrefreshgrid } from '../global/refresh';
+import formula from '../global/formula';
+import tooltip from '../global/tooltip';
+import editor from '../global/editor';
+import { modelHTML } from './constant';
+import server from './server';
+import { getSheetIndex } from '../methods/get';
+import locale from '../locale/locale';
+import Store from '../store';
+
+const hyperlinkCtrl = {
+    item: {
+        linkType: 'external', //链接类型 external外部链接，internal内部链接
+        linkAddress: '',  //链接地址 网页地址或工作表单元格引用
+        linkTooltip: '',  //提示
+    },
+    hyperlink: null,
+    createDialog: function(){
+        let _this = this;
+
+        const _locale = locale();
+        const hyperlinkText = _locale.insertLink;
+        const toolbarText = _locale.toolbar;
+        const buttonText = _locale.button;
+
+        $("#luckysheet-modal-dialog-mask").show();
+        $("#luckysheet-insertLink-dialog").remove();
+
+        let sheetListOption = '';
+        Store.luckysheetfile.forEach(item => {
+            sheetListOption += `<option value="${item.name}">${item.name}</option>`;
+        })
+
+        let content =  `<div class="box">
+                            <div class="box-item">
+                                <label for="luckysheet-insertLink-dialog-linkText">${hyperlinkText.linkText}：</label>
+                                <input type="text" id="luckysheet-insertLink-dialog-linkText"/>
+                            </div>
+                            <div class="box-item">
+                                <label for="luckysheet-insertLink-dialog-linkType">${hyperlinkText.linkType}：</label>
+                                <select id="luckysheet-insertLink-dialog-linkType">
+                                    <option value="external">${hyperlinkText.external}</option>
+                                    <option value="internal">${hyperlinkText.internal}</option>
+                                </select>
+                            </div>
+                            <div class="show-box show-box-external">
+                                <div class="box-item">
+                                    <label for="luckysheet-insertLink-dialog-linkAddress">${hyperlinkText.linkAddress}：</label>
+                                    <input type="text" id="luckysheet-insertLink-dialog-linkAddress" placeholder="${hyperlinkText.placeholder1}" />
+                                </div>
+                            </div>
+                            <div class="show-box show-box-internal">
+                                <div class="box-item">
+                                    <label for="luckysheet-insertLink-dialog-linkSheet">${hyperlinkText.linkSheet}：</label>
+                                    <select id="luckysheet-insertLink-dialog-linkSheet">
+                                        ${sheetListOption}
+                                    </select>
+                                </div>
+                                <div class="box-item">
+                                    <label for="luckysheet-insertLink-dialog-linkCell">${hyperlinkText.linkCell}：</label>
+                                    <input type="text" id="luckysheet-insertLink-dialog-linkCell" value="A1" placeholder="${hyperlinkText.placeholder2}" />
+                                </div>
+                            </div>
+                            <div class="box-item">
+                                <label for="luckysheet-insertLink-dialog-linkTooltip">${hyperlinkText.linkTooltip}：</label>
+                                <input type="text" id="luckysheet-insertLink-dialog-linkTooltip" placeholder="${hyperlinkText.placeholder3}" />
+                            </div>
+                        </div>`;
+
+        $("body").append(replaceHtml(modelHTML, { 
+            "id": "luckysheet-insertLink-dialog", 
+            "addclass": "luckysheet-insertLink-dialog", 
+            "title": toolbarText.insertLink, 
+            "content": content, 
+            "botton":  `<button id="luckysheet-insertLink-dialog-confirm" class="btn btn-primary">${buttonText.confirm}</button>
+                        <button class="btn btn-default luckysheet-model-close-btn">${buttonText.cancel}</button>`, 
+            "style": "z-index:100003" 
+        }));
+        let $t = $("#luckysheet-insertLink-dialog").find(".luckysheet-modal-dialog-content").css("min-width", 350).end(), 
+            myh = $t.outerHeight(), 
+            myw = $t.outerWidth();
+        let winw = $(window).width(), 
+            winh = $(window).height();
+        let scrollLeft = $(document).scrollLeft(), 
+            scrollTop = $(document).scrollTop();
+        $("#luckysheet-insertLink-dialog").css({ 
+            "left": (winw + scrollLeft - myw) / 2, 
+            "top": (winh + scrollTop - myh) / 3 
+        }).show();
+
+        _this.dataAllocation();
+    },
+    init: function (){
+        let _this = this;
+
+        const _locale = locale();
+        const hyperlinkText = _locale.insertLink;
+
+        //链接类型
+        $(document).off("change.linkType").on("change.linkType", "#luckysheet-insertLink-dialog-linkType", function(e){
+            let value = this.value;
+
+            $("#luckysheet-insertLink-dialog .show-box").hide();
+            $("#luckysheet-insertLink-dialog .show-box-" + value).show();
+        })
+
+        //确认按钮
+        $(document).off("click.confirm").on("click.confirm", "#luckysheet-insertLink-dialog-confirm", function(e){
+            let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
+            let rowIndex = last.row_focus || last.row[0];
+            let colIndex = last.column_focus || last.column[0];
+
+            //文本
+            let linkText = $("#luckysheet-insertLink-dialog-linkText").val();
+
+            let linkType = $("#luckysheet-insertLink-dialog-linkType").val();
+            let linkAddress = $("#luckysheet-insertLink-dialog-linkAddress").val();
+            let linkSheet = $("#luckysheet-insertLink-dialog-linkSheet").val();
+            let linkCell = $("#luckysheet-insertLink-dialog-linkCell").val();
+            let linkTooltip = $("#luckysheet-insertLink-dialog-linkTooltip").val();
+
+            if(linkType == 'external'){
+                if(!/^http[s]?:\/\/([\w\-\.]+)+[\w-]*([\w\-\.\/\?%&=]+)?$/ig.test(linkAddress)){
+                    tooltip.info('<i class="fa fa-exclamation-triangle"></i>', hyperlinkText.tooltipInfo1);
+                    return;
+                }
+            }
+            else{
+                if(!formula.iscelldata(linkCell)){
+                    tooltip.info('<i class="fa fa-exclamation-triangle"></i>', hyperlinkText.tooltipInfo2);
+                    return;
+                }
+
+                linkAddress = linkSheet + "!" + linkCell;
+            }
+
+            if(linkText == null || linkText.replace(/\s/g, '') == ''){
+                linkText = linkAddress;
+            }
+
+            let item = {
+                linkType: linkType,
+                linkAddress: linkAddress,
+                linkTooltip: linkTooltip,
+            }
+
+            let historyHyperlink = $.extend(true, {}, _this.hyperlink);
+            let currentHyperlink = $.extend(true, {}, _this.hyperlink);
+
+            currentHyperlink[rowIndex + "_" + colIndex] = item;
+
+            let d = editor.deepCopyFlowData(Store.flowdata);
+            let cell = d[rowIndex][colIndex];
+
+            if(cell == null){
+                cell = {};
+            }
+
+            cell.fc = 'rgb(0, 0, 255)';
+            cell.un = 1;
+            cell.v = linkText;
+
+            d[rowIndex][colIndex] = cell;
+
+            _this.ref(
+                historyHyperlink, 
+                currentHyperlink, 
+                Store.currentSheetIndex, 
+                d, 
+                { row: [rowIndex, rowIndex], column: [colIndex, colIndex] }
+            );
+
+            $("#luckysheet-modal-dialog-mask").hide();
+            $("#luckysheet-insertLink-dialog").hide();
+        })
+    },
+    dataAllocation: function(){
+        let _this = this;
+
+        let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
+        let rowIndex = last.row_focus || last.row[0];
+        let colIndex = last.column_focus || last.column[0];
+
+        let hyperlink = _this.hyperlink || {};
+        let item = hyperlink[rowIndex + "_" + colIndex] || {};
+
+        //文本
+        let text = getcellvalue(rowIndex, colIndex, null, 'm');
+        $("#luckysheet-insertLink-dialog-linkText").val(text);
+
+        //链接类型
+        let linkType = item.linkType || 'external';
+        $("#luckysheet-insertLink-dialog-linkType").val(linkType);
+
+        $("#luckysheet-insertLink-dialog .show-box").hide();
+        $("#luckysheet-insertLink-dialog .show-box-" + linkType).show();
+
+        //链接地址
+        let linkAddress = item.linkAddress || '';
+
+        if(linkType == 'external'){
+            $("#luckysheet-insertLink-dialog-linkAddress").val(linkAddress);
+        }
+        else{
+            if(formula.iscelldata(linkAddress)){
+                let sheettxt = linkAddress.split("!")[0];
+                let rangetxt = linkAddress.split("!")[1];
+
+                $("#luckysheet-insertLink-dialog-linkSheet").val(sheettxt);
+                $("#luckysheet-insertLink-dialog-linkCell").val(rangetxt);
+            }
+        }
+
+        //提示
+        let linkTooltip = item.linkTooltip || '';
+        $("#luckysheet-insertLink-dialog-linkTooltip").val(linkTooltip);
+    },
+    cellFocus: function(r, c){
+        let _this = this;
+
+        if(_this.hyperlink == null || _this.hyperlink[r + '_' + c] == null){
+            return;
+        }
+
+
+    },
+    ref: function(historyHyperlink, currentHyperlink, sheetIndex, d, range){
+        let _this = this;
+
+        if (Store.clearjfundo) {
+            Store.jfundo = [];
+
+            let redo = {};
+            redo["type"] = "updateHyperlink";
+            redo["sheetIndex"] = sheetIndex;
+            redo["historyHyperlink"] = historyHyperlink;
+            redo["currentHyperlink"] = currentHyperlink;
+            redo["data"] = Store.flowdata; 
+            redo["curData"] = d;
+            redo["range"] = range; 
+            Store.jfredo.push(redo); 
+        }
+
+        _this.hyperlink = currentHyperlink;
+        Store.luckysheetfile[getSheetIndex(sheetIndex)].hyperlink = currentHyperlink;
+
+        Store.flowdata = d;
+        editor.webWorkerFlowDataCache(Store.flowdata);//worker存数据
+        Store.luckysheetfile[getSheetIndex(sheetIndex)].data = Store.flowdata;
+
+        //共享编辑模式
+        if(server.allowUpdate){ 
+            server.saveParam("all", sheetIndex, currentHyperlink, { "k": "hyperlink" });
+            server.historyParam(Store.flowdata, sheetIndex, range);
+        }
+
+        setTimeout(function () {
+            luckysheetrefreshgrid();
+        }, 1);
+    }
+}
+
+export default hyperlinkCtrl;