Anubis / Xlib | GitLab

Browse Code »

Commit 709d0a059e3d6844bea61e2cba44481407774257

Authored by Julien Verneuil 2015-04-28 01:33:19 +0200

1 parent 9952c7cb

added jquery animate functionality

Showing 2 changed files with 545 additions and 0 deletions Show diff stats

Inline Side-by-side

web/jQuery/CXM_jquery_animate.anubis 0 → 100644

Wrap text Show/Hide comments View file @709d0a0

	1	+ Allow to animate the style of a HTML element on a certain action (hover, click etc).
	2	+
	3	+ You can use pre-built animation or craft your own.
	4	+
	5	+ Note:
	6	+
	7	+ Colors related animatable styles are only available if jQuery-ui is used.
	8	+
	9	+
	10	+ Built-in animations
	11	+
	12	+ * fade_out
	13	+
	14	+ * fade_in
	15	+
	16	+ * size_on_hover
	17	+ Animate the size of the element when hovering it to a specified width / height target value,
	18	+ the element return to its initial size (if there is any) when the mouse is not hovering it anymore.
	19	+
	20	+ Example:
	21	+ jquery_animate
	22	+ (
	23	+ element(htmlId("my_element")),
	24	+ size_on_hover(32, 32, 1000, 1000)
	25	+ )
	26	+
	27	+ * custom
	28	+ Can be used to craft your own animation.
	29	+
	30	+ - You can make simple animation like this (transition the background color to green on a click):
	31	+
	32	+ jquery_animate
	33	+ (
	34	+ element(htmlId("my_element")),
	35	+ custom(onclick, background_color(rgb(0, 255, 0)), linear, 1000)
	36	+ )
	37	+
	38	+ - Or you can make something more complex which use all capabilities, like this custom made "size_on_hover" animation
	39	+
	40	+ jquery_animate
	41	+ (
	42	+ element(htmlId("my_element")),
	43	+ [
	44	+ custom(id("_over"), onmouseover, [ id("_out") ], [width(64), height(64)], easeOutBack, 1000),
	45	+ custom(
	46	+ id("_out"), // id used to identify this animation
	47	+ onmouseout, // animation triggering html event
	48	+ [ id("_hover")], // a list of ids, used to stop others animations to play when this one is triggered
	49	+ [], // empty list of styles mean it will animate back to the initial state of the element
	50	+ easeOutElastic, // easing equation
	51	+ 1000 // duration
	52	+ )
	53	+ ]
	54	+ )
	55	+
	56	+ Which is similar to:
	57	+ size_on_hover(64, 64, 1000, 1000)
	58	+
	59	+ TODO:
	60	+ Choice of an animation target using a selector
	61	+ Chained animation
	62	+
	63	+ Author: Julien Verneuil (25/04/2015)
	64	+
	65	+read tools/basis.anubis
	66	+read tools/printable_tree.anubis
	67	+
	68	+read calexium_lib/web/CXM_making_a_web_site.anubis
	69	+read calexium_lib/web/CXM_json.anubis
	70	+read calexium_lib/web/CXM_jquery.anubis
	71	+read calexium_lib/web/jQuery/CXM_jquery_easing.anubis
	72	+
	73	+read calexium_lib/web/CXM_style_tools.anubis
	74	+read calexium_lib/web/js_tools.anubis
	75	+
	76	+public type AnimatableCSSStyle:
	77	+ width(Int value),
	78	+ height(Int value),
	79	+ max_width(Int value),
	80	+ max_height(Int value),
	81	+ min_width(Int value),
	82	+ min_height(Int value),
	83	+ outline_width(Int value),
	84	+ border_width(Int value),
	85	+ border_top_width(Int value),
	86	+ border_right_width(Int value),
	87	+ border_bottom_width(Int value),
	88	+ border_left_width(Int value),
	89	+ top(Int value),
	90	+ right(Int value),
	91	+ left(Int value),
	92	+ bottom(Int value),
	93	+ margin_top(Int value),
	94	+ margin_right(Int value),
	95	+ margin_left(Int value),
	96	+ margin_bottom(Int value),
	97	+ padding_top(Int value),
	98	+ padding_right(Int value),
	99	+ padding_left(Int value),
	100	+ padding_bottom(Int value),
	101	+ font_size(Int value),
	102	+ line_height(Int value),
	103	+ letter_spacing(Int value),
	104	+ border_spacing(Int value),
	105	+ text_indent(Int value),
	106	+ word_spacing(Int value),
	107	+ z_index(Int value),
	108	+ outline_color(RGBA color),
	109	+ border_color(RGBA color),
	110	+ border_top_color(RGBA color),
	111	+ border_right_color(RGBA color),
	112	+ border_bottom_color(RGBA color),
	113	+ border_left_color(RGBA color),
	114	+ background_color(RGBA color),
	115	+ color(RGBA color),
	116	+ opacity(Float value).
	117	+
	118	+public type JQueryAnimationId:
	119	+ id(String id).
	120	+
	121	+public type JQueryAnimation:
	122	+ fade_out(HtmlEvents trigger, JQueryEasing type, Int duration),
	123	+ fade_in(HtmlEvents trigger, JQueryEasing type, Int duration),
	124	+ size_on_hover(Int width, Int height, Int duration_ms_on, Int duration_ms_out),
	125	+ custom(HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
	126	+ custom(HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
	127	+ custom(JQueryAnimationId id, HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
	128	+ custom(JQueryAnimationId id, HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms).
	129	+
	130	+type JQueryFormattedAnimation:
	131	+ formatted_animation(String id, String trigger_name, JsonValue stop_anim_id, JsonValue css_props, JsonValue options).
	132	+
	133	+define HTML_Head_Tag required_js = js(js_file("js/cxm/cxm_jquery_animate.js")).
	134	+
	135	+define String js_anim_function_name = "CalexiumToolBox.CXM_Animate.animate".
	136	+
	137	+define String
	138	+ format_html_event_to_js
	139	+ (
	140	+ HtmlEvents ev
	141	+ ) =
	142	+ if ev is
	143	+ {
	144	+ onchange then "change",
	145	+ onsubmit then "submit",
	146	+ onreset then "reset",
	147	+ onselect then "select",
	148	+ onblur then "blur",
	149	+ onfocus then "focus",
	150	+ onkeydown then "keydown"
	151	+ onkeypress then "keypress",
	152	+ onkeyup then "keyup",
	153	+ onclick then "click",
	154	+ ondblclick then "dblclick",
	155	+ onmousedown then "mousedown",
	156	+ onmousemove then "mousemove",
	157	+ onmouseout then "mouseout",
	158	+ onmouseover then "mouseover",
	159	+ onmouseup then "mouseup"
	160	+ }.
	161	+
	162	+define List(JsonMember)
	163	+ animatables_to_json_members
	164	+ (
	165	+ List(AnimatableCSSStyle) styles,
	166	+ List(JsonMember) json_members
	167	+ ) =
	168	+ if styles is
	169	+ {
	170	+ [ ] then
	171	+ json_members,
	172	+
	173	+ [ animatable_style . t ] then
	174	+ with json_member =
	175	+ if animatable_style is
	176	+ {
	177	+ width(value) then json_member("width", json_int(value)),
	178	+ height(value) then json_member("height", json_int(value)),
	179	+ max_width(value) then json_member("max-width", json_int(value)),
	180	+ max_height(value) then json_member("max-height", json_int(value)),
	181	+ min_width(value) then json_member("min-width", json_int(value)),
	182	+ min_height(value) then json_member("min-height", json_int(value)),
	183	+ outline_width(value) then json_member("outline-width", json_int(value)),
	184	+ border_width(value) then json_member("border-width", json_int(value)),
	185	+ border_top_width(value) then json_member("border-top-width", json_int(value)),
	186	+ border_right_width(value) then json_member("border-right-width", json_int(value)),
	187	+ border_bottom_width(value) then json_member("border-bottom-width", json_int(value)),
	188	+ border_left_width(value) then json_member("border-left-width", json_int(value)),
	189	+ top(value) then json_member("top", json_int(value)),
	190	+ right(value) then json_member("right", json_int(value)),
	191	+ left(value) then json_member("left", json_int(value)),
	192	+ bottom(value) then json_member("bottom", json_int(value)),
	193	+ margin_top(value) then json_member("margin-top", json_int(value)),
	194	+ margin_right(value) then json_member("margin-right", json_int(value)),
	195	+ margin_left(value) then json_member("margin-left", json_int(value)),
	196	+ margin_bottom(value) then json_member("margin-bottom", json_int(value)),
	197	+ padding_top(value) then json_member("padding-top", json_int(value)),
	198	+ padding_right(value) then json_member("padding-right", json_int(value)),
	199	+ padding_left(value) then json_member("padding-left", json_int(value)),
	200	+ padding_bottom(value) then json_member("padding-bottom", json_int(value)),
	201	+ font_size(value) then json_member("font-size", json_int(value)),
	202	+ line_height(value) then json_member("line-height", json_int(value)),
	203	+ letter_spacing(value) then json_member("letter-spacing", json_int(value)),
	204	+ border_spacing(value) then json_member("border-spacing", json_int(value)),
	205	+ text_indent(value) then json_member("text-indent", json_int(value)),
	206	+ word_spacing(value) then json_member("word-spacing", json_int(value)),
	207	+ z_index(value) then json_member("z-index", json_int(value)),
	208	+ outline_color(color) then json_member("outline-color", json_string(format_rgba_to_style_color(color))),
	209	+ border_color(color) then json_member("border-color", json_string(format_rgba_to_style_color(color))),
	210	+ border_top_color(color) then json_member("border-top-color", json_string(format_rgba_to_style_color(color))),
	211	+ border_right_color(color) then json_member("border-right-color", json_string(format_rgba_to_style_color(color))),
	212	+ border_bottom_color(color) then json_member("border-bottom-color", json_string(format_rgba_to_style_color(color))),
	213	+ border_left_color(color) then json_member("border-left-color", json_string(format_rgba_to_style_color(color))),
	214	+ background_color(color) then json_member("background-color", json_string(format_rgba_to_style_color(color))),
	215	+ color(color) then json_member("color", json_string(format_rgba_to_style_color(color))),
	216	+ opacity(value) then json_member("opacity", json_float(value, 8))
	217	+ },
	218	+
	219	+ animatables_to_json_members(t, [ json_member . json_members])
	220	+ }.
	221	+
	222	+define List(JsonMember)
	223	+ animatables_to_json_members
	224	+ (
	225	+ List(AnimatableCSSStyle) styles
	226	+ ) =
	227	+ animatables_to_json_members(styles, [ ]).
	228	+
	229	+define JQueryFormattedAnimation
	230	+ format_animation
	231	+ (
	232	+ JQueryAnimationId id,
	233	+ HtmlEvents trigger,
	234	+ List(JQueryAnimationId) stop_anims_id,
	235	+ List(AnimatableCSSStyle) styles,
	236	+ JQueryEasing type,
	237	+ Int duration_ms
	238	+ ) =
	239	+ with css_props_as_json_members = animatables_to_json_members(styles),
	240	+ easing_str = format_easing(type),
	241	+ trigger_str = format_html_event_to_js(trigger),
	242	+
	243	+ id_str = if id is id(id_str) then id_str,
	244	+
	245	+ formatted_animation(
	246	+ id_str,
	247	+ trigger_str,
	248	+ json_array(
	249	+ map((JQueryAnimationId e) \|-> if e is { id(id_str) then json_string(id_str) }, stop_anims_id)
	250	+ ),
	251	+ json_object(css_props_as_json_members),
	252	+ json_object(
	253	+ [
	254	+ json_member("duration", json_int(duration_ms)),
	255	+ json_member("easing", json_string(easing_str))
	256	+ ]
	257	+ )
	258	+ ).
	259	+
	260	+define JQueryFormattedAnimation
	261	+ format_animation
	262	+ (
	263	+ HtmlEvents trigger,
	264	+ List(JQueryAnimationId) stop_anims_id,
	265	+ List(AnimatableCSSStyle) styles,
	266	+ JQueryEasing type,
	267	+ Int duration_ms
	268	+ ) =
	269	+ format_animation(id(""), trigger, stop_anims_id, styles, type, duration_ms).
	270	+
	271	+define JQueryFormattedAnimation
	272	+ format_animation
	273	+ (
	274	+ JQueryAnimationId id,
	275	+ HtmlEvents trigger,
	276	+ List(AnimatableCSSStyle) styles,
	277	+ JQueryEasing type,
	278	+ Int duration_ms
	279	+ ) =
	280	+ format_animation(id, trigger, [ ], styles, type, duration_ms).
	281	+
	282	+define JQueryFormattedAnimation
	283	+ format_animation
	284	+ (
	285	+ HtmlEvents trigger,
	286	+ List(AnimatableCSSStyle) styles,
	287	+ JQueryEasing type,
	288	+ Int duration_ms
	289	+ ) =
	290	+ format_animation(id(""), trigger, [ ], styles, type, duration_ms).
	291	+
	292	+define List(JQueryFormattedAnimation)
	293	+ format_animation
	294	+ (
	295	+ JQueryAnimation anim_type
	296	+ ) =
	297	+ if anim_type is
	298	+ {
	299	+ fade_out(trigger, easing, duration) then
	300	+ [ format_animation(trigger, [opacity(0)], easing, duration) ],
	301	+
	302	+ fade_in(trigger, easing, duration) then
	303	+ [ format_animation(trigger, [opacity(1)], easing, duration) ],
	304	+
	305	+ size_on_hover(w, h, d_in, d_out) then
	306	+ [
	307	+ format_animation(id("_over"), onmouseover, [ id("_out") ], [width(w), height(h)], easeOutBack, d_in),
	308	+ format_animation(id("_out"), onmouseout , [ id("_over") ], [] , easeOutElastic, d_out)
	309	+ ],
	310	+
	311	+ custom(trigger, styles, easing_type, duration_ms) then
	312	+ [ format_animation(trigger, styles, easing_type, duration_ms) ]
	313	+
	314	+ custom(trigger, stop_anims_id, styles, easing_type, duration_ms) then
	315	+ [ format_animation(trigger, stop_anims_id, styles, easing_type, duration_ms) ]
	316	+
	317	+ custom(id,trigger,stop_anims_id,styles,easing_type,duration_ms) then
	318	+ [ format_animation(id, trigger, stop_anims_id, styles, easing_type, duration_ms) ]
	319	+
	320	+ custom(id,trigger,styles,easing_type,duration_ms) then
	321	+ [ format_animation(id, trigger, styles, easing_type, duration_ms) ]
	322	+ }.
	323	+
	324	+define List(JQueryFormattedAnimation)
	325	+ format_animations
	326	+ (
	327	+ List(JQueryFormattedAnimation) formatted_anims,
	328	+ List(JQueryAnimation) anims
	329	+ ) =
	330	+ if anims is
	331	+ {
	332	+ [ ] then formatted_anims,
	333	+
	334	+ [ anim . t ] then
	335	+ format_animations(formatted_anims + format_animation(anim), t)
	336	+ }.
	337	+
	338	+define List(JsonValue)
	339	+ generate_js
	340	+ (
	341	+ List(JQueryFormattedAnimation) formatted_anims,
	342	+ List(JsonValue) anim_objects
	343	+ ) =
	344	+ if formatted_anims is
	345	+ {
	346	+ [ ] then anim_objects,
	347	+
	348	+ [ formatted_anim . t ] then
	349	+ if formatted_anim is
	350	+ {
	351	+ formatted_animation(id_str, trigger_str, stop_anims_id_as_json_array, css_props, options) then
	352	+ generate_js(
	353	+ t,
	354	+ [
	355	+ json_object(
	356	+ [
	357	+ json_member("id", id_str),
	358	+ json_member("event", trigger_str),
	359	+ json_member("stop_anims_id", stop_anims_id_as_json_array),
	360	+ json_member("props", css_props),
	361	+ json_member("options", options)
	362	+ ]
	363	+ )
	364	+ . anim_objects
	365	+ ]
	366	+ )
	367	+ }
	368	+ }.
	369	+
	370	+public define List(HTML_Head_Tag)
	371	+ generate_head_tags
	372	+ (
	373	+ JQuerySelector jq_selector,
	374	+ List(JQueryAnimation) anims
	375	+ ) =
	376	+ [
	377	+ required_js,
	378	+ js_inline(
	379	+ jquery_ready(
	380	+ format_js_function_call(
	381	+ js_anim_function_name,
	382	+ [
	383	+ format_jquery_selector(jq_selector),
	384	+ to_javascript(
	385	+ json_array(
	386	+ generate_js(
	387	+ format_animations([ ], anims),
	388	+ [ ]
	389	+ )
	390	+ )
	391	+ )
	392	+ ]
	393	+ )
	394	+ )
	395	+ )
	396	+ ].
	397	+
	398	+public define List(HTML_Head_Tag)
	399	+ jquery_animate
	400	+ (
	401	+ JQuerySelector jq_selector,
	402	+ List(JQueryAnimation) anims
	403	+ ) =
	404	+ generate_head_tags(jq_selector, anims).
	405	+
	406	+public define HTML_Partial_Content
	407	+ jquery_animate
	408	+ (
	409	+ JQuerySelector jq_selector,
	410	+ List(JQueryAnimation) anims
	411	+ ) =
	412	+ partial_content(generate_head_tags(jq_selector, anims), literal("")).
	413	+
	414	+public define List(HTML_Head_Tag)
	415	+ jquery_animate
	416	+ (
	417	+ JQuerySelector jq_selector,
	418	+ JQueryAnimation anim_type
	419	+ ) =
	420	+ generate_head_tags(jq_selector, [ anim_type ]).
	421	+
	422	+public define HTML_Partial_Content
	423	+ jquery_animate
	424	+ (
	425	+ JQuerySelector jq_selector,
	426	+ JQueryAnimation anim_type
	427	+ ) =
	428	+ partial_content(generate_head_tags(jq_selector, [ anim_type ]), literal("")).
	429	+
...	...

web/js/cxm_jquery_animate.js 0 → 100644

Wrap text Show/Hide comments View file @709d0a0

	1	+/*
	2	+ Animation of HTML elements style.
	3	+
	4	+ Requirement:
	5	+ jquery
	6	+ jquery-ui (if you want to use advanced animating functions, ie: easing)
	7	+
	8	+ Usage:
	9	+ CalexiumToolBox.CXM_Animate.animate(selector, trigger_type, css_props, options, second_options);
	10	+
	11	+ Arguments:
	12	+ - selector
	13	+ JQuery selector (string), animation and event will be applied to HTML elements matched by the selector.
	14	+
	15	+ * Example:
	16	+
	17	+ "#element_id"
	18	+ or
	19	+ ".class_name"
	20	+
	21	+ - anims
	22	+ Array of animations object
	23	+
	24	+ Example:
	25	+ [
	26	+ {
	27	+ id: "my_animation",
	28	+ event: "mouseover"
	29	+ stop_anims_id: [],
	30	+ props: { width: 64, height: 64 },
	31	+ options: { easing: "linear", duration: 2000 }
	32	+ }
	33	+ }
	34	+
	35	+ Note:
	36	+ Options properties are the same as the jquery "animate" method options.
	37	+*/
	38	+
	39	+$(document).ready(function () {
	40	+ if (window.CalexiumToolBox === undefined) {
	41	+ CalexiumToolBox = {};
	42	+ }
	43	+
	44	+ if (CalexiumToolBox.CXM_Animate === undefined) {
	45	+ CalexiumToolBox.CXM_Animate = {
	46	+ animate: null // see below
	47	+ };
	48	+ }
	49	+
	50	+ CalexiumToolBox.CXM_Animate.animate = function (selector, anims) {
	51	+ $(selector).each(function() {
	52	+ var elem = $(this),
	53	+
	54	+ grouped_anims = {
	55	+
	56	+ },
	57	+
	58	+ initial_css_props = {};;
	59	+
	60	+ // group/register anims by events
	61	+ $(anims).each(function (index, anim) {
	62	+ var anim_group = grouped_anims[anim.event];
	63	+
	64	+ if (anim_group === undefined) {
	65	+ anim_group = grouped_anims[anim.event] = [];
	66	+ }
	67	+
	68	+ anim_group.push(anim);
	69	+ });
	70	+
	71	+ // iterate over all props of each anims and store the initial state of each css props of the element
	72	+ // this is done only once for the group of anims and it happen only if one anim props is empty which mean it animate back to element initial state at initialization
	73	+ for (i = 0; i < anims.length; i += 1) {
	74	+ if (jQuery.isEmptyObject(anims[i].props) && jQuery.isEmptyObject(initial_css_props)) {
	75	+ for (j = 0; j < anims.length; j += 1) {
	76	+ $.each(anims[j].props, function (key, value) {
	77	+ initial_css_props[key] = elem.css(key).replace('px', '');
	78	+ });
	79	+ }
	80	+
	81	+ anims[i].props = initial_css_props;
	82	+
	83	+ break;
	84	+ }
	85	+ }
	86	+
	87	+ // now for each event groups, bind the event
	88	+ $.each(grouped_anims, function (key, anims) {
	89	+ elem.bind(key,
	90	+ function() {
	91	+ var anim_object, options,
	92	+ id, i, j;
	93	+
	94	+ // setup each animations
	95	+ for (i = 0; i < anims.length; i += 1) {
	96	+ anim_object = anims[i];
	97	+ options = anim_object.options,
	98	+ stop_anims_id = anim_object.stop_anims_id;
	99	+
	100	+ // stop if needed specific anims determined by a list of ids
	101	+ if (stop_anims_id !== undefined) {
	102	+ for (id = 0; id < stop_anims_id.length; id += 1) {
	103	+ elem.stop(stop_anims_id[id], true);
	104	+ }
	105	+ }
	106	+
	107	+ options.queue = anim_object.id;
	108	+
	109	+ elem.animate(anim_object.props, options).dequeue(anim_object.id);
	110	+ }
	111	+ }
	112	+ );
	113	+ });
	114	+ });
	115	+ };
	116	+});
...	...