From 08c6186c6a7b3e757cc0990df5aa050d36398a26 Mon Sep 17 00:00:00 2001 From: leon Date: Wed, 13 Jul 2022 16:35:15 +0800 Subject: [PATCH] upload cropbox --- -core.js roojs-ui.js > roojs-all.js | 88 +++++++++++++++++++++++++++ css/roojs.css | 2 +- roojs-all.js | 10 +-- roojs-debug.js | 8 ++- roojs-ui-debug.js | 8 ++- roojs-ui.js | 10 +-- 6 files changed, 109 insertions(+), 17 deletions(-) diff --git a/-core.js roojs-ui.js > roojs-all.js b/-core.js roojs-ui.js > roojs-all.js index e07924d2fc..fdb1cd6d0d 100644 --- a/-core.js roojs-ui.js > roojs-all.js +++ b/-core.js roojs-ui.js > roojs-all.js @@ -6981,3 +6981,91 @@ +]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:''} +]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''} +]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}]}}); + bezier_signature + co + delete + github + github.com.roojs1.master + gitlive + master + wip_alan_T5622_fix_roojs_dynamic_example + wip_alan_T5635_chome_extension_for_uploading_clippings + wip_alan_T5654_roojspacker_get_it_working_as + wip_alan_T5657_Summary_page_for_documentation + wip_alan_T5660_roojs_docs_linking_and_other + wip_alan_T5665_precommit_hooks_for_roojs + wip_alan_T5678_tidy_up_roojs_directory + wip_alan_T5681_fix_bootstrap4_detection + wip_alan_T5747_combo_pulldown_issue + wip_alan_T5750_roo_library_dynamic_components + wip_alan_T5829_Messing_around_with_flutter_API + wip_alan_T5925_minimal_bootstrap_for_alerts + wip_alan_T5944_trim_leading_white_space_from + wip_alan_T5946_fix_defaults_on_js_breaks + wip_alan_T5956_handle_file_input_with_stripping + wip_alan_T5963_white_space_strip_only_on + wip_alan_T6011_fixing_surrogate_characters + wip_alan_T6045_use_formdata_to_handle_forms + wip_alan_T6048_clean_up_hanging_span_content + wip_alan_T6102_issue_with_word_clean + wip_alan_T6141_super_script_and_subscribe + wip_alan_T6201_Category_select + wip_alan_T6293_support_for_adding_columns + wip_alan_T6384_See_if_we_can_get + wip_alan_T6430_messing_arouds_with_cards_BS4 + wip_alan_T6433_fine_tuning_tests_for_cards + wip_alan_T6464_card_header + wip_alan_T6465_drag_drop_for_cards + wip_alan_T6495_add_ticket_testing + wip_alan_T6524_test_client_access + wip_alan_T6584_make_popover_a_primary_container + wip_alan_T6593_time_picker_tester + wip_alan_T6596_lightbox_on_images + wip_alan_T6597_Popover_api_improvements + wip_alan_T6625_undo_reset + wip_alan_T6630_making_upload_work_with_card + wip_alan_T6637_more_image_tiy_up_on + wip_alan_T6640_Inspection_Schedule + wip_alan_T6641_add_events_for_handling_view + wip_alan_T6652_pass_gridview_events_into_grid + wip_alan_T6662_support_header_image_in_square + wip_alan_T6666_paging_upgrade_to_bs4 + wip_alan_T6673_mobile_cards_issues + wip_alan_T6696_Document_Browse + wip_alan_T6709_default_widths_on_input_fields + wip_alan_T6790_Upload_Button + wip_alan_T6814_Notification_fadeout + wip_alan_T6833_print_layer_map + wip_alan_T6842_svg_handling + wip_alan_T6852_svg_support_for_domquery_gettarget + wip_alan_T6864_dynamicall_adding_columns + wip_alan_T6874_Grid_column_resize + wip_alan_T6883_image_loading_tidy_up + wip_alan_T6893_fix_roo_docs + wip_alan_T6901_CRM_allow_comments_in_HTML + wip_alan_T6904_JSON_output_for_docs_editor + wip_alan_T6912_issue_with_parsing_RoolibDom + wip_alan_T6913_add_more_documentation_to_code + wip_alan_T6922_replace_builder_to_with_parent + wip_alan_T6962_html_editor_update_to_new + wip_alan_T7151_parse_block_for_figure + wip_alan_T7160_sort_out_comment_removal_and + wip_alan_T7162_warnings_on_files + wip_alan_T7189_simplify_array_grid_example + wip_alan_T7197_fix_form_layout_files_and + wip_alan_T7275_handling_odd_word_document + wip_alan_T7284_more_issues_with_bullet_point + wip_alan_T7295_a_name_tags_in_word + wip_alan_T7300_namespace_cleaning_on_word + wip_edward_T5642_Report_designer_hebe + wip_edward_T5655_UAT_of_Press_release_detail + wip_edward_T5718_Change_the_order_layout_of + wip_edward_T5720_Order_Discount_Penalty_new_tab + wip_edward_T5765_masking_for_missing_entries + wip_edward_T5791_Search_Criteria_on_Orders_Columns + wip_edward_T5820_Load_times_of_country_tree + wip_edward_T5859_Fw_Fw_Text_sticking_together +* wip_leon_T7094_logo_image_upload_in_boilerplate + wip_leon_T7199_adding_images_to_bolierplates + wip_leon_T7207_html_editor_clean_word_button + wip_leon_T7281_table_editing_widths_doent_work diff --git a/css/roojs.css b/css/roojs.css index fe0737c741..48adbba559 100644 --- a/css/roojs.css +++ b/css/roojs.css @@ -19,4 +19,4 @@ x-date{background:white;padding:2px;border:1px solid gray;z-index:12001;-moz-out .alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert .alert-link{font-weight:bold;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-dismissable,.alert-dismissible{padding-right:35px;}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit;}.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d;}.alert-success hr{border-top-color:#c9e2b3;}.alert-success .alert-link{color:#2b542c;}.alert-info{background-color:#d9edf7;border-color:#bce8f1;color:#31708f;}.alert-info hr{border-top-color:#a6e1ec;}.alert-info .alert-link{color:#245269;}.alert-warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-warning .alert-link{color:#66512c;}.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442;}.alert-danger hr{border-top-color:#e4b9c0;}.alert-danger .alert-link{color:#843534;} .btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none;}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none;}.btn-default{color:#333;background-color:#fff;border-color:#ccc;}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c;}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad;}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad;}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c;}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{background-image:none;}.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus{background-color:#fff;border-color:#ccc;}.btn-default .badge{color:#fff;background-color:#333;}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4;}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#286090;border-color:#122b40;}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74;}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74;}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#204d74;border-color:#122b40;}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none;}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#337ab7;border-color:#2e6da4;}.btn-primary .badge{color:#337ab7;background-color:#fff;}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c;}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#449d44;border-color:#255625;}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439;}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439;}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#398439;border-color:#255625;}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{background-image:none;}.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus{background-color:#5cb85c;border-color:#4cae4c;}.btn-success .badge{color:#5cb85c;background-color:#fff;}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da;}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85;}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc;}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc;}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#269abc;border-color:#1b6d85;}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{background-image:none;}.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus{background-color:#5bc0de;border-color:#46b8da;}.btn-info .badge{color:#5bc0de;background-color:#fff;}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236;}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ec971f;border-color:#985f0d;}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512;}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512;}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d58512;border-color:#985f0d;}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{background-image:none;}.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus{background-color:#f0ad4e;border-color:#eea236;}.btn-warning .badge{color:#f0ad4e;background-color:#fff;}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a;}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#c9302c;border-color:#761c19;}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925;}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925;}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#ac2925;border-color:#761c19;}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{background-image:none;}.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus{background-color:#d9534f;border-color:#d43f3a;}.btn-danger .badge{color:#d9534f;background-color:#fff;}.btn-link{color:#337ab7;font-weight:normal;border-radius:0;}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;}.btn-link:hover,.btn-link:focus{color:#23527c;text-decoration:underline;background-color:transparent;}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#777;text-decoration:none;}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px;}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px;}.btn-block{display:block;width:100%;}.btn-block+.btn-block{margin-top:5px;}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;} .btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle;}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left;}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2;}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px;}.btn-toolbar{margin-left:-5px;}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left;}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px;}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0;}.btn-group>.btn:first-child{margin-left:0;}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0;}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;}.btn-group>.btn-group{float:left;}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0;}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0;}.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px;}.btn-group>.btn-lg+.dropdown-toggle{padding-left:12px;padding-right:12px;}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none;}.btn .caret{margin-left:0;}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0;}.dropup .btn-lg .caret{border-width:0 5px 5px;}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%;}.btn-group-vertical>.btn-group>.btn{float:none;}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0;}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0;}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0;}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px;}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0;}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0;}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate;}.btn-group-justified>.btn,.btn-group-justified>.btn-group{float:none;display:table-cell;width:1%;}.btn-group-justified>.btn-group .btn{width:100%;}.btn-group-justified>.btn-group .dropdown-menu{left:auto;}[data-toggle="buttons"]>.btn input[type="radio"],[data-toggle="buttons"]>.btn-group>.btn input[type="radio"],[data-toggle="buttons"]>.btn input[type="checkbox"],[data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"]{position:absolute;clip:rect(0,0,0,0);pointer-events:none;} -.roo-upload-cropbox-selector{visibility:hidden;height:0;}.roo-upload-cropbox-dialog .modal-header,.roo-upload-cropbox-dialog .modal-footer{padding-top:5px;padding-bottom:5px;}.roo-upload-cropbox-body{background-color:#fff;border:1px solid #777;width:100%;height:450px;max-height:450px;position:relative;overflow:hidden;cursor:move;}.roo-upload-cropbox-preview{position:absolute;top:0;left:0;text-align:center;margin:0;padding:0;border:none;}.roo-upload-cropbox-body .roo-upload-cropbox-thumb{position:absolute;box-sizing:border-box;border:1px solid #777;box-shadow:0 0 0 1000px rgba(0,0,0,0.5);background:none repeat scroll 0 0 transparent;}.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify{height:100%;background-color:rgba(0,0,0,0.5);color:#fff;font-weight:bold;font-size:24px;text-align:center;padding-top:50px;font-style:italic;}.roo-upload-cropbox-btn-group button{background-color:#000;color:#fff;border-color:#333;}.roo-upload-cropbox-error-notify{border-radius:0;text-align:center;padding:0!important;margin:0!important;position:absolute;top:0;left:0;} +.roo-upload-cropbox-selector{display:none!important;}.roo-upload-cropbox-dialog .modal-header,.roo-upload-cropbox-dialog .modal-footer{padding-top:5px;padding-bottom:5px;}.roo-upload-cropbox-body{background-color:#fff;border:1px solid #777;width:100%;height:450px;max-height:450px;position:relative;overflow:hidden;cursor:move;}.roo-upload-cropbox-preview{position:absolute;top:0;left:0;text-align:center;margin:0;padding:0;border:none;}.roo-upload-cropbox-body .roo-upload-cropbox-thumb{position:absolute;box-sizing:border-box;border:1px solid #777;box-shadow:0 0 0 1000px rgba(0,0,0,0.5);background:none repeat scroll 0 0 transparent;}.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify{height:100%;background-color:rgba(0,0,0,0.5);color:#fff;font-weight:bold;font-size:24px;text-align:center;padding-top:50px;font-style:italic;}.roo-upload-cropbox-btn-group button{background-color:#000;color:#fff;border-color:#333;}.roo-upload-cropbox-error-notify{border-radius:0;text-align:center;padding:0!important;margin:0!important;position:absolute;top:0;left:0;} diff --git a/roojs-all.js b/roojs-all.js index f5ddaf1948..8227fd579f 100644 --- a/roojs-all.js +++ b/roojs-all.js @@ -2886,7 +2886,7 @@ B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re, Roo.dialog={}; // Roo/dialog/UploadCropbox.js Roo.dialog.UploadCropbox=function(A){Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true} -);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,file:false,exif:{} +);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{} ,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'} ,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify} ]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype')); @@ -2911,7 +2911,7 @@ return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();thi var B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height);if(A>C){var E=A;A=C;C=E;}if(B>D){var F=B;B=D;D=F;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX(); var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var G=Math.ceil(x+this.previewEl.getLeft(true));var H=Math.ceil(y+this.previewEl.getTop(true));G=(GC)?C:G);H=(HD)?D:H);this.previewEl.setLeft(G); this.previewEl.setTop(H);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent(); -this.startScale=this.scale;this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B=this.minWidth)&&B=this.minHeight)&&CD||C>E)){return false; }if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.heightthis.previewEl.getLeft(true))?0:((this.preview var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight); E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight); -B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=300;A=Math.ceil(this.minWidth*B/this.minHeight); -if(this.minWidth>this.minHeight){A=300;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2); -this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]; +B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize; +A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2); +var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]; }this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth(); this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth; }return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale 0) ? (this.scale + 1) : (this.scale - 1); if(!this.zoomable()){ this.scale = this.startScale; @@ -69255,11 +69257,11 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } } - height = 300; + height = this.windowSize; width = Math.ceil(this.minWidth * height / this.minHeight); if(this.minWidth > this.minHeight){ - width = 300; + width = this.windowSize; height = Math.ceil(this.minHeight * width / this.minWidth); } diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 48a71b3204..d5de8fa958 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -43723,6 +43723,7 @@ Roo.XTemplate.from = function(el){ * @cfg {Number} minWidth default 300 * @cfg {Number} minHeight default 300 * @cfg {Number} outputMaxWidth default 1200 + * @cfg {Number} windowSize default 300 * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'] * @cfg {Boolean} isDocument (true|false) default false * @cfg {String} url action url @@ -43861,6 +43862,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { minWidth : 300, minHeight : 300, outputMaxWidth : 1200, + windowSize : 300, file : false, exif : {}, baseRotate : 1, @@ -44268,7 +44270,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { e.stopEvent(); this.startScale = this.scale; - this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1); + this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1); if(!this.zoomable()){ this.scale = this.startScale; @@ -44763,11 +44765,11 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } } - height = 300; + height = this.windowSize; width = Math.ceil(this.minWidth * height / this.minHeight); if(this.minWidth > this.minHeight){ - width = 300; + width = this.windowSize; height = Math.ceil(this.minHeight * width / this.minWidth); } diff --git a/roojs-ui.js b/roojs-ui.js index eb99484de8..1520bcb52a 100644 --- a/roojs-ui.js +++ b/roojs-ui.js @@ -1940,7 +1940,7 @@ B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re, Roo.dialog={}; // Roo/dialog/UploadCropbox.js Roo.dialog.UploadCropbox=function(A){Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true} -);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,file:false,exif:{} +);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{} ,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'} ,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify} ]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype')); @@ -1965,7 +1965,7 @@ return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();thi var B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height);if(A>C){var E=A;A=C;C=E;}if(B>D){var F=B;B=D;D=F;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX(); var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var G=Math.ceil(x+this.previewEl.getLeft(true));var H=Math.ceil(y+this.previewEl.getTop(true));G=(GC)?C:G);H=(HD)?D:H);this.previewEl.setLeft(G); this.previewEl.setTop(H);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent(); -this.startScale=this.scale;this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B=this.minWidth)&&B=this.minHeight)&&CD||C>E)){return false; }if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.heightthis.previewEl.getLeft(true))?0:((this.preview var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight); E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight); -B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=300;A=Math.ceil(this.minWidth*B/this.minHeight); -if(this.minWidth>this.minHeight){A=300;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2); -this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]; +B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize; +A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2); +var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]; }this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth(); this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth; }return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale