{"version":3,"sources":["keditor-component-photo.js"],"names":["$","KEditor","keditor","flog","log","components","init","contentArea","container","component","componentContent","children","img","find","css","settingEnabled","settingTitle","initSettingForm","form","self","this","options","append","photoEdit","fileInput","next","on","e","preventDefault","trigger","file","files","test","type","reader","FileReader","addEventListener","getSettingComponent","attr","target","result","width","height","load","showSettingPanel","readAsDataURL","alert","inputAlign","panel","value","inputResponsive","checked","cbbStyle","val","removeClass","addClass","inputWidth","inputHeight","newWidth","newHeight","Math","round","ratio","showSettingForm","algin","hasClass","prop","jQuery"],"mappings":"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","file":"keditor-component-photo.min.js","sourcesContent":["(function ($) {\r\n    var KEditor = $.keditor;\r\n    var flog = KEditor.log;\r\n    \r\n    KEditor.components['photo'] = {\r\n        init: function (contentArea, container, component, keditor) {\r\n            flog('init \"photo\" component', component);\r\n            \r\n            var componentContent = component.children('.keditor-component-content');\r\n            var img = componentContent.find('img');\r\n            \r\n            img.css('display', 'inline-block');\r\n        },\r\n        \r\n        settingEnabled: true,\r\n        \r\n        settingTitle: 'Photo Settings',\r\n        \r\n        initSettingForm: function (form, keditor) {\r\n            flog('initSettingForm \"photo\" component');\r\n            \r\n            var self = this;\r\n            var options = keditor.options;\r\n            \r\n            form.append(\r\n                '<form class=\"form-horizontal\">' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <button type=\"button\" class=\"btn btn-block btn-primary\" id=\"photo-edit\">Change Photo</button>' +\r\n                '           <input type=\"file\" style=\"display: none\" />' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <label for=\"photo-align\" class=\"col-sm-12\">Align</label>' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <select id=\"photo-align\" class=\"form-control\">' +\r\n                '               <option value=\"left\">Left</option>' +\r\n                '               <option value=\"center\">Center</option>' +\r\n                '               <option value=\"right\">Right</option>' +\r\n                '           </select>' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <label for=\"photo-style\" class=\"col-sm-12\">Style</label>' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <select id=\"photo-style\" class=\"form-control\">' +\r\n                '               <option value=\"\">None</option>' +\r\n                '               <option value=\"img-rounded\">Rounded</option>' +\r\n                '               <option value=\"img-circle\">Circle</option>' +\r\n                '               <option value=\"img-thumbnail\">Thumbnail</option>' +\r\n                '           </select>' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <label for=\"photo-responsive\" class=\"col-sm-12\">Responsive</label>' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <input type=\"checkbox\" id=\"photo-responsive\" />' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <label for=\"photo-width\" class=\"col-sm-12\">Width</label>' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <input type=\"number\" id=\"photo-width\" class=\"form-control\" />' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '   <div class=\"form-group\">' +\r\n                '       <label for=\"photo-height\" class=\"col-sm-12\">Height</label>' +\r\n                '       <div class=\"col-sm-12\">' +\r\n                '           <input type=\"number\" id=\"photo-height\" class=\"form-control\" />' +\r\n                '       </div>' +\r\n                '   </div>' +\r\n                '</form>'\r\n            );\r\n            \r\n            var photoEdit = form.find('#photo-edit');\r\n            var fileInput = photoEdit.next();\r\n            photoEdit.on('click', function (e) {\r\n                e.preventDefault();\r\n                \r\n                fileInput.trigger('click');\r\n            });\r\n            fileInput.on('change', function () {\r\n                var file = this.files[0];\r\n                if (/image/.test(file.type)) {\r\n                    var reader = new FileReader();\r\n                    \r\n                    reader.addEventListener('load', function (e) {\r\n                        var img = keditor.getSettingComponent().find('img');\r\n                        img.attr('src', e.target.result);\r\n                        img.css({\r\n                            width: '',\r\n                            height: ''\r\n                        });\r\n                        img.load(function () {\r\n                            keditor.showSettingPanel(keditor.getSettingComponent(), options);\r\n                        });\r\n                    });\r\n                    \r\n                    reader.readAsDataURL(this.files[0]);\r\n                } else {\r\n                    alert('Your selected file is not photo!');\r\n                }\r\n            });\r\n            \r\n            var inputAlign = form.find('#photo-align');\r\n            inputAlign.on('change', function () {\r\n                var panel = keditor.getSettingComponent().find('.photo-panel');\r\n                panel.css('text-align', this.value);\r\n            });\r\n            \r\n            var inputResponsive = form.find('#photo-responsive');\r\n            inputResponsive.on('click', function () {\r\n                keditor.getSettingComponent().find('img')[this.checked ? 'addClass' : 'removeClass']('img-responsive');\r\n            });\r\n            \r\n            var cbbStyle = form.find('#photo-style');\r\n            cbbStyle.on('change', function () {\r\n                var img = keditor.getSettingComponent().find('img');\r\n                var val = this.value;\r\n                \r\n                img.removeClass('img-rounded img-circle img-thumbnail');\r\n                if (val) {\r\n                    img.addClass(val);\r\n                }\r\n            });\r\n            \r\n            var inputWidth = form.find('#photo-width');\r\n            var inputHeight = form.find('#photo-height');\r\n            inputWidth.on('change', function () {\r\n                var img = keditor.getSettingComponent().find('img');\r\n                var newWidth = +this.value;\r\n                var newHeight = Math.round(newWidth / self.ratio);\r\n                \r\n                if (newWidth <= 0) {\r\n                    newWidth = self.width;\r\n                    newHeight = self.height;\r\n                    this.value = newWidth;\r\n                }\r\n                \r\n                img.css({\r\n                    'width': newWidth,\r\n                    'height': newHeight\r\n                });\r\n                inputHeight.val(newHeight);\r\n            });\r\n            inputHeight.on('change', function () {\r\n                var img = keditor.getSettingComponent().find('img');\r\n                var newHeight = +this.value;\r\n                var newWidth = Math.round(newHeight * self.ratio);\r\n                \r\n                if (newHeight <= 0) {\r\n                    newWidth = self.width;\r\n                    newHeight = self.height;\r\n                    this.value = newHeight;\r\n                }\r\n                \r\n                img.css({\r\n                    'height': newHeight,\r\n                    'width': newWidth\r\n                });\r\n                inputWidth.val(newWidth);\r\n            });\r\n        },\r\n        \r\n        showSettingForm: function (form, component, keditor) {\r\n            flog('showSettingForm \"photo\" component', component);\r\n            \r\n            var self = this;\r\n            var inputAlign = form.find('#photo-align');\r\n            var inputResponsive = form.find('#photo-responsive');\r\n            var inputWidth = form.find('#photo-width');\r\n            var inputHeight = form.find('#photo-height');\r\n            var cbbStyle = form.find('#photo-style');\r\n            \r\n            var panel = component.find('.photo-panel');\r\n            var img = panel.find('img');\r\n            \r\n            var algin = panel.css('text-align');\r\n            if (algin !== 'right' || algin !== 'center') {\r\n                algin = 'left';\r\n            }\r\n            \r\n            if (img.hasClass('img-rounded')) {\r\n                cbbStyle.val('img-rounded');\r\n            } else if (img.hasClass('img-circle')) {\r\n                cbbStyle.val('img-circle');\r\n            } else if (img.hasClass('img-thumbnail')) {\r\n                cbbStyle.val('img-thumbnail');\r\n            } else {\r\n                cbbStyle.val('');\r\n            }\r\n            \r\n            inputAlign.val(algin);\r\n            inputResponsive.prop('checked', img.hasClass('img-responsive'));\r\n            inputWidth.val(img.width());\r\n            inputHeight.val(img.height());\r\n            \r\n            $('<img />').attr('src', img.attr('src')).load(function () {\r\n                self.ratio = this.width / this.height;\r\n                self.width = this.width;\r\n                self.height = this.height;\r\n            });\r\n        }\r\n    };\r\n    \r\n})(jQuery);\r\n"]}