Skip to content
This repository has been archived by the owner on May 23, 2023. It is now read-only.

Commit

Permalink
[AzaJS] Frequently used UI-components are ported (ZIndex, Overlay, Dr…
Browse files Browse the repository at this point in the history
…aggable, Sortable)
olegcherr committed Feb 16, 2017
1 parent b31f0d3 commit 6ac8c12
Showing 9 changed files with 1,396 additions and 0 deletions.
51 changes: 51 additions & 0 deletions aza/Component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@

define(["./Core", "./Class", "./Events"], function(Aza, Class, Events)
{
var namesCounts = {};


var Component = Class.extend(function(opts) {
Class.apply(this, arguments);

var api = this,
Constr = api.constructor,
name = Constr.componentName || "Component",
count = namesCounts[name] = ++namesCounts[name] || 1;

api.componentName = name;
api.namespace = name + count;

api.options = Constr.compileOpts(opts);

Events.eventalize(api);
});


Component.componentName = "Component";

Component.defaults = {};


Component.extendDefaults = function(opts) {
Aza.advancedMerge(this.defaults, opts);
return this;
};

Component.compileOpts = function(opts) {
opts = Aza.advancedMerge({}, this.defaults, opts);
return Aza.processConfig(opts);
};


Component.extend = function(Constr) {
Aza.inherit(this, Constr);

// Clone defaults
Constr.defaults = Aza.extend({}, this.defaults);

return Constr;
};


return Component;
});
9 changes: 9 additions & 0 deletions aza/event/Dispatcher.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

define(["../Class","../Events"], function(Class, Events)
{
var Dispatcher = Class.extend(function() {
Events.eventalize(this);
});

return Dispatcher;
});
80 changes: 80 additions & 0 deletions aza/event/SimpleEvents.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@

define(function()
{
var Events = {};


function on(types, data, handler) {
var bindings = this.events.bindings,
type, i;

types = types.split(' ');

for (i = 0; i < types.length; i++) {
type = types[i];
(bindings[type] || (bindings[type] = [])).push({
type: type,
data: handler ? data : null,
handler: handler || data
});
}

return this;
}

function off(type, handler) {
var bindings = this.events.bindings[type] || [];

for (var i = 0, k = 0, len = bindings.length; i < len; i++) {
if (bindings[i].handler === handler) {
bindings.splice(k, 1);
}
else {
k = i;
}
}

return this;
}

function trigger(type, args) {
var bindings = this.events.bindings[type] || [], i;

for (i = 0; i < bindings.length; i++) {
bindings[i].handler.apply(this, [bindings[i]].concat(args || []));
}

return this;
}

function clear() {
var bindings = this.events.bindings, key;
for (key in bindings) {
if (bindings.hasOwnProperty(key)) {
delete bindings[key];
}
}
return this;
}


Events.eventalize = function(object) {
object.on = on;
object.off = off;
object.trigger = trigger;
object.events = {
bindings: {},
on: on,
off: off,
trigger: trigger,
clear: clear
};

return object;
};

Events.eventalize(Events);


return Events;
});
12 changes: 12 additions & 0 deletions aza/event/dispatchers/DomDispatcher.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

define(["../../Events"], function(Events)
{
var Dom = {
EV_DOM_ADD: "domAdd",
EV_DOM_REMOVE: "domRemove"
};

Events.eventalize(Dom);

return Dom;
});
28 changes: 28 additions & 0 deletions aza/event/dispatchers/OverlayDispatcher.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

define(["../../Events"], function(Events)
{
var Overlay = {
EV_SHOW: "ovrlShow",
EV_SHOWFIRST: "ovrlShowFirst",
EV_HIDE: "ovrlHide",
EV_HIDELAST: "ovrlHideLast"
},
shownCount = 0;


Events.eventalize(Overlay);


Overlay.on(Overlay.EV_SHOW, function() {
shownCount || Overlay.trigger(Overlay.EV_SHOWFIRST);
shownCount++;
});

Overlay.on(Overlay.EV_HIDE, function() {
shownCount = Math.max(--shownCount, 0);
shownCount || Overlay.trigger(Overlay.EV_HIDELAST);
});


return Overlay;
});
480 changes: 480 additions & 0 deletions aza/ui/Draggable.js

