This is an automated email from the ASF dual-hosted git repository.
hugoferreira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new d5841f1eba New bead for ContextMenu
d5841f1eba is described below
commit d5841f1eba0d2e54a633f3eca9795774ee2e0be8
Author: Hugo Ferreira <[email protected]>
AuthorDate: Sat Jan 7 14:07:02 2023 +0000
New bead for ContextMenu
Example of usage:
<j:beads>
<js:ContextMenu>
<html:Div text="Check All“
click="checkAll(true)"/>
<html:Div text=“Unchek All”
visible="{this.isEditable()}"
click="checkAll(false)"/>
</js:ContextMenu>
</j:beads>
---
.../Basic/src/main/resources/basic-manifest.xml | 1 +
.../projects/Basic/src/main/resources/defaults.css | 33 ++++++
.../org/apache/royale/html/beads/ContextMenu.as | 122 +++++++++++++++++++++
3 files changed, 156 insertions(+)
diff --git a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index e800947b36..ff0b60a116 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -312,4 +312,5 @@
<component id="LabelFunction"
class="org.apache.royale.html.beads.LabelFunction"/>
<component id="FocusEvents"
class="org.apache.royale.html.beads.FocusEvents"/>
+ <component id="ContextMenu"
class="org.apache.royale.html.beads.ContextMenu"/>
</componentPackage>
diff --git a/frameworks/projects/Basic/src/main/resources/defaults.css
b/frameworks/projects/Basic/src/main/resources/defaults.css
index 75df967209..c2157a5b59 100644
--- a/frameworks/projects/Basic/src/main/resources/defaults.css
+++ b/frameworks/projects/Basic/src/main/resources/defaults.css
@@ -1243,4 +1243,37 @@ svg|BinaryImage
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
IBeadView: ClassReference("org.apache.royale.svg.beads.ImageView");
IBinaryImageLoader:
ClassReference("org.apache.royale.html.beads.BinaryImageLoader");
+}
+
+/* Context Menu */
+
+.context-menu
+{
+ position: fixed;
+ z-index: 10000;
+ width: 150px;
+ background: #1b1a1a;
+ border-radius: 5px;
+ transform: scale(0);
+ transform-origin: top left;
+}
+
+.context-menu.visible
+{
+ transform: scale(1);
+ transition: transform 200ms ease-in-out;
+}
+
+.context-menu .item
+{
+ padding: 8px 10px;
+ font-size: 12px;
+ color: #eee;
+ cursor: pointer;
+ border-radius: inherit;
+}
+
+.context-menu .item:hover
+{
+ background: #343434;
}
\ No newline at end of file
diff --git
a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContextMenu.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContextMenu.as
new file mode 100644
index 0000000000..b841c4b35b
--- /dev/null
+++
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContextMenu.as
@@ -0,0 +1,122 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.html.beads
+{
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.DispatcherBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.UIBase;
+ COMPILE::JS
+ {
+ import org.apache.royale.html.Group;
+ }
+
+ /**
+ * The ContextMenu class used to display a menu inside a component
after the user press the rigth click
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.10
+ */
+ [Event(name="show")]
+ [DefaultProperty("content")]
+ public class ContextMenu extends DispatcherBead
+ {
+ private var menu:UIBase;
+
+ public static const SHOW:String = "show";
+
+ public function set content(value:Array):void
+ {
+ COMPILE::JS
+ {
+ menu = new Group();
+ menu.className = "context-menu";
+ }
+
+ for each(var item:IChild in value)
+ {
+ COMPILE::JS
+ {
+ item.element.className = "item";
+ }
+ menu.addElement(item);
+ }
+ }
+
+ public override function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ (value as UIBase).addElement(menu);
+
+ COMPILE::JS
+ {
+ (value as UIBase).element.addEventListener("contextmenu",
function(event:MouseEvent):void
+ {
+ event.preventDefault();
+
+ var normalized:Array = normalizePosition(event.clientX,
event.clientY);
+
+ var contextMenus:NodeList =
document.querySelectorAll('.context-menu');
+ contextMenus.forEach(function(element:Element):void
+ {
+ element.classList.remove("visible");
+ });
+
+ menu.element.style.left = normalized[0] + "px";
+ menu.element.style.top = normalized[1] + "px";
+ menu.element.classList.add("visible");
+
+ dispatchEvent(new Event(SHOW));
+ });
+
+ document.querySelector("body").addEventListener("click",
function(event:MouseEvent):void
+ {
+ menu.element.classList.remove("visible");
+ });
+ }
+ }
+
+ private function normalizePosition(mouseX:int, mouseY:int):Array
+ {
+ var normalizedX:int = mouseX;
+ var normalizedY:int = mouseY;
+
+ COMPILE::JS
+ {
+ var scope:Element = document.querySelector("body");
+
+ var scopeOffsetX:Number =
Math.max(scope.getBoundingClientRect().left, 0);
+ var scopeOffsetY:Number =
Math.max(scope.getBoundingClientRect().top, 0);
+
+ if (mouseX - scopeOffsetX + menu.element.clientWidth >
scope.clientWidth)
+ normalizedX = scopeOffsetX + scope.clientWidth -
menu.element.clientWidth;
+
+ if (mouseY - scopeOffsetY + menu.element.clientHeight >
scope.clientHeight)
+ normalizedY = scopeOffsetY + scope.clientHeight -
menu.element.clientHeight;
+ }
+
+ return [normalizedX, normalizedY];
+ }
+ }
+}
\ No newline at end of file
