This repository has been archived by the owner on May 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[AzaJS] Frequently used UI-components are ported (ZIndex, Overlay, Dr…
…aggable, Sortable)
Showing
9 changed files
with
1,396 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}); |