mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-30 04:29:21 +03:00
Again replaced some jQuery to native and cleaned up normalize.css without IE
This commit is contained in:
parent
4977494f6b
commit
645831368d
13 changed files with 649 additions and 318 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import { pInt } from 'Common/Utils';
|
||||
import { SaveSettingsStep } from 'Common/Enums';
|
||||
import { AbstractComponent, componentExportHelper } from 'Component/Abstract';
|
||||
|
||||
|
|
@ -9,68 +8,32 @@ class SaveTriggerComponent extends AbstractComponent {
|
|||
constructor(params) {
|
||||
super();
|
||||
|
||||
this.element = jQuery(params.element) || null;
|
||||
const el = params.element;
|
||||
this.element = el || null;
|
||||
this.value = params.value && params.value.subscribe ? params.value : null;
|
||||
|
||||
if (this.element) {
|
||||
if (el) {
|
||||
if (this.value) {
|
||||
this.element.css('display', 'inline-block');
|
||||
el.style.display = 'inline-block';
|
||||
|
||||
if (params.verticalAlign) {
|
||||
this.element.css('vertical-align', params.verticalAlign);
|
||||
el.style.verticalAlign = params.verticalAlign;
|
||||
}
|
||||
|
||||
this.setState(this.value());
|
||||
|
||||
this.disposable.push(this.value.subscribe(this.setState, this));
|
||||
} else {
|
||||
this.element.hide();
|
||||
el.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setState(value) {
|
||||
switch (pInt(value)) {
|
||||
case SaveSettingsStep.TrueResult:
|
||||
this.element
|
||||
.find('.animated,.error')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.success')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
case SaveSettingsStep.FalseResult:
|
||||
this.element
|
||||
.find('.animated,.success')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.error')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
case SaveSettingsStep.Animate:
|
||||
this.element
|
||||
.find('.error,.success')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.animated')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
case SaveSettingsStep.Idle:
|
||||
default:
|
||||
this.element
|
||||
.find('.animated')
|
||||
.hide()
|
||||
.end()
|
||||
.find('.error,.success')
|
||||
.removeClass('visible');
|
||||
break;
|
||||
}
|
||||
value = parseInt(value,10);
|
||||
this.element.querySelector('.animated').hidden = value !== SaveSettingsStep.Animate;
|
||||
this.element.querySelector('.success').hidden = value !== SaveSettingsStep.TrueResult;
|
||||
this.element.querySelector('.error').hidden = value !== SaveSettingsStep.FalseResult;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,24 +10,19 @@ class ScriptComponent extends AbstractComponent {
|
|||
if (
|
||||
params.component &&
|
||||
params.component.templateNodes &&
|
||||
params.element &&
|
||||
params.element[0] &&
|
||||
params.element[0].outerHTML
|
||||
params.element
|
||||
) {
|
||||
let script = params.element[0].outerHTML;
|
||||
script = !script ? '' : script.replace(/<x-script/i, '<script').replace(/<b><\/b><\/x-script>/i, '</script>');
|
||||
let el = params.element, script = el.outerHTML;
|
||||
script = script ? script.replace(/<x-script/i, '<script').replace(/<b><\/b><\/x-script>/i, '</script>') : '';
|
||||
|
||||
if (script) {
|
||||
params.element.text('');
|
||||
params.element.replaceWith(
|
||||
jQuery(script).text(
|
||||
params.component.templateNodes[0] && params.component.templateNodes[0].nodeValue
|
||||
? params.component.templateNodes[0].nodeValue
|
||||
: ''
|
||||
)
|
||||
const koNodes = params.component.templateNodes[0];
|
||||
el.textContent = '';
|
||||
el.replaceWith(
|
||||
Element.fromHTML(script).textContent = koNodes && koNodes.nodeValue ? koNodes.nodeValue : ''
|
||||
);
|
||||
} else {
|
||||
params.element.remove();
|
||||
el.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
107
dev/External/ko.js
vendored
107
dev/External/ko.js
vendored
|
|
@ -341,85 +341,30 @@ ko.bindingHandlers.droppable = {
|
|||
|
||||
ko.bindingHandlers.saveTrigger = {
|
||||
init: (element) => {
|
||||
const $el = $(element);
|
||||
element.saveTriggerType = element.matches('input[type=text],input[type=email],input[type=password],select,textarea')
|
||||
? 'input' : 'custom';
|
||||
|
||||
$el.data(
|
||||
'save-trigger-type',
|
||||
element.matches('input[type=text],input[type=email],input[type=password],select,textarea') ? 'input' : 'custom'
|
||||
);
|
||||
|
||||
if ('custom' === $el.data('save-trigger-type')) {
|
||||
$el
|
||||
.append(
|
||||
' ' +
|
||||
'<i class="icon-spinner animated"></i>' +
|
||||
'<i class="icon-remove error"></i>' +
|
||||
'<i class="icon-ok success"></i>'
|
||||
)
|
||||
.addClass('settings-saved-trigger');
|
||||
if ('custom' === element.saveTriggerType) {
|
||||
element.append(
|
||||
' ',
|
||||
Element.fromHTML('<i class="icon-spinner animated"></i>'),
|
||||
Element.fromHTML('<i class="icon-remove error"></i>'),
|
||||
Element.fromHTML('<i class="icon-ok success"></i>')
|
||||
);
|
||||
element.classList.add('settings-saved-trigger');
|
||||
} else {
|
||||
$el.addClass('settings-saved-trigger-input');
|
||||
element.classList.add('settings-saved-trigger-input');
|
||||
}
|
||||
},
|
||||
update: (element, fValueAccessor) => {
|
||||
const value = ko.unwrap(fValueAccessor()),
|
||||
$el = $(element);
|
||||
|
||||
if ('custom' === $el.data('save-trigger-type')) {
|
||||
switch (value.toString()) {
|
||||
case '1':
|
||||
$el
|
||||
.find('.animated,.error')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.success')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
case '0':
|
||||
$el
|
||||
.find('.animated,.success')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.error')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
case '-2':
|
||||
$el
|
||||
.find('.error,.success')
|
||||
.hide()
|
||||
.removeClass('visible')
|
||||
.end()
|
||||
.find('.animated')
|
||||
.show()
|
||||
.addClass('visible');
|
||||
break;
|
||||
default:
|
||||
$el
|
||||
.find('.animated')
|
||||
.hide()
|
||||
.end()
|
||||
.find('.error,.success')
|
||||
.removeClass('visible');
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (value.toString()) {
|
||||
case '1':
|
||||
$el.addClass('success').removeClass('error');
|
||||
break;
|
||||
case '0':
|
||||
$el.addClass('error').removeClass('success');
|
||||
break;
|
||||
case '-2':
|
||||
break;
|
||||
default:
|
||||
$el.removeClass('error success');
|
||||
break;
|
||||
}
|
||||
const value = parseInt(ko.unwrap(fValueAccessor()),10);
|
||||
if ('custom' === element.saveTriggerType) {
|
||||
element.querySelector('.animated').hidden = value !== SaveSettingsStep.Animate;
|
||||
element.querySelector('.success').hidden = value !== SaveSettingsStep.TrueResult;
|
||||
element.querySelector('.error').hidden = value !== SaveSettingsStep.FalseResult;
|
||||
} else if (value !== SaveSettingsStep.Animate) {
|
||||
element.classList.toggle('success', value === SaveSettingsStep.TrueResult);
|
||||
element.classList.toggle('error', value === SaveSettingsStep.FalseResult);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -457,7 +402,7 @@ ko.bindingHandlers.emailsTags = {
|
|||
item => (item.toLine ? [item.toLine(false), item] : [item, null])
|
||||
),
|
||||
change: event => {
|
||||
$el.data('EmailsTagsValue', event.target.value);
|
||||
element.EmailsTagsValue = event.target.value;
|
||||
fValue(event.target.value);
|
||||
}
|
||||
});
|
||||
|
|
@ -469,14 +414,12 @@ ko.bindingHandlers.emailsTags = {
|
|||
}
|
||||
},
|
||||
update: (element, fValueAccessor) => {
|
||||
const $oEl = $(element),
|
||||
fValue = fValueAccessor(),
|
||||
value = ko.unwrap(fValue);
|
||||
const value = ko.unwrap(fValueAccessor());
|
||||
|
||||
if ($oEl.data('EmailsTagsValue') !== value) {
|
||||
$oEl.val(value);
|
||||
$oEl.data('EmailsTagsValue', value);
|
||||
$oEl.inputosaurus('refresh');
|
||||
if (element.EmailsTagsValue !== value) {
|
||||
element.value = value;
|
||||
element.EmailsTagsValue = value;
|
||||
$(element).inputosaurus('refresh');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -129,28 +129,34 @@
|
|||
.settings-saved-trigger {
|
||||
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
|
||||
.animated {
|
||||
color: green;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: green;
|
||||
transition: opacity 0.5s linear;
|
||||
opacity: 0;
|
||||
color: #080;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
transition: opacity 0.5s linear;
|
||||
opacity: 0;
|
||||
color: #F00;
|
||||
}
|
||||
|
||||
.visible {
|
||||
i {
|
||||
transition: opacity 2s linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
i:not([hidden]) {
|
||||
opacity: 1;
|
||||
}
|
||||
i[hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-saved-trigger-input {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue