You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/12/17 17:53:33 UTC
[royale-asjs] branch develop updated: new Jewel PopUp component
(still in development but working)
This is an automated email from the ASF dual-hosted git repository.
carlosrovira 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 58a0bf0 new Jewel PopUp component (still in development but working)
58a0bf0 is described below
commit 58a0bf0abd7ab93e23b326cc528b3991a361e2b9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Dec 17 18:53:26 2018 +0100
new Jewel PopUp component (still in development but working)
---
.../projects/Jewel/src/main/resources/defaults.css | 85 ++++++++
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 3 +
.../main/royale/org/apache/royale/jewel/PopUp.as | 109 ++++++++++
.../beads/controllers/PopUpMouseController.as | 184 ++++++++++++++++
.../apache/royale/jewel/beads/models/PopUpModel.as | 142 +++++++++++++
.../apache/royale/jewel/beads/views/PopUpView.as | 235 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_popup.sass | 125 +++++++++++
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
9 files changed, 885 insertions(+)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8f9a34f..6a0b47c 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3067,6 +3067,91 @@ j|Spinner {
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SpinnerMouseController");
}
+.jewel.popup {
+ display: inline-flex;
+}
+
+.popup-content {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+ color: rgba(0, 0, 0, 0.8);
+}
+.popup-content::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.popup-content .jewel.popupcontent {
+ position: relative;
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ touch-action: none;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ opacity: 0;
+}
+.popup-content.open {
+ pointer-events: auto;
+}
+.popup-content.open::before {
+ opacity: 1;
+}
+.popup-content.open .jewel.popupcontent {
+ transform: translate(-50%, -100%);
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .popup-content .jewel.popupcontent {
+ width: calc(100% - 20px);
+ }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+ .popup-content .jewel.popupcontent {
+ width: calc(100% - 300px);
+ }
+}
+@media (min-width: 992px) {
+ .popup-content::before {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ .popup-content .jewel.popupcontent {
+ transform: none;
+ transition: none;
+ box-shadow: none !important;
+ }
+ .popup-content.open .jewel.popupcontent {
+ transform: none;
+ top: auto;
+ left: auto;
+ }
+}
+j|PopUp {
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.PopUpView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.PopUpModel");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.PopUpMouseController");
+ IPopUp: ClassReference("org.apache.royale.core.StyledUIBase");
+}
+
.jewel.radiobutton {
display: inline-flex;
position: relative;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 1fa2c24..adc8285 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -72,6 +72,7 @@
<component id="FormHeading" class="org.apache.royale.jewel.FormHeading"/>
<component id="ErrorTipLabel" class="org.apache.royale.jewel.supportClasses.tooltip.ErrorTipLabel"/>
<component id="Snackbar" class="org.apache.royale.jewel.Snackbar"/>
+ <component id="PopUp" class="org.apache.royale.jewel.PopUp"/>
<component id="Validator" class="org.apache.royale.jewel.beads.validators.Validator"/>
<component id="FormValidator" class="org.apache.royale.jewel.beads.validators.FormValidator"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index c6ad360..ff8505d 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -41,7 +41,9 @@ package
import org.apache.royale.jewel.beads.models.FormItemModel; FormItemModel;
import org.apache.royale.jewel.beads.models.WizardModel; WizardModel;
import org.apache.royale.jewel.beads.models.WizardStep; WizardStep;
+ import org.apache.royale.jewel.beads.models.PopUpModel; PopUpModel;
+ import org.apache.royale.jewel.beads.controllers.PopUpMouseController; PopUpMouseController;
import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
import org.apache.royale.jewel.beads.controllers.DateChooserMouseController; DateChooserMouseController;
@@ -55,6 +57,7 @@ package
import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
import org.apache.royale.jewel.beads.controllers.WizardController; WizardController;
+ import org.apache.royale.jewel.beads.views.PopUpView; PopUpView;
import org.apache.royale.jewel.beads.views.ImageView; ImageView;
import org.apache.royale.jewel.beads.views.SpinnerView; SpinnerView;
import org.apache.royale.jewel.beads.views.NumericStepperView; NumericStepperView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/PopUp.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/PopUp.as
new file mode 100644
index 0000000..e476c06
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/PopUp.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+ import org.apache.royale.core.IPopUp;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.UIBase;
+
+
+ /**
+ * The change event is dispatched when the selectedDate is changed.
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The PopUp class provides an input field where a date can be entered
+ * and a pop-up calendar control for picking a date as an alternative to
+ * the text field.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class PopUp extends StyledUIBase implements IPopUp
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function PopUp()
+ {
+ super();
+
+ typeNames = "jewel popup";//layout itemsCenter
+ }
+
+ public function show():void
+ {
+ dispatchEvent(new Event("showPopUp"));
+ }
+
+ // private var _content:UIBase;
+
+ // public function get content():UIBase
+ // {
+ // return _content;
+ // }
+ // public function set content(value:UIBase):void
+ // {
+ // _content = value;
+ // }
+
+ /**
+ * The method called when added to a parent. The PopUp class uses
+ * this opportunity to install additional beads.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+
+ dispatchEvent(new Event("initComplete"));
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.html.util.addElementToWrapper
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'div');
+ positioner = element;
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/PopUpMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/PopUpMouseController.as
new file mode 100644
index 0000000..9a4fd25
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/PopUpMouseController.as
@@ -0,0 +1,184 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+ import org.apache.royale.jewel.beads.views.PopUpView;
+
+ /**
+ * The PopUpMouseController class is responsible for monitoring
+ * the mouse events on the elements of the DateField. A click on the
+ * DateField's menu button triggers the pop-up, for example.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class PopUpMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function PopUpMouseController()
+ {
+ }
+
+ private var viewBead:PopUpView;
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ viewBead = _strand.getBeadByType(PopUpView) as PopUpView;
+ IEventDispatcher(_strand).addEventListener("showPopUp", showPopUpHandler);
+ }
+
+ /**
+ * @private
+ */
+ private function showPopUpHandler(event:MouseEvent):void
+ {
+ // event.stopImmediatePropagation();
+
+ viewBead.popUpVisible = true;
+ //IEventDispatcher(viewBead.popUp).addEventListener(Event.CHANGE, changeHandler);
+ // removeDismissHandler();
+
+ // use a timer to delay the installation of the event handler, otherwise
+ // the event handler is called immediately and will dismiss the popup.
+ // var t:Timer = new Timer(0.25, 1);
+ // t.addEventListener("timer", addDismissHandler);
+ // t.start();
+
+ // viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
+ //daysTable = (viewBead.popUp.getBeadByType(DateChooserView) as DateChooserView).daysTable;
+
+ IEventDispatcher(viewBead.content).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).addEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ }
+
+ protected function handleControlMouseDown(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ }
+
+ protected function removePopUpWhenClickOutside(event:MouseEvent = null):void
+ {
+ IEventDispatcher(viewBead.content).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ // IEventDispatcher(viewBead.popUp).removeEventListener(Event.CHANGE, changeHandler);
+ viewBead.popUpVisible = false;
+ }
+
+ /**
+ * @private
+ */
+ private function changeHandler(event:Event):void
+ {
+ event.stopImmediatePropagation();
+ IEventDispatcher(viewBead.content).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ // IEventDispatcher(viewBead.popUp).removeEventListener(Event.CHANGE, changeHandler);
+
+ // model.selectedDate = IDateChooserModel(viewBead.popUp.getBeadByType(IDateChooserModel)).selectedDate;
+
+ viewBead.popUpVisible = false;
+ // IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
+
+ // removeDismissHandler();
+ }
+
+ /**
+ * @private
+ */
+ // private function addDismissHandler(event:Event):void
+ // {
+ // var host:UIBase = UIUtils.findPopUpHost(_strand as UIBase) as UIBase;
+ // if (host) {
+ // host.addEventListener(MouseEvent.CLICK, dismissHandler);
+ // }
+ // }
+
+ /**
+ * @private
+ */
+ // private function removeDismissHandler():void
+ // {
+ // var host:UIBase = UIUtils.findPopUpHost(_strand as UIBase) as UIBase;
+ // if (host) {
+ // host.removeEventListener(MouseEvent.CLICK, dismissHandler);
+ // }
+ // }
+
+ /**
+ * @private
+ */
+ // private function dismissHandler(event:MouseEvent):void
+ // {
+ // var popup:IUIBase = IUIBase(viewBead.popUp);
+
+ // COMPILE::SWF {
+ // var before:IUIBase = event.targetBeforeBubbling["royale_wrapper"] as IUIBase;
+ // if (before) {
+ // while (before != null) {
+ // if (before == popup) return;
+ // before = before.parent as IUIBase;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS {
+ // var before:IUIBase = event.target as IUIBase;
+ // if (before) {
+ // while (before != null) {
+ // if (before == popup) return;
+ // before = before.parent as IUIBase;
+ // }
+ // }
+ // }
+
+ // viewBead.popUpVisible = false;
+ // // removeDismissHandler();
+ // }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/PopUpModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/PopUpModel.as
new file mode 100644
index 0000000..dd1ec26
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/PopUpModel.as
@@ -0,0 +1,142 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.models
+{
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The PopUpModel class bead defines the data associated with an org.apache.royale.jewel.PopUp
+ * component. This includes the duration - how long to show the view for.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class PopUpModel extends EventDispatcher implements IBeadModel
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function PopUpModel()
+ {
+ super();
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ // private var _message:String;
+
+ // [Bindable("messageChange")]
+ // public function get message():String
+ // {
+ // return _message;
+ // }
+
+ /**
+ * Set message to be displayed.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function set message(value:String):void
+ // {
+ // if (value == null)
+ // value = "";
+ // if (value != _message)
+ // {
+ // _message = value;
+ // dispatchEvent(new Event("messageChange"));
+ // }
+ // }
+
+ // private var _action:String;
+
+ // [Bindable("actionChange")]
+ // public function get action():String
+ // {
+ // return _action;
+ // }
+
+ /**
+ * Set action to be displayed.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function set action(value:String):void
+ // {
+ // if (value != _action)
+ // {
+ // _action = value;
+ // dispatchEvent(new Event("actionChange"));
+ // }
+ // }
+
+ private var _duration:int = 4000;
+
+ [Bindable("durationChange")]
+ public function get duration():int
+ {
+ return _duration;
+ }
+
+ /**
+ * Set how long to show the view for.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set duration(value:int):void
+ {
+ if (value != _duration)
+ {
+ _duration = value;
+ dispatchEvent(new Event("durationChange"));
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/PopUpView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/PopUpView.as
new file mode 100644
index 0000000..f3aa3b1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/PopUpView.as
@@ -0,0 +1,235 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.views
+{
+ COMPILE::SWF
+ {
+ //import org.apache.royale.jewel.beads.views.TextInputView;
+ import flash.text.TextFieldType;
+ import flash.utils.setTimeout;
+ }
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+ import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.jewel.PopUp;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.core.IPopUp;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The PopUpView class is a bead for DateField that creates the
+ * input and button controls. This class also handles the pop-up
+ * mechanics.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class PopUpView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function PopUpView()
+ {
+ }
+
+ private var _content:UIBase;
+
+ public function get content():UIBase
+ {
+ if(!_content)
+ _content = loadBeadFromValuesManager(UIBase, "iPopUp", _strand) as UIBase;
+
+ return _content;
+ }
+ // public function set content(value:IPopUp):void
+ // {
+ // _content = value;
+ // }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function getHost():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ }
+
+ private var _popUp:StyledUIBase;
+ /**
+ * The pop-up component that will hold the real content
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUp():StyledUIBase
+ {
+ return _popUp;
+ }
+
+ private var _showingPopup:Boolean;
+ private var _popUpVisible:Boolean;
+ /**
+ * This property is true if the pop-up selection list is currently visible.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUpVisible():Boolean
+ {
+ return _popUpVisible;
+ }
+ public function set popUpVisible(value:Boolean):void
+ {
+ // prevent resursive calls
+ // setting _popUp.selectedDate below triggers a change event
+ // which tries to close the popup causing a recursive call.
+ // There might be a better way to resolve this problem, but this works for now...
+ if(_showingPopup)
+ return;
+
+ if (value != _popUpVisible)
+ {
+ _showingPopup = true;
+ _popUpVisible = value;
+ if (value)
+ {
+ _popUp = new StyledUIBase();
+ _popUp.className = "popup-content";
+ _popUp.addElement(content as IChild);
+ //_popUp.addEventListener("initComplete", handlePopUpInitComplete);
+
+ var host:IPopUpHost = UIUtils.findPopUpHost(getHost()) as IPopUpHost;
+ host.popUpParent.addElement(_popUp);
+ // viewBead.popUp is StyledUIBase that fills 100% of browser window-> We want "iPopUp content" inside
+ // daysTable = (popUp.view as DateChooserView).daysTable;
+ //PopUp(_strand).content = (popUp.view as PopUpView).content
+
+ // rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11, setInterval/Timer as well doesn't work right in Firefox
+ setTimeout(prepareForPopUp, 300);
+
+ COMPILE::JS
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+
+ autoResizeHandler();
+ }
+ else
+ {
+ UIUtils.removePopUp(_popUp);
+ COMPILE::JS
+ {
+ document.body.classList.remove("viewport");
+ window.removeEventListener('resize', autoResizeHandler, false);
+ }
+ //_popUp.removeEventListener("initComplete", handlePopUpInitComplete);
+ _popUp = null;
+ }
+ }
+ _showingPopup = false;
+ }
+
+ // COMPILE::JS
+ // private var rq:int;
+ private function prepareForPopUp():void
+ {
+ _popUp.addClass("open");
+ COMPILE::JS
+ {
+ //avoid scroll in html
+ document.body.classList.add("viewport");
+ //cancelAnimationFrame(rq);
+ }
+ }
+
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = document.body.getBoundingClientRect().width;
+ // handle potential scrolls offsets
+ var top:Number = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
+
+ var internalComponent:UIBase = content as UIBase;
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ var origin:Point = new Point(0, top);//_button.y + _button.height - top);
+ var relocated:Point = positionInsideBoundingClientRect(_strand, internalComponent, origin);
+ internalComponent.x = relocated.x;
+ internalComponent.y = relocated.y;
+ }
+ else
+ {
+ internalComponent.positioner.style.left = '50%';
+ internalComponent.positioner.style.top = 'calc(100% - 10px)';
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_popup.sass b/frameworks/projects/Jewel/src/main/sass/components/_popup.sass
new file mode 100644
index 0000000..f76005a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_popup.sass
@@ -0,0 +1,125 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel PopUp
+
+// PopUp variables
+$popup-content-margin-offset: 10px
+$popup-content-overlay-color: #000 !default
+$popup-content-overlay-opacity: .65 !default
+
+.jewel.popup
+ display: inline-flex
+
+.popup-content
+ position: fixed
+ pointer-events: none
+
+ bottom: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ background-color: rgba($popup-content-overlay-color, $popup-content-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+
+ .jewel.popupcontent
+ position: relative
+ transform: translate(-50%, 100%)
+ transition: none
+ will-change: transform, opacity
+
+ bottom: auto
+ top: calc(100% - #{$popup-content-margin-offset})
+ left: 50%
+ touch-action: none
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
+
+ opacity: 0
+
+ &.open
+ pointer-events: auto
+
+ &::before
+ opacity: 1
+
+ .jewel.popupcontent
+ transform: translate(-50%, -100%)
+ transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
+ opacity: 1
+
+@media (max-width: $tablet)
+ .popup-content
+ .jewel.popupcontent
+ width: calc(100% - #{2*$popup-content-margin-offset})
+
+@media (min-width: $tablet) and (max-width: $desktop)
+ .popup-content
+ .jewel.popupcontent
+ width: calc(100% - #{30*$popup-content-margin-offset})
+
+@media (min-width: $desktop)
+ .popup-content
+ &::before
+ background-color: rgba($popup-content-overlay-color, 0)
+ .jewel.popupcontent
+ // transform: translate(0px, -200px)
+ transform: none
+ transition: none
+ box-shadow: none !important
+
+ &.open
+ .jewel.popupcontent
+ transform: none
+ top: auto
+ left: auto
+
+
+
+j|PopUp
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.PopUpView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.PopUpModel")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.PopUpMouseController")
+ IPopUp: ClassReference("org.apache.royale.core.StyledUIBase")
+
+@media -royale-swf
+
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index a5d047e..7bc060f 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -44,6 +44,7 @@
@import "components/list"
@import "components/navigation"
@import "components/numericstepper"
+@import "components/popup"
@import "components/radiobutton"
@import "components/sectioncontent"
@import "components/slider"