/// =============================================================================================== /// Pen group [start] /// =============================================================================================== var Pen_colorSource = []; Pen_colorSource.push('ffffff', 'ffccc9', 'ffce93', 'fffc9e','ffffc7','9aff99','96fffb','cdffff', 'cbcefb','cfcfcf','fd6864','fe996b','fffe65', 'fcff2f','67fd9a','38fff8','68fdff','9698ed', 'c0c0c0','fe0000','f8a102','ffcc67','f8ff00', '34ff34','68cbd0','34cdf9','6665cd','9b9b9b', 'cb0000','f56b00','ffcb2f','ffc702','32cb00', '00d2cb','3166ff','6434fc','656565','9a0000', 'ce6301','cd9934','999903','009901','329a9d', '3531ff','6200c9','343434','680100','963400', '986536','646809','036400','34696d','00009b', '303498','000000','330001','643403','663234', '343300','013300','003532','010066','340096'); var pen_Size; var pen_Color; var pen_targetDiv; var pen_chooseColor; function ShowPen(targetId) { pen_targetDiv = targetId; pen_targetDiv.children().remove(); targetId.append( '<div id="panel-pen" class="rayermenu1">' +' <div id="panel-pen-size">' +' <span lang="txtMkgSize" class="lang" >太いさ</span>' + ' <input type="radio" id="pen-size-small" name="pen-size" /><label for="pen-size-small" id="pen-small-text" class="lang" lang="txtMkgS">S</label>' + ' <input type="radio" id="pen-size-medium" name="pen-size" /><label for="pen-size-medium" id="pen-medium-text" class="lang" lang="txtMkgM">M</label>' + ' <input type="radio" id="pen-size-large" name="pen-size" /><label for="pen-size-large" id="pen-large-text" class="lang" lang="txtMkgB">L</label>' + ' <input type="radio" id="pen-size-oversize" name="pen-size" /><label for="pen-size-oversize" id="pen-oversize-text" class="lang" lang="txtMkgSB">XL</label>' +' </div>' +' <span class="lang" lang="txtColor" style="float:left;margin-right: 10px;">Color</span>' +' <div id="penColorPreview"></div>' +' <div id="penColorwrapper"></div>' +' <div class="canvasArea_s" style="width: 120px; height: 120px">' +' <canvas id="Pen_cvPreviewPen" class="preview" width="120px" height="120px"></canvas>' +' </div>' +' <div style="clear:both; padding-top:10px">' +' <a id="Pen_btnCancel" class="lang cancelbtn" style="float:right;" lang="dspCancel">Cancel</a>' +' <a id="Pen_btnOk" class="lang cancelbtn" style="float:right; clear: none; margin-right:10px" lang="dspOK">OK</a>' +' </div>' +'<div>' ); var colorWrapper = $('#penColorwrapper'); $.each(Pen_colorSource, function (i, pen_Color) { colorWrapper.append('<div class="colorpicker" colorId="' + pen_Color + '" style="background-color: #' + pen_Color + ';"></div>'); }); //changeLanguage(ClientData.userInfo_language()); i18nReplaceText(); // pen_targetDiv.dialog({ width: 510, height: 390, modal: true }); // pen_targetDiv.fadeIn('medium',function(){ // //lockLayout(); // pen_targetDiv.draggable({ containment: "#containment-wrapper", scroll: false }); // }); pen_targetDiv.show(); //pen_targetDiv.draggable({ containment: "#Pen_btnOk", scroll: false }); pen_targetDiv.draggable({ revert: false}); Pen_handleColorPickerEvent(); $('#dlgPen').center(); }; function touchStart_BtnOk_Pen(e){ e.preventDefault(); pen_targetDiv.draggable("destroy"); Pen_dspOK_click(); }; function touchStart_BtnCancel_Pen(e){ e.preventDefault(); pen_targetDiv.draggable("destroy"); Pen_dspCancel_click(); }; function Pen_handleColorPickerEvent() { //$('.colorpicker').live('mouseenter', Pen_colorPickerMouseEnterFunction); // $('.colorpicker').live('mouseleave', Pen_colorPickerMouseLeaveFunction); // $('#penColorwrapper').live('mouseleave', Pen_colorWrapperMouseLeaveFunction); if(avwUserEnvObj.os == "ipad" || avwUserEnvObj.os == "android"){ $('.colorpicker').unbind('mouseenter'); $('.colorpicker').unbind('mouseleave'); $('#penColorwrapper').unbind('mouseleave'); document.getElementById('Pen_btnOk').addEventListener('touchstart',touchStart_BtnOk_Pen,false); document.getElementById('Pen_btnCancel').addEventListener('touchstart',touchStart_BtnCancel_Pen,false); } else{ $('.colorpicker').unbind('mouseenter'); $('.colorpicker').unbind('mouseleave'); $('#penColorwrapper').unbind('mouseleave'); $('.colorpicker').bind('mouseenter', Pen_colorPickerMouseEnterFunction); $('.colorpicker').bind('mouseleave', Pen_colorPickerMouseLeaveFunction); $('#penColorwrapper').bind('mouseleave', Pen_colorWrapperMouseLeaveFunction); } $('#Pen_btnOk').live('click', Pen_dspOK_click); $('#Pen_btnCancel').live('click', Pen_dspCancel_click); Pen_SetDefaultValue(); $('#pen-size-small').live('click', Pen_rdo1_click); $('#pen-size-medium').live('click', Pen_rdo2_click); $('#pen-size-large').live('click', Pen_rdo3_click); $('#pen-size-oversize').live('click', Pen_rdo4_click); $('#pen-small-text').live('click', penSmallTextClick); $('#pen-medium-text').live('click', penMediumTextClick); $('#pen-large-text').live('click', penLargeTextClick); $('#pen-oversize-text').live('click', penOversizeTextClick); $('.colorpicker').live('click', Pen_colorPickerClickFunction); //$('#penColorwrapper').live('mouseleave', Pen_colorWrapperMouseLeaveFunction); $("#avw-sys-modal").click (function () { // pen_targetDiv.fadeOut('medium',function(){ // //unlockLayout(); // }); pen_targetDiv.show(); }); }; function penSmallTextClick(){ $('#pen-size-small').attr('checked','checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').removeAttr('checked'); Pen_rdo1_click(); }; function penMediumTextClick(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').attr('checked','checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').removeAttr('checked'); Pen_rdo2_click(); }; function penLargeTextClick(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').attr('checked','checked'); $('#pen-size-oversize').removeAttr('checked'); Pen_rdo3_click(); }; function penOversizeTextClick(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').attr('checked','checked'); Pen_rdo4_click(); }; // Choose type of eraser, and draw to canvas function Pen_chooseType(typeValue, color) { var fillColor; pen_Size = typeValue; var canvas = document.getElementById('Pen_cvPreviewPen'); if (color == null || color == 'undefined') { fillColor="#fe0000"; } else{ fillColor = '#' + color; } if (canvas.getContext) { // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes //ctx.fillStyle = "#888888"; //ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); //ctx.arc(60, 60, typeValue, 0, Math.PI * 2, true); // Outer circle ctx.arc(canvas.width/2, canvas.height/2, typeValue, 0, 2 * Math.PI, true); ctx.fillStyle = fillColor; ctx.strokeStyle = fillColor; ctx.fill(); ctx.stroke(); } }; // Set default value for Pen. function Pen_SetDefaultValue() { var typeValue = undefined; var penColor = ClientData.penOpt_color(); typeValue = ClientData.penOpt_size(); pen_Size = typeValue; if(penColor != null || penColor != undefined){ pen_chooseColor = penColor; } else{ pen_chooseColor = 'fe0000'; penColor = 'fe0000'; } if (typeValue == 5) { $("#pen-size-small").attr('checked', 'checked'); $("#pen-size-small").focus(); } else if (typeValue == 12.5) { $("#pen-size-medium").attr('checked', 'checked'); $("#pen-size-medium").focus(); } else if (typeValue == 25) { $("#pen-size-large").attr('checked', 'checked'); $("#pen-size-large").focus(); } else if (typeValue == 50) { $("#pen-size-oversize").attr('checked', 'checked'); $("#pen-size-oversize").focus(); } else { typeValue = 5; $("#pen-size-small").attr('checked', 'checked'); $("#pen-size-small").focus(); } Pen_chooseType(typeValue, penColor); $('.colorpicker[colorId="'+penColor+'"]').css('border','1px solid black'); $('#penColorPreview').css('background-color', '#'+penColor); $('#penColorPreview').css('border-color', '#'+penColor); }; function Pen_colorPickerMouseLeaveFunction() { $(this).css('border','1px solid white'); $('.colorpicker[colorId="' + pen_chooseColor + '"]').css('border', '1px solid black'); }; function Pen_colorPickerMouseEnterFunction() { $(this).css('border','1px solid black'); var color = $(this).attr('colorId'); Pen_chooseType(pen_Size, color); $('#penColorPreview').css('background-color','#'+color); $('#penColorPreview').css('border-color','#'+color); }; function Pen_colorPickerClickFunction() { $('.colorpicker[colorId="' + pen_chooseColor + '"]').css('border', '1px solid white'); $(this).css('border','1px solid black'); pen_chooseColor = $(this).attr('colorId'); Pen_chooseType(pen_Size, pen_chooseColor); $('#penColorPreview').css('background-color','#'+pen_chooseColor); $('#penColorPreview').css('border-color','#'+pen_chooseColor); }; function Pen_rdo1_click() { Pen_chooseType(5, pen_chooseColor); }; function Pen_rdo2_click() { Pen_chooseType(12.5, pen_chooseColor); }; function Pen_rdo3_click() { Pen_chooseType(25, pen_chooseColor); }; function Pen_rdo4_click() { Pen_chooseType(50, pen_chooseColor); }; // Event of button OK function Pen_dspOK_click() { // Set selected value to local storage var typeValue = undefined; if ($("#pen-size-small").attr('checked') == 'checked') { typeValue = 5; } else if ($("#pen-size-medium").attr('checked') == 'checked') { typeValue = 12.5; } else if ($("#pen-size-large").attr('checked') == 'checked') { typeValue = 25; } else if ($("#pen-size-oversize").attr('checked') == 'checked') { typeValue = 50; } // Set value to local ClientData.penOpt_size(typeValue); ClientData.penOpt_color(pen_chooseColor); pen_Size = typeValue; //c = pen_chooseColor; /*enable button */ enableButtonMarking(); ClientData.IsAddingMarking(true); isAddingMarking = ClientData.IsAddingMarking(); penSize = ClientData.penOpt_size(); penColor = ClientData.penOpt_color(); // Close dialog //pen_targetDiv.dialog('close'); /*pen_targetDiv.fadeOut('medium',function(){ $("#avw-sys-modal").hide(); });*/ pen_targetDiv.hide(); /* unlock dialog overlay */ $("#overlay").hide(); $('#dlgMarking_imgPenOption').removeClass(); $('#dlgMarking_imgPenOption').addClass('pen_option_hover'); }; // Event of button cancel function Pen_dspCancel_click() { /*enable button */ enableButtonMarking(); ClientData.IsAddingMarking(true); isAddingMarking = ClientData.IsAddingMarking(); // Close dialog /*pen_targetDiv.fadeOut('slow',function(){ //unlockLayout(); });*/ pen_targetDiv.hide(); /* unlock dialog overlay */ $("#overlay").hide(); $('#dlgMarking_imgPenOption').removeClass(); $('#dlgMarking_imgPenOption').addClass('pen_option_hover'); }; function Pen_colorWrapperMouseLeaveFunction() { Pen_chooseType(pen_Size, pen_chooseColor); $('#penColorPreview').css('background-color', '#' + pen_chooseColor); $('#penColorPreview').css('border-color', '#' + pen_chooseColor); $('.colorpicker[colorId="' + pen_chooseColor + '"]').css('border', '1px solid black'); };