Large diffs are not rendered by default.

214 changes: 214 additions & 0 deletions aza/ui/Overlay.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@

define([
"jquery", "jquery/mainElems",
"../Core", "../Ui", "../Component", "./ZIndex",
"../event/dispatchers/OverlayDispatcher"
], function($, $$m, Aza, Ui, Component, ZIndex, EvOverlay)
{
var Overlay = Component.extend(function(opts) {
Component.call(this, opts);

var api = Aza.extend(this, {
//options
//$body

isShown: false,
isHidden: true,
isShowing: false,
isHiding: false
}),
o = api.options,

namespace = api.namespace,
$body;


api.show = function() {
if (api.isShown || api.isShowing || o.beforeShow(api) === false)
return api;

if (api.isHidden) {
if (!$body) {
$body = api.$body || $("<div>").addClass(o.bodyClass + " " + o.bodyAdsClass + " " + namespace).css({
position: "fixed",
left: 0,
top: 0,
backgroundColor: o.color,
opacity: o.fadeIn ? 0 : o.opacity,
zIndex: o.zIndex.capture().last,
cursor: o.cursor
});
api.$body = $body;

if (o.hideOnClick)
$body
.bind("mousedown." + namespace, false)
.bind("click." + namespace, function() {
api.isShown && api.hide();
});
}

$body.appendTo(Ui.$jsWrap);

$.window.on("resize."+namespace, Aza.proxy(api, "updateSize"));

EvOverlay.trigger(EvOverlay.EV_SHOW, [$body]);
}
// hiding
else $body.stop();

api.updateSize();

if (o.fadeIn) {
api.isHidden = api.isHiding = false;
api.isShowing = true;

$body.fadeTo(o.fadeIn, o.opacity, afterShow);
}
else afterShow();

return api;
};

api.hide = function() {
if (api.isHidden || api.isHiding || o.beforeHide(api) === false)
return api;

$body.stop();

$.window.off("."+namespace);

if (o.fadeOut) {
api.isShown = api.isShowing = false;
api.isHiding = true;

$body.fadeTo(o.fadeOut, 0, afterHide);
}
else afterHide();

return api;
};

api.updateSize = function() {
var vp = Ui.getViewport();

$body.css({width:0, height:0}).css({
width: vp.width,
height: vp.height
});

return api;
};

api.destroy = function() {
$body && $body.remove();
$.window.off("."+namespace);
api.off("*");
};


function afterShow() {
api.isShowing = api.isHidden = api.isHiding = false;
api.isShown = true;

api.trigger(Overlay.EV_SHOW, [$body, api]);
}

function afterHide() {
api.isHiding = api.isShown = api.isShowing = false;
api.isHidden = true;

$body.detach();
o.zIndex.release();

api.trigger(Overlay.EV_HIDE, [api]);
EvOverlay.trigger(EvOverlay.EV_HIDE);
}


o.zIndex = ZIndex.create(1, o.zIndex);
});

Overlay.EV_SHOW = "show";
Overlay.EV_HIDE = "hide";

Overlay.componentName = "Overlay";

Overlay.defaults = {
/**
* Цвет
* @type {String}
*/
color: "#000",

/**
* Прозрачность
* @type {Number}
*/
opacity: .4,

/**
* zIndex
* @type {ZIndex|Number}
*/
zIndex: 2,

/**
* @type {String}
*/
cursor: "default",

/**
* Класс для $body
* @type {String}
*/
bodyClass: "e-Overlay",

/**
* Дополнительный класс для $body
* @type {String}
*/
bodyAdsClass: "",

/**
* Дополнительный CSS для $body
* @type {Object}
*/
css: null,

/**
* Скорость появления
* 0 - без анимации
* @type {Number}
*/
fadeIn: 330,

/**
* Скорость скрытия
* 0 - без анимации
* @type {Number}
*/
fadeOut: 198,

/**
* Скрывать по клику
* @type {Boolean}
*/
hideOnClick: false,

/**
* Выполнится перед открытием
* @type {Function}
*/
beforeShow: Aza.noop,

/**
* Выполнится перед скрытием
* @type {Function}
*/
beforeHide: Aza.noop
};


return Overlay;
});
400 changes: 400 additions & 0 deletions aza/ui/Sortable.js

