/// =============================================================================================== /// Pen group [start] /// =============================================================================================== //名前空間用のオブジェクトを用意する var CONTENTVIEW_PEN = {}; CONTENTVIEW_PEN.ShowPen = function(targetId) { CONTENTVIEW_PEN.pen_targetDiv = targetId; I18N.i18nReplaceText(); $('#dlgPen').show(); $('#dlgPen').draggable({ revert: false}); CONTENTVIEW_PEN.Pen_handleColorPickerEvent(); $('#dlgPen').center(); }; CONTENTVIEW_PEN.touchStart_BtnOk_Pen = function(e){ e.preventDefault(); CONTENTVIEW_PEN.pen_targetDiv.draggable("destroy"); CONTENTVIEW_PEN.Pen_dspOK_click(); }; CONTENTVIEW_PEN.touchStart_BtnCancel_Pen = function(e){ e.preventDefault(); CONTENTVIEW_PEN.pen_targetDiv.draggable("destroy"); CONTENTVIEW_PEN.Pen_dspCancel_click(); }; CONTENTVIEW_PEN.Pen_handleColorPickerEvent = function() { if(CONTENTVIEW_GENERAL.avwUserEnvObj.isIos() || CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()){ $('#dlgPen .colorpicker').unbind('mouseenter'); $('#dlgPen .colorpicker').unbind('mouseleave'); $('#penColorwrapper').unbind('mouseleave'); document.getElementById('Pen_btnOk').addEventListener('touchstart',CONTENTVIEW_PEN.touchStart_BtnOk_Pen,false); document.getElementById('Pen_btnCancel').addEventListener('touchstart',CONTENTVIEW_PEN.touchStart_BtnCancel_Pen,false); } else{ $('#dlgPen .colorpicker').unbind('mouseenter'); $('#dlgPen .colorpicker').unbind('mouseleave'); $('#penColorwrapper').unbind('mouseleave'); $('#dlgPen .colorpicker').bind('mouseenter', CONTENTVIEW_PEN.Pen_colorPickerMouseEnterFunction); $('#dlgPen .colorpicker').bind('mouseleave', CONTENTVIEW_PEN.Pen_colorPickerMouseLeaveFunction); $('#penColorwrapper').bind('mouseleave', CONTENTVIEW_PEN.Pen_colorWrapperMouseLeaveFunction); } //$('#Pen_btnOk').live('click', CONTENTVIEW_PEN.Pen_dspOK_click); $("#Pen_btnOk").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.Pen_dspOK_click(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); //$('#Pen_btnCancel').live('click', CONTENTVIEW_PEN.Pen_dspCancel_click); $("#Pen_btnCancel").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.Pen_dspCancel_click(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); CONTENTVIEW_PEN.Pen_SetDefaultValue(); //$('#pen-small-text').live('click', CONTENTVIEW_PEN.penSmallTextClick); $("#pen-small-text").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.penSmallTextClick(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); //$('#pen-medium-text').live('click', CONTENTVIEW_PEN.penMediumTextClick); $("#pen-medium-text").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.penMediumTextClick(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); //$('#pen-large-text').live('click', CONTENTVIEW_PEN.penLargeTextClick); $("#pen-large-text").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.penLargeTextClick(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); //$('#pen-oversize-text').live('click', CONTENTVIEW_PEN.penOversizeTextClick); $("#pen-oversize-text").on({ 'click touchend': function(ev){ CONTENTVIEW_PEN.penOversizeTextClick(ev); return false; }, 'touchstart touchmove': function(){ //これを入れないと次にダイアログを開くと表示位置が大きくズレる return false; } }); $('#dlgPen .colorpicker').die(); $('#dlgPen .colorpicker').live('click', CONTENTVIEW_PEN.Pen_colorPickerClickFunction); //$("#dlgPen .colorpicker").on({ // 'click touchend': function(ev){ // CONTENTVIEW_PEN.Pen_colorPickerClickFunction(ev); // return false; // }, // 'touchstart touchmove': function(){ // //これを入れないと次にダイアログを開くと表示位置が大きくズレる // return false; // } //}); }; CONTENTVIEW_PEN.penSmallTextClick = function(){ $('#pen-size-small').attr('checked','checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').removeAttr('checked'); CONTENTVIEW_PEN.Pen_rdo1_click(); }; CONTENTVIEW_PEN.penMediumTextClick = function(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').attr('checked','checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').removeAttr('checked'); CONTENTVIEW_PEN.Pen_rdo2_click(); }; CONTENTVIEW_PEN.penLargeTextClick = function(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').attr('checked','checked'); $('#pen-size-oversize').removeAttr('checked'); CONTENTVIEW_PEN.Pen_rdo3_click(); }; CONTENTVIEW_PEN.penOversizeTextClick = function(){ $('#pen-size-small').removeAttr('checked'); $('#pen-size-medium').removeAttr('checked'); $('#pen-size-large').removeAttr('checked'); $('#pen-size-oversize').attr('checked','checked'); CONTENTVIEW_PEN.Pen_rdo4_click(); }; // Choose type of eraser, and draw to canvas CONTENTVIEW_PEN.Pen_chooseType = function(typeValue, color) { var fillColor; CONTENTVIEW_PEN.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.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); 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. CONTENTVIEW_PEN.Pen_SetDefaultValue = function() { var typeValue = undefined; var penColor = ClientData.penOpt_color(); typeValue = ClientData.penOpt_size(); CONTENTVIEW_PEN.pen_Size = typeValue; if(penColor != null || penColor != undefined){ CONTENTVIEW_PEN.pen_chooseColor = penColor; } else{ CONTENTVIEW_PEN.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(); } CONTENTVIEW_PEN.Pen_chooseType(typeValue, penColor); //START FIXCSS //$('#dlgPen .colorpicker[colorId="'+penColor+'"]').css('border','1px solid #e6e6e6'); $('#dlgPen .colorpicker[colorId="'+penColor+'"]').addClass('picker-choose-on'); $('#dlgPen .colorpicker[colorId="'+penColor+'"]').removeClass('picker-choose-off'); //END FIXCSS }; CONTENTVIEW_PEN.Pen_colorPickerMouseLeaveFunction = function() { //START FIXCSS //$(this).css('border','1px solid white'); //$('#dlgMaker .colorpicker[colorId="'+makerColor+'"]').css('border','1px solid #e6e6e6'); $(this).addClass('picker-choose-off'); $(this).removeClass('picker-choose-on'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-on'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-off'); //END FIXCSS }; CONTENTVIEW_PEN.Pen_colorPickerMouseEnterFunction = function() { //START FIXCSS //$(this).css('border','1px solid #e6e6e6'); $(this).removeClass('picker-choose-off'); $(this).addClass('picker-choose-on'); //END FIXCSS var color = $(this).attr('colorId'); CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, color); }; CONTENTVIEW_PEN.Pen_colorPickerClickFunction = function() { //START FIXCSS //$('#dlgMaker .colorpicker[colorId="' + CONTENTVIEW_MAKER.maker_chooseColor + '"]').css('border', '1px solid white'); //$(this).css('border','1px solid #e6e6e6'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-off'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-on'); $(this).addClass('picker-choose-on'); $(this).removeClass('picker-choose-off'); //END FIXCSS CONTENTVIEW_PEN.pen_chooseColor = $(this).attr('colorId'); CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, CONTENTVIEW_PEN.pen_chooseColor); }; CONTENTVIEW_PEN.Pen_rdo1_click = function() { CONTENTVIEW_PEN.Pen_chooseType(5, CONTENTVIEW_PEN.pen_chooseColor); }; CONTENTVIEW_PEN.Pen_rdo2_click = function() { CONTENTVIEW_PEN.Pen_chooseType(12.5, CONTENTVIEW_PEN.pen_chooseColor); }; CONTENTVIEW_PEN.Pen_rdo3_click = function() { CONTENTVIEW_PEN.Pen_chooseType(25, CONTENTVIEW_PEN.pen_chooseColor); }; CONTENTVIEW_PEN.Pen_rdo4_click = function() { CONTENTVIEW_PEN.Pen_chooseType(50, CONTENTVIEW_PEN.pen_chooseColor); }; // Event of button OK CONTENTVIEW_PEN.Pen_dspOK_click = function() { // 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(CONTENTVIEW_PEN.pen_chooseColor); CONTENTVIEW_PEN.pen_Size = typeValue; //c = CONTENTVIEW_PEN.pen_chooseColor; /*enable button */ CONTENTVIEW_MARKING.enableButtonMarking(); ClientData.IsAddingMarking(true); CONTENTVIEW_GENERAL.isAddingMarking = ClientData.IsAddingMarking(); CONTENTVIEW_GENERAL.penSize = ClientData.penOpt_size(); CONTENTVIEW_GENERAL.penColor = ClientData.penOpt_color(); // Close dialog CONTENTVIEW_PEN.pen_targetDiv.hide(); /* unlock dialog overlay */ $("#overlay").hide(); $('#dlgMarking_imgPenOption').removeClass(); $('#dlgMarking_imgPenOption').addClass('pen_option_hover'); }; // Event of button cancel CONTENTVIEW_PEN.Pen_dspCancel_click = function() { /*enable button */ CONTENTVIEW_MARKING.enableButtonMarking(); ClientData.IsAddingMarking(true); CONTENTVIEW_GENERAL.isAddingMarking = ClientData.IsAddingMarking(); // Close dialog CONTENTVIEW_PEN.pen_targetDiv.hide(); /* unlock dialog overlay */ $("#overlay").hide(); $('#dlgMarking_imgPenOption').removeClass(); $('#dlgMarking_imgPenOption').addClass('pen_option_hover'); }; CONTENTVIEW_PEN.Pen_colorWrapperMouseLeaveFunction = function() { CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, CONTENTVIEW_PEN.pen_chooseColor); //$('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').css('border', '1px solid #e6e6e6'); //START FIXCSS //$('#dlgMaker .colorpicker[colorId="' + CONTENTVIEW_MAKER.maker_chooseColor + '"]').css('border', '1px solid #e6e6e6'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-on'); $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-off'); //END FIXCSS }; $(function () { //CONTENTVIEW_PEN.ready(); }); CONTENTVIEW_PEN.ready = function(){ CONTENTVIEW_PEN.pen_Size = undefined; CONTENTVIEW_PEN.pen_targetDiv = undefined; CONTENTVIEW_PEN.pen_chooseColor = undefined; };