Large diffs are not rendered by default.

122 changes: 122 additions & 0 deletions aza/ui/ZIndex.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@

define(["../Core"], function(Aza)
{
var FIRST = 1000, // z-indexes started from this number
RANGES_LENGTHS = [ // Reserved z-index ranges TODO: Create constants
1000, // 0: Background objects (e.g. some static html-structures)
3000, // 1: Objects of middle depth (e.g. non-active chat or audio-player)
5000, // 2: Main interactive widgets (e.g. modals, overlays, plugins like "Crop")
2000, // 3: Higher objects (e.g. ui-elements: custom selects, manus, tooltips)
1000 // 4: Systems objects (e.g. custom alerts, error modals)
],
DEFAULT_RANGE = 2,

curr = FIRST,
ranges = (function() {
var ranges = [], i;
for (i = 0; i < RANGES_LENGTHS.length; i++)
ranges.push({
maxTaken: curr - 1,
min: curr,
max: (curr += RANGES_LENGTHS[i]) - 1,
items: []
});
return ranges;
})();


/**
* Useful z-index manager
*
* @constructor
* @param {Number} length Number of required z-index values
* @param {Number} rangeNum Widget type (id of z-index range)
*/
function ZIndex(length, rangeNum) {
var api = Aza.extend(this, {
length: length,
rangeNum: rangeNum || DEFAULT_RANGE,
first: 0,
last: 0,
isPseudo: false
}),
range, rangeItems;


if (length === true) {
api.isPseudo = length;

api.first = rangeNum;
api.last = arguments[2] || rangeNum;

api.length = api.last - api.first + 1;
api.rangeNum = -1;
}


api.capture = function() {
if (!api.isPseudo && !api.captured) {
api.captured = true;

range = ranges[api.rangeNum];
rangeItems = range.items;

api.first = range.maxTaken + 1;
api.last = (range.maxTaken += api.length);

rangeItems.push(api);
}

return api;
};

api.release = function() {
if (!api.isPseudo && api.captured) {
api.captured = false;

api.first = api.last = 0;

rangeItems.splice(Aza.inArray(api, rangeItems), 1);
updateMaxTaken(range);
}

return api;
};

api.eq = function(n) {
api.capture();
return Aza.norm(api.first + n, api.first, api.last);
};
}

/**
* Creation helper
*
* ZIndex.create(1, 1) // Will return new ZIndex(1, 1)
* ZIndex.create(1, zi) // Will return 'zi' if it is already an instance of ZIndex
*
* @param {Number} length
* @param {Number|ZIndex} rangeNum
* @returns {ZIndex}
*/
ZIndex.create = function(length, rangeNum) {
return rangeNum instanceof ZIndex
? rangeNum
: new ZIndex(length, rangeNum);
};


function updateMaxTaken(range) {
var items = range.items,
maxTaken = range.min - 1, i;

for (i = 0; i < items.length; i++)
if (items[i].captured)
maxTaken = Math.max(maxTaken, items[i].last);

range.maxTaken = maxTaken;
}


return ZIndex;
});

0 comments on commit 6ac8c12

Please sign in to comment.