This is iframe content01
This is iframe content02
Click maximize button or minimize button
ACT I SCENE I. Elsinore. A platform before the castle. FRANCISCO at his post. Enter to him BERNARDO BERNARDO Who's there? FRANCISCO Nay, answer me: stand, and unfold yourself. BERNARDO Long live the king! FRANCISCO Bernardo? BERNARDO He. FRANCISCO You come most carefully upon your hour. BERNARDO 'Tis now struck twelve; get thee to bed, Francisco. FRANCISCO For this relief much thanks: 'tis bitter cold, And I am sick at heart. BERNARDO Have you had quiet guard? FRANCISCO Not a mouse stirring. BERNARDO Well, good night. If you do meet Horatio and Marcellus, The rivals of my watch, bid them make haste. FRANCISCO I think I hear them. Stand, ho! Who's there? Enter HORATIO and MARCELLUS HORATIO Friends to this ground. MARCELLUS And liegemen to the Dane. FRANCISCO Give you good night. MARCELLUS O, farewell, honest soldier: Who hath relieved you? FRANCISCO Bernardo has my place. Give you good night. Exit MARCELLUS Holla! Bernardo! BERNARDO Say, What, is Horatio there? HORATIO A piece of him. BERNARDO Welcome, Horatio: welcome, good Marcellus. MARCELLUS What, has this thing appear'd again to-night? BERNARDO I have seen nothing. MARCELLUS Horatio says 'tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen of us: Therefore I have entreated him along With us to watch the minutes of this night; That if again this apparition come, He may approve our eyes and speak to it. HORATIO Tush, tush, 'twill not appear. BERNARDO Sit down awhile; And let us once again assail your ears, That are so fortified against our story What we have two nights seen. HORATIO Well, sit we down, And let us hear Bernardo speak of this. BERNARDO Last night of all, When yond same star that's westward from the pole Had made his course to illume that part of heaven Where now it burns, Marcellus and myself, The bell then beating one,-- Enter Ghost MARCELLUS Peace, break thee off; look, where it comes again! BERNARDO In the same figure, like the king that's dead. MARCELLUS Thou art a scholar; speak to it, Horatio. BERNARDO Looks it not like the king? mark it, Horatio. HORATIO Most like: it harrows me with fear and wonder. BERNARDO It would be spoke to. MARCELLUS Question it, Horatio. HORATIO What art thou that usurp'st this time of night, Together with that fair and warlike form In which the majesty of buried Denmark Did sometimes march? by heaven I charge thee, speak! MARCELLUS It is offended. BERNARDO See, it stalks away! HORATIO Stay! speak, speak! I charge thee, speak! Exit Ghost MARCELLUS 'Tis gone, and will not answer. BERNARDO How now, Horatio! you tremble and look pale: Is not this something more than fantasy? What think you on't? HORATIO Before my God, I might not this believe Without the sensible and true avouch Of mine own eyes. MARCELLUS Is it not like the king? HORATIO As thou art to thyself: Such was the very armour he had on When he the ambitious Norway combated; So frown'd he once, when, in an angry parle, He smote the sledded Polacks on the ice. 'Tis strange. MARCELLUS Thus twice before, and jump at this dead hour, With martial stalk hath he gone by our watch. HORATIO In what particular thought to work I know not; But in the gross and scope of my opinion, This bodes some strange eruption to our state. MARCELLUS Good now, sit down, and tell me, he that knows, Why this same strict and most observant watch So nightly toils the subject of the land, And why such daily cast of brazen cannon, And foreign mart for implements of war; Why such impress of shipwrights, whose sore task Does not divide the Sunday from the week; What might be toward, that this sweaty haste Doth make the night joint-labourer with the day: Who is't that can inform me? HORATIO That can I; At least, the whisper goes so. Our last king, Whose image even but now appear'd to us, Was, as you know, by Fortinbras of Norway, Thereto prick'd on by a most emulate pride, Dared to the combat; in which our valiant Hamlet-- For so this side of our known world esteem'd him-- Did slay this Fortinbras; who by a seal'd compact, Well ratified by law and heraldry, Did forfeit, with his life, all those his lands Which he stood seized of, to the conqueror: Against the which, a moiety competent Was gaged by our king; which had return'd To the inheritance of Fortinbras, Had he been vanquisher; as, by the same covenant, And carriage of the article design'd, His fell to Hamlet. Now, sir, young Fortinbras, Of unimproved mettle hot and full, Hath in the skirts of Norway here and there Shark'd up a list of lawless resolutes, For food and diet, to some enterprise That hath a stomach in't; which is no other-- As it doth well appear unto our state-- But to recover of us, by strong hand And terms compulsatory, those foresaid lands So by his father lost: and this, I take it, Is the main motive of our preparations, The source of this our watch and the chief head Of this post-haste and romage in the land. BERNARDO I think it be no other but e'en so: Well may it sort that this portentous figure Comes armed through our watch; so like the king That was and is the question of these wars. HORATIO A mote it is to trouble the mind's eye. In the most high and palmy state of Rome, A little ere the mightiest Julius fell, The graves stood tenantless and the sheeted dead Did squeak and gibber in the Roman streets: As stars with trains of fire and dews of blood, Disasters in the sun; and the moist star Upon whose influence Neptune's empire stands Was sick almost to doomsday with eclipse: And even the like precurse of fierce events, As harbingers preceding still the fates And prologue to the omen coming on, Have heaven and earth together demonstrated Unto our climatures and countrymen.-- But soft, behold! lo, where it comes again! Re-enter Ghost I'll cross it, though it blast me. Stay, illusion! If thou hast any sound, or use of voice, Speak to me: If there be any good thing to be done, That may to thee do ease and grace to me, Speak to me: Cock crows If thou art privy to thy country's fate, Which, happily, foreknowing may avoid, O, speak! Or if thou hast uphoarded in thy life Extorted treasure in the womb of earth, For which, they say, you spirits oft walk in death, Speak of it: stay, and speak! Stop it, Marcellus. MARCELLUS Shall I strike at it with my partisan? HORATIO Do, if it will not stand. BERNARDO 'Tis here! HORATIO 'Tis here! MARCELLUS 'Tis gone! Exit Ghost We do it wrong, being so majestical, To offer it the show of violence; For it is, as the air, invulnerable, And our vain blows malicious mockery. BERNARDO It was about to speak, when the cock crew. HORATIO And then it started like a guilty thing Upon a fearful summons. I have heard, The cock, that is the trumpet to the morn, Doth with his lofty and shrill-sounding throat Awake the god of day; and, at his warning, Whether in sea or fire, in earth or air, The extravagant and erring spirit hies To his confine: and of the truth herein This present object made probation. MARCELLUS It faded on the crowing of the cock. Some say that ever 'gainst that season comes Wherein our Saviour's birth is celebrated, The bird of dawning singeth all night long: And then, they say, no spirit dares stir abroad; The nights are wholesome; then no planets strike, No fairy takes, nor witch hath power to charm, So hallow'd and so gracious is the time. HORATIO So have I heard and do in part believe it. But, look, the morn, in russet mantle clad, Walks o'er the dew of yon high eastward hill: Break we our watch up; and by my advice, Let us impart what we have seen to-night Unto young Hamlet; for, upon my life, This spirit, dumb to us, will speak to him. Do you consent we shall acquaint him with it, As needful in our loves, fitting our duty? MARCELLUS Let's do't, I pray; and I this morning know Where we shall find him most conveniently. Exeunt SCENE II. A room of state in the castle. Enter KING CLAUDIUS, QUEEN GERTRUDE, HAMLET, POLONIUS, LAERTES, VOLTIMAND, CORNELIUS, Lords, and Attendants KING CLAUDIUS Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe, Yet so far hath discretion fought with nature That we with wisest sorrow think on him, Together with remembrance of ourselves. Therefore our sometime sister, now our queen, The imperial jointress to this warlike state, Have we, as 'twere with a defeated joy,-- With an auspicious and a dropping eye, With mirth in funeral and with dirge in marriage, In equal scale weighing delight and dole,-- Taken to wife: nor have we herein barr'd Your better wisdoms, which have freely gone With this affair along. For all, our thanks. Now follows, that you know, young Fortinbras, Holding a weak supposal of our worth, Or thinking by our late dear brother's death Our state to be disjoint and out of frame, Colleagued with the dream of his advantage, He hath not fail'd to pester us with message, Importing the surrender of those lands Lost by his father, with all bonds of law, To our most valiant brother. So much for him. Now for ourself and for this time of meeting: Thus much the business is: we have here writ To Norway, uncle of young Fortinbras,-- Who, impotent and bed-rid, scarcely hears Of this his nephew's purpose,--to suppress His further gait herein; in that the levies, The lists and full proportions, are all made Out of his subject: and we here dispatch You, good Cornelius, and you, Voltimand, For bearers of this greeting to old Norway; Giving to you no further personal power To business with the king, more than the scope Of these delated articles allow. Farewell, and let your haste commend your duty. CORNELIUS VOLTIMAND In that and all things will we show our duty. KING CLAUDIUS We doubt it nothing: heartily farewell. Exeunt VOLTIMAND and CORNELIUS And now, Laertes, what's the news with you? You told us of some suit; what is't, Laertes? You cannot speak of reason to the Dane, And loose your voice: what wouldst thou beg, Laertes, That shall not be my offer, not thy asking? The head is not more native to the heart, The hand more instrumental to the mouth, Than is the throne of Denmark to thy father. What wouldst thou have, Laertes? LAERTES My dread lord, Your leave and favour to return to France; From whence though willingly I came to Denmark, To show my duty in your coronation, Yet now, I must confess, that duty done, My thoughts and wishes bend again toward France And bow them to your gracious leave and pardon. KING CLAUDIUS Have you your father's leave? What says Polonius? LORD POLONIUS He hath, my lord, wrung from me my slow leave By laboursome petition, and at last Upon his will I seal'd my hard consent: I do beseech you, give him leave to go. KING CLAUDIUS Take thy fair hour, Laertes; time be thine, And thy best graces spend it at thy will! But now, my cousin Hamlet, and my son,-- HAMLET [Aside] A little more than kin, and less than kind. KING CLAUDIUS How is it that the clouds still hang on you? HAMLET Not so, my lord; I am too much i' the sun. QUEEN GERTRUDE Good Hamlet, cast thy nighted colour off, And let thine eye look like a friend on Denmark. Do not for ever with thy vailed lids Seek for thy noble father in the dust: Thou know'st 'tis common; all that lives must die, Passing through nature to eternity. HAMLET Ay, madam, it is common. QUEEN GERTRUDE If it be, Why seems it so particular with thee? HAMLET Seems, madam! nay it is; I know not 'seems.' 'Tis not alone my inky cloak, good mother, Nor customary suits of solemn black, Nor windy suspiration of forced breath, No, nor the fruitful river in the eye, Nor the dejected 'havior of the visage, Together with all forms, moods, shapes of grief, That can denote me truly: these indeed seem, For they are actions that a man might play: But I have that within which passeth show; These but the trappings and the suits of woe. KING CLAUDIUS 'Tis sweet and commendable in your nature, Hamlet, To give these mourning duties to your father: But, you must know, your father lost a father; That father lost, lost his, and the survivor bound In filial obligation for some term To do obsequious sorrow: but to persever In obstinate condolement is a course Of impious stubbornness; 'tis unmanly grief; It shows a will most incorrect to heaven, A heart unfortified, a mind impatient, An understanding simple and unschool'd: For what we know must be and is as common As any the most vulgar thing to sense, Why should we in our peevish opposition Take it to heart? Fie! 'tis a fault to heaven, A fault against the dead, a fault to nature, To reason most absurd: whose common theme Is death of fathers, and who still hath cried, From the first corse till he that died to-day, 'This must be so.' We pray you, throw to earth This unprevailing woe, and think of us As of a father: for let the world take note, You are the most immediate to our throne; And with no less nobility of love Than that which dearest father bears his son, Do I impart toward you. For your intent In going back to school in Wittenberg, It is most retrograde to our desire: And we beseech you, bend you to remain Here, in the cheer and comfort of our eye, Our chiefest courtier, cousin, and our son.================================================ FILE: public/examples/jaq/index.html ================================================
================================================ FILE: public/examples/jaq/position.html ================================================
Click Maximize button to maximize me.
Click Maximize button to maximize me.
It consists of a thin title bar and a closing button on the edge.
Click to close
Expanding from the (center,center)" }); //placed (1,0) jsFrame.createAnimator().set(createFrame01()) .fromPosition(0 + (1 * (frmWidth + marginWidth)) + offsetX, 0 + (0 * (frmHeight + marginHeight) + offsetY), 'LEFT_TOP') .fromWidth(0)//set starting width.If omitted, the original frame width is adopted. .fromHeight(0)//set starting height.If omitted, the original frame height is adopted. .toWidth(frmWidth) .toHeight(frmHeight) .start(1 * 350) //start after 350millis later .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Animation:
Expanding from the (left,top) of the frame." }); //placed (2,0) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (2 * (frmWidth + marginWidth)) + offsetX, frmHeight + (0 * (frmHeight + marginHeight) + offsetY), 'CENTER_BOTTOM') .fromWidth(frmWidth) .fromHeight(0) .toWidth(frmWidth) .toHeight(frmHeight) .start(2 * 350) //start after waiting .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Animation:
Expanding from the (center,bottom) of the frame." }); //placed (3,0) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth + (3 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (0 * (frmHeight + marginHeight) + offsetY), 'RIGHT_CENTER') .fromWidth(0) .fromHeight(frmHeight) .toWidth(frmWidth) .toHeight(frmHeight) .start(3 * 350) //start after waiting .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Animation:
Expanding from the (right,center) of the frame." }); //placed (0,1) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (0 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (1 * (frmHeight + marginHeight) + offsetY), 'CENTER_CENTER') .fromWidth(0) .fromHeight(0) .toWidth(frmWidth) .toHeight(0) .start(4 * 350) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "2-step Animation:
Expanding from the (center,center) of the frame." }); //placed (1,1) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (1 * (frmWidth + marginWidth)) + offsetX, 0 + (1 * (frmHeight + marginHeight) + offsetY), 'CENTER_TOP') .toWidth(frmWidth) .toHeight(0) .start(4 * 350 + 1 * 500) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "2-step animation:
Expanding from the (center,top) of the frame." }); //placed(2, 1) jsFrame.createAnimator().set(createFrame01()) .fromPosition(0 + (2 * (frmWidth + marginWidth)) + offsetX, frmHeight + (1 * (frmHeight + marginHeight) + offsetY), 'LEFT_BOTTOM') .toWidth(0) .toHeight(frmHeight) .start(4 * 350 + 2 * 500) //start after waiting .then(function (animatorObj) { return animatorObj.toWidth(frmWidth).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "2-step animation:
Expanding from the (left,bottom) of the frame." }); //placed(3, 1) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (3 * (frmWidth + marginWidth)) + offsetX, frmHeight + (1 * (frmHeight + marginHeight) + offsetY), 'CENTER_BOTTOM') .toWidth(0) .toHeight(frmHeight) .start(4 * 350 + 3 * 500) //start after waiting .then(function (animatorObj) { return animatorObj.toWidth(frmWidth).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "2-step animation:
Expanding from the (center,bottom) of the frame." }); //To be placed (3,2) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (0 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (2 * (frmHeight + marginHeight) + offsetY), 'CENTER_CENTER') .fromWidth(0) .fromHeight(0) .toWidth(frmWidth) .toHeight(0) .start(4 * 350 + 4 * 500) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Move after resizing:
Expanding from the (center,center) of the frame."; return animatorObj .setDuration(500) .toX(frmWidth / 2 + (3 * (frmWidth + marginWidth)) + offsetX).start(); }); //To be placed (2,2) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (0 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (2 * (frmHeight + marginHeight) + offsetY), 'CENTER_CENTER') .fromWidth(0) .fromHeight(0) .toWidth(frmWidth) .toHeight(0) .start(4 * 350 + 4 * 500 + 1 * 1000) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Move after resizing:
Expanding from the (center,center) of the frame."; return animatorObj .setDuration(400) .toX(frmWidth / 2 + (2 * (frmWidth + marginWidth)) + offsetX).start(); }); //To be placed (1,2) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (0 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (2 * (frmHeight + marginHeight) + offsetY), 'CENTER_CENTER') .fromWidth(0) .fromHeight(0) .toWidth(frmWidth) .toHeight(0) .start(4 * 350 + 4 * 500 + 2 * 1000) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Move after resizing:
Expanding from the (center,center) of the frame."; return animatorObj .setDuration(300) .toX(frmWidth / 2 + (1 * (frmWidth + marginWidth)) + offsetX).start(); }); //placed (0,2) jsFrame.createAnimator().set(createFrame01()) .fromPosition(frmWidth / 2 + (0 * (frmWidth + marginWidth)) + offsetX, frmHeight / 2 + (2 * (frmHeight + marginHeight) + offsetY), 'CENTER_CENTER') .fromWidth(0) .fromHeight(0) .toWidth(frmWidth) .toHeight(0) .start(4 * 350 + 4 * 500 + 3 * 1000) //start after waiting .then(function (animatorObj) { return animatorObj.toHeight(frmHeight).start(); }) .then(function (animatorObj) { animatorObj.get().getFrameView().innerHTML = "Final:
Expanding from the (center,center) of the frame." }); ================================================ FILE: public/examples/v100/ex06/ex06_style.js ================================================ function getOriginalStyle_ex06_01(fApr) { fApr.showTitleBar = false; fApr.showCloseButton = false; fApr.titleBarCaptionFontSize = '12px'; fApr.titleBarCaptionFontWeight = 'normal'; fApr.titleBarCaptionLeftMargin = '10px'; fApr.titleBarCaptionColorDefault = '#4d494d'; fApr.titleBarCaptionColorFocused = '#4d494d'; fApr.titleBarHeight = '5px'; fApr.titleBarColorDefault = 'white'; fApr.titleBarColorFocused = 'white'; fApr.titleBarBorderBottomDefault = null; fApr.titleBarBorderBottomFocused = null; fApr.frameBorderRadius = '6px'; //border width fApr.frameBorderWidthDefault = '1px'; fApr.frameBorderWidthFocused = '1px'; //border color fApr.frameBorderColorDefault = '#aaaaaa'; fApr.frameBorderColorFocused = '#aaaaaa'; fApr.frameBorderStyle = 'solid'; //window shadow fApr.frameBoxShadow = '2px 2px 5px rgba(0, 0, 0, 0.5)'; fApr.frameBackgroundColor = 'white'; fApr.frameComponents = new Array(); //adjustment value fApr.frameHeightAdjust =0;//10;// 2;//default is 1 return fApr; } ================================================ FILE: public/examples/v100/ex06/index.html ================================================
This is iframe content01
This is iframe content02
Click maximize button or minimize button
ACT I SCENE I. Elsinore. A platform before the castle. FRANCISCO at his post. Enter to him BERNARDO BERNARDO Who's there? FRANCISCO Nay, answer me: stand, and unfold yourself. BERNARDO Long live the king! FRANCISCO Bernardo? BERNARDO He. FRANCISCO You come most carefully upon your hour. BERNARDO 'Tis now struck twelve; get thee to bed, Francisco. FRANCISCO For this relief much thanks: 'tis bitter cold, And I am sick at heart. BERNARDO Have you had quiet guard? FRANCISCO Not a mouse stirring. BERNARDO Well, good night. If you do meet Horatio and Marcellus, The rivals of my watch, bid them make haste. FRANCISCO I think I hear them. Stand, ho! Who's there? Enter HORATIO and MARCELLUS HORATIO Friends to this ground. MARCELLUS And liegemen to the Dane. FRANCISCO Give you good night. MARCELLUS O, farewell, honest soldier: Who hath relieved you? FRANCISCO Bernardo has my place. Give you good night. Exit MARCELLUS Holla! Bernardo! BERNARDO Say, What, is Horatio there? HORATIO A piece of him. BERNARDO Welcome, Horatio: welcome, good Marcellus. MARCELLUS What, has this thing appear'd again to-night? BERNARDO I have seen nothing. MARCELLUS Horatio says 'tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen of us: Therefore I have entreated him along With us to watch the minutes of this night; That if again this apparition come, He may approve our eyes and speak to it. HORATIO Tush, tush, 'twill not appear. BERNARDO Sit down awhile; And let us once again assail your ears, That are so fortified against our story What we have two nights seen. HORATIO Well, sit we down, And let us hear Bernardo speak of this. BERNARDO Last night of all, When yond same star that's westward from the pole Had made his course to illume that part of heaven Where now it burns, Marcellus and myself, The bell then beating one,-- Enter Ghost MARCELLUS Peace, break thee off; look, where it comes again! BERNARDO In the same figure, like the king that's dead. MARCELLUS Thou art a scholar; speak to it, Horatio. BERNARDO Looks it not like the king? mark it, Horatio. HORATIO Most like: it harrows me with fear and wonder. BERNARDO It would be spoke to. MARCELLUS Question it, Horatio. HORATIO What art thou that usurp'st this time of night, Together with that fair and warlike form In which the majesty of buried Denmark Did sometimes march? by heaven I charge thee, speak! MARCELLUS It is offended. BERNARDO See, it stalks away! HORATIO Stay! speak, speak! I charge thee, speak! Exit Ghost MARCELLUS 'Tis gone, and will not answer. BERNARDO How now, Horatio! you tremble and look pale: Is not this something more than fantasy? What think you on't? HORATIO Before my God, I might not this believe Without the sensible and true avouch Of mine own eyes. MARCELLUS Is it not like the king? HORATIO As thou art to thyself: Such was the very armour he had on When he the ambitious Norway combated; So frown'd he once, when, in an angry parle, He smote the sledded Polacks on the ice. 'Tis strange. MARCELLUS Thus twice before, and jump at this dead hour, With martial stalk hath he gone by our watch. HORATIO In what particular thought to work I know not; But in the gross and scope of my opinion, This bodes some strange eruption to our state. MARCELLUS Good now, sit down, and tell me, he that knows, Why this same strict and most observant watch So nightly toils the subject of the land, And why such daily cast of brazen cannon, And foreign mart for implements of war; Why such impress of shipwrights, whose sore task Does not divide the Sunday from the week; What might be toward, that this sweaty haste Doth make the night joint-labourer with the day: Who is't that can inform me? HORATIO That can I; At least, the whisper goes so. Our last king, Whose image even but now appear'd to us, Was, as you know, by Fortinbras of Norway, Thereto prick'd on by a most emulate pride, Dared to the combat; in which our valiant Hamlet-- For so this side of our known world esteem'd him-- Did slay this Fortinbras; who by a seal'd compact, Well ratified by law and heraldry, Did forfeit, with his life, all those his lands Which he stood seized of, to the conqueror: Against the which, a moiety competent Was gaged by our king; which had return'd To the inheritance of Fortinbras, Had he been vanquisher; as, by the same covenant, And carriage of the article design'd, His fell to Hamlet. Now, sir, young Fortinbras, Of unimproved mettle hot and full, Hath in the skirts of Norway here and there Shark'd up a list of lawless resolutes, For food and diet, to some enterprise That hath a stomach in't; which is no other-- As it doth well appear unto our state-- But to recover of us, by strong hand And terms compulsatory, those foresaid lands So by his father lost: and this, I take it, Is the main motive of our preparations, The source of this our watch and the chief head Of this post-haste and romage in the land. BERNARDO I think it be no other but e'en so: Well may it sort that this portentous figure Comes armed through our watch; so like the king That was and is the question of these wars. HORATIO A mote it is to trouble the mind's eye. In the most high and palmy state of Rome, A little ere the mightiest Julius fell, The graves stood tenantless and the sheeted dead Did squeak and gibber in the Roman streets: As stars with trains of fire and dews of blood, Disasters in the sun; and the moist star Upon whose influence Neptune's empire stands Was sick almost to doomsday with eclipse: And even the like precurse of fierce events, As harbingers preceding still the fates And prologue to the omen coming on, Have heaven and earth together demonstrated Unto our climatures and countrymen.-- But soft, behold! lo, where it comes again! Re-enter Ghost I'll cross it, though it blast me. Stay, illusion! If thou hast any sound, or use of voice, Speak to me: If there be any good thing to be done, That may to thee do ease and grace to me, Speak to me: Cock crows If thou art privy to thy country's fate, Which, happily, foreknowing may avoid, O, speak! Or if thou hast uphoarded in thy life Extorted treasure in the womb of earth, For which, they say, you spirits oft walk in death, Speak of it: stay, and speak! Stop it, Marcellus. MARCELLUS Shall I strike at it with my partisan? HORATIO Do, if it will not stand. BERNARDO 'Tis here! HORATIO 'Tis here! MARCELLUS 'Tis gone! Exit Ghost We do it wrong, being so majestical, To offer it the show of violence; For it is, as the air, invulnerable, And our vain blows malicious mockery. BERNARDO It was about to speak, when the cock crew. HORATIO And then it started like a guilty thing Upon a fearful summons. I have heard, The cock, that is the trumpet to the morn, Doth with his lofty and shrill-sounding throat Awake the god of day; and, at his warning, Whether in sea or fire, in earth or air, The extravagant and erring spirit hies To his confine: and of the truth herein This present object made probation. MARCELLUS It faded on the crowing of the cock. Some say that ever 'gainst that season comes Wherein our Saviour's birth is celebrated, The bird of dawning singeth all night long: And then, they say, no spirit dares stir abroad; The nights are wholesome; then no planets strike, No fairy takes, nor witch hath power to charm, So hallow'd and so gracious is the time. HORATIO So have I heard and do in part believe it. But, look, the morn, in russet mantle clad, Walks o'er the dew of yon high eastward hill: Break we our watch up; and by my advice, Let us impart what we have seen to-night Unto young Hamlet; for, upon my life, This spirit, dumb to us, will speak to him. Do you consent we shall acquaint him with it, As needful in our loves, fitting our duty? MARCELLUS Let's do't, I pray; and I this morning know Where we shall find him most conveniently. Exeunt SCENE II. A room of state in the castle. Enter KING CLAUDIUS, QUEEN GERTRUDE, HAMLET, POLONIUS, LAERTES, VOLTIMAND, CORNELIUS, Lords, and Attendants KING CLAUDIUS Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe, Yet so far hath discretion fought with nature That we with wisest sorrow think on him, Together with remembrance of ourselves. Therefore our sometime sister, now our queen, The imperial jointress to this warlike state, Have we, as 'twere with a defeated joy,-- With an auspicious and a dropping eye, With mirth in funeral and with dirge in marriage, In equal scale weighing delight and dole,-- Taken to wife: nor have we herein barr'd Your better wisdoms, which have freely gone With this affair along. For all, our thanks. Now follows, that you know, young Fortinbras, Holding a weak supposal of our worth, Or thinking by our late dear brother's death Our state to be disjoint and out of frame, Colleagued with the dream of his advantage, He hath not fail'd to pester us with message, Importing the surrender of those lands Lost by his father, with all bonds of law, To our most valiant brother. So much for him. Now for ourself and for this time of meeting: Thus much the business is: we have here writ To Norway, uncle of young Fortinbras,-- Who, impotent and bed-rid, scarcely hears Of this his nephew's purpose,--to suppress His further gait herein; in that the levies, The lists and full proportions, are all made Out of his subject: and we here dispatch You, good Cornelius, and you, Voltimand, For bearers of this greeting to old Norway; Giving to you no further personal power To business with the king, more than the scope Of these delated articles allow. Farewell, and let your haste commend your duty. CORNELIUS VOLTIMAND In that and all things will we show our duty. KING CLAUDIUS We doubt it nothing: heartily farewell. Exeunt VOLTIMAND and CORNELIUS And now, Laertes, what's the news with you? You told us of some suit; what is't, Laertes? You cannot speak of reason to the Dane, And loose your voice: what wouldst thou beg, Laertes, That shall not be my offer, not thy asking? The head is not more native to the heart, The hand more instrumental to the mouth, Than is the throne of Denmark to thy father. What wouldst thou have, Laertes? LAERTES My dread lord, Your leave and favour to return to France; From whence though willingly I came to Denmark, To show my duty in your coronation, Yet now, I must confess, that duty done, My thoughts and wishes bend again toward France And bow them to your gracious leave and pardon. KING CLAUDIUS Have you your father's leave? What says Polonius? LORD POLONIUS He hath, my lord, wrung from me my slow leave By laboursome petition, and at last Upon his will I seal'd my hard consent: I do beseech you, give him leave to go. KING CLAUDIUS Take thy fair hour, Laertes; time be thine, And thy best graces spend it at thy will! But now, my cousin Hamlet, and my son,-- HAMLET [Aside] A little more than kin, and less than kind. KING CLAUDIUS How is it that the clouds still hang on you? HAMLET Not so, my lord; I am too much i' the sun. QUEEN GERTRUDE Good Hamlet, cast thy nighted colour off, And let thine eye look like a friend on Denmark. Do not for ever with thy vailed lids Seek for thy noble father in the dust: Thou know'st 'tis common; all that lives must die, Passing through nature to eternity. HAMLET Ay, madam, it is common. QUEEN GERTRUDE If it be, Why seems it so particular with thee? HAMLET Seems, madam! nay it is; I know not 'seems.' 'Tis not alone my inky cloak, good mother, Nor customary suits of solemn black, Nor windy suspiration of forced breath, No, nor the fruitful river in the eye, Nor the dejected 'havior of the visage, Together with all forms, moods, shapes of grief, That can denote me truly: these indeed seem, For they are actions that a man might play: But I have that within which passeth show; These but the trappings and the suits of woe. KING CLAUDIUS 'Tis sweet and commendable in your nature, Hamlet, To give these mourning duties to your father: But, you must know, your father lost a father; That father lost, lost his, and the survivor bound In filial obligation for some term To do obsequious sorrow: but to persever In obstinate condolement is a course Of impious stubbornness; 'tis unmanly grief; It shows a will most incorrect to heaven, A heart unfortified, a mind impatient, An understanding simple and unschool'd: For what we know must be and is as common As any the most vulgar thing to sense, Why should we in our peevish opposition Take it to heart? Fie! 'tis a fault to heaven, A fault against the dead, a fault to nature, To reason most absurd: whose common theme Is death of fathers, and who still hath cried, From the first corse till he that died to-day, 'This must be so.' We pray you, throw to earth This unprevailing woe, and think of us As of a father: for let the world take note, You are the most immediate to our throne; And with no less nobility of love Than that which dearest father bears his son, Do I impart toward you. For your intent In going back to school in Wittenberg, It is most retrograde to our desire: And we beseech you, bend you to remain Here, in the cheer and comfort of our eye, Our chiefest courtier, cousin, and our son.================================================ FILE: public/examples/v150/modal.html ================================================
================================================ FILE: public/examples/v150/position.html ================================================
JSFrame.js examplesAnchor of the window position
Try resizing BROWSER to make sure window is anchored in the bottom-right corner ================================================ FILE: public/examples/v160/alignment-not-fixed/index.html ================================================JSFrame.js examplesFixed and Not-fixed window
Try scrolling the screen:The JsFrame initialization options{fixed:true} or {fixed:false} allow you to set the window to be fixed or unfixed
================================================
FILE: public/examples/v160/alignment-not-fixed/lipsum.txt
================================================
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, justo non luctus feugiat, turpis sapien suscipit nulla, sit amet hendrerit nibh quam ut metus. Nulla nisl nulla, efficitur in purus non, dictum sagittis sem. Mauris varius pretium ex, quis sodales nibh malesuada eu. Nunc tempor sagittis felis ut ultricies. Mauris blandit risus dolor, in ullamcorper nulla vestibulum vel. Sed at lorem rutrum, vestibulum diam sed, aliquam massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id augue arcu. Aenean et tellus eget purus eleifend porttitor. Aenean elementum, ipsum vel feugiat lobortis, elit justo ultricies odio, vel commodo mauris eros et ipsum. Curabitur eu bibendum leo. Aliquam rhoncus ac tellus at mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras lobortis lacus libero, vitae commodo nulla cursus eget.
Morbi neque enim, finibus sed sapien ac, fermentum ultricies massa. Sed eget gravida justo. Praesent velit lorem, maximus at dui quis, iaculis sollicitudin metus. Etiam non maximus erat, ut tempus dui. Donec leo dui, pellentesque in nisl id, ultricies dapibus mauris. Nullam luctus molestie commodo. Sed accumsan leo vitae urna malesuada sodales in vel leo. Curabitur tincidunt fringilla magna, eget pharetra arcu convallis eget. Pellentesque et venenatis sapien. Cras bibendum tempus eleifend. Nam rhoncus vel massa vel efficitur. Sed vestibulum pretium risus, et gravida elit euismod id. Mauris dignissim metus in justo consectetur ullamcorper.
Donec hendrerit blandit purus sed pulvinar. Donec finibus laoreet ex ut vestibulum. Aliquam ut sagittis mi. Curabitur imperdiet justo ac ornare euismod. Nunc sed convallis sapien, quis bibendum purus. Suspendisse tincidunt pulvinar tortor, sed volutpat orci faucibus sagittis. Aenean ac mollis magna. Nullam viverra tortor ac iaculis facilisis. Vivamus sodales massa nisi, suscipit molestie ipsum lobortis rhoncus. Fusce vel fringilla ipsum, ac bibendum nisi. Sed tempus neque in ante egestas, vel eleifend justo ultrices. Praesent consequat massa at ex porttitor, et interdum ligula suscipit. Nam nec turpis ut arcu porttitor sodales efficitur eu augue. Praesent eget aliquet leo, in rutrum odio. Pellentesque sagittis est id risus efficitur placerat.
Quisque finibus, lacus et bibendum vestibulum, neque sapien euismod tortor, nec sollicitudin tellus orci id leo. Nulla nunc neque, faucibus id placerat sed, sagittis vel nisl. Nam sollicitudin gravida nisl, at mollis augue elementum ac. Nam laoreet pellentesque ex, varius lobortis nisi pretium sed. Duis consectetur gravida mauris aliquet condimentum. Cras ultricies eros sit amet mi consectetur lacinia. Nam turpis tellus, rhoncus sed porttitor ut, rutrum eget enim. Nulla facilisi.
In maximus, quam ac tempus euismod, nunc quam sagittis dui, et mattis risus ante a ante. Aliquam ornare odio arcu, in tempus nulla suscipit ut. In laoreet convallis pretium. Etiam ac tortor id lectus dictum pharetra. Morbi imperdiet quam eu enim dignissim blandit. Morbi sed sollicitudin lorem, quis iaculis nulla. Mauris auctor, mauris suscipit bibendum semper, mi ligula commodo enim, a imperdiet erat mi in erat. Aenean vel elit mollis, ornare sem nec, vulputate lorem. Duis leo nulla, ornare ut enim eget, feugiat sagittis tortor.
Ut lobortis ligula interdum imperdiet lobortis. Maecenas vehicula rutrum magna, sit amet pretium quam malesuada id. Pellentesque id pharetra ipsum. Duis sit amet feugiat erat, et mollis ipsum. In vitae tempus nibh. Aliquam fringilla ligula neque. Suspendisse fringilla velit blandit rhoncus pulvinar. Cras scelerisque fermentum risus nec venenatis.
Quisque dignissim lobortis dapibus. Vivamus at pretium dolor, non tempor leo. Nam dui mauris, commodo et fermentum et, vestibulum quis nibh. Sed nec luctus turpis. Integer dictum aliquet ex a semper. Integer eget erat sapien. Vestibulum et magna rhoncus, pharetra ante in, maximus erat. Maecenas nec orci mollis, ultrices est at, sodales sapien. Morbi malesuada eros sed lacus mattis varius. Mauris ipsum nisl, hendrerit sit amet arcu non, ultrices interdum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non ex eu mauris vehicula aliquet et et purus. Curabitur tristique, neque quis vehicula tempus, elit elit imperdiet velit, in pretium quam nibh non diam.
Ut nec mi vitae sapien sagittis iaculis. Ut varius orci neque, nec pretium lacus vestibulum non. Nunc viverra diam sed est semper tristique. Vivamus nec aliquam urna. In sagittis tristique lectus, in posuere augue pellentesque in. Nulla cursus, tortor ut malesuada suscipit, elit justo laoreet dolor, vel dapibus neque lorem at purus. Vivamus quis consectetur dolor. Nunc vel ligula eros. Quisque vehicula sit amet enim nec tempus. Etiam at turpis non ligula dictum dictum. Nunc non mauris fermentum, varius massa id, facilisis tortor. Aenean pulvinar eu turpis quis pharetra. Morbi aliquam nisl at porttitor consequat. Nunc eu mauris malesuada, vulputate sapien et, ullamcorper tortor. Cras vulputate a urna quis imperdiet.
Sed eu magna at elit iaculis efficitur et ut felis. Maecenas id ultrices lacus. Curabitur rutrum pulvinar ipsum, vitae maximus eros laoreet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse id dui leo. Pellentesque posuere at ex at tincidunt. Proin lectus odio, luctus at mattis sit amet, iaculis sit amet nisi. Donec eleifend consectetur ligula at facilisis. Proin vitae neque diam. Aenean sollicitudin quis ipsum vitae facilisis. Donec id mauris elementum, cursus dui quis, rutrum ante. Sed nec laoreet lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras vestibulum, augue et hendrerit efficitur, ipsum est rhoncus neque, sit amet viverra diam elit id arcu.
Sed lacus leo, tristique tristique dui at, vestibulum congue urna. Suspendisse et ante risus. Curabitur condimentum congue lectus, eget tincidunt nisl consequat consequat. Phasellus ligula nibh, eleifend vel sapien nec, rhoncus fermentum orci. Donec auctor diam sed metus lobortis, eget ullamcorper ante maximus. Nullam nec elit vitae lorem hendrerit dapibus. Integer eleifend cursus est sit amet pellentesque. Aliquam neque felis, auctor id finibus non, dapibus a nisi. Etiam viverra, lorem ac varius molestie, tellus mi lobortis ipsum, in tristique dui sapien ac justo. Quisque dictum, augue non bibendum sagittis, elit ligula sodales ante, sed finibus urna sapien at odio. Aenean pretium augue velit. Sed interdum turpis non metus sollicitudin, ac egestas odio interdum.
Fusce vestibulum iaculis ornare. Maecenas at ante eu metus consectetur luctus pellentesque vitae justo. Proin sagittis nec magna non placerat. Sed est nisi, ullamcorper eu rutrum at, venenatis ac nisl. Ut placerat, massa vel accumsan pellentesque, nunc ex suscipit nibh, non finibus purus augue eget massa. Quisque vel posuere dui. In mollis euismod dapibus.
Curabitur luctus convallis orci sed porta. Sed ornare nunc et congue aliquet. Etiam quis mattis justo. Donec enim mauris, blandit nec porttitor non, tincidunt a arcu. Donec sed tortor rhoncus, molestie felis venenatis, sagittis justo. In posuere imperdiet dapibus. Mauris sollicitudin, mi nec fermentum imperdiet, lacus ligula venenatis nunc, eget ullamcorper magna dolor condimentum libero. Sed odio mi, scelerisque eget placerat in, molestie non risus. Nam ac metus enim.
Curabitur posuere libero tortor, a laoreet dui molestie vel. Vivamus ullamcorper accumsan ante, a varius purus bibendum id. Donec vel dolor nec turpis pretium auctor. Nunc quis volutpat sapien. Curabitur quam velit, gravida eget justo vitae, euismod imperdiet urna. Praesent ullamcorper dignissim feugiat. Praesent turpis enim, vulputate nec facilisis vitae, dignissim a dui.
Aenean ullamcorper nisi at pellentesque commodo. Nunc ullamcorper ultrices dui in hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla est leo, mollis vitae imperdiet vitae, interdum id justo. Nullam placerat nisl sagittis gravida dignissim. Aenean felis lorem, feugiat ut nisi ullamcorper, tincidunt facilisis augue. Aenean convallis varius varius. Donec a risus vehicula, vulputate dui a, mattis sem. Phasellus vehicula feugiat augue. Sed tristique, ipsum nec mollis venenatis, est risus semper nisi, ac egestas ligula erat et lacus.
Phasellus augue elit, pharetra eu pulvinar sed, gravida ut dui. Nam bibendum, turpis nec dapibus congue, magna orci luctus diam, a consequat justo sapien ut tortor. Quisque quis facilisis dui. Integer ullamcorper congue nulla ut scelerisque. Cras ac semper erat. Morbi cursus eros metus, in egestas quam ornare in. Nullam convallis scelerisque nisl, quis mollis arcu maximus non. Cras metus nibh, vulputate in turpis in, elementum dignissim urna. Etiam magna mauris, venenatis quis euismod in, mattis in nibh. Mauris justo lectus, vestibulum ac commodo vitae, interdum a quam. Nam feugiat luctus molestie. Etiam ligula est, tempor eu lacus vitae, convallis elementum tellus. Praesent faucibus tellus quis porttitor fringilla. Etiam pulvinar quam posuere, volutpat odio id, feugiat erat. Duis id magna libero.
Praesent semper auctor bibendum. Suspendisse tincidunt bibendum nisi, a rhoncus dui. Integer blandit blandit nisl quis congue. Pellentesque eget erat id orci dapibus dignissim. Morbi iaculis eros felis, non pretium magna elementum vitae. Duis mattis elit et enim fringilla auctor. Nunc sed blandit justo, eu auctor dolor. Etiam sed suscipit ex.
Curabitur suscipit vulputate sem, id hendrerit felis dictum tempus. Pellentesque ultrices sem felis. Integer imperdiet arcu nec cursus aliquam. Curabitur suscipit, nisl gravida condimentum fermentum, tellus nibh condimentum magna, in pretium sem ligula a ipsum. Mauris scelerisque sit amet dui eu lacinia. Curabitur quis aliquet arcu. Donec ut dolor felis. Aliquam erat volutpat. Maecenas accumsan sem non lorem efficitur venenatis. Duis eu ante eget sapien feugiat tincidunt. Mauris congue varius massa quis molestie. Vivamus pharetra dolor non pharetra tempus. Vestibulum quis auctor dui, vitae tristique libero.
Aenean dui nisl, lacinia sit amet massa id, fringilla convallis sapien. Curabitur neque ex, pulvinar et vestibulum ac, blandit sed ligula. Duis commodo eleifend massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vel diam quis augue maximus varius. Proin tristique ante eget pulvinar sollicitudin. Donec gravida congue hendrerit. Nam molestie varius dolor sit amet semper. Cras varius eleifend dignissim. Quisque et purus quis erat vulputate elementum eu ut dui. Curabitur at semper nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices molestie porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent at orci tortor.
Proin fermentum, augue id gravida lobortis, massa orci vulputate augue, ut vestibulum nulla nunc vitae quam. Aliquam nulla neque, ornare vel quam a, scelerisque pulvinar magna. Sed mollis turpis ut magna congue semper. Aenean diam purus, dignissim sit amet lacus sed, malesuada fringilla ligula. Etiam sagittis non odio non finibus. Nunc rhoncus fermentum ligula, non varius purus tincidunt quis. Pellentesque cursus ipsum nunc, in semper nunc tempus sed. Maecenas et sapien ornare, viverra sem vel, posuere est. Nullam ultrices leo quis elit congue consequat.
Nulla facilisi. Aliquam erat volutpat. Suspendisse sed odio vehicula, dignissim magna eget, ullamcorper metus. Nam mauris lacus, tincidunt sed ex ut, fringilla pellentesque lectus. Nam posuere, elit nec commodo malesuada, dolor nisl maximus eros, et maximus nibh ligula ac tortor. Maecenas mattis bibendum tortor, in eleifend nulla imperdiet vel. Pellentesque viverra, dolor non mollis placerat, erat arcu interdum ipsum, nec euismod diam quam aliquet velit. Donec varius elementum velit, ac pharetra quam lacinia ut. Aenean porta ultrices arcu, at fringilla quam feugiat sit amet. Morbi porta, ante vitae sagittis ultrices, diam urna sodales magna, ut fermentum nisi nisl ut lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur rhoncus magna in egestas maximus. Nulla facilisi. Cras lobortis, orci id varius dignissim, nunc urna mattis turpis, nec ultrices purus massa ut augue. Proin eros justo, placerat at leo et, placerat sodales felis. Pellentesque cursus nibh at magna elementum laoreet. Nullam ut neque in ex bibendum consectetur. Maecenas at eros quis odio vulputate fringilla et a tellus. Vivamus ac dapibus lectus. Vestibulum fermentum elit lacus, a dictum velit placerat vitae. Maecenas enim ante, vestibulum vel venenatis non, efficitur in mauris.
Cras aliquam mattis interdum. Duis nec mauris ac est sollicitudin porttitor. Nam posuere faucibus ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in bibendum diam. Nullam eget neque vel nunc volutpat pharetra. Suspendisse ultricies quam eget orci ullamcorper bibendum. Vestibulum congue ex nec lorem vestibulum finibus. Nullam libero risus, sagittis ac dolor eget, imperdiet convallis libero. Aliquam id nulla quis urna aliquam dapibus vitae ac erat. Aenean a ligula ut lorem mollis placerat. Nullam mi felis, rhoncus in turpis consectetur, sagittis iaculis quam.
Nulla id vestibulum lectus, ac convallis tellus. Ut lorem justo, molestie a nibh non, pulvinar vehicula lectus. Quisque tempor quis neque eu sollicitudin. Duis commodo sapien et turpis scelerisque venenatis. Suspendisse sollicitudin ex ut turpis tincidunt, eu tempor libero vestibulum. Vivamus pellentesque sem et augue pulvinar tincidunt. Maecenas sit amet sapien elit. Integer ac feugiat lacus. Etiam feugiat felis sed tortor auctor, quis auctor nisl maximus. Ut tincidunt vulputate nulla at blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
In hac habitasse platea dictumst. Fusce sit amet consequat nibh. Donec consequat tortor quis erat malesuada convallis. Ut sed volutpat nulla. Suspendisse blandit, quam vel semper imperdiet, neque leo aliquet orci, sit amet fermentum enim orci in neque. Suspendisse dignissim sem quis est rutrum molestie. Morbi nibh ipsum, convallis et quam sit amet, laoreet hendrerit nibh. Sed imperdiet, sapien eu tincidunt fermentum, nibh lorem vestibulum ex, ac porttitor nulla turpis sit amet diam. Curabitur vitae volutpat metus, et semper ante. Cras blandit, lorem vel sagittis mollis, tortor dui congue nunc, sed semper neque turpis a urna. Donec facilisis nisl quis nibh viverra iaculis aliquet at lacus. Vivamus tincidunt tristique urna, vel pulvinar elit. Donec vel libero ornare, auctor nisl sed, lacinia lorem. Aliquam erat volutpat.
Fusce et lectus sodales nibh tempus auctor sed a enim. Donec ac nisi tortor. Maecenas imperdiet elit finibus cursus egestas. Sed maximus, sem quis suscipit eleifend, felis quam rhoncus ligula, et fringilla mauris dui in est. Nulla venenatis libero sit amet varius porttitor. Nullam ut leo porta, bibendum dolor id, tincidunt lorem. Praesent sed massa dapibus, pellentesque eros vel, consequat lacus. Mauris nec molestie justo. Duis accumsan justo sed leo convallis iaculis. Ut consequat nunc sit amet egestas consectetur. Nunc pretium quam in nisl sodales, nec feugiat diam convallis. Sed a convallis felis. Vivamus fermentum convallis elit, non cursus ex vulputate non. Aliquam rutrum justo erat, eu semper lorem hendrerit non.
Fusce bibendum molestie imperdiet. Aliquam aliquam, nunc non fermentum gravida, erat dolor ullamcorper odio, sit amet tincidunt augue tellus ut eros. In porta orci felis, non condimentum mi pulvinar at. Cras volutpat sed purus sed pretium. Sed fringilla neque augue. Nulla orci neque, porta vel pretium eget, malesuada in tellus. Ut euismod nunc vel condimentum vulputate. Maecenas ullamcorper eget dui et maximus.
In eu elit nulla. Sed id cursus elit. Sed aliquet congue euismod. Etiam a pellentesque purus. Integer ornare lacus sit amet interdum iaculis. Phasellus et ante vitae nunc porta elementum ac nec lacus. Etiam sit amet metus sollicitudin, laoreet libero eget, tincidunt metus. Nulla facilisi. Nam auctor in nisi sed posuere. Curabitur at sapien maximus, lacinia nisl at, sodales nulla. Phasellus cursus sed quam in sollicitudin. Duis ac neque ac nisl luctus suscipit in a sem.
Phasellus consequat lectus ut enim tempus, at maximus felis suscipit. Nunc sit amet accumsan massa. Donec hendrerit mauris id tincidunt ornare. Nulla facilisi. Maecenas odio elit, egestas sodales nisl vitae, congue tempus nulla. Suspendisse tempus volutpat diam, sit amet consectetur ex semper in. Quisque in erat nec nulla auctor tristique. Etiam facilisis tempus sapien, ullamcorper laoreet diam porta luctus. Praesent iaculis libero nisl, quis efficitur felis placerat eget. Vestibulum fermentum mattis convallis. Nunc rhoncus magna a ullamcorper condimentum.
Nullam pharetra, nisi egestas sagittis euismod, tellus nibh gravida tortor, nec laoreet sem purus eu ex. Nam consectetur placerat vulputate. Mauris non mauris faucibus, euismod metus lacinia, gravida augue. Nullam vulputate lectus sit amet diam aliquam laoreet. Nullam aliquet nisl enim, efficitur viverra lectus semper vel. Nullam dapibus est justo. Morbi id arcu nisi. Suspendisse purus mi, fermentum non ex ac, congue semper ligula. In hac habitasse platea dictumst. Donec auctor sollicitudin neque a condimentum. Praesent velit mi, sagittis sit amet orci vel, viverra tempor quam. Donec eget leo quam. Nunc at tincidunt quam. Phasellus ac dignissim ipsum.
Praesent tincidunt nulla nec nulla imperdiet, eget pulvinar lacus venenatis. Sed placerat volutpat nibh non rutrum. Integer ac varius nulla. Vestibulum volutpat placerat finibus. Cras felis mauris, aliquet at lobortis nec, varius quis ligula. Nam pharetra diam et massa blandit, quis ornare quam venenatis. Aenean nec erat varius, dignissim orci ac, finibus erat. Mauris lacinia auctor sapien a egestas. Fusce vitae facilisis metus, sit amet malesuada nisl. Praesent ac molestie elit. Fusce euismod quis sem non finibus. Maecenas dolor erat, faucibus eu leo et, semper egestas libero. Maecenas urna ligula, pretium et aliquam at, gravida sit amet purus.
Morbi eu nisi lorem. Cras malesuada, felis sed maximus eleifend, lacus sapien sodales nisl, quis vestibulum tellus enim sit amet urna. Curabitur purus tortor, efficitur ut feugiat at, malesuada at sem. Donec tincidunt ullamcorper elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer malesuada libero et efficitur pharetra. Aenean tincidunt, dolor eu commodo posuere, massa quam egestas mi, ac cursus ante risus quis nulla. Praesent vitae nibh ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pharetra diam leo, non euismod nisl dictum a.
Mauris euismod, urna quis aliquam gravida, risus orci dictum velit, sed suscipit ex magna vel tellus. Pellentesque ex risus, eleifend scelerisque dui ut, facilisis dapibus nunc. Nam vitae tellus malesuada elit consequat faucibus quis quis mi. Nullam nec vulputate sapien. Quisque rhoncus fringilla molestie. Donec vehicula justo nec dui aliquam, vel mollis nunc feugiat. Nullam quis quam nec purus auctor sodales.
Aliquam risus nibh, porttitor at magna id, eleifend gravida elit. In venenatis turpis id ante viverra hendrerit. Etiam et nulla vitae nisl condimentum pellentesque. Phasellus rutrum finibus lorem. Aenean dui lorem, commodo a magna id, aliquet feugiat odio. Sed vel volutpat arcu. Pellentesque at neque quis eros posuere maximus. Suspendisse tincidunt nibh volutpat, ornare felis et, viverra ipsum. Curabitur non congue dolor, consequat maximus risus. Sed rhoncus, eros at ultricies dictum, magna tortor gravida tellus, non tincidunt felis velit sed urna. In hac habitasse platea dictumst. Fusce ut sem id enim aliquam congue. Nulla facilisi. Aenean rhoncus erat ut dolor efficitur, sit amet consequat felis bibendum. Vivamus mattis nisi felis, in ultrices enim accumsan vitae.
Morbi lobortis consectetur vulputate. Donec vel rhoncus tortor. Suspendisse sed tincidunt metus. In metus odio, aliquam laoreet ultrices sit amet, mattis eget eros. Fusce sit amet porta dolor. Maecenas aliquam pharetra nunc vitae mollis. Praesent quis ligula id nisi posuere pellentesque a nec arcu. Nulla at iaculis velit. In mi odio, mattis sit amet consequat et, bibendum eget risus. Duis aliquam dui volutpat orci viverra, quis volutpat nibh sagittis. Quisque suscipit, est eu pulvinar tempor, nulla risus lacinia justo, ac aliquet libero orci vel urna. Etiam ac erat at odio viverra suscipit. Nam lobortis maximus elementum. Proin finibus sed purus sed ullamcorper. Suspendisse sed nunc gravida, sollicitudin sapien at, tincidunt arcu.
Curabitur ultrices lectus est, a aliquet elit gravida nec. Donec eleifend eget orci nec accumsan. Vestibulum eu volutpat lectus, eget placerat nisl. Fusce feugiat varius sodales. Mauris erat urna, vestibulum vel congue at, volutpat a nisi. Nulla congue mi vitae orci elementum dictum. Aliquam nec iaculis ex. Praesent urna magna, consectetur a imperdiet sit amet, pulvinar non ipsum. Suspendisse ut felis sapien. Maecenas in est volutpat urna ornare tincidunt. Pellentesque sodales neque a est varius mollis. Vivamus a lectus eu enim rutrum tristique. Integer consectetur ligula eget rhoncus ullamcorper. Fusce quis elementum lorem.
Curabitur ac molestie odio. Suspendisse potenti. Fusce at est a arcu accumsan vestibulum. Sed eu justo nisl. Duis tincidunt lorem eu luctus aliquet. Donec euismod ipsum sit amet leo iaculis, quis varius sem tincidunt. Nulla at sagittis enim. Etiam lobortis lectus non dui luctus varius. Nam in tempus sapien. Suspendisse consequat arcu tellus, vehicula semper nisi blandit sed. Cras tincidunt diam a eros convallis cursus. Donec massa nulla, congue ut urna eu, consectetur euismod ligula.
Etiam at posuere purus, a dignissim est. Aliquam non velit et arcu ornare vulputate et vitae enim. Cras ultricies dictum semper. Aenean id magna aliquam, sagittis nisi sed, efficitur sem. Integer sodales mi et erat scelerisque, vel lobortis ante dapibus. In ut libero ac nisi finibus accumsan. Donec eu felis eget arcu faucibus imperdiet ac id ex. Vivamus ac rutrum mauris. Praesent sit amet lorem vestibulum tellus fringilla mollis.
Curabitur blandit, erat id congue pellentesque, lacus metus vehicula diam, a ullamcorper dui leo laoreet sem. Integer at lobortis urna. Nullam interdum ultricies arcu, semper maximus metus aliquet non. Aenean dignissim sagittis convallis. Nulla elit nisl, ultricies in fringilla et, lacinia quis felis. Ut ac rutrum odio, ac mollis nisi. Suspendisse non ligula eu nisi molestie porttitor. Sed vel ornare neque. Vestibulum quis sem vehicula magna hendrerit dictum. Donec facilisis tellus enim, non varius justo malesuada rutrum. Sed at egestas nunc, dapibus fringilla ligula. Donec ac libero enim. Duis quis scelerisque massa. Nullam a diam at sapien porttitor accumsan quis quis nisl. In non vehicula turpis, convallis aliquet ligula. Aliquam velit elit, laoreet eu lectus eget, tincidunt laoreet dui.
Integer sed consectetur nulla, mollis sollicitudin velit. Etiam tincidunt aliquam augue ut faucibus. Sed a dapibus elit, at dictum risus. Quisque scelerisque molestie sagittis. Suspendisse in orci ac nisl malesuada finibus. Mauris id arcu vitae leo ultrices eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ac auctor lacus, eget aliquet dui. Proin blandit diam a ipsum vulputate, quis tincidunt purus pharetra. Phasellus sed risus tincidunt leo porta feugiat. Proin feugiat lectus eros, at convallis ipsum mattis in. Vivamus ac est eget lacus vulputate blandit id sed elit. Etiam consequat, tortor sit amet auctor facilisis, ex lacus dapibus leo, et elementum mauris nunc sodales lectus. Aliquam elit lorem, scelerisque scelerisque lorem sit amet, elementum laoreet lacus. Aliquam vel bibendum ligula, accumsan eleifend velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Integer at ullamcorper lectus, quis luctus arcu. Phasellus bibendum ultricies odio pellentesque tempor. Sed lacinia a ante ut eleifend. Suspendisse tincidunt lacinia lorem quis scelerisque. Vivamus semper, ligula vel tincidunt ultricies, ligula urna bibendum dui, sit amet bibendum arcu nisl non metus. Aenean sed neque a mi interdum egestas in eu augue. Etiam nec quam accumsan, euismod elit vel, fermentum nisl. Proin massa massa, vehicula sed lacus semper, hendrerit egestas orci. Maecenas rutrum egestas purus, id pretium massa. Maecenas dictum gravida nisl, a pellentesque lectus rutrum quis. Aenean sodales rutrum ante, at suscipit risus tristique consequat. Vestibulum euismod sem mauris, ac scelerisque nisi posuere vel. Vestibulum bibendum augue ac purus posuere cursus. Nullam et diam at diam placerat accumsan. Nulla libero est, porta vel consequat id, volutpat et velit. Phasellus varius dui ac sem convallis eleifend.
Aenean euismod, sapien nec ultrices consequat, tellus dolor varius risus, vel ultrices lacus urna quis nisi. Sed accumsan porttitor pulvinar. Quisque pulvinar quis metus quis bibendum. Vestibulum varius augue sit amet tincidunt porttitor. Etiam egestas sodales ex, at fringilla mi maximus nec. Duis finibus vestibulum lorem, et cursus purus aliquam eu. Pellentesque sed dictum nibh. Curabitur tempor rutrum arcu, vitae sollicitudin elit rutrum ut. Donec non neque sit amet nisi efficitur sodales sit amet et justo. Maecenas sed bibendum ex. Suspendisse nec gravida nulla.
Nullam hendrerit pretium nunc tincidunt tempus. Proin scelerisque orci et ex ultrices, id ultricies eros consectetur. Mauris vel leo vel magna euismod vestibulum a et diam. Etiam est ipsum, varius eu elementum at, lacinia non ante. Donec imperdiet convallis enim, ac venenatis lorem ullamcorper sed. Integer a nisl eget lorem laoreet venenatis sed at ipsum. Mauris non consectetur arcu.
Suspendisse ut nibh mi. Praesent tortor purus, condimentum eu malesuada pretium, finibus a orci. Suspendisse potenti. Morbi dapibus nibh sed elit aliquet, sit amet aliquet eros accumsan. Praesent gravida a velit ut volutpat. Nullam nec tincidunt metus. Vestibulum sodales ante pharetra efficitur pretium. Aliquam quis mauris accumsan purus sagittis venenatis. Cras blandit varius arcu, in ultrices odio volutpat quis. Curabitur a enim hendrerit, facilisis velit eu, semper nunc. Praesent eget commodo augue. Nunc nec hendrerit ante, id maximus leo. Integer euismod nunc sit amet urna faucibus vulputate. Morbi aliquam ex in tortor imperdiet tincidunt.
Sed tempor vehicula pharetra. Aliquam iaculis volutpat tincidunt. Pellentesque libero nisl, condimentum id ipsum vitae, sagittis aliquet ligula. Nunc in lacus blandit, convallis tortor non, mollis est. Duis lorem quam, pulvinar ac augue eget, suscipit efficitur dui. Mauris ut magna ac lorem venenatis pretium sit amet a tellus. Cras posuere mattis faucibus. Quisque ultrices aliquam dignissim. Sed euismod vulputate quam, in dapibus ante dictum vel. Sed consequat arcu orci, a dapibus nisi consectetur eget. Nunc pretium quis dolor vel viverra.
Nunc in est quam. Vestibulum ultrices vehicula sagittis. Nam iaculis erat sed quam ullamcorper semper. Suspendisse sed rhoncus nibh, a egestas quam. Vestibulum mauris orci, sagittis quis nibh eu, mollis vulputate mauris. Integer sit amet tincidunt lacus. Pellentesque faucibus urna quis justo vestibulum, a gravida lacus sollicitudin. Duis placerat nulla sem, ut cursus odio suscipit vitae.
Aenean dictum nunc vel tellus consequat finibus. Aenean ut mattis turpis, id sodales odio. Aenean vel magna vitae quam rutrum porta et eget ex. Quisque iaculis fermentum tortor, nec porttitor arcu gravida et. Phasellus est dolor, blandit consectetur tincidunt in, laoreet quis ligula. Ut vitae sem tortor. Nunc sed magna eleifend, suscipit dui eget, bibendum lacus. Aliquam sed ipsum molestie, lobortis augue ut, commodo nibh. Nulla augue diam, dictum ut ornare ac, lobortis in dui. Vestibulum hendrerit sem felis, quis aliquet tellus tristique a. Fusce sed ligula sed lectus bibendum dictum. Nunc elit magna, tempor nec augue porttitor, lacinia convallis augue. Nulla sem tortor, maximus a elit id, scelerisque lacinia urna. Maecenas accumsan nisl vel nisl auctor elementum. Nulla risus turpis, porttitor nec dui eu, tempus imperdiet ligula. Aenean non sem augue.
Nam tristique purus sapien, et mollis neque molestie vel. Suspendisse placerat nunc eu nunc venenatis congue. Donec sit amet blandit dolor, eget iaculis nunc. Sed luctus orci sed est congue, nec vehicula arcu tempus. Proin in tempor metus. Proin ornare lectus interdum gravida aliquet. Pellentesque auctor sem erat, vitae pretium lacus gravida at. Duis ornare, urna sit amet gravida sollicitudin, lacus nibh volutpat dui, sit amet sagittis eros felis ut lacus. Cras a ipsum quis sem porttitor porttitor.
In accumsan metus ut metus faucibus, ac ullamcorper quam imperdiet. Morbi vitae gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam eu justo id dui imperdiet tristique. Ut arcu ante, gravida non rutrum facilisis, porta at mauris. Maecenas hendrerit consequat massa, at scelerisque elit bibendum eu. Donec molestie velit a volutpat convallis. Morbi posuere justo quis porttitor porttitor.
Duis non viverra libero. Sed nec lobortis nunc. Ut eget orci sollicitudin, tempor est nec, feugiat ante. Praesent elementum nulla purus, at mollis nulla tincidunt vel. Ut sollicitudin quis ante et dictum. Sed et suscipit eros, sit amet scelerisque est. Fusce tincidunt auctor elementum. Aenean non sagittis felis. Donec eleifend eu mauris euismod pellentesque. Donec sed tellus commodo, laoreet metus sit amet, feugiat lectus. Nulla facilisi. Sed scelerisque, nisi ut consectetur efficitur, turpis ante fringilla ante, a aliquam nibh enim eget nunc.
Maecenas posuere feugiat aliquam. Aenean iaculis quis tellus quis porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim eleifend ligula, at pulvinar nulla aliquet sed. Cras quis massa in magna ultrices tristique ac ut ligula. Vivamus id blandit justo, non sagittis sapien. Mauris eget blandit dui, tristique fringilla diam. Donec eu orci leo.
Nam lobortis, purus ut consequat pellentesque, libero nibh pulvinar sem, in fringilla nulla turpis sit amet metus. Proin ac porttitor ligula. Aenean mollis finibus efficitur. Phasellus tellus quam, scelerisque at urna in, porttitor feugiat quam. Aliquam erat volutpat. Integer porta, risus ut porttitor faucibus, risus nunc sodales lectus, ac auctor sem justo eu mi. Integer id est elit. Etiam nisi tortor, ornare a justo at, facilisis feugiat augue. Etiam in nunc ultrices, faucibus massa a, porta purus. Nullam ut ornare turpis. Fusce molestie a eros ac consectetur. Suspendisse nec nulla velit. Proin cursus dui lorem, id auctor sem laoreet at. Aliquam erat volutpat. Donec posuere lacus commodo diam placerat iaculis. Mauris quis vehicula eros.
Morbi ac lacus neque. Duis ut justo et eros laoreet elementum tempor eu urna. Cras volutpat ex tellus, id viverra nisl finibus eu. Fusce eget ligula sit amet dui hendrerit suscipit id lacinia lorem. Maecenas id metus quis metus dapibus tempor. In sit amet scelerisque ex, et viverra dolor. Phasellus suscipit non justo eu dapibus. Pellentesque sit amet gravida turpis. Sed mollis ligula eget pretium pretium. Duis faucibus dolor id convallis suscipit. Donec congue at ex vitae posuere. Nam vehicula ex eget neque mollis elementum. Ut semper accumsan mi sit amet mollis. Ut id odio vitae erat cursus imperdiet id eu eros. Fusce tellus risus, tempus eu fermentum vel, fringilla quis leo. Nulla ac quam leo.
Nunc vitae tortor sit amet nisi semper fringilla. Aliquam mattis enim vel elit ultrices ornare. Vivamus feugiat leo ullamcorper ullamcorper sollicitudin. Curabitur non nisi commodo, imperdiet lectus ac, consectetur urna. Suspendisse consectetur viverra dignissim. Aenean at sem dictum, varius tellus et, luctus libero. Morbi ante odio, euismod a velit ornare, consequat tristique tortor. Integer sit amet ullamcorper tortor. Praesent nulla augue, fermentum id eros ut, fermentum tincidunt nunc. Proin vel consectetur risus. Proin aliquet, ligula aliquam faucibus dictum, velit ipsum accumsan lacus, tincidunt luctus massa felis ornare lectus. Vestibulum eget massa felis. In hac habitasse platea dictumst.
Donec quis luctus lacus. Etiam volutpat aliquet nunc, sit amet sodales dui. Ut blandit dapibus metus, et eleifend tellus vehicula vehicula. Aenean cursus augue id ante vulputate aliquet. Vestibulum vitae felis neque. Vivamus ut elementum dui, vel convallis diam. Sed quam dolor, porta ac eros eget, semper placerat odio. Morbi vehicula aliquam dignissim. Quisque pellentesque nibh erat, eu pulvinar nibh lobortis vel. Nulla vitae ligula dignissim, efficitur quam ut, mollis leo. Nullam sed cursus mi.
In egestas nisi lectus, eu faucibus lacus mollis ut. Quisque quis libero metus. Nam lobortis vitae magna iaculis scelerisque. Vivamus ultricies odio vel ligula luctus accumsan. Etiam vulputate justo et gravida elementum. Ut interdum lectus leo, sed dapibus dolor sagittis non. Curabitur ante dui, tempus nec massa non, luctus mattis metus. Etiam bibendum, ligula id pretium finibus, nunc nunc rhoncus dolor, a dignissim augue purus et lectus. Vivamus placerat risus eget tortor commodo tincidunt. Maecenas a dignissim lacus. Sed fringilla nunc vel neque consectetur, sit amet facilisis dui vestibulum. Aliquam erat volutpat. Cras dapibus cursus quam in lobortis. Duis sit amet ultricies arcu. Maecenas at ligula ullamcorper odio auctor ullamcorper. Sed ut erat nisi.
Nulla facilisi. Aenean nec magna accumsan, vulputate sapien a, condimentum dolor. Praesent convallis nunc a venenatis euismod. In id lectus in ipsum laoreet faucibus. Duis semper libero est, et volutpat erat cursus at. Proin rutrum accumsan varius. Integer scelerisque mauris et dolor venenatis, ac porta lectus volutpat. Fusce at sem ac risus suscipit aliquet sed sed sem. Etiam quis pretium mi. Proin et convallis lorem, vel dictum nibh. Aliquam erat volutpat. Donec dictum libero et eleifend ullamcorper.
Phasellus massa est, aliquet vitae mollis ac, bibendum id felis. Quisque ipsum sapien, posuere sed elementum nec, ornare sit amet augue. Etiam magna risus, pellentesque ac ullamcorper eget, condimentum vitae ante. Sed placerat, lacus eu fringilla consequat, orci ligula egestas neque, quis laoreet nisl orci sed diam. Sed iaculis pulvinar nunc, viverra ultricies sem vehicula auctor. Fusce egestas sem sed ornare ullamcorper. Ut viverra purus metus, in convallis massa feugiat sed. Fusce ut massa pretium purus dapibus lobortis. Pellentesque accumsan libero a posuere iaculis. Pellentesque pharetra purus magna, in sagittis neque eleifend sit amet. Duis mollis nunc ac ante tincidunt, non egestas est blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget felis nunc.
Etiam elit quam, fringilla vel viverra sit amet, semper at sapien. Nunc lacus nunc, cursus quis vulputate eget, sodales ac diam. Sed tincidunt mauris ut sapien tincidunt, in consequat orci gravida. Vestibulum arcu diam, convallis nec ipsum ornare, scelerisque porttitor nibh. Duis vel nulla tempor, ultrices sapien et, pulvinar odio. Vivamus pretium interdum libero, vitae lacinia ex elementum ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sollicitudin elementum nisl, imperdiet scelerisque tortor pretium at. Curabitur mattis turpis in leo sagittis, at ultricies tortor auctor. Cras vel ornare ex, sed suscipit ligula. Sed nec elit ex. Suspendisse potenti. Aenean eget tortor accumsan, efficitur lorem ut, facilisis tellus.
Sed feugiat ipsum libero, in cursus nibh efficitur sed. Nulla eu augue ac metus dictum mollis. Morbi nec mi quam. Etiam hendrerit eget lacus ut gravida. Integer ultrices urna quis libero laoreet, ac blandit lorem facilisis. Aenean vehicula tempus mauris. Fusce facilisis odio in ex ultricies malesuada. Suspendisse eget feugiat mauris, sit amet semper dolor. Cras tortor nunc, efficitur eget tincidunt sodales, blandit et arcu. Maecenas pretium fringilla est, et ultricies risus. Mauris ac tristique elit. Donec pretium felis eu libero sagittis, volutpat fringilla ipsum mattis. Morbi urna justo, auctor et suscipit non, facilisis vitae justo. Fusce eget tincidunt purus.
Cras at pretium mi. Sed eu enim tincidunt, mollis diam sit amet, egestas justo. Ut maximus nunc non eleifend elementum. Ut gravida eget lorem et porta. Curabitur gravida placerat odio, non molestie massa faucibus sit amet. Quisque ac ante ut nisl sodales scelerisque. Donec at nibh vitae quam tincidunt sollicitudin sed id dui. Vivamus lacus odio, tincidunt vitae interdum non, vehicula et risus. Nullam porttitor sit amet nisi tempor dictum. Aliquam rutrum, lorem a rutrum viverra, sapien elit rhoncus purus, at facilisis velit nisl ac dolor. Maecenas id sapien magna. Phasellus eu ultricies metus, id sodales mi. Nam laoreet, nisi sed luctus auctor, metus nibh vulputate risus, ut auctor nisl metus vel ligula. Integer justo nisi, euismod id pharetra eget, consequat in risus. Maecenas a urna eget elit finibus suscipit. Donec a gravida enim, eget molestie metus.
Nulla hendrerit non ex vel lobortis. Pellentesque bibendum lectus quam, in finibus erat euismod eu. Sed accumsan posuere lectus et maximus. Pellentesque sodales luctus commodo. Aenean efficitur condimentum mi ac blandit. Phasellus malesuada, lorem vitae faucibus mattis, enim magna lacinia elit, sit amet vulputate nulla odio nec lacus. Mauris eget nunc convallis, viverra mauris vitae, sagittis dolor. Donec ante augue, molestie ac metus vitae, laoreet lacinia nisi. In vestibulum erat sit amet laoreet sagittis. Donec scelerisque condimentum imperdiet. Cras congue dolor ac volutpat vulputate. Donec id egestas lorem. Donec ultrices vitae eros placerat luctus. Nullam facilisis eget mauris in dignissim.
Aliquam erat volutpat. Aenean blandit fermentum sem a pellentesque. Vestibulum porta elementum accumsan. Phasellus ut sagittis justo, eu dictum purus. Nam venenatis lorem eu ipsum auctor vehicula nec at justo. Morbi venenatis sed metus eget egestas. Aliquam sed justo ultricies, facilisis tortor lacinia, facilisis sem.
Sed auctor iaculis urna. Mauris ut tellus finibus tortor vestibulum lobortis. In hac habitasse platea dictumst. Curabitur pulvinar augue sit amet eros semper, ut suscipit nisl viverra. Ut fringilla sit amet metus at mattis. Phasellus ultricies velit nec odio imperdiet tincidunt finibus id ipsum. Integer porttitor sem quis neque sollicitudin, a dictum dolor finibus. Curabitur et laoreet risus, non pulvinar nisi. Cras massa turpis, consectetur non enim sit amet, pulvinar placerat purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris a pellentesque enim. Duis ullamcorper ut tortor sed tempor. Etiam scelerisque accumsan laoreet. Vestibulum vehicula, nisi quis blandit efficitur, lacus magna venenatis orci, in iaculis dui nunc nec velit. Maecenas nec lacus et ante tincidunt finibus et a erat.
Suspendisse eros diam, euismod vitae sagittis sit amet, malesuada non sapien. Phasellus ultrices ullamcorper lacus, vitae sodales mauris semper eu. Phasellus laoreet nibh ante, eget consectetur diam vestibulum ac. Quisque et mattis nibh. Duis turpis arcu, euismod dictum efficitur nec, viverra vitae orci. Sed pulvinar lacinia nunc, id pulvinar diam interdum a. Pellentesque egestas hendrerit justo, vehicula vulputate leo aliquet eget. Praesent sit amet tincidunt ex. Integer blandit nibh id neque efficitur elementum.
Aliquam pharetra hendrerit lectus, at euismod tortor sagittis vel. Mauris tristique hendrerit felis, quis maximus mauris aliquet nec. Nullam mattis cursus bibendum. Nullam sagittis varius ex. In hac habitasse platea dictumst. Pellentesque faucibus tellus ac felis consectetur blandit. Praesent interdum, nisi eget vehicula accumsan, velit neque convallis neque, eget volutpat nisl risus id ex. Ut sed imperdiet justo. Donec tempor mattis volutpat. Quisque vel dui at dolor tincidunt bibendum. Donec suscipit, tortor et mattis venenatis, nisi nibh rhoncus nunc, semper consequat quam lectus ut eros. Vivamus sagittis augue sodales interdum viverra. Nunc tellus magna, vestibulum nec quam at, venenatis sagittis erat. Etiam vel ante leo. Cras quis arcu in lorem pharetra accumsan vitae vel enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aliquam erat volutpat. Donec porta felis ipsum, eleifend consequat tellus maximus vel. Vestibulum iaculis lacus nec viverra finibus. Nunc efficitur nisi tortor, non efficitur mauris porta et. Sed ac sagittis urna, in interdum ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi rutrum tempus consequat. Aenean tempus molestie vestibulum. Mauris non nisl massa. Vestibulum sollicitudin volutpat nunc, sit amet interdum eros tempus et. Aenean vel ante pellentesque, tincidunt risus nec, fringilla arcu. In sed purus eget magna tempus egestas.
Cras a commodo odio, a pharetra purus. Duis euismod, felis vitae tincidunt rhoncus, lacus arcu ornare est, sed hendrerit ligula nibh eu quam. Aliquam ornare imperdiet libero cursus suscipit. Sed cursus felis in efficitur molestie. Praesent finibus, ipsum vitae volutpat commodo, libero dui suscipit nisi, eu rutrum dui justo nec quam. Phasellus convallis fringilla neque, et interdum dolor finibus eget. Phasellus et elit eget lacus congue ultrices. Quisque ut arcu vitae risus molestie porttitor sit amet eget justo. Praesent eleifend leo ac lectus vestibulum, non feugiat orci ullamcorper. Sed sit amet accumsan lorem, ut laoreet ex. Nulla ac dapibus justo, at commodo dui. Proin sollicitudin, diam ac aliquam sollicitudin, tellus sem rhoncus dui, non suscipit justo leo vel arcu. Aliquam vehicula, neque eget finibus ultrices, odio dolor placerat orci, in tempor dui justo nec dolor. Quisque non mollis quam. Donec maximus ligula risus, semper fermentum ligula tincidunt quis. Integer ante dui, mollis non dictum et, aliquet efficitur erat.
Morbi consectetur, urna non varius pharetra, augue sapien blandit urna, lobortis congue turpis orci non velit. Suspendisse rhoncus tortor ac purus placerat venenatis. Integer vehicula metus diam, sed porttitor est bibendum nec. Nam tristique orci risus, eu pharetra justo ornare sit amet. Nunc congue tristique neque. Suspendisse non velit luctus, bibendum mi sed, eleifend arcu. Mauris id interdum dui. Mauris viverra neque felis, sit amet hendrerit nunc fermentum in. Sed iaculis rhoncus porttitor. Sed imperdiet volutpat convallis. Vestibulum id ipsum tellus.
Maecenas faucibus leo non sapien dapibus, vel congue elit porta. Cras egestas id dolor sed pulvinar. Curabitur tincidunt velit viverra tellus molestie, ac tincidunt nisi laoreet. Nam eget molestie libero. Etiam cursus suscipit mauris. Nullam vehicula justo at purus posuere aliquet. Duis in mauris maximus, hendrerit purus eget, eleifend nisi. Phasellus ut justo tempus, gravida sem sit amet, facilisis tellus. Pellentesque dolor neque, ornare nec felis non, tincidunt varius sem. Cras consectetur nunc eu risus ultricies, at bibendum libero consectetur. Ut eu fermentum nunc, et tempus augue. Praesent in lorem eu libero lobortis pulvinar id ac magna.
Praesent egestas auctor mauris, in posuere ante cursus nec. Etiam turpis metus, porttitor eget ex vel, dignissim interdum arcu. Donec nec nisi quam. Nunc ac mollis justo, ut commodo lectus. Nunc pharetra gravida lectus. Maecenas consectetur condimentum nunc, in maximus ipsum vehicula id. In nec libero tortor. Duis viverra eros nunc, vitae faucibus augue faucibus a. Cras ornare aliquam mauris, non dignissim felis posuere ut. Mauris tempor vehicula rhoncus. Etiam eleifend euismod risus, non porttitor sapien viverra nec. Nunc a gravida tellus.
Donec tempus rhoncus ipsum, et ullamcorper dui cursus id. Sed sed quam feugiat, sollicitudin eros eget, convallis eros. Aenean tincidunt rhoncus massa at mattis. Suspendisse a rutrum ante. Aliquam erat volutpat. Maecenas dictum rhoncus turpis, ac posuere arcu faucibus sit amet. Curabitur cursus euismod odio in hendrerit. Aenean blandit dignissim malesuada. Vivamus massa turpis, vehicula faucibus bibendum eu, porta non velit. Fusce sit amet metus vulputate, congue odio ac, blandit odio. Fusce sodales pharetra ipsum, vel commodo augue mollis in. Fusce ut ante maximus, blandit lectus sed, auctor erat. Donec eget nibh dui.
Donec tempor placerat nisl et maximus. Mauris sit amet dolor cursus enim eleifend pellentesque. Cras finibus nulla in lectus ornare laoreet. In at nisi semper, rhoncus arcu vitae, maximus urna. Donec lectus erat, lobortis rutrum justo id, fermentum pellentesque ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum fermentum metus ac sagittis. Nam faucibus venenatis augue, euismod rutrum augue sagittis ac. Duis eget est sit amet lacus consequat pharetra sollicitudin vel elit. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Cras fringilla tellus sed augue dictum, a elementum dui vestibulum. Pellentesque sed eleifend erat. Nam sed maximus nunc. Phasellus lacus justo, maximus vitae eleifend at, lacinia et nibh. Suspendisse eros quam, scelerisque faucibus nulla eget, tincidunt posuere tellus. Mauris ullamcorper erat sapien, sit amet maximus neque aliquet tincidunt. Pellentesque cursus augue a ligula hendrerit rhoncus. In auctor nec metus quis suscipit. Cras dapibus elit ac lacus imperdiet pretium. Integer libero metus, vulputate in iaculis eget, viverra eu purus. Nullam ornare vehicula dui in faucibus. Etiam dapibus nisi urna, eget elementum nulla eleifend eget.
Proin tristique egestas tempus. Nulla feugiat felis at pretium efficitur. Quisque at massa sapien. Fusce vel dolor cursus, finibus tellus quis, dignissim ante. Curabitur quis orci eget quam tempus ultrices eu non sapien. Sed eu rutrum ligula, ac dictum arcu. Nam a quam massa. Quisque venenatis urna et metus ornare tempor in ornare massa.
Donec congue ac neque quis dictum. Proin eget mauris finibus arcu euismod blandit eu a elit. Donec sed tempus ligula, non vehicula quam. Donec eu ipsum quis diam ultricies condimentum sed sit amet sem. Phasellus eleifend laoreet lorem et egestas. Mauris pharetra mi velit, sed bibendum erat luctus in. Nunc non vulputate turpis. Nulla facilisis dolor velit, id lobortis lectus hendrerit eget. Cras at dolor et enim vulputate tristique a sed urna. Duis sit amet nunc dapibus, sagittis dui non, rutrum ante. Morbi sed tincidunt eros. Duis at elementum sem.
Ut quis mollis orci. Fusce vulputate magna vitae dolor mattis pellentesque. Fusce volutpat erat at sapien congue, nec scelerisque massa vehicula. Maecenas lacinia ultricies massa. Maecenas in magna massa. Etiam rhoncus at dui quis malesuada. Nullam in magna ullamcorper, volutpat ex ut, ultrices arcu. Donec ac nisl nisi. Etiam tempor libero nec massa rutrum malesuada. Aliquam dictum erat sed ligula laoreet, vitae interdum elit sagittis. In hac habitasse platea dictumst. Donec sagittis dictum dui vitae vestibulum. Integer aliquet euismod ligula, in laoreet erat egestas eu. Vivamus dapibus dui nec purus bibendum sollicitudin.
Etiam dictum tempor est. Sed ut mattis ipsum. Aliquam vitae justo non velit vestibulum vulputate. Duis posuere consequat augue a ultrices. Nam posuere, dolor non ultrices pellentesque, purus lacus gravida nulla, venenatis tincidunt lorem metus in enim. Suspendisse sit amet lacus sit amet odio sagittis interdum et ut arcu. Quisque non nulla urna. Ut dignissim leo id lorem hendrerit eleifend vel sagittis massa. Donec fringilla aliquam tellus, vitae mollis nibh ornare nec. Integer id faucibus ex. Praesent lacinia aliquet quam.
Donec placerat lectus sit amet libero dictum dictum. Mauris tristique sem at lorem dapibus, a varius odio sodales. Cras gravida posuere elit id feugiat. Duis porttitor neque at tellus accumsan ornare. Nulla tincidunt vestibulum tellus, vel dignissim eros ultricies vitae. Vestibulum libero sapien, maximus id enim ac, blandit tincidunt lectus. Praesent ac luctus odio. Curabitur et nunc a velit facilisis posuere. Vestibulum suscipit iaculis libero, vel lobortis odio iaculis sit amet. Pellentesque nibh libero, placerat id tempor id, viverra a dolor. Fusce ornare ante eros. Proin ut blandit velit, eu porta nunc. Morbi tincidunt elit porttitor ex elementum imperdiet. Nullam at ligula mi. Proin dolor urna, volutpat vel urna vel, fringilla elementum mauris. Etiam ac tortor massa.
Integer gravida scelerisque porttitor. Fusce elementum, lacus eget commodo semper, erat quam pharetra ipsum, iaculis tincidunt erat sem ut leo. Vestibulum sodales velit in sapien ultricies fringilla. Aenean rhoncus justo sed nibh fermentum pretium. Nunc fringilla, tellus a bibendum suscipit, nulla nunc condimentum lacus, eu pulvinar arcu tellus vel ligula. Quisque malesuada interdum lorem, vitae finibus nunc auctor eu. Quisque non volutpat tellus, vel pharetra sem. Fusce sed tempor urna. Nunc a justo vehicula, porta mauris euismod, mollis neque. Phasellus a ligula tellus. Mauris rhoncus, lacus sit amet commodo ullamcorper, ligula elit lacinia magna, sed interdum neque lacus eu eros. Suspendisse convallis gravida nunc, ut faucibus massa faucibus eu. Mauris ornare nisi et mi consectetur mattis. Vestibulum blandit, orci ut consectetur lacinia, magna velit molestie dui, nec ultricies mauris velit non orci.
In pharetra id metus non tempor. Sed interdum nunc et dignissim vehicula. Etiam ut eros erat. Fusce sit amet nibh nec arcu mattis iaculis. Vivamus lacinia mi ut enim laoreet pulvinar. Etiam fringilla ipsum ut elit condimentum, id tempus leo bibendum. Aliquam porta quis felis ac imperdiet. Ut vitae viverra eros, ac sagittis est. Curabitur nec augue libero. Vivamus feugiat, odio et lacinia tempor, metus orci ornare sapien, in faucibus quam nisl sit amet nunc. Donec dapibus interdum ex.
Ut feugiat facilisis mauris nec iaculis. Maecenas eu orci ac purus tincidunt auctor a eget diam. Nullam et leo urna. Mauris ut facilisis nisl. Nam lacinia imperdiet diam vitae dignissim. Ut placerat efficitur massa, ut tempus urna vulputate a. Nullam hendrerit libero viverra quam pharetra, bibendum molestie justo condimentum.
Aliquam non luctus sapien, ultrices placerat nunc. Nullam bibendum porta efficitur. Nulla gravida et mauris id vehicula. Nunc turpis diam, viverra a orci eget, porta aliquam enim. Curabitur mattis ultricies ante volutpat suscipit. Quisque sodales non urna id dignissim. Sed sit amet volutpat nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras in aliquet augue. Cras consectetur erat ante, in viverra arcu imperdiet sed.
In auctor sapien at laoreet porttitor. Curabitur nec nisl finibus, congue velit et, rutrum nibh. Morbi maximus purus semper scelerisque scelerisque. Vivamus est neque, fringilla eget justo ac, condimentum posuere arcu. Vivamus a placerat erat, vel eleifend odio. Duis ante elit, posuere ac nibh et, hendrerit posuere eros. In hac habitasse platea dictumst. Nam vehicula eu arcu non sagittis. Nulla libero mi, egestas sed nisl id, mollis aliquam felis.
Mauris sed lobortis tellus. Sed eu orci enim. Proin quis erat at libero scelerisque blandit a ac ante. Cras risus libero, rutrum quis dignissim ut, facilisis vitae massa. In quis blandit tortor. Vestibulum diam mi, fermentum eget convallis quis, venenatis vitae arcu. Maecenas placerat erat at hendrerit tempus. Pellentesque commodo convallis accumsan. Cras nisi orci, iaculis at malesuada vel, volutpat eget justo. Aliquam in sodales est. Nulla non justo eu mauris tristique malesuada. Aenean ac finibus eros. Nam tempus libero a dapibus efficitur. Sed hendrerit sapien accumsan augue dignissim, eu euismod ex convallis. Praesent tempor tortor nisi, ac ultricies ipsum imperdiet vel.
Maecenas sit amet orci ante. Aenean porttitor ultricies enim. Curabitur finibus fringilla lacus. Fusce porttitor, turpis eget condimentum mattis, mauris diam faucibus ligula, sed porta ligula nulla a quam. Fusce massa elit, porttitor vel enim id, venenatis vehicula orci. Aliquam sagittis eros eu placerat vestibulum. Donec aliquet dui dapibus neque mattis, vel malesuada lacus vulputate. Morbi vel metus eu ante imperdiet faucibus ut ac felis. Sed eu nisl non sapien gravida fringilla. Nunc maximus hendrerit risus, a tincidunt sapien. Ut aliquam, ipsum gravida ullamcorper dictum, urna dolor fringilla velit, id gravida ligula dolor vitae nisl. Mauris posuere metus eros, eu condimentum velit malesuada nec. Vestibulum facilisis ligula a bibendum venenatis.
Etiam est orci, rutrum quis orci eget, tincidunt ultricies eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam suscipit arcu at euismod imperdiet. Ut sem nibh, feugiat non consectetur eget, elementum condimentum velit. Mauris sed sapien id tortor mattis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In vel felis quis eros consequat porta eget id eros. Nam laoreet nisi tortor, vel euismod magna varius eu.
Etiam semper, nibh nec malesuada pellentesque, neque ante mollis enim, sed faucibus velit felis id nisi. Fusce ac urna vitae lorem semper molestie sed eget est. In varius commodo tellus, a porttitor magna ornare vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel volutpat arcu. Aliquam sit amet varius mi, nec imperdiet velit. Cras efficitur ipsum sit amet tellus venenatis, in maximus lacus pulvinar.
Aenean venenatis malesuada lacus. Maecenas pulvinar dapibus est, sed elementum massa. Nullam tristique urna vel eros luctus suscipit vitae et turpis. Nam ornare aliquam lorem vel semper. Integer commodo sollicitudin consectetur. Donec id orci mattis, condimentum tortor et, ultricies sapien. Suspendisse pulvinar, est eget pulvinar sodales, lacus eros tristique nisl, vitae dapibus dolor magna id neque. Pellentesque viverra urna lectus, sed dapibus ex posuere at. Vivamus luctus neque eget fringilla condimentum. Nullam ut tortor quis ante vestibulum sollicitudin. Curabitur vitae nibh laoreet sem porttitor porttitor vitae quis justo.
Curabitur non lacus suscipit, volutpat nibh id, tempus purus. Suspendisse sit amet semper ex. Sed aliquam felis et tristique suscipit. Ut lacus eros, tristique in vulputate sit amet, pulvinar in purus. Donec sodales semper metus et posuere. Integer volutpat, lorem ut sagittis eleifend, purus elit molestie justo, eu luctus velit odio eget eros. Nulla elementum in augue non porta. Fusce condimentum egestas tellus, ut eleifend tortor porta eget. In hendrerit mattis turpis id posuere.
Nunc auctor at risus at dapibus. Proin venenatis massa nec ultricies sagittis. Proin quis rhoncus tortor, sed molestie tellus. Nullam posuere ornare nisi in pharetra. Aenean accumsan venenatis porta. In hac habitasse platea dictumst. Curabitur felis dolor, aliquet eget ipsum laoreet, eleifend tristique nibh. Etiam vitae consectetur sapien, ut gravida libero. Sed lobortis purus sit amet velit pulvinar, et iaculis lectus ullamcorper.
Nullam eu lectus mattis, tempus nunc eget, volutpat orci. Cras gravida blandit nisl, a fringilla libero scelerisque ut. Phasellus ut velit non sapien rhoncus tempus at id ligula. Proin id lacus eu arcu pulvinar scelerisque eget eget enim. Donec tristique ac diam at consectetur. Maecenas condimentum orci sed iaculis viverra. Aliquam consequat consectetur neque, ac egestas nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque posuere volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent pulvinar at risus et euismod. Nulla pretium iaculis semper.
Nullam posuere tempus lectus ut pretium. Sed tempor lorem vel lacus maximus, eu vulputate sem pretium. Phasellus quis aliquet nunc, sed rutrum arcu. Aliquam in velit pretium, egestas mi consequat, venenatis erat. Vestibulum enim lorem, molestie convallis nisi quis, tincidunt tempor orci. Aliquam ornare placerat convallis. Integer blandit sollicitudin libero non imperdiet. Suspendisse fringilla diam ut nulla maximus rhoncus. Praesent consequat lectus a ornare pharetra. Ut et magna id ipsum semper suscipit et eu nunc. Donec venenatis quam nec dui volutpat aliquam. Nulla ut tincidunt neque.
Sed at risus fringilla, molestie tellus non, congue erat. Nunc nibh metus, suscipit vel magna sit amet, auctor dignissim elit. Proin nisi sem, tincidunt non lacus eget, dignissim porta lorem. Nunc non dui ultrices, tempus nulla ac, dictum erat. Sed condimentum, neque sit amet fringilla efficitur, velit nulla sagittis erat, quis dapibus sem purus in ipsum. Fusce semper ligula lacus, sed molestie lectus porttitor id. Quisque varius eget risus ut malesuada. Ut eu tincidunt nunc, non venenatis arcu. Duis elementum, diam sit amet lacinia commodo, risus purus euismod massa, non lacinia elit augue in erat. Donec ac condimentum eros. Phasellus et diam mi. Vivamus et tortor luctus, accumsan arcu id, molestie massa. Donec lacinia dolor quis nunc hendrerit aliquet. Nunc ultricies porta felis vel mattis. Phasellus eu hendrerit ligula, et fringilla orci. Nunc sed pulvinar metus, eget bibendum quam.
Proin purus arcu, viverra vel porttitor quis, pellentesque at augue. Nulla et eros elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum leo eu dolor viverra, eu aliquet metus auctor. Sed libero eros, egestas ut justo eget, blandit sodales magna. Nulla et eleifend nulla. Mauris massa ligula, varius faucibus efficitur ut, laoreet et orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non egestas magna. Donec massa leo, maximus eget pharetra et, consequat nec dolor. Etiam aliquam, ligula non dictum sollicitudin, enim arcu rutrum orci, tincidunt maximus velit erat et massa.
Sed tincidunt ante sit amet enim accumsan, eu euismod lectus facilisis. Morbi et neque eleifend, malesuada ante eget, pellentesque nulla. Sed placerat, sem sed lobortis consequat, elit felis rutrum ex, in venenatis leo sapien in ex. Pellentesque at consectetur risus, id sodales neque. Etiam eget velit lacus. Suspendisse ut urna non odio sagittis faucibus non id eros. Aenean nec mollis lacus. Proin mauris orci, dictum sit amet tristique sit amet, condimentum consectetur arcu. Vestibulum vehicula mi turpis, eu molestie metus viverra malesuada. Aenean vel tortor orci.
Vivamus at eros vitae nulla sollicitudin laoreet quis sit amet mi. Suspendisse ut hendrerit massa. Fusce mi enim, sagittis a hendrerit eu, malesuada sed erat. Praesent finibus vestibulum sem, maximus rutrum ipsum tincidunt eu. Suspendisse nec mi diam. Quisque fermentum quam iaculis, ornare eros in, pellentesque lectus. Vivamus vitae justo porttitor, vulputate erat quis, dapibus est. Vivamus accumsan eros massa, eu auctor dui scelerisque eu.
Integer in risus eu dui molestie posuere. Aenean fermentum sollicitudin varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac elementum nulla. Nunc non suscipit libero, quis tristique enim. Mauris auctor, ante quis viverra molestie, velit eros hendrerit arcu, sit amet finibus purus mi at augue. Vestibulum feugiat turpis sit amet arcu eleifend sollicitudin. Aenean sed sapien ac ante imperdiet iaculis viverra vitae tellus.
Nam volutpat, odio et mattis consequat, est leo mollis erat, tincidunt ultricies ex odio in sapien. Aenean vulputate efficitur dolor, vitae gravida est suscipit non. Curabitur et lobortis libero. In hac habitasse platea dictumst. Vestibulum eget mollis tortor, a volutpat nisl. Duis et arcu massa. Nunc porttitor congue pharetra. Praesent lobortis sapien a tellus rhoncus lobortis. Etiam at libero congue, egestas lectus accumsan, aliquam justo. Quisque euismod lacinia est sed consequat. Phasellus eget quam ornare, eleifend sem nec, molestie magna. In hac habitasse platea dictumst. Quisque porttitor, nisl at finibus scelerisque, dolor enim volutpat ex, ac vestibulum quam felis id libero.
Aenean mattis cursus massa, ut pretium felis consectetur at. Donec velit ipsum, tristique ac lacus et, pellentesque imperdiet ex. Cras a mauris risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent facilisis arcu arcu, ac egestas nisi pellentesque vitae. In at pretium sem. Mauris ligula dui, lacinia vitae ligula vel, rutrum fringilla elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec blandit sodales pharetra. Cras diam nisl, volutpat in faucibus nec, aliquam eget mauris. Nullam vel diam dictum, faucibus nulla vitae, egestas metus. Morbi quis quam ipsum. Quisque a lectus vitae enim vulputate placerat. Proin tincidunt condimentum vestibulum. Vivamus mattis tellus quis nulla laoreet, vel rhoncus lacus luctus. Suspendisse vitae hendrerit justo. Quisque consequat tempor ipsum, vel cursus massa feugiat id. Vivamus ac viverra purus. Curabitur consectetur ultricies mi sed pulvinar. Sed a imperdiet arcu.
================================================
FILE: public/examples/v160/event-handling-like-click/index.html
================================================
JSFrame.js examplesHandling of content click events, etc.
================================================ FILE: public/examples/v160/event-handling-pos-size/index.html ================================================JSFrame.js examplesHandling move and resize events
JSFrame.js examplesChanging the resize area to adjust sensitivity by mouse or touch
================================================ FILE: public/examples/v160/focus/index.html ================================================JSFrame.js examplesFocus and blur(lost focus) event handling
This content is presented in an iframe
================================================ FILE: public/examples/v160/iframe/iframe_content02.html ================================================This content is presented in an iframe
================================================ FILE: public/examples/v160/iframe/iframe_content03.html ================================================This content is presented in an iframe
================================================ FILE: public/examples/v160/iframe/index.html ================================================Hamlet
ACT I SCENE I. Elsinore. A platform before the castle. FRANCISCO at his post. Enter to him BERNARDO BERNARDO Who's there? FRANCISCO Nay, answer me: stand, and unfold yourself. BERNARDO Long live the king! FRANCISCO Bernardo? BERNARDO He. FRANCISCO You come most carefully upon your hour. BERNARDO 'Tis now struck twelve; get thee to bed, Francisco. FRANCISCO For this relief much thanks: 'tis bitter cold, And I am sick at heart. BERNARDO Have you had quiet guard? FRANCISCO Not a mouse stirring. BERNARDO Well, good night. If you do meet Horatio and Marcellus, The rivals of my watch, bid them make haste. FRANCISCO I think I hear them. Stand, ho! Who's there? Enter HORATIO and MARCELLUS HORATIO Friends to this ground. MARCELLUS And liegemen to the Dane. FRANCISCO Give you good night. MARCELLUS O, farewell, honest soldier: Who hath relieved you? FRANCISCO Bernardo has my place. Give you good night. Exit MARCELLUS Holla! Bernardo! BERNARDO Say, What, is Horatio there? HORATIO A piece of him. BERNARDO Welcome, Horatio: welcome, good Marcellus. MARCELLUS What, has this thing appear'd again to-night? BERNARDO I have seen nothing. MARCELLUS Horatio says 'tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen of us: Therefore I have entreated him along With us to watch the minutes of this night; That if again this apparition come, He may approve our eyes and speak to it. HORATIO Tush, tush, 'twill not appear. BERNARDO Sit down awhile; And let us once again assail your ears, That are so fortified against our story What we have two nights seen. HORATIO Well, sit we down, And let us hear Bernardo speak of this. BERNARDO Last night of all, When yond same star that's westward from the pole Had made his course to illume that part of heaven Where now it burns, Marcellus and myself, The bell then beating one,-- Enter Ghost MARCELLUS Peace, break thee off; look, where it comes again! BERNARDO In the same figure, like the king that's dead. MARCELLUS Thou art a scholar; speak to it, Horatio. BERNARDO Looks it not like the king? mark it, Horatio. HORATIO Most like: it harrows me with fear and wonder. BERNARDO It would be spoke to. MARCELLUS Question it, Horatio. HORATIO What art thou that usurp'st this time of night, Together with that fair and warlike form In which the majesty of buried Denmark Did sometimes march? by heaven I charge thee, speak! MARCELLUS It is offended. BERNARDO See, it stalks away! HORATIO Stay! speak, speak! I charge thee, speak! Exit Ghost MARCELLUS 'Tis gone, and will not answer. BERNARDO How now, Horatio! you tremble and look pale: Is not this something more than fantasy? What think you on't? HORATIO Before my God, I might not this believe Without the sensible and true avouch Of mine own eyes. MARCELLUS Is it not like the king? HORATIO As thou art to thyself: Such was the very armour he had on When he the ambitious Norway combated; So frown'd he once, when, in an angry parle, He smote the sledded Polacks on the ice. 'Tis strange. MARCELLUS Thus twice before, and jump at this dead hour, With martial stalk hath he gone by our watch. HORATIO In what particular thought to work I know not; But in the gross and scope of my opinion, This bodes some strange eruption to our state. MARCELLUS Good now, sit down, and tell me, he that knows, Why this same strict and most observant watch So nightly toils the subject of the land, And why such daily cast of brazen cannon, And foreign mart for implements of war; Why such impress of shipwrights, whose sore task Does not divide the Sunday from the week; What might be toward, that this sweaty haste Doth make the night joint-labourer with the day: Who is't that can inform me? HORATIO That can I; At least, the whisper goes so. Our last king, Whose image even but now appear'd to us, Was, as you know, by Fortinbras of Norway, Thereto prick'd on by a most emulate pride, Dared to the combat; in which our valiant Hamlet-- For so this side of our known world esteem'd him-- Did slay this Fortinbras; who by a seal'd compact, Well ratified by law and heraldry, Did forfeit, with his life, all those his lands Which he stood seized of, to the conqueror: Against the which, a moiety competent Was gaged by our king; which had return'd To the inheritance of Fortinbras, Had he been vanquisher; as, by the same covenant, And carriage of the article design'd, His fell to Hamlet. Now, sir, young Fortinbras, Of unimproved mettle hot and full, Hath in the skirts of Norway here and there Shark'd up a list of lawless resolutes, For food and diet, to some enterprise That hath a stomach in't; which is no other-- As it doth well appear unto our state-- But to recover of us, by strong hand And terms compulsatory, those foresaid lands So by his father lost: and this, I take it, Is the main motive of our preparations, The source of this our watch and the chief head Of this post-haste and romage in the land. BERNARDO I think it be no other but e'en so: Well may it sort that this portentous figure Comes armed through our watch; so like the king That was and is the question of these wars. HORATIO A mote it is to trouble the mind's eye. In the most high and palmy state of Rome, A little ere the mightiest Julius fell, The graves stood tenantless and the sheeted dead Did squeak and gibber in the Roman streets: As stars with trains of fire and dews of blood, Disasters in the sun; and the moist star Upon whose influence Neptune's empire stands Was sick almost to doomsday with eclipse: And even the like precurse of fierce events, As harbingers preceding still the fates And prologue to the omen coming on, Have heaven and earth together demonstrated Unto our climatures and countrymen.-- But soft, behold! lo, where it comes again! Re-enter Ghost I'll cross it, though it blast me. Stay, illusion! If thou hast any sound, or use of voice, Speak to me: If there be any good thing to be done, That may to thee do ease and grace to me, Speak to me: Cock crows If thou art privy to thy country's fate, Which, happily, foreknowing may avoid, O, speak! Or if thou hast uphoarded in thy life Extorted treasure in the womb of earth, For which, they say, you spirits oft walk in death, Speak of it: stay, and speak! Stop it, Marcellus. MARCELLUS Shall I strike at it with my partisan? HORATIO Do, if it will not stand. BERNARDO 'Tis here! HORATIO 'Tis here! MARCELLUS 'Tis gone! Exit Ghost We do it wrong, being so majestical, To offer it the show of violence; For it is, as the air, invulnerable, And our vain blows malicious mockery. BERNARDO It was about to speak, when the cock crew. HORATIO And then it started like a guilty thing Upon a fearful summons. I have heard, The cock, that is the trumpet to the morn, Doth with his lofty and shrill-sounding throat Awake the god of day; and, at his warning, Whether in sea or fire, in earth or air, The extravagant and erring spirit hies To his confine: and of the truth herein This present object made probation. MARCELLUS It faded on the crowing of the cock. Some say that ever 'gainst that season comes Wherein our Saviour's birth is celebrated, The bird of dawning singeth all night long: And then, they say, no spirit dares stir abroad; The nights are wholesome; then no planets strike, No fairy takes, nor witch hath power to charm, So hallow'd and so gracious is the time. HORATIO So have I heard and do in part believe it. But, look, the morn, in russet mantle clad, Walks o'er the dew of yon high eastward hill: Break we our watch up; and by my advice, Let us impart what we have seen to-night Unto young Hamlet; for, upon my life, This spirit, dumb to us, will speak to him. Do you consent we shall acquaint him with it, As needful in our loves, fitting our duty? MARCELLUS Let's do't, I pray; and I this morning know Where we shall find him most conveniently. Exeunt SCENE II. A room of state in the castle. Enter KING CLAUDIUS, QUEEN GERTRUDE, HAMLET, POLONIUS, LAERTES, VOLTIMAND, CORNELIUS, Lords, and Attendants KING CLAUDIUS Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe, Yet so far hath discretion fought with nature That we with wisest sorrow think on him, Together with remembrance of ourselves. Therefore our sometime sister, now our queen, The imperial jointress to this warlike state, Have we, as 'twere with a defeated joy,-- With an auspicious and a dropping eye, With mirth in funeral and with dirge in marriage, In equal scale weighing delight and dole,-- Taken to wife: nor have we herein barr'd Your better wisdoms, which have freely gone With this affair along. For all, our thanks. Now follows, that you know, young Fortinbras, Holding a weak supposal of our worth, Or thinking by our late dear brother's death Our state to be disjoint and out of frame, Colleagued with the dream of his advantage, He hath not fail'd to pester us with message, Importing the surrender of those lands Lost by his father, with all bonds of law, To our most valiant brother. So much for him. Now for ourself and for this time of meeting: Thus much the business is: we have here writ To Norway, uncle of young Fortinbras,-- Who, impotent and bed-rid, scarcely hears Of this his nephew's purpose,--to suppress His further gait herein; in that the levies, The lists and full proportions, are all made Out of his subject: and we here dispatch You, good Cornelius, and you, Voltimand, For bearers of this greeting to old Norway; Giving to you no further personal power To business with the king, more than the scope Of these delated articles allow. Farewell, and let your haste commend your duty. CORNELIUS VOLTIMAND In that and all things will we show our duty. KING CLAUDIUS We doubt it nothing: heartily farewell. Exeunt VOLTIMAND and CORNELIUS And now, Laertes, what's the news with you? You told us of some suit; what is't, Laertes? You cannot speak of reason to the Dane, And loose your voice: what wouldst thou beg, Laertes, That shall not be my offer, not thy asking? The head is not more native to the heart, The hand more instrumental to the mouth, Than is the throne of Denmark to thy father. What wouldst thou have, Laertes? LAERTES My dread lord, Your leave and favour to return to France; From whence though willingly I came to Denmark, To show my duty in your coronation, Yet now, I must confess, that duty done, My thoughts and wishes bend again toward France And bow them to your gracious leave and pardon. KING CLAUDIUS Have you your father's leave? What says Polonius? LORD POLONIUS He hath, my lord, wrung from me my slow leave By laboursome petition, and at last Upon his will I seal'd my hard consent: I do beseech you, give him leave to go. KING CLAUDIUS Take thy fair hour, Laertes; time be thine, And thy best graces spend it at thy will! But now, my cousin Hamlet, and my son,-- HAMLET [Aside] A little more than kin, and less than kind. KING CLAUDIUS How is it that the clouds still hang on you? HAMLET Not so, my lord; I am too much i' the sun. QUEEN GERTRUDE Good Hamlet, cast thy nighted colour off, And let thine eye look like a friend on Denmark. Do not for ever with thy vailed lids Seek for thy noble father in the dust: Thou know'st 'tis common; all that lives must die, Passing through nature to eternity. HAMLET Ay, madam, it is common. QUEEN GERTRUDE If it be, Why seems it so particular with thee? HAMLET Seems, madam! nay it is; I know not 'seems.' 'Tis not alone my inky cloak, good mother, Nor customary suits of solemn black, Nor windy suspiration of forced breath, No, nor the fruitful river in the eye, Nor the dejected 'havior of the visage, Together with all forms, moods, shapes of grief, That can denote me truly: these indeed seem, For they are actions that a man might play: But I have that within which passeth show; These but the trappings and the suits of woe. KING CLAUDIUS 'Tis sweet and commendable in your nature, Hamlet, To give these mourning duties to your father: But, you must know, your father lost a father; That father lost, lost his, and the survivor bound In filial obligation for some term To do obsequious sorrow: but to persever In obstinate condolement is a course Of impious stubbornness; 'tis unmanly grief; It shows a will most incorrect to heaven, A heart unfortified, a mind impatient, An understanding simple and unschool'd: For what we know must be and is as common As any the most vulgar thing to sense, Why should we in our peevish opposition Take it to heart? Fie! 'tis a fault to heaven, A fault against the dead, a fault to nature, To reason most absurd: whose common theme Is death of fathers, and who still hath cried, From the first corse till he that died to-day, 'This must be so.' We pray you, throw to earth This unprevailing woe, and think of us As of a father: for let the world take note, You are the most immediate to our throne; And with no less nobility of love Than that which dearest father bears his son, Do I impart toward you. For your intent In going back to school in Wittenberg, It is most retrograde to our desire: And we beseech you, bend you to remain Here, in the cheer and comfort of our eye, Our chiefest courtier, cousin, and our son.
JSFrame.js examplesUsing an iframe for window content
================================================ FILE: public/examples/v160/live-inside-element/index.html ================================================JSFrame.js examples Make the window live inside a specific element
By specifying parentElement, the window becomes a child of that element.You can also use this when you want to specify a window's movement range.
JSFrame.js examples Make maximized window size same as parentElement
SetmatchParent:true, create a window as a child of a particular parentElement, and make it the same size as
parentElement when the window is maximized
JSFrame.js examplesSet window position and size
================================================ FILE: public/examples/v160/preset-apr-yosemite/index.html ================================================JSFrame.js examplesAppearance Preset 'Yosemite'
Apearance Preset is a predefined window appearance. ================================================ FILE: public/examples/v160/preset-window-control-cmd/index.html ================================================JSFrame.js examplesWindow Control Command
================================================ FILE: public/examples/v160/preset-window-yosemite/index.html ================================================JSFrame.js examples"Window Preset" performs typical window-system behavior
Window Preset is a preset that implements the typical behavior as well as the look.Tap to minimize at the position of the icon
JSFrame.js examplesDesktop on the web with 'yosemite' preset
JSFrame.js examplesCreate a window with content written in HTML
================================================ FILE: public/examples/v160/styling/index.html ================================================JSFrame.js examplesRounded button on the corner with no title bar
================================================ FILE: public/examples/v160/styling-button-child-menu/index.html ================================================JSFrame.js examplesstyle: Child menu for buttons on title bar
================================================ FILE: public/examples/v160/styling-font-awesome-button/index.html ================================================JSFrame.js examplesstyling: Font Awesome buttons
================================================ FILE: public/examples/v160/styling-image-button/index.html ================================================JSFrame.js examplesstyling: Image buttons
================================================ FILE: public/examples/v160/styling-popup/index.html ================================================JSFrame.js examplesstyling: popup style window
================================================ FILE: public/examples/v160/styling-show-hide-buttons/index.html ================================================JSFrame.js examplesstyle: Show and hide buttons on title bar
================================================ FILE: public/examples/v160/styling-thick-title-bar/index.html ================================================JSFrame.js examplesstyling: thick title bar
================================================ FILE: public/examples/v160/window-in-window/index.html ================================================JSFrame.js examples Create a window inside a window
If you want to nest frames like window-in-window, call setFrameInFrame(true) on the parent frame ================================================ FILE: public/examples/v160/window-order/index.html ================================================JSFrame.js examples Window display order
To adjust the order of the window and other elements, specifyparentElement in the initialization.
The idea is to specify the z-index of parentElement.(The order in which the window's
parentElement and other elements are displayed follows
stack context rendering order.)
================================================ FILE: public/index.css ================================================ body { margin: 8px; display: block; font-family: 'Roboto'; font-weight: lighter; font-size: 16px; color: #666666; } h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: normal; border-bottom: 1px solid #bbb; } h2 span { color: #666666; white-space: nowrap; } li { padding-bottom: 5px; } a { color: #6aa0d0; text-decoration: none; } code { background: #dddddd; margin: 5px; } a:hover { text-decoration: underline; } h2 a { font-weight: 300; margin: 0 10px 0 0; white-space: nowrap; } .btn-primary { display: inline-block; line-height: 30px; color: #FFF; text-decoration: none; text-align: center; background-color: #428bca; border-color: #357ebd; border-radius: 5px; border-width: 0px; margin: 5px; -webkit-transition: all 0.5s; transition: all 0.5s; } .btn-primary:hover { background-color: #3276b1; border-color: #285e8e; } .btn-primary:focus { outline: none; } .btn-secondary { display: inline-block; line-height: 30px; color: #FFF; text-decoration: none; text-align: center; background-color: #6c757d; border-radius: 5px; border-width: 0px; border-color: transparent; margin: 5px; -webkit-transition: all 0.5s; transition: all 0.5s; } .btn-secondary:hover { background-color: #5b636a; } .btn-secondary:focus { outline: none; } .btn-success { display: inline-block; line-height: 30px; color: #FFF; text-decoration: none; text-align: center; background-color: #28a745; border-radius: 5px; border-width: 0px; margin: 5px; -webkit-transition: all 0.5s; transition: all 0.5s; } .btn-success:hover { background-color: #218d3a; } .btn-success:focus { outline: none; } .window-content { font-size: 14px; padding: 10px; color: #666666; user-select: none; } ================================================ FILE: public/index.html ================================================
JSFrame examples
This is a small sample code collection using JSFrame. All of the code presented here can be found on GitHub.
Window creation:
Create a window and the basic use of windows
- Create a window with content written in
HTML
- Using iframe for window content
- Set window position and
size
Event handling:
How to handle window events and the events of the content in the window
- Handling move and resize
events.
- Changing the resize area
to adjust sensitivity
by mouse or touch
- Handling of content click
events,
etc.
- Focusing a window and focus(get
focus),blur(lost
focus) handling
Styling and look:
Customize the look of your windows
- custom style: Rounded button on the corner with no title bar
- custom style:Using Image buttons and icons on title bar
- custom style: Using Font Awesome buttons and icons on title bar
- custom style: Show and hide buttons on title bar
- custom style: Child menu for buttons on title bar
- custom style: Popup style window
- custom style: Thick title bar
- preset style: Yosemite
- preset window: Yosemite
- (*)preset_yosemite.html - Preset style demo 'yosemite' * This example code is for v1.5 or later and will be updated in the future
- (*)preset_win10.html - Preset style demo 'redstone' like win10 * This example code is for v1.5 or later and will be updated in the future
- (*)preset_material.html- Preset style demo 'material' * This example code is for v1.5 or later and will be updated in the future
Alignment, Order and Where the window is created:
Set the offset position of the entire window of jsFrame, and set the display order (z-index).
- Adjust Window display order with parentElement
- Anchor of the window position
- Fixed(scroll-independent) and Not-fixed window
- Make the window live inside a specific element using parentElement
- Make maximized window size same as a specific parentElement
- Create a window inside a window, nested windows
Maximize/Minimize operation:
Controls make it easier to implement things like maximizing and minimizing windows
- Window control commands
- (*)window_control.html - Window size control manually * This example code is for v1.5 or later and will be updated in the future
- (*)preset_yosemite_auto.html - Preset style demo 'yosemite' * This example code is for v1.5 or later and will be updated in the future
Utilities:
- (*)toast.html - Show toast * This example code is for v1.5 or later and will be updated in the future
- (*)toast_simple.html - Show simple toast * This example code is for v1.5 or later and will be updated in the future
Advanced:
- Desktop OS on the web with 'Yosemite'
- (*)modal.html - Show modal windows * This example code is for v1.5 or later and will be updated in the future
- (*)chatbot_ui.html - Using frame as a chat container * This example code is for v1.5 or later and will be updated in the future
- (*)Animation * This example code is for v1.0 or later and will be updated in the future
* The smallest window. It is responsible for basic processing only. * * @param beanId id of this small window * @param left * @param top * @param width * @param height * @param zindex * @constructor */ function CBeanFrame(beanId, left, top, width, height, zindex, w_border_width, appearance) { var me = this; me.movable = true; //fields me.id = beanId; me.property = {}; me.extra = {}; me.parentCanvas = null; me.htmlElement = null; me.pullUpDisabled = false; if (appearance) { me.pullUpDisabled = appearance.pullUpDisabled; } //initialize me.htmlElement = document.createElement(DEF.CBEAN.HTML_ELEMENT); me.htmlElement.id = DEF.CBEAN.HTML_ELEMENT_ID_PREFIX + beanId; me.htmlElement.style.position = 'absolute'; me.htmlElement.style.left = parseInt(left, 10) + 'px'; me.htmlElement.style.top = parseInt(top, 10) + 'px'; me.htmlElement.style.width = parseInt(width, 10) + 'px'; me.htmlElement.style.height = parseInt(height, 10) + 'px'; //Zindex may become 'undefined' in some cases. if (zindex !== null) { me.htmlElement.style.zIndex = zindex; } me.htmlElement.style.borderColor = '#000000'; //If I set a larger font size, width and height of window will be affected.... me.htmlElement.style.fontSize = '1px'; //Refer parents to each other.(sougo-sansho) me.htmlElement.parent = me; if (MOUSE_ENABLED) { //Note that 'mouseDown' is mapped to 'onmousedown' of htmlElement, //so when 'onmouseDown' fires ,the 'this' will indicate 'htmlElement' me.htmlElement.onmousedown = me.onmouseDown; } if (TOUCH_ENABLED) { if ('ontouchstart' in window) { var funcOnTouchStart = function(evt) { // The "mousedown" event happens right after "touchstart" event, // but I don't call #preventdefault because #preventdefault prevents "onclick". // So, perform #preventdefault only for "touchmove" // evt.preventDefault(); me.onmouseDown.bind(this)(evt); }; me.htmlElement.ontouchstart = funcOnTouchStart; } } //Type name of this class me.htmlElement.typeName = DEF.CBEAN.TYPE_NAME; //Special field indicating usage of this class me.htmlElement.usage = 'nothing'; //Whether it can move outside the frame(waku). me.htmlElement.isRangeLimited = false; //Movement magnification in the X direction //(If it is 0, it can not move in the X direction.) me.htmlElement.argX = 1; //Movement magnification in Y direction // (If it is 0, it can not move in Y direction) me.htmlElement.argY = 1; me.externalAreaClickedListener = null; me.onMoveListener = null; } CBeanFrame.prototype.getWindowType = function() { return 'CBeanFrame'; }; CBeanFrame.prototype.setOnMoveListener = function(listener) { var me = this; me.onMoveListener = listener; }; CBeanFrame.prototype._onMove = function(e) { var me = this; if (me.onMoveListener) { me.onMoveListener(e); } }; /** * Set whether the frame can be moved while dragging with the mouse * @param enabled */ CBeanFrame.prototype.setMovable = function(enabled) { var me = this; if (enabled) { me.htmlElement.argX = 1; me.htmlElement.argY = 1; } else { me.htmlElement.argX = 0; me.htmlElement.argY = 0; } me.movable = enabled; return me; }; CBeanFrame.prototype.setParentCanvas = function(parentCanvas) { var me = this; me.parentCanvas = parentCanvas; me.htmlElement.parentCanvas = me.parentCanvas; return me; }; CBeanFrame.prototype.setOnExternalAreaClickedListener = function(listener) { var me = this; me.externalAreaClickedListener = listener; return me; }; CBeanFrame.prototype.onBodyClicked = function(e) { var me = this; var clickX = e.pageX; var clickY = e.pageY; var left = parseInt(me.htmlElement.style.left); var top = parseInt(me.htmlElement.style.top); var width = parseInt(me.htmlElement.style.width); var height = parseInt(me.htmlElement.style.height); if (left < clickX && clickX < (left + width) && top < clickY && (clickY < top + height)) { //- clicked internal area of this frame } else { //- clicked external area of this frame if (me.externalAreaClickedListener) { me.externalAreaClickedListener(); } } }; CBeanFrame.prototype.onmouseDown = function(evt) { // Typically, if you mouse down on the title portion, the onmousedown fires to move the window. // Mousing down the bottom of the window, the left side of the window, // or the bottom of the window will fire the onmouseDown of the window itself (CBeanFrame) // as well as the onmouseDown of the CMarkerWindow for resizing. // Each mousedown element is set to a currentObject as being selected, // whether it's a window or a marker. // this means htmlElement of CBeanFrame object var refHtmlElement = this; var e = evt; if (TOUCH_ENABLED) { if (evt.type === 'touchstart') { var changedTouches = evt.changedTouches; if (TOUCH_MOVE_ONLY_WITH_ONE_FINGER) { var touches = evt.touches; if (touches.length === 1) { e = changedTouches[0]; } else { return true; } } else { e = changedTouches[0]; } } } //Retrieve CBeanFrame object itself var refCBeanFrame = refHtmlElement.parent; if (e.button == 0 || evt.type === 'touchstart') { // for modal background window if (refCBeanFrame.pullUpDisabled) { return false; } else { // Set the current CBeanFrame to be selected(=currentObject) among other CBeanFrames in the parent canvas. refHtmlElement.parentCanvas.currentObject = refHtmlElement; // Bring the current bean to the top refHtmlElement.parentCanvas.pullUp(refCBeanFrame.id); } } else if (e.button == 2) { return false; } if (refHtmlElement.parentCanvas.currentObject) { refHtmlElement.parentCanvas.offsetX = e.pageX - parseInt(refHtmlElement.parentCanvas.currentObject.style.left, 10); refHtmlElement.parentCanvas.offsetY = e.pageY - parseInt(refHtmlElement.parentCanvas.currentObject.style.top, 10); } return false; }; /** * End of CBeanFrame Class
*/ //+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- DEF.CANVAS = {}; DEF.CANVAS.HTML_ELEMENT = 'div'; DEF.CANVAS.WIDTH_ADJUST_20180722 = 2; DEF.CANVAS.HEIGHT_ADJUST_20180722 = 3; /** * CCanvas class * A canvas is a place where windows are arranged, where you can drag and move freely. * * @param parentElement * @param canvasId * @param left * @param top * @param width * @param height * @constructor */ function CCanvas(parentElement, canvasId, left, top, width, height) { //Event data to be transmitted function EventData() { this.x = 0; this.y = 0; this.screenX = 0; this.screenY = 0; this.deltaX = 0; this.deltaY = 0; this.isMoved = false; this.targetTypeName = null; this.targetUsage = null; this.targetObject = null; } var me = this; me.enablePullUp = true;// true:Pull-up sorting to bring the window to the forefront by clicking to get focus. me.currentObject = null; me.onTopObject = null; me.offsetX = 0; me.offsetY = 0; //Object which generated 'mouseDown' event at the very beginning(ichiban-saisho) me.mouseDownSource = null; me.id = canvasId; me.canvasElement = null; me.parentElement = parentElement; me.beanList = new Array(); me.beanIdName = {};//key:beanId value:beanName me.beanNameId = {};//key:beanName value:beanId me.eventData = new EventData(); me.baseZIndex = 0; me.setBaseZIndex = function(baseZIndex) { me.baseZIndex = baseZIndex; }; me.getBaseZIndex = function() { return me.baseZIndex; }; me.canvasElement = document.createElement(DEF.CANVAS.HTML_ELEMENT); me.canvasElement.style.zIndex = 2000; me.canvasElement.id = me.id; me.canvasElement.style.boxSizing = 'border-box'; me.canvasElement.style.position = 'absolute'; me.canvasElement.style.left = parseInt(left) + 'px'; me.canvasElement.style.top = parseInt(top) + 'px'; //Added an adjustment value.Because transparent part appears at the bottom of the screen, me.canvasElement.style.width = (parseInt(width) + DEF.CANVAS.WIDTH_ADJUST_20180722) + 'px'; me.canvasElement.style.height = (parseInt(height) + DEF.CANVAS.HEIGHT_ADJUST_20180722) + 'px'; me.canvasElement.style.backgroundColor = 'transparent'; me.canvasElement.style.borderStyle = 'none'; me.canvasElement.style.margin = '0px'; me.canvasElement.style.borderWidth = '0px'; me.canvasElement.style.borderColor = 'transparent'; //Add the Canvas's html element into the canvas's parent html element me.parentElement.appendChild(me.canvasElement); } CCanvas.prototype.mouseMove = function(evt) { var me = this; var e = evt; if (TOUCH_ENABLED) { if (evt.type === 'touchmove') { var changedTouches = evt.changedTouches; if (TOUCH_MOVE_ONLY_WITH_ONE_FINGER) { var touches = evt.touches; if (touches.length === 1) { e = changedTouches[0]; } else { return true; } } else { e = changedTouches[0]; } } } if (me.currentObject) { //eventData.isMoved=true;The presence of event data means that it has moved. me.eventData.targetTypeName = me.currentObject.typeName; me.eventData.targetUsage = me.currentObject.usage; me.eventData.targetObject = me.currentObject; //Even when obj is not being dragged, mouse coordinates are used here because they are needed. var newObjLeftPx = e.pageX - me.offsetX; var newObjTopPx = e.pageY - me.offsetY; var absoluteMouseX = e.pageX; var absoluteMouseY = e.pageY; //Take the snapshot before updating the location. var oldObjLeftPx = me.currentObject.style.left; var oldObjTopPx = me.currentObject.style.top; //When the mouse cursor goes out of range, //the addition in the X direction and Y direction (delta X, delta Y) is set to zero. //this.left=Cavas's left side edge, this.top=Canvas's top side edge. var tmpLeft = parseInt(newObjLeftPx, 10); var tmpTop = parseInt(newObjTopPx, 10); var tmpRight = tmpLeft + parseInt(me.currentObject.style.width, 10); var tmpBottom = tmpTop + parseInt(me.currentObject.style.height, 10); var styleWidth = parseInt(me.canvasElement.style.width, 10); var styleHeight = parseInt(me.canvasElement.style.height, 10); var deltaX = 0; var deltaY = 0; if (me.currentObject.isRangeLimited == true && (tmpLeft <= 0 || tmpRight > styleWidth || tmpTop <= 0 || tmpBottom > styleHeight) ) { deltaX = 0; deltaY = 0; } else { deltaX = (parseInt(newObjLeftPx, 10) - parseInt(oldObjLeftPx, 10)); deltaY = (parseInt(newObjTopPx, 10) - parseInt(oldObjTopPx, 10)); me.currentObject.style.left = (parseInt(me.currentObject.style.left) + deltaX * me.currentObject.argX) + 'px'; me.currentObject.style.top = (parseInt(me.currentObject.style.top) + deltaY * me.currentObject.argY) + 'px'; var parentObject = me.currentObject.parent; if (parentObject && parentObject._onMove) { parentObject._onMove(); } } me.eventData.deltaX = deltaX; me.eventData.deltaY = deltaY; return me.eventData; } //Returns null if none of the objects are clicked and the only mouse just moves. return null; }; CCanvas.prototype.mouseUp = function(e) { var me = this; me.currentObject = null; me.mouseDownSource = null; }; //Bring the object in front CCanvas.prototype.pullUp = function(targetBeanId) { var me = this; var tmpBeanArray = []; var beanList = me.beanList; for (var i in beanList) { tmpBeanArray.push(beanList[i]); } //Bring the target object in front and set zindex to 1. var targetBean = beanList[targetBeanId]; if (me.enablePullUp) { me.pullUpSort(targetBean, tmpBeanArray, me.baseZIndex); } //Remember the top object me.onTopObject = targetBean; }; //Calculate the front / back information of the window accurately. CCanvas.prototype.pullUpSort = function(pullupObject, objectArray, baseIndex) { var me = this; //Increase the index number of the target object pullupObject.htmlElement.style.zIndex = objectArray.length + baseIndex; //sort by index objectArray.sort(function(b, a) { return -parseInt(b.htmlElement.style.zIndex, 10) + parseInt(a.htmlElement.style.zIndex, 10); }); //Redefine number of the index for (var i in objectArray) { objectArray[i].htmlElement.style.zIndex = (objectArray.length - 1) - i + baseIndex; } }; /** * remove the bean object * @param beanId */ CCanvas.prototype.removeBean = function(beanId) { var me = this; //Retrieve the target beanFrame var beanList = me.beanList; var targetBean = beanList[beanId]; //Remove bean's htmlElement from canvasElement me.canvasElement.removeChild(targetBean.htmlElement); //Delete the bean object in the associative array. delete beanList[beanId]; }; /** * Add bean into this canvas * @param bean */ CCanvas.prototype.addBean = function(bean) { var me = this; var beanList = me.beanList; var beanIdName = me.beanIdName;//key:beanId value:beanName var beanNameId = me.beanNameId; //key:beanName value:beanId beanList[bean.id] = bean; if (bean.property.name) { beanNameId[bean.property.name] = bean.id; beanIdName[bean.id] = bean.property.name; } //In this usage case the 'length' property is invalid .. var num = 0; for (var j in beanList) { num++; } //Set zIndex so that what you add later will come up. bean.htmlElement.style.zIndex = num + me.baseZIndex; //On the bean side, specify the parent of the bean to me. bean.setParentCanvas(me); this.canvasElement.appendChild(bean.htmlElement); }; CCanvas.prototype.getParentElement = function() { var me = this; return me.parentElement; }; /** * End of canvas class */ //+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- DEF.CFRAME = {}; DEF.CFRAME.CANVAS_ELEMENT_BGCOLOR = 'transparent'; DEF.CFRAME.MODAL_BACKGROUND_FRAME_ID_PREFIX = 'window__modal_window_background_'; inherit(CFrame, CBeanFrame); /** * CFrame class *
* This class represents a window whose size can be changed ,
* can move freely on the screen,
* can have a title bar,
*
* @param windowId
* @param w_left
* @param w_top
* @param w_width
* @param w_height
* @param zindex
* @param w_border_width
* @param appearance
* @constructor
*/
function CFrame(windowId, w_left, w_top, w_width, w_height, zindex, w_border_width, appearance) {
var me = this;
//call constructor of superclass
CFrame.superConstructor.call(this, windowId, w_left, w_top, w_width, w_height, zindex, w_border_width, appearance);
me.anchor = CALIGN.LEFT_TOP;
me.showTitleBar = appearance.showTitleBar;
me.canvasNetHeight = null;
me.canvasNetWidth = null;
me.frameHeightAdjust = appearance.frameHeightAdjust;
me.frameComponentMap = {};
//initialize the field
me.canvas = null;
//canvas id
me.myCanvasId = null;
//Buttons to be placed on the screen (positioning same as the close button)
me.floatingButton = null;
me.titleBarClassNameDefault = 'jsframe-titlebar-default';// DEF.CFRAME.TITLE_BAR_CLASS_DEFAULT;
me.titleBarClassNameFocused = 'jsframe-titlebar-focused';//DEF.CFRAME.TITLE_BAR_CLASS_FOCUSED;
//height of titlebar
me.titleBarHeight = appearance.titleBarHeight;
me.titleBarCaption = appearance.titleBarCaption;
me.titleBarCaptionLeftMargin = appearance.titleBarCaptionLeftMargin;
me.titleBarCaptionFontSize = appearance.titleBarCaptionFontSize;
me.titleBarCaptionFontWeight = appearance.titleBarCaptionFontWeight;
me.titleBarBorderBottomDefault = appearance.titleBarBorderBottomDefault;
me.titleBarBorderBottomFocused = appearance.titleBarBorderBottomFocused;
me.titleBarCaptionTextShadow = appearance.titleBarCaptionTextShadow;
me.titleBarCaptionTextAlign = appearance.titleBarCaptionTextAlign;
//Title bar width adjustment value
me.titleAdjustWidth = 2;
me.windowId = windowId;
me.exBorderWidth = 0;
me.myCanvasId = windowId + '_canvas';
//img element for icon placed on the left-top
var appIcon = document.createElement('img');
// appIcon.src='img/ico_app_file16.gif';
//url of icon image
appIcon.src = '';
appIcon.style.position = 'absolute';
appIcon.style.left = '2px';
appIcon.style.top = '2px';
appIcon.style.width = '16px';
appIcon.style.height = '16px';
appIcon.style.visibility = 'hidden';
//The title bar must be on the front of the canvas.
me.titleBar = document.createElement('div');
me.titleBar.className = 'jsframetitlebar';
if (me.showTitleBar) {
me.titleBar.id = windowId + '_title';
me.titleBar.style.position = 'absolute';
me.titleBar.style.boxSizing = 'border-box';
me.titleBar.style.top = '0px';
me.titleBar.style.left = '0px';
me.titleBar.style.width = (w_width - me.titleAdjustWidth + DEF.CANVAS.WIDTH_ADJUST_20180722) + 'px';
me.titleBar.style.userSelect = 'none';
if (me.titleBarHeight) {
var titleBarAdjust = 0;
if (me.titleBarBorderBottomDefault) {
titleBarAdjust = 0;
}
me.titleBar.style.height = (parseInt(me.titleBarHeight, 10) + 0) + 'px';
}
if (me.titleBarColorDefault) {
me.titleBar.style.background = me.titleBarColorDefault;
}
me.titleBar.style.zIndex = 0;
me.titleBar.style.color = me.titleBarCaptionColorDefault;
me.titleBar.style.fontSize = me.titleBarCaptionFontSize;
me.titleBar.style.fontWeight = me.titleBarCaptionFontWeight;
me.titleBar.style.textShadow = me.titleBarCaptionTextShadow;
me.titleBar.style.textAlign = me.titleBarCaptionTextAlign;
// me.titleBar.style.textShadow = "0 1px 0 rgba(255,255,255,.7)";
// me.titleBar.style.textAlign = 'center';
me.titleBar.style.lineHeight = me.titleBar.style.height;
me.titleBar.style.borderBottom = me.titleBarBorderBottomDefault;
//me.titleBar.style.boxShadow = '0 1px 0 rgba(255,255,255,0.5)';
//Set not to display overflow character string
me.titleBar.style.overflow = 'hidden';
var titleBarText = document.createTextNode('');
//'span' to store text
var titleBarTextSpan = document.createElement('span');
titleBarTextSpan.id = me.id + '_titleBarText';
if (me.titleBarCaptionLeftMargin != null) {
titleBarTextSpan.style.position = 'absolute';
titleBarTextSpan.style.left = parseInt(me.titleBarCaptionLeftMargin, 10) + 'px';
} else {
titleBarTextSpan.style.position = 'absolute';
titleBarTextSpan.style.left = '0px';
titleBarTextSpan.style.right = '0px';
}
titleBarTextSpan.style.top = '0px';
titleBarTextSpan.appendChild(titleBarText);
me.titleBar.appendChild(titleBarTextSpan);
//Discontinue appicon(20061011)
//me.titleBar.appendChild(appIcon);
}
me.htmlElement.appendChild(me.titleBar);
//Set Canvas throughout the window
//parseInt(me.titleBar.style.height);//me.titleBarHeight);
var canvasMoreHeight = parseInt(me.titleBarHeight, 10) - titleBarAdjust;
var canvasMoreSpacing = parseInt(me.titleAdjustWidth, 10);
if (me.showTitleBar) {
} else {
canvasMoreHeight = 0;
canvasMoreSpacing = 0;
titleBarAdjust = 0;
}
me.canvasNetWidth = w_width - canvasMoreSpacing;
me.canvasNetHeight = w_height - canvasMoreHeight - canvasMoreSpacing - 1 - titleBarAdjust + me.frameHeightAdjust;
//Change the style of htmlElement of CFrame (CBean).
me.htmlElement.style.cursor = 'move';
//Create a canvas
me.canvas = new CCanvas(me.htmlElement, me.myCanvasId, 0, canvasMoreHeight, w_width - canvasMoreSpacing, w_height - canvasMoreHeight - canvasMoreSpacing);
me.canvas.enablePullUp = false;
me.canvas.canvasElement.style.backgroundColor = DEF.CFRAME.CANVAS_ELEMENT_BGCOLOR;
me.canvas.canvasElement.style.cursor = 'default';
if (MOUSE_ENABLED) {
//Handling the omousedown event that occurred in Canvas which is a child element of CFrame
me.canvas.canvasElement.onmousedown = me.canvasMouseDown;
}
if (TOUCH_ENABLED) {
if ('ontouchstart' in window) {
var funcOnTouchStart = function(evt) {
// The "mousedown" event happens right after "touchstart" event,
// but I don't call #preventdefault because #preventdefault prevents "onclick" (like button on titlebar).
// So, perform #preventdefault only for "touchmove"
// evt.preventDefault();
var touchStartEvent = evt.changedTouches[0];
me.canvasMouseDown.bind(this)(touchStartEvent);
};
me.canvas.canvasElement.ontouchstart = funcOnTouchStart;
}
}
//Set the canvas as a reference to the parent of the canvas html element canvasElement.
me.canvas.canvasElement.parentCFrame = me;
var tmpCanvasWidth = parseInt(me.canvas.canvasElement.style.width, 10);
var tmpCanvasHeight = parseInt(me.canvas.canvasElement.style.height, 10);
var markerWidth = appearance.resizeAreaWidth;
var markerHeight = appearance.resizeAreaHeight;
//Offset from marker edge
var edgeMargin = appearance.resizeAreaOffset;
var markerZIndex = 0;
var colorRD, colorDD, colorRR;
if (appearance.resizeAreaVisible) {
colorRD = 'rgba(255, 0, 0, 0.5)';
colorDD = 'rgba(0, 0, 255, 0.5)';
colorRR = 'rgba(0, 255, 0, 0.5)';
}
//Lower right(R-D)
var markerRD = new CMarkerWindow(
me.myCanvasId + '_RD',
tmpCanvasWidth + edgeMargin,
tmpCanvasHeight + edgeMargin,
markerWidth,
markerHeight,
markerZIndex,
'RD', colorRD);
markerRD.htmlElement.style.cursor = 'se-resize';//nw-resize';
//Since only the deltaX and deltaY are acquired and the movement of the marker itself is
// performed by CFrame_resize, the movement coefficient of the marker itself is set to 0.
markerRD.htmlElement.argX = 0;
markerRD.htmlElement.argY = 0;
//Bottom(D-D)
var markerDD = new CMarkerWindow(
me.myCanvasId + '_DD',
0,
tmpCanvasHeight + edgeMargin,
tmpCanvasWidth + edgeMargin,
markerHeight,
markerZIndex,
'DD', colorDD);
markerDD.htmlElement.style.cursor = 'n-resize';
//Since only the deltaX and deltaY are acquired and the movement of the marker itself is
// performed by CFrame_resize, the movement coefficient of the marker itself is set to 0.
markerDD.htmlElement.argX = 0;
markerDD.htmlElement.argY = 0;
//Right(R-R)
var markerRR = new CMarkerWindow(
me.myCanvasId + '_RR',
tmpCanvasWidth + edgeMargin,
0,
markerWidth,
tmpCanvasHeight + edgeMargin,
markerZIndex,
'RR', colorRR);
markerRR.htmlElement.style.cursor = 'w-resize';
//Since only the deltaX and deltaY are acquired and the movement of the marker itself is
// performed by CFrame_resize, the movement coefficient of the marker itself is set to 0.
markerRR.htmlElement.argY = 0;
markerRR.htmlElement.argX = 0;
//Add size change marker to canvas.
me.canvas.addBean(markerRD);
me.canvas.addBean(markerDD);
me.canvas.addBean(markerRR);
//Method to remove size change marker (can not resize)
me.removeMarkers = function() {
me.canvas.removeBean(markerRD.id);
me.canvas.removeBean(markerDD.id);
me.canvas.removeBean(markerRR.id);
me.htmlElement.style.cursor = 'default';
};
me.removeMarkers2 = function() {
me.canvas.removeBean(markerRD.id);
me.canvas.removeBean(markerDD.id);
me.canvas.removeBean(markerRR.id);
};
me.enableMarkers = function(enabled) {
if (enabled) {
markerRD.htmlElement.style.display = 'flex';
markerDD.htmlElement.style.display = 'flex';
markerRR.htmlElement.style.display = 'flex';
markerRD.htmlElement.style.cursor = 'se-resize';
markerDD.htmlElement.style.cursor = 'n-resize';
markerRR.htmlElement.style.cursor = 'w-resize';
} else {
markerRD.htmlElement.style.display = 'none';
markerDD.htmlElement.style.display = 'none';
markerRR.htmlElement.style.display = 'none';
}
// me.canvas.removeBean(markerRD.id);
// me.canvas.removeBean(markerDD.id);
// me.canvas.removeBean(markerRR.id);
};
for (var idx in appearance.frameComponents) {
var frameComponent = appearance.frameComponents[idx];
frameComponent.setFrame(me);
//if frameComponent has special name 'closeButton', it will act as a close button.
if ('closeButton' == frameComponent.id) {
frameComponent.htmlElement.onclick = me.close;
}
// Handle child menu open/close
var frameComponentHasChildMenu = frameComponent.htmlElement.querySelector('.jsframe-child-menu');
if (frameComponentHasChildMenu) {
me.eventListenerHelper.addEventListener(frameComponent.htmlElement, 'click', function(e) {
var frameComponentId = e.target.getAttribute('component-id');
// Close all frame component's childmenu once because other frame component's childmenu may be open.
// If {exceptFrameComponentId:[frameComponentId]} is specified for the argument,
// the child menu will not be closed.
me.hideFrameComponentChildMenus({ exceptFrameComponentId: frameComponentId });
if (frameComponentId) {
var frameComponentHtmlElement = me.getFrameComponentElement(frameComponentId);
var frameComponentChildMenu = frameComponentHtmlElement.querySelector('.jsframe-child-menu');
if (frameComponentChildMenu) {
// By making the display a table,
// the width of the childMenu can be accurately reflected.
// (flex does not set the width correctly.)
if (frameComponentChildMenu.style.display == 'table') {
frameComponentChildMenu.style.display = 'none';
} else {
frameComponentChildMenu.style.display = 'table';
}
} else {
console.error('frameComponent child menu isnt found. frameComponentId=' + frameComponentId);
}
}
},
{ listenerName: 'frame-component_child-menu-listener' });
}
me.addFrameComponent(frameComponent);
} // /add frameComponents[end]
//override the field
me.htmlElement.style.backgroundColor = 'transparent';
me.htmlElement.oncontextmenu = this.contextMenu;
//The policy of Border drawing seems to be different between IE and FF.
var caribVal = 0;
me.caribValue = caribVal;
if (me.exBorderWidth) {
me.htmlElement.style.borderWidth = me.exBorderWidth + 'px';
}
me.htmlElement.style.width = (parseInt(me.htmlElement.style.width, 10) - caribVal) + 'px';
me.htmlElement.style.height = (parseInt(me.htmlElement.style.height, 10) - caribVal + 1) + 'px';
me.htmlElement.typeName = 'cwindow';
me.htmlElement.overflow = 'auto';
me.htmlElement.style.boxSizing = 'content-box';
if (appearance.frameBorderStyle) {
me.htmlElement.style.borderStyle = appearance.frameBorderStyle;
}
if (appearance.frameBoxShadow) {
me.htmlElement.style.boxShadow = appearance.frameBoxShadow;
}
//TODO deprecation(because CIfFrame is extended this operation)
if (parseInt(appearance.frameBorderWidthDefault, 10) >= 0) {
me.htmlElement.style.borderWidth = appearance.frameBorderWidthDefault;
me.htmlElement.style.borderColor = appearance.frameBorderColorDefault;
}
if (parseInt(appearance.frameBorderRadius, 10) >= 0) {
me.htmlElement.style.borderRadius = appearance.frameBorderRadius;
}
me.onCloseFrameListener = null;
}
CFrame.prototype.setTitleBarClassName = function(classNameForDefault, classNameForFocused) {
var me = this;
if (classNameForDefault) {
me.titleBarClassNameDefault = classNameForDefault;
me.titleBarClassNameFocused = classNameForDefault;
}
if (classNameForFocused) {
me.titleBarClassNameFocused = classNameForFocused;
}
return me;
};
/**
* Add frameComponent(Wrapped DOM element like 'div' to display above the frame) to frame
* @param frameComponent
*/
CFrame.prototype.addFrameComponent = function(frameComponent) {
var me = this;
me.frameComponentMap[frameComponent.id] = frameComponent;
me.canvas.canvasElement.appendChild(frameComponent.htmlElement);
return me;
};
/**
* Get stored frame component by id
* @param frameComponent
*/
CFrame.prototype.getFrameComponentElement = function(id) {
var me = this;
if (me.frameComponentMap[id]) {
return me.frameComponentMap[id].htmlElement;
} else {
return null;
}
};
CFrame.prototype.removeFrameComponentById = function(frameComponentId) {
var me = this;
var frameComponent = me.frameComponentMap[frameComponentId];
me.canvas.canvasElement.removeChild(frameComponent.htmlElement);
delete me.frameComponentMap[frameComponentId];
};
CFrame.prototype.showFrameComponent = function(frameComponentId, display) {
var me = this;
var comp = me.getFrameComponentElement(frameComponentId);
if (comp) {
if (display) {
comp.style.display = display;
} else {
comp.style.display = 'flex';
}
}
return me;
};
CFrame.prototype.hideFrameComponent = function(frameComponentId) {
var me = this;
var comp = me.getFrameComponentElement(frameComponentId);
if (comp) {
comp.style.display = 'none';
}
return me;
};
CFrame.prototype.hideAllVisibleFrameComponents = function() {
var me = this;
var compMap = me.frameComponentMap;
for (var key in compMap) {
if (compMap.hasOwnProperty(key)) {
var comp = compMap[key].htmlElement;
if (comp.style.display === 'none') {
comp._alreadyNone = true;
}
comp.style.display = 'none';
}
}
};
CFrame.prototype.showAllVisibleFrameComponents = function() {
var me = this;
var compMap = me.frameComponentMap;
for (var key in compMap) {
if (compMap.hasOwnProperty(key)) {
var comp = compMap[key].htmlElement;
if (comp._alreadyNone) {
comp._alreadyNone = null;
} else {
comp.style.display = 'flex';
}
}
}
};
/**
* Close all childMenu
If {exceptFrameComponentId:[frameComponentId]} is specified for the argument,
the child menu will not be closed.
* @param opt
*/
CFrame.prototype.hideFrameComponentChildMenus = function(opt) {
var me = this;
var compMap = me.frameComponentMap;
for (var frameComponentId in compMap) {
if (compMap.hasOwnProperty(frameComponentId)) {
if (opt && opt.exceptFrameComponentId) {
if (frameComponentId === opt.exceptFrameComponentId) {
continue;
}
}
var comp = compMap[frameComponentId];
if (comp.childMenu) {
comp.childMenu.style.display = 'none';
}
}
}
};
CFrame.prototype.setTitle = function(str) {
var me = this;
me.title = str;
if (me.showTitleBar) {
var textNode = document.createTextNode(str);
//firstChildのfirstChildがspan
me.titleBar.firstChild.replaceChild(textNode, me.titleBar.firstChild.firstChild);
}
return me;
};
CFrame.prototype.resize = function(deltaLeft, deltaTop, deltaWidth, deltaHeight) {
var me = this;
var tmpLeft = parseInt(me.htmlElement.style.left, 10);
var tmpTop = parseInt(me.htmlElement.style.top, 10);
var tmpWidth = parseInt(me.htmlElement.style.width, 10);
var tmpHeight = parseInt(me.htmlElement.style.height, 10);
me.htmlElement.style.left = parseInt(tmpLeft + deltaLeft, 10) + 'px';
me.htmlElement.style.top = parseInt(tmpTop + deltaTop, 10) + 'px';
me.htmlElement.style.width = parseInt(tmpWidth + deltaWidth, 10) + 'px';
me.htmlElement.style.height = parseInt(tmpHeight + deltaHeight, 10) + 'px';
var tmpCanvasWidth = parseInt(me.canvas.canvasElement.style.width, 10);
var tmpCanvasHeight = parseInt(me.canvas.canvasElement.style.height, 10);
//Since canvasElement is a (0, 0) relative coordinate with respect to the parent element,
// so it is not necessary to change left and top.
me.canvas.canvasElement.style.width = (tmpCanvasWidth + deltaWidth) + 'px';
me.canvas.canvasElement.style.height = (tmpCanvasHeight + deltaHeight) + 'px';
if (me.showTitleBar) {
//Change the size of the title bar. TitleAdjustWidth etc.
//The reason why you do not have to use titleAdjustWidth is because
// these scaling are done with differences (deltaX, deltaY).
//Therefore, if you adjust with the titleAdjustWidth as
// the initial value, the other will stretch relative.
//You do not think you can use ifDelta
me.titleBar.style.width = (tmpCanvasWidth + deltaWidth) + 'px';
} else {
}
for (var beanName in me.canvas.beanList) {
var tmpBean = me.canvas.beanList[beanName];
if (tmpBean.htmlElement.typeName == 'cmarkerwindow') {
if (tmpBean.htmlElement.usage == 'RD') {
//Move the size change lower right(RD) marker according to the amount of movement.
tmpBean.htmlElement.style.left = (parseInt(tmpBean.htmlElement.style.left, 10) + deltaWidth) + 'px';
tmpBean.htmlElement.style.top = (parseInt(tmpBean.htmlElement.style.top, 10) + deltaHeight) + 'px';
} else if (tmpBean.htmlElement.usage == 'DD') {
//Move the size change lower marker according to the movement amount.
// Do not move left.Only the width wil increase or decrease.
tmpBean.htmlElement.style.width = (parseInt(tmpBean.htmlElement.style.width, 10) + deltaWidth) + 'px';
tmpBean.htmlElement.style.top = (parseInt(tmpBean.htmlElement.style.top, 10) + deltaHeight) + 'px';
} else if (tmpBean.htmlElement.usage == 'RR') {
//Move the size change right marker according to the movement amount
//Do not move top,Only the height will increase or decrease.
tmpBean.htmlElement.style.left = (parseInt(tmpBean.htmlElement.style.left, 10) + deltaWidth) + 'px';
tmpBean.htmlElement.style.height = (parseInt(tmpBean.htmlElement.style.height, 10) + deltaHeight) + 'px';
}
}
}
};
CFrame.prototype.canvasMouseDown = function(e) {
var me = this;
//Mousedown processing of CFrame.canvas
//'This' in this method indicates 'Cwindow.canvas.canvasElement'.
if (this.parentCFrame.parentCanvas.mouseDownSource == null) {
this.parentCFrame.parentCanvas.mouseDownSource = 'childcanvas';
}
};
CFrame.prototype.mouseUp = function(e) {
this.canvas.mouseUp(e);
};
CFrame.prototype.close = function(e) {
var me = this;
//Close processing of CFrame from CloseButton
var parentCanvas = this.parentObject.parentCanvas;
var cframeObj = this.parentObject;
console.log('CFrame#close "' + cframeObj.title + '(@' + cframeObj.getName() + ')' + '" @' + cframeObj.windowId);
var windowId = cframeObj.id;
cframeObj.closeInternally(e, parentCanvas, windowId);
};
CFrame.prototype.closeFrame = function(e) {
//Close processing of CFrame
var me = this;
console.log('CFrame#closeFrame "' + me.title + '(' + me.getName() + ')' + '" @' + me.windowId);
var parentCanvas = this.parentCanvas;
me.closeInternally(e, parentCanvas, me.windowId);
};
CFrame.prototype.closeInternally = function(e, parentCanvas, windowId) {
var me = this;
if (!parentCanvas) {
console.error('Window(' + windowId + ') may have been closed');
return;
}
parentCanvas.removeBean(windowId);
//added for modal window
if (me.modalBackgroundWindowId) {
parentCanvas.removeBean(me.modalBackgroundWindowId);
me.modalBackgroundWindowId = null;
}
if (me.onCloseFrameListener) {
me.onCloseFrameListener(me);
}
};
CFrame.prototype.setOnCloseFrameListener = function(listener) {
var me = this;
me.onCloseFrameListener = listener;
};
CFrame.prototype.contextMenu = function() {
//If you issue the right-click menu in the window, set the source to CFrame.
var contextMenuSource = 'CFrame';
return false;
};
CFrame.prototype.setTitleBarTextColor = function(str) {
var me = this;
me.titleBar.style.color = str;
};
/**
* Set window position with anchor
* @param {number} x
* @param {number} y
* @param {string} anchor anchor means the position of the window with respect to which the position is specified.
* The following values can be specified for the anchor
LEFT_TOP
CENTER_TOP
RIGHT_TOP
LEFT_CENTER
CENTER_CENTER
RIGHT_CENTER
LEFT_BOTTOM
CENTER_BOTTOM
RIGHT_BOTTOM
* @returns {CFrame}
*/
CFrame.prototype.setPosition = function(x, y, anchor) {
var me = this;
var frameWidth = me.getWidth();
var frameHeight = me.getHeight();
me._setPositionInternally(x, y, anchor, frameWidth, frameHeight);
return me;
};
CFrame.prototype._setPositionInternally = function(x, y, anchor, frameWidth, frameHeight) {
var me = this;
if (anchor) {
me.anchor = anchor;
}
if (!anchor || CALIGN.LEFT_TOP == anchor) {
me.htmlElement.style.left = x + 'px';
me.htmlElement.style.top = y + 'px';
} else if (CALIGN.HCENTER_TOP == anchor) {
me.htmlElement.style.left = (-frameWidth / 2 + x) + 'px';
me.htmlElement.style.top = y + 'px';
} else if (CALIGN.RIGHT_TOP == anchor) {
me.htmlElement.style.left = (-frameWidth + x) + 'px';
me.htmlElement.style.top = y + 'px';
} else if (CALIGN.LEFT_VCENTER == anchor) {
me.htmlElement.style.left = x + 'px';
me.htmlElement.style.top = (-frameHeight / 2 + y) + 'px';
} else if (CALIGN.HCENTER_VCENTER == anchor) {
me.htmlElement.style.left = (-frameWidth / 2 + x) + 'px';
me.htmlElement.style.top = (-frameHeight / 2 + y) + 'px';
} else if (CALIGN.RIGHT_VCENTER == anchor) {
me.htmlElement.style.left = (-frameWidth + x) + 'px';
me.htmlElement.style.top = (-frameHeight / 2 + y) + 'px';
} else if (CALIGN.LEFT_BOTTOM == anchor) {
me.htmlElement.style.left = x + 'px';
me.htmlElement.style.top = (-frameHeight + y) + 'px';
} else if (CALIGN.HCENTER_BOTTOM == anchor) {
me.htmlElement.style.left = (-frameWidth / 2 + x) + 'px';
me.htmlElement.style.top = (-frameHeight + y) + 'px';
} else if (CALIGN.RIGHT_BOTTOM == anchor) {
me.htmlElement.style.left = (-frameWidth + x) + 'px';
me.htmlElement.style.top = (-frameHeight + y) + 'px';
}
};
/**
* Returns relative position with anchor
* @returns {{x: *, y: *, anchor: *}}
*/
CFrame.prototype.getPosition = function() {
var me = this;
var frameWidth = me.getWidth();
var frameHeight = me.getHeight();
var x;
var y;
var anchor = me.anchor;
if (!anchor || CALIGN.LEFT_TOP == anchor) {
x = parseInt(me.htmlElement.style.left, 10);
y = parseInt(me.htmlElement.style.top, 10);
} else if (CALIGN.HCENTER_TOP == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth / 2;
y = parseInt(me.htmlElement.style.top, 10);
} else if (CALIGN.RIGHT_TOP == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth;
y = parseInt(me.htmlElement.style.top, 10);
} else if (CALIGN.LEFT_VCENTER == anchor) {
x = parseInt(me.htmlElement.style.left, 10);
y = parseInt(me.htmlElement.style.top, 10) + frameHeight / 2;
} else if (CALIGN.HCENTER_VCENTER == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth / 2;
y = parseInt(me.htmlElement.style.top, 10) + frameHeight / 2;
} else if (CALIGN.RIGHT_VCENTER == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth;
y = parseInt(me.htmlElement.style.top, 10) + frameHeight / 2;
} else if (CALIGN.LEFT_BOTTOM == anchor) {
x = parseInt(me.htmlElement.style.left, 10);
y = parseInt(me.htmlElement.style.top, 10) + frameHeight;
} else if (CALIGN.HCENTER_BOTTOM == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth / 2;
y = parseInt(me.htmlElement.style.top, 10) + frameHeight;
} else if (CALIGN.RIGHT_BOTTOM == anchor) {
x = parseInt(me.htmlElement.style.left, 10) + frameWidth;
y = parseInt(me.htmlElement.style.top, 10) + frameHeight;
}
return { x: x, y: y, anchor: anchor };
};
CFrame.prototype.getLeft = function() {
var me = this;
return parseInt(me.htmlElement.style.left, 10);
};
CFrame.prototype.getTop = function() {
var me = this;
return parseInt(me.htmlElement.style.top, 10);
};
CFrame.prototype.getWidth = function() {
var me = this;
return parseInt(me.htmlElement.style.width, 10);
};
CFrame.prototype.getHeight = function() {
var me = this;
return parseInt(me.htmlElement.style.height, 10);
};
CFrame.prototype.getSize = function() {
var me = this;
return { width: me.getWidth(), height: me.getHeight() };
};
CFrame.prototype.setSize = function(width, height, force) {
var me = this;
var byUser = true;
if (force) {
byUser = false;
}
//call CIFrame#resize instead of CFrame#resize
me.resize(0, 0, width - me.getWidth(), height - me.getHeight(), byUser);
return me;
};
CFrame.prototype.getWindowId = function() {
var me = this;
return me.windowId;
};
CFrame.prototype.getName = function() {
var me = this;
return me.property.name;
};
CFrame.prototype.setName = function(name) {
var me = this;
me.property.name = name;
};
/**
* end of CFrame class
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
inherit(CIfFrame, CFrame);
/**
* CIfFrame class
* Extension class with contents frame of CFrame as iframe
* @param windowId
* @param appearance
* @constructor
*/
function CIfFrame(windowId, left, top, width, height, appearance) {
var wleft = left;
var wtop = top;
var wwidth = width;
var wheight = height;
var zindex = appearance.zindex;
var wborderwidth = null;
var me = this;
this.jsFrame = null;
this.control = null;
this.minFrameWidth = 128;
this.minWindowHeight = 32;
this.eventListenerHelper = new EventListenerHelper();
/**
* If this value is true, the focus will move when tapping the iframe area,
* but if the window do not have the focus, you can not click on the element in the iframe.
*/
this.overrayTransparentScreenEnabled = false;
/**
* Only in the case of resizing a transparent screen can be displayed on the iframe
* and the size can be adjusted smoothly.
* true is recommended.
*/
//Change history
//20181226
//Changed to false.
// So it becomes necessary to click twice to react when you call the #setSize,I changed the value to false.
//20181231
//I found the way that iframe will be changed the size smoothly.so the final answer is true.
this.overrayTransparentScreenOnResize = true;
this.titleBarColorFocused = appearance.titleBarColorFocused;
this.titleBarColorDefault = appearance.titleBarColorDefault;
this.titleBarCaptionColorDefault = appearance.titleBarCaptionColorDefault;
this.titleBarCaptionColorFocused = appearance.titleBarCaptionColorFocused;
//call super constructor
CIfFrame.superConstructor.call(me, windowId, wleft, wtop, wwidth, wheight, zindex, wborderwidth, appearance);
//border color
me.frameBorderColorDefault = appearance.frameBorderColorDefault;
me.frameBorderColorFocused = appearance.frameBorderColorFocused;
//border width
me.frameBorderWidthDefault = appearance.frameBorderWidthDefault;
me.frameBorderWidthFocused = appearance.frameBorderWidthFocused;
me.iframe = null;
//Offset value for width adjustment of iframe
me.ifDelta = 0;
me.resizable = true;
me.onMouseMoveOnIframe = null;
me.onMouseUpOnIframe = null;
me._hasFocus = false;
me._hasFocusTime = 0;
me.htmlElement.typeName = 'cifwindow';
//name of iframe
var exIframeName = 'riversun_' + windowId;
me.dframe = document.createElement('div');
me.iframe = document.createElement('iframe');
me.iframe.name = exIframeName;
me.iframe.id = exIframeName;
me.iframe.frameBorder = '0';
//me.iframe.scrolling = 'no';
me.iframe.zIndex = -1;
//Allow transparent of iframe background.
me.iframe.allowTransparency = 'true';
me.iframe.width = me.canvasNetWidth - me.ifDelta + 0;
me.iframe.height = me.canvasNetHeight - me.ifDelta + 0;
me.showTitleBar = appearance.showTitleBar;
me.getFrameInnerBorderRadius = appearance.getFrameInnerBorderRadius;
me.frameBorderRadius = appearance.frameBorderRadius;
me.adjustFrameBorderRadius();
me.useIframe = false;
me.canvas.canvasElement.appendChild(me.iframe);
me.canvas.canvasElement.appendChild(me.dframe);
this.setUseIframe = function(useIframe) {
me.useIframe = useIframe;
me.iframe.style.visibility = 'hidden';
me.iframe.style.position = 'absolute';
me.iframe.style.left = '0px';
me.iframe.style.top = '0px';
me.iframe.style.width = '100%';
me.iframe.style.height = '100%';
me.dframe.style.visibility = 'hidden';
me.dframe.style.position = 'absolute';
me.dframe.style.left = '0px';
me.dframe.style.boxSizing = 'content-box';
me.dframe.style.top = '0px';
me.dframe.style.width = '100%';
me.dframe.style.height = '100%';
//me.dframe.style.borderStyle="solid";
me.dframe.style.backgroundColor = 'white';
if (useIframe) {
me.iframe.style.visibility = 'visible';
me.dframe.style.visibility = 'hidden';
} else {
me.iframe.style.visibility = 'hidden';
me.dframe.style.visibility = 'visible';
}
};
me.setUseIframe(appearance.useIframe);
// If it is IE, set the canvasElement of the canvas which is the parent of the iframe to transparent.
if (me.overrayTransparentScreenEnabled || me.overrayTransparentScreenOnResize) {
//Create a transparent screen.
me.transparence = document.createElement('span');
// me.transparence.style.backgroundImage = 'url(img/img_baron_tp.gif)';
me.transparence.style.position = 'absolute';
me.transparence.style.left = '0px';
me.transparence.style.top = '0px';
//Transparent screen is 0px when creating window
me.transparence.style.width = '0px';
me.transparence.style.height = '0px';
me.transparence.style.zIndex = 4;
me.transparence.style.borderWidth = '0px';
me.transparence.style.borderColor = '#ff00ee';
me.transparence.style.borderStyle = 'none';
me.transparence.style.cursor = 'default';
me.transparence.style.pointerEvents = 'none';
me.canvas.canvasElement.style.backgroundColor = appearance.frameBackgroundColor;
me.canvas.canvasElement.appendChild(me.transparence);
}
me.eventEmitter = new EventEmitter();
me.appearance = appearance;
}
CIfFrame.prototype.getFrameView = function() {
var me = this;
return me.dframe;
};
CIfFrame.prototype.getFrameAppearance = function() {
var me = this;
return me.appearance;
};
CIfFrame.prototype.setHTML = function(html) {
var me = this;
me.dframe.innerHTML = html;
};
CIfFrame.prototype.setFrameInFrame = function(enabled) {
// Why i had to (bother to:) ) make a setFrameInFrame
// The element specified at the top of the content of the parent window (for example, div element)
// may NOT be able to get the resize event using addEventListener.
// Therefore, when the resize event issued by jsFrame in the parent window occurs,
// its custom attribute (WindowEventHelper.MATCH_PARENT_CHANGE_MARKER_ATTR) is attached
// to the element at the top of the parent window content
// and it is captured by the mutationObserver on the child window side.
var me = this;
var contentsEle = me.dframe ? me.dframe.firstChild : null;
if (contentsEle) {
// polyfill for #now
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
};
}
if (enabled) {
me.eventEmitter.only('resize', 'fif-listener', function() {
contentsEle.setAttribute(WindowEventHelper.MATCH_PARENT_CHANGE_MARKER_ATTR, Date.now());
});
} else {
contentsEle.removeAttribute(WindowEventHelper.MATCH_PARENT_CHANGE_MARKER_ATTR);
me.eventEmitter.only('resize', 'fif-listener', function() {
// do nothing
});
}
}
};
/**
* Find DOM Element in the frame by querySelector
* Examples
* frame.$("#my_id_name");
* frame.$(".my_class_name");
* frame.$("div>img");
* frame.$("input[type='submit]");
* @param {string} q selector query
* @returns {Node}
*/
CIfFrame.prototype.$ = function(q) {
var me = this;
if (me.useIframe) {
var docInIframe = me.iframe.contentWindow.document;
return docInIframe.querySelector(q);
} else {
return me.dframe.querySelector(q);
}
};
/**
* Sets an event listener for the window itself or elements in the contents of the window.
It is possible to register multiple listeners to the same event type.
* @param {string} id
If the "id" is prefixed with "#",
an event listener can be set to a DOM element (eventTarget) identified by the id in the content.
This is the same behavior as the usual eventTarget#addEventListener.
In addition to the DOM element in the content, the following special names are reserved for the "id"
"closeButton" ... close button.
"minimizeButton" ... Minimize Button
"zoomButton"...zoom button.
"restoreButton" ... the button that restores the window size.
"deminimizeButton" ... the button to return from the minimized state.
You can also receive events such as window resizing, moving, and focusing.
In this case, specify the following as "id"
"frame" or "window".
You can specify a frameComponent name that is uniquely defined by addFrameComponent.
(Generic buttons such as closeButton are one of the frame components.
* @param {string} eventType The element in the content (HTML) of a window whose "id" starts with "#"
* can be the same as the eventType(https://developer.mozilla.org/en-US/docs/Web/API/Event/type) used by the normal addEventListener.
If the "id" is a frame or a window, the following can be used
"move"... When a window is moved, it fires.
"resize"... Fires when the window is resized.
"focus"... "focus" means got focus. It fires when the window is in focus.
"blur"... "blur" means lost focus.It fires when the window loses focus.
* @param {function} callbackFunc
*/
CIfFrame.prototype.on = function(id, eventType, callbackFunc) {
var me = this;
var component = me.getFrameComponentElement(id);
// if id indicates frame component like CTextButton,CImageButton
if (component) {
//Since we want to specify only one handler for frame components at the same time,
// use eventListenerHelper instead of an event listener
me.eventListenerHelper.addEventListener(component, eventType, function(e) {
callbackFunc(me, e,
{
type: 'frameComponent',
id: id,
eventType: eventType,
//child: childMenuEle
});
}, { listenerName: 'frame-component-listener' });
}
if (id === 'frame' || id === 'window') {
if (eventType === 'move' && !me.eventEmitter.hasListenerFuncs('move')) {
me.setOnMoveListener(function(e) {
//refCIfFrame.eventEmitter.emit('resize',);
me.eventEmitter.emit('move', me._getCurrentSizePos());
});
}
me.eventEmitter.on(eventType, callbackFunc);
}
// DOM element in iframe or DOM element on dframe
var domElement = me.$(id);
if (domElement) {
if (me.eventListenerHelper.hasEventListener(domElement, eventType, 'frame-dom-listener')) {
me.eventListenerHelper.removeEventListener(domElement, eventType, null, { listenerName: 'frame-dom-listener' });
}
me.eventListenerHelper.addEventListener(domElement, eventType, function(e) {
callbackFunc(me, e, {
type: 'dom',
id: id,
eventType: eventType
});
}, { listenerName: 'frame-dom-listener' });
}
// Search DOM element on frameComponent
if (!domElement) {
var domElementOnCanvasElement = me.canvas.canvasElement.querySelector(id);
if (domElementOnCanvasElement) {
domElementOnCanvasElement.addEventListener(eventType, function(e) {
callbackFunc(me, e, {
type: 'dom',
id: id,
eventType: eventType
});
});
}
}
};
CIfFrame.prototype.adjustFrameBorderRadius = function() {
var me = this;
if (parseInt(me.frameBorderRadius, 10) > 0) {
var borderData = me.getFrameInnerBorderRadius(me, me._hasFocus);
var frameAppearance = borderData.frameAppearance;
var innerBorderRadius = borderData.innerBorderRadius;
var titleBarHeight = parseInt(frameAppearance.titleBarHeight, 10);
if (me.showTitleBar) {
//title bar exists
me.canvas.canvasElement.style.borderBottomRightRadius = innerBorderRadius;
me.canvas.canvasElement.style.borderBottomLeftRadius = innerBorderRadius;
me.iframe.style.borderBottomRightRadius = innerBorderRadius;
me.iframe.style.borderBottomLeftRadius = innerBorderRadius;
me.titleBar.style.borderTopLeftRadius = innerBorderRadius;
me.titleBar.style.borderTopRightRadius = innerBorderRadius;
} else {
//title bar not exits
me.canvas.canvasElement.style.borderRadius = innerBorderRadius;
me.iframe.style.borderRadius = innerBorderRadius;
}
if (me.dframe) {
if (titleBarHeight === 0) {
if (!me.dframe.style.borderTopRightRadius) {
me.dframe.style.borderTopRightRadius = innerBorderRadius;
}
if (!me.dframe.style.borderTopLeftRadius) {
me.dframe.style.borderTopLeftRadius = innerBorderRadius;
}
}
me.dframe.style.borderBottomRightRadius = innerBorderRadius;
me.dframe.style.borderBottomLeftRadius = innerBorderRadius;
}
}
};
CIfFrame.prototype.handleReleasingFocus = function(e) {
var me = this;
var focused = me._hasFocus;
me._hasFocus = false;
//update style class
me.titleBar.className = me.titleBarClassNameDefault;
if (me.titleBarColorDefault) {
me.titleBar.style.background = me.titleBarColorDefault;
}
me.titleBar.style.color = me.titleBarCaptionColorDefault;
//border color
if (me.frameBorderColorDefault) {
me.htmlElement.style.borderColor = me.frameBorderColorDefault;
}
//border width
if (me.frameBorderWidthDefault) {
me.htmlElement.style.borderWidth = me.frameBorderWidthDefault;
me.adjustFrameBorderRadius();
}
if (me.htmlElement.typeName == 'cifwindow') {
if (me.overrayTransparentScreenEnabled) {
me.transparence.style.width = parseInt(me.iframe.width, 10) + 'px';
me.transparence.style.height = parseInt(me.iframe.height, 10) + 'px';
}
}
//handling for child frameComponents
for (var frameComponentId in me.frameComponentMap) {
var frameComponent = me.frameComponentMap[frameComponentId];
frameComponent.handleReleasingFocus();
}
//border bottom
if (me.titleBarBorderBottomDefault) {
me.titleBar.style.borderBottom = me.titleBarBorderBottomDefault;
}
if (focused) {
me.eventEmitter.emit('blur', { target: me });
}
return me;
};
CIfFrame.prototype.handleTakingFocus = function(e) {
var me = this;
var focused = me._hasFocus;
me._hasFocus = true;
me._hasFocus = Date.now();
if (me.overrayTransparentScreenEnabled) {
//close transparence screen
me.transparence.style.width = '0px';
me.transparence.style.height = '0px';
}
//update style class
me.titleBar.className = me.titleBarClassNameFocused;
if (me.titleBarColorFocused) {
me.titleBar.style.background = me.titleBarColorFocused;
}
me.titleBar.style.color = me.titleBarCaptionColorFocused;
//border color
if (me.frameBorderColorFocused) {
me.htmlElement.style.borderColor = me.frameBorderColorFocused;
}
//border width
if (me.frameBorderWidthFocused) {
me.htmlElement.style.borderWidth = me.frameBorderWidthFocused;
me.adjustFrameBorderRadius();
}
//border bottom
if (me.titleBarBorderBottomFocused) {
me.titleBar.style.borderBottom = me.titleBarBorderBottomFocused;
}
//handling for child frameComponents
for (var frameComponentId in me.frameComponentMap) {
var frameComponent = me.frameComponentMap[frameComponentId];
frameComponent.handleTakingFocus();
}
if (!focused) {
me.eventEmitter.emit('focus', { target: me });
}
return me;
};
CFrame.prototype.show = function(model) {
var me = this;
//me.htmlElement.style.visibility = 'visible';
me.htmlElement.style.display = 'flex';//hidden';
if (model && model.requestFocus == false) {
} else {
me.requestFocus();
}
return me;
};
CFrame.prototype.showModal = function(onCloseListener) {
var me = this;
var appearance = new CFrameAppearance();
appearance.showTitleBar = true;
appearance.showCloseButton = false;
appearance.frameBorderRadius = '0px';
appearance.frameBorderStyle = 'none';
appearance.frameBorderWidthDefault = '0px';
appearance.frameBorderWidthFocused = '0px';
appearance.frameBoxShadow = null;
appearance.frameBackgroundColor = 'transparent';
appearance.frameComponents = [];
appearance.frameHeightAdjust = 0;
appearance.titleBarHeight = '0px';
appearance.titleBarBorderBottomFocused = null;
appearance.titleBarCaptionLeftMargin = '0px';
appearance.onInitialize = function() {
};
//added for modal window
appearance.pullUpDisabled = true;
var windowManager = me.parentCanvas;
var modalBackgroundWindowId = DEF.CFRAME.MODAL_BACKGROUND_FRAME_ID_PREFIX + me.id;
//create background window for preventing click background
var modalBackgroundFrame = new CIfFrame(modalBackgroundWindowId, 0, 0, 1, 1, appearance);
modalBackgroundFrame.setSize(window.innerWidth, window.innerHeight, true);
modalBackgroundFrame.setResizable(false);
window.addEventListener('resize', function() {
modalBackgroundFrame.setSize(window.innerWidth, window.innerHeight, true);
});
//remember id of modal background frame
me.modalBackgroundWindowId = modalBackgroundWindowId;
// if (properties && properties.windowName) {
// frame.setName(properties.windowName);
// }
modalBackgroundFrame.hide();
windowManager.addWindow(modalBackgroundFrame);
modalBackgroundFrame.setTitle('').getFrameView().innerHTML = '
* A canvas class that displays multiple frames. Handle events on the window to coordinate multiple windows
*
* @param parentElement
* @param canvasId
* @param left
* @param top
* @param width
* @param height
* @constructor
*/
function CWindowManager(parentElement, canvasId, left, top, width, height) {
CWindowManager.superConstructor.call(this, parentElement, canvasId, left, top, width, height);
var me = this;
// document.body.addEventListener('click', function(evt) {
document.addEventListener('click', function(evt) {
for (var windowId in me.beanList) {
var beanFrame = me.beanList[windowId];
beanFrame.onBodyClicked(evt);
}
});
}
CWindowManager.prototype.getWindow = function(windowId) {
var me = this;
return me.beanList[windowId];
};
//Wrapping the 'addBean' of the parent class
CWindowManager.prototype.addWindow = function(window) {
var me = this;
var windowId = window.getWindowId();
var name = window.getName();
me.beanIdName[windowId] = name;
me.beanNameId[name] = windowId;
me.addBean(window);
};
//if contains window named specified name
CWindowManager.prototype.containsWindowName = function(name) {
var me = this;
var windowId = me.beanNameId[name];
if (windowId) {
return true;
}
return false;
};
CWindowManager.prototype.getWindowByName = function(name) {
var me = this;
var windowId = me.beanNameId[name];
if (windowId) {
return me.getWindow(windowId);
} else {
return null;
}
};
//Wrapping the 'mouseMove' method of the parent class
CWindowManager.prototype.windowMouseMove = function(e) {
var me = this;
if (me.currentObject == null) {
return null;
}
var childWindowMoved = false;
//Loop processing of each CWindow held by CWindowManager
var beanList = me.beanList;
for (var windowId in beanList) {
var targetWindow = beanList[windowId];
//Since this 'mouseMove' is canvas of CWindow's 'mouseMove',so do move CBeanFrames in the canvas.
var eventData = targetWindow.canvas.mouseMove(e);
//Whether any one of the beans in the Canvas has moved or not.
//Yes.(When it moves), eventData is set.
//NO. If it does not move it is set to null.
childWindowMoved = childWindowMoved | (eventData != null);
if (eventData != null) {
//If it is the marker for resizing
if (eventData.targetTypeName == 'cmarkerwindow') {
var targetObject = eventData.targetObject;
//Enable transparent window only when moving.
//This will work smoothly even with iframe content
targetWindow.transparence.style.pointerEvents = 'auto';
if (targetObject.usage == 'RD') {
targetWindow.resize(0, 0, eventData.deltaX, eventData.deltaY, true);
} else if (targetObject.usage == 'DD') {
targetWindow.resize(0, 0, 0, eventData.deltaY, true);
} else if (targetObject.usage == 'RR') {
targetWindow.resize(0, 0, eventData.deltaX, 0, true);
}
}
}
}
//If any one of the beans in the Canvas has moved.Do not do 'Cwindow's mouseMove'
if (!childWindowMoved && this.mouseDownSource != 'childcanvas') {
//Moving logic for CWindow which is holded by CWindowManager as a child window.
me.mouseMove(e);
}
};
//Wrapping the method 'mouseUp' of the parent class
CWindowManager.prototype.windowMouseUp = function(e) {
var me = this;
//run 'mouseUp' of parent class
me.mouseUp(e);
var beanList = me.beanList;
for (var windowId in beanList) {
var objWindow = beanList[windowId];
//run CWindow's 'mouseUp'(it's child window).
objWindow.mouseUp(e);
}
};
/**
* (override CCanvas.removeBean)
* @param windowId
*/
CWindowManager.prototype.removeBean = function(windowId) {
var me = this;
//Retrieve the target beanFrame
var beanList = me.beanList;
var targetBean = beanList[windowId];
if (targetBean == null) {
return;
}
var removeTargetBeanHasFocus = targetBean._hasFocus;
//Remove bean's htmlElement from canvasElement
me.canvasElement.removeChild(targetBean.htmlElement);
//Delete the bean object in the associative array.
delete beanList[windowId];
var beanName = me.beanIdName[windowId];
if (beanName) {
//-if bean name exist
delete me.beanIdName[windowId];
delete me.beanNameId[beanName];
}
//focus on last focused window after removing
var maxFocusTime = 0;
var lastFocusedFrame = null;
if (removeTargetBeanHasFocus) {
for (var windowId in beanList) {
var frame = beanList[windowId];
//pullUpDisabled=true means that the frame is modal background window
if (maxFocusTime <= frame._hasFocusTime && !frame.pullUpDisabled) {
maxFocusTime = frame._hasFocusTime;
lastFocusedFrame = frame;
}
}
if (lastFocusedFrame) {
lastFocusedFrame.requestFocus();
}
}
targetBean.parentCanvas = null;
};
/**
* end of CWindowManager class
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
inherit(CMarkerWindow, CBeanFrame);
/**
* CMarkerWindow class
* @param windowId
* @param left
* @param top
* @param width
* @param height
* @param zindex
* @param usage
* @constructor
*/
function CMarkerWindow(windowId, left, top, width, height, zindex, usage, color) {
var me = this;
CMarkerWindow.superConstructor.call(this, windowId, left, top, width, height, zindex, usage);
me.htmlElement.typeName = 'cmarkerwindow';
me.htmlElement.usage = usage;
me.htmlElement.isRangeLimited = false;
me.htmlElement.style.borderStyle = 'none';
me.htmlElement.style.zIndex = 1;
if (color) {
me.htmlElement.style.background = color;
}
//me.pullUpDisabled = true;
me.getWindowType = function() {
return 'CMarkerWindow';
};
}
/**
* End of CMarkerWindow class
* @constructor
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
/**
* FrameManager class
* @constructor
*/
function JSFrame(model) {
var me = this;
var parentElement = null;
// Frames will be fixed(Frames keep staying in the same place) even if the user scrolls the browser.
me.isWindowManagerFixed = true;//default is true.
//Initialization parameter check
if (model && model.fixed == false) {
me.isWindowManagerFixed = false;
}
if (model && model.parentElement) {
parentElement = model.parentElement;
}
me.hAlign = 'left';
me.vAlign = 'top';
if (model && model.horizontalAlign) {
me.hAlign = model.horizontalAlign;
}
if (model && model.verticalAlign) {
me.vAlign = model.verticalAlign;
}
me.pullToRefresh = false;
if (model && typeof model.pullToRefresh === 'boolean') {
me.pullToRefresh = model.pullToRefresh;
}
me.touchActionManipulation = true;
if (model && typeof model.touchActionManipulation === 'boolean') {
me.touchActionManipulation = model.touchActionManipulation;
}
if (!parentElement) {
if (me.isWindowManagerFixed) {
var topParentDiv = document.createElement('div');
topParentDiv.id = 'jsFrame_fixed_' + me.generateUUID();
topParentDiv.setAttribute('style',
'position:fixed;' + me.hAlign + ':0px;' + me.vAlign + ':0px;margin:0px;padding:0px;'
);
document.body.appendChild(topParentDiv);
parentElement = topParentDiv;
} else {
var topParentDiv = document.createElement('div');
topParentDiv.id = 'jsFrame_absolute_' + me.generateUUID();
topParentDiv.setAttribute('style',
'position:absolute;' + me.hAlign + ':0px;' + me.vAlign + ':0px;margin:0px;padding:0px;'
);
document.body.appendChild(topParentDiv);
parentElement = topParentDiv;
}
} else {
if (me.isWindowManagerFixed) {
//parentElement set
var topParentDiv = document.createElement('div');
topParentDiv.id = 'jsFrame_fixed_' + me.generateUUID();
topParentDiv.setAttribute('style',
'position:fixed;' + me.hAlign + ':0px;' + me.vAlign + ':0px;margin:0px;padding:0px;'
);
parentElement.appendChild(topParentDiv);
} else {
var topParentDiv = document.createElement('div');
topParentDiv.id = 'jsFrame_absolute_' + me.generateUUID();
topParentDiv.setAttribute('style',
'position:absolute;' + me.hAlign + ':0px;' + me.vAlign + ':0px;margin:0px;padding:0px;'
);
parentElement.appendChild(topParentDiv);
}
}
if (MOUSE_ENABLED) {
document.addEventListener('mouseup', mouseUp);
document.addEventListener('mousemove', mouseMove);
}
if (TOUCH_ENABLED) {
if ('ontouchend' in window) {
var funcOnTouchEnd = function(evt) {
// The "mouseup" event happens right after "touchend" event,
// but I don't call #preventdefault because #preventdefault prevents "onclick".
// So, perform #preventdefault only for "touchmove"
// evt.preventDefault();
mouseUp.bind(this)(evt);
};
document.addEventListener('touchend', funcOnTouchEnd);
}
if ('ontouchmove' in window) {
// To remove the 300ms tap delay between touchend and click,
// To disable double-tap to zoom
if (me.touchActionManipulation) {
me.doEnableTouchActionManipulation();
}
if (!me.pullToRefresh) {
// The Android version of Chrome has a feature that refreshes the page by sliding downward
// while touching on the screen, but when this feature is enabled, the downward movement of the window is inhibited,
// so this feature can be explicitly turned off.
me.doDisablePullToRefresh();
}
var funcOnTouchMove = function(evt) {
// Call #preventDefault to prevent simultaneous ignition of mousemove
evt.preventDefault();
mouseMove.bind(this)(evt);
};
document.addEventListener('touchmove', funcOnTouchMove);
}
}
me.windowManager = new CWindowManager(parentElement, 'windowManager_' + me.generateUUID(), 0, 0, 0, 0);
//me.windowManager = new CWindowManager(document.body, 'windowManager_' + me.generateUUID(), 0, 0, 0, 0);
me.domPartsBuilder = null;
function mouseUp(e) {
me.windowManager.windowMouseUp(e);
}
function mouseMove(e) {
me.windowManager.windowMouseMove(e);
}
}
JSFrame.prototype.doEnableTouchActionManipulation = function() {
var bodyStyle = document.documentElement.getAttribute('style');
if (!bodyStyle) {
bodyStyle = '';
} else {
if (!bodyStyle.endsWith(';')) {
bodyStyle += ';';
}
}
if (bodyStyle.indexOf('touch-action') === -1) {
bodyStyle += '-ms-touch-action: manipulation;touch-action: manipulation;';
document.documentElement.setAttribute('style', bodyStyle);
}
};
JSFrame.prototype.doDisablePullToRefresh = function() {
var bodyStyle = document.body.getAttribute('style');
if (!bodyStyle) {
bodyStyle = '';
} else {
if (!bodyStyle.endsWith(';')) {
bodyStyle += ';';
}
}
if (bodyStyle.indexOf('overscroll-behavior-y') === -1) {
bodyStyle += 'overscroll-behavior-y: contain;';
document.body.setAttribute('style', bodyStyle);
}
};
JSFrame.prototype.getDomPartsBuilder = function() {
var me = this;
if (!me.domPartsBuilder) {
me.domPartsBuilder = new CDomPartsBuilder();
}
return me.domPartsBuilder;
};
JSFrame.prototype.create = function(model) {
var me = this;
var properties = {};
properties.name = model.name;
var title = model.title;
var left = model.left;
var top = model.top;
var width = model.width;
var height = model.height;
var appearance = model.appearance;
var presetWindowName = model.preset;
var presetWindowParam = model.presetParam;
var appearanceName = model.appearanceName;
var appearanceParam = model.appearanceParam;
var style = model.style;
var minWidth = model.minWidth;
var minHeight = model.minHeight;
var html = model.html;
var resizable = model.resizable;
var movable = model.movable;
var url = model.url;
var urlLoaded = model.urlLoaded;
var presetParam = model.presetParam;
var presetWindow;
if (presetWindowName) {
var presetWindowObj = this.getPresetWindow(presetWindowName);
presetWindow = presetWindowObj.getPresetWindow(presetParam);
appearance = this.createPresetStyle(presetWindow.appearanceName,
{ appearanceParam: presetWindow.appearanceParam });
} else if (appearanceName) {
appearance = this.createPresetStyle(appearanceName,
{ appearanceParam: appearanceParam });
}
if (model.clientHeight) {
var windowTitleBarHeight = parseInt(appearance.titleBarHeight || 0) - appearance.frameHeightAdjust;
height = model.clientHeight + windowTitleBarHeight;
}
var frame = this.createFrame(left, top, width, height, appearance, properties);
if (title) {
frame.setTitle(title);
}
if (html) {
frame.setHTML(html);
}
if (url) {
var urlPromise = frame.setUrl(url);
if (urlLoaded) {
urlPromise.then(urlLoaded);
}
}
if (resizable == false) {
frame.setResizable(false);
}
if (movable == false) {
frame.setMovable(false);
}
if (minWidth && minHeight) {
frame.minFrameWidth = minWidth;
}
if (minHeight) {
frame.minWindowHeight = minHeight;
if (model.clientHeight) {
frame.minWindowHeight = minHeight + windowTitleBarHeight;
}
}
if (style) {
var frameView = frame.getFrameView();
for (var name in style) {
if (style.hasOwnProperty(name)) {
frameView.style[name] = style[name];
}
}
}
if (presetWindow) {
presetWindow.setupPresetWindow(frame);
}
return frame;
};
/**
* Create a new window
*
* @returns {CIfFrame}
*/
JSFrame.prototype.createFrame = function(left, top, width, height, appearance, properties) {
var me = this;
if (!appearance) {
appearance = me.createFrameAppearance();
}
appearance.initialize();
var windowId = 'window_' + me.generateUUID();
if (!left) {
left = 0;
}
if (!top) {
top = 0;
}
if (!width) {
width = 128;
}
if (!height) {
height = 128;
}
var frame = new CIfFrame(windowId, left, top, width, height, appearance);
//experimental
frame.jsFrame = me;
if (properties && properties.name) {
frame.setName(properties.name);
}
frame.hide();
me.windowManager.addWindow(frame);
// getTitleBarStyle is deprecated
if (appearance.getTitleBarStyle) {
var titleBarStyle = appearance.getTitleBarStyle();
if (titleBarStyle) {
frame.setTitleBarClassName(titleBarStyle.titleBarClassNameDefault, titleBarStyle.titleBarClassNameFocused);
}
} else if (appearance.titleBarClassNameDefault && appearance.titleBarClassNameFocused) {
frame.setTitleBarClassName(appearance.titleBarClassNameDefault, appearance.titleBarClassNameFocused);
} else if (appearance.titleBarClassNameDefault) {
frame.setTitleBarClassName(appearance.titleBarClassNameDefault, appearance.titleBarClassNameDefault);
}
return frame;
};
JSFrame.prototype.containsWindowName = function(windowName) {
var me = this;
return me.windowManager.containsWindowName(windowName);
};
JSFrame.prototype.getWindowByName = function(windowName) {
var me = this;
return me.windowManager.getWindowByName(windowName);
};
JSFrame.prototype.generateUUID = function() {
var unixTime = Date.now();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (unixTime + Math.random() * 16) % 16 | 0;
unixTime = Math.floor(unixTime / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
};
JSFrame.prototype.createFrameAppearance = function() {
return new CFrameAppearance();
};
JSFrame.prototype.createAnimator = function() {
return new CSimpleLayoutAnimator();
};
/**
* Helper class for maximizing and minimizing windows(frames) and handling animations accordingly
*/
JSFrame.prototype.createWindowEventHelper = function(model) {
var me = this;
if (!model) {
model = {};
}
model.verticalAlign = me.vAlign;
model.horizontalAlign = me.hAlign;
var wndEventHelper = new WindowEventHelper(model);
return wndEventHelper;
};
JSFrame.prototype.getPresetWindow = function(presetName, param) {
if (presetWindows[presetName]) {
var presetObj = presetWindows[presetName];
return presetObj;
} else {
return null;
}
}
JSFrame.prototype.createPresetStyle = function(presetName, param) {
var me = this;
var apr = me.createFrameAppearance();
if (param && param.focusedFrameOnly) {
apr.focusedFrameOnly = param.focusedFrameOnly;
}
if (presetStyles[presetName]) {
var styleObj = presetStyles[presetName];
var appearanceParam = null;
if (param && param.appearanceParam) {
appearanceParam = param.appearanceParam;
}
return styleObj.getStyle(apr, appearanceParam);
}
console.error('[JSFrame] Preset appearance "' + presetName + '" not found.');
return apr;
};
JSFrame.prototype.showToast = function(model) {
if (!model) {
return;
}
var me = this;
var toastHeight = 60;
var toastWidth = 260;
var openCloseDurationMs = 300;
var stayDurationMs = 1000;
var startY = window.innerHeight - 10 - toastHeight / 2;
var endY = window.innerHeight - 20 - toastHeight / 2;
var myHtml = '';
var showButton = false;
var style = {
borderRadius: '10px',
background: 'rgba(0,0,0,0.8)',
};
if (model.style) {
style = model.style;
}
if (model.height) {
toastHeight = model.height;
}
if (model.width) {
toastWidth = model.width;
}
if (model.duration) {
stayDurationMs = model.duration;
}
if (model.align) {
if (model.align == 'top') {
startY = 10 + toastHeight / 2;
endY = 20 + toastHeight / 2;
} else if (model.align == 'center') {
startY = window.innerHeight / 2;
endY = window.innerHeight / 2;
} else {
//bottom
}
}
if (model.html) {
myHtml = model.html;
}
if (model.text) {
myHtml = model.text;
}
if (model.closeButton == true) {
showButton = true;
} else {
showButton = false;
}
var apr = me.createPresetStyle('toast');
if (style.borderRadius) {
apr.frameBorderRadius = style.borderRadius;
}
if (model.closeButtonColor) {
apr.captionClor = model.closeButtonColor;
}
var frame = me.create({
name: 'toast_' + me.generateUUID(),
width: toastWidth, height: toastHeight,
movable: false,
resizable: false,
appearance: apr,
style: style,
html: '
* Appearance Model Class for Frame * */ function CFrameAppearance() { var me = this; this.showTitleBar = true; this.showCloseButton = true; this.titleBarCaption = ''; this.titleBarCaptionFontSize = '12px'; this.titleBarCaptionFontWeight = 'bold'; this.titleBarHeight = '24px'; this.useIframe = false; this.useFrame = true; this.titleBarClassNameDefault=null; this.titleBarClassNameFocused=null; this.setUseIFrame = function(value) { me.useIframe = value; me.useFrame = !value; return me; }; /** * The position from the left side of the caption. If this value is null, caption will be centered. */ this.titleBarCaptionLeftMargin = '5px'; this.titleBarColorDefault = null; this.titleBarColorFocused = null; this.titleBarCaptionColorDefault = ''; this.titleBarCaptionColorFocused = ''; this.titleBarCaptionTextShadow = '0 1px 0 rgba(255,255,255,.7)'; this.titleBarCaptionTextAlign = 'center'; this.titleBarBorderBottomDefault = '1px solid rgba(0,0,0,0.2)'; this.titleBarBorderBottomFocused = null; this.frameBorderRadius = '6px'; this.frameBorderWidthDefault = '1px'; this.frameBorderWidthFocused = this.frameBorderWidthDefault; this.frameBorderColorDefault = 'rgba(1, 1, 1, 0.2)'; this.frameBorderColorFocused = this.frameBorderColorDefault; this.frameBorderStyle = 'solid'; this.frameBoxShadow = '2px 3px 16px rgba(0,0,0,.6)'; this.frameBackgroundColor = 'transparent'; this._partsBuilder = null; this.frameComponents = []; this.frameHeightAdjust = 1; this.resizeAreaWidth = 20; this.resizeAreaHeight = 20; this.resizeAreaOffset = 0; this.resizeAreaVisible = false; this.getFrameInnerBorderRadius = function(ref, hasFocus) { if (!ref) { return null; } if (hasFocus) { return { frameAppearance: me, innerBorderRadius: (parseInt(ref.frameBorderRadius, 10) - parseInt(ref.frameBorderWidthFocused, 10)) + 'px' }; } return { frameAppearance: me, innerBorderRadius: (parseInt(ref.frameBorderRadius, 10) - parseInt(ref.frameBorderWidthDefault, 10)) + 'px' }; }; this.onInitialize = function() { //Add close button if needed if (me.showCloseButton) { var partsBuilder = me.getPartsBuilder(), crossMark0 = '\u274c', crossMark1 = '\u2716', crossMark2 = '\u274e'; var btnAppearance = partsBuilder.buildTextButtonAppearance(); btnAppearance.size = 14; btnAppearance.captionShiftYpx = 0; btnAppearance.captionFontRatio = 1.0; btnAppearance.borderRadius = 2; btnAppearance.backgroundColorPressed = 'transparent'; btnAppearance.backgroundColorDefault = 'transparent'; btnAppearance.caption = crossMark1; btnAppearance.captionColorDefault = 'gray'; btnAppearance.captionColorFocused = 'gray'; btnAppearance.captionColorHovered = 'silver'; btnAppearance.captionColorPressed = 'black'; btnAppearance.borderWidth = 0; btnAppearance.borderColorDefault = '#aaaaaa'; btnAppearance.borderStyle = 'solid'; var closeBtnEle = partsBuilder.buildTextButton(btnAppearance); var eleLeft = -10; var eleTop = -18; var eleAlign = 'RIGHT_TOP'; //closeButton is a special name var frameComponent = me.addFrameComponent('closeButton', closeBtnEle, eleLeft, eleTop, eleAlign); } }; this.onTitleBarStyleInitialize = function() { }; } CFrameAppearance.prototype.getPartsBuilder = function() { var me = this; if (me._partsBuilder === null) { me._partsBuilder = new CDomPartsBuilder(); } return me._partsBuilder; }; CFrameAppearance.prototype.initialize = function() { var me = this; me.onInitialize(); }; /** * Add FrameComponent into frame * FrameComponent is attached to Frame and it moves with Frame. * * @param id * @param myDomElement DOM element. * @param x Relative x coodinate from the snap position specified by alignment * @param y Relative y coodinate from the snap position specified by alignment * @param align 'LEFT_TOP' 'CENTER_TOP' 'RIGHT_TOP' 'LEFT_CENTER' 'CENTER_CENTER' 'RIGHT_CENTER' 'LEFT_BOTTOM' 'CENTER_BOTTOM' 'RIGHT_BOTTOM' * @returns {CFrameComponent} * */ CFrameAppearance.prototype.addFrameComponent = function(id, myDomElement, x, y, align, extra) { //(id, frame, htmlElement, x, y, align) var frameComponent = new CFrameComponent(id, myDomElement, x, y, align, extra); if (myDomElement._onTakeFocus && myDomElement._onReleaseFocus) { //if this DOM element has special method for focus //set focus callback frameComponent.setFocusCallback(myDomElement._onTakeFocus, myDomElement._onReleaseFocus); } this.frameComponents.push(frameComponent); return frameComponent; }; //+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- /** * End of CFrameAppearance class */ module.exports = CFrameAppearance; ================================================ FILE: src/appearance/CFrameComponent.js ================================================ var CALIGN = require('../CCommon.js'); /** * CFrameComponent class *
* Wrapped DOM element like 'div' to display above the frame
*
* ex.An object such as closeButton
*
* @param id
* @param frame
* @param htmlElement DOM-element
* @param x relative x-position in the frame respect to align
* @param y relative y-position in the frame respect to align
* @param align relative alignment in the frame
* @constructor
*/
function CFrameComponent(id, htmlElement, x, y, align, extra) {
var me = this;
me.id = id;
me.x = x;
me.y = y;
me.frame = null;
me._focusTakingCallabck = null;
me._focusReleasingCallabck = null;
if (align) {
me.frameComponentAlign = align;
} else {
me.frameComponentAlign = CALIGN.LEFT_TOP;
}
me.htmlElement = htmlElement;
me.htmlElement.style.zIndex = 50;
me.htmlElement.setAttribute('component-id', id);
if (extra && extra.childMenu) {
me.childMenu = extra.childMenu;
} else if (htmlElement.querySelector('.jsframe-child-menu')) {
me.childMenu = htmlElement.querySelector('.jsframe-child-menu');
}
}
CFrameComponent.prototype.setFocusCallback = function(focusTakingCallback, focusReleasingCallback) {
var me = this;
me._focusTakingCallabck = focusTakingCallback;
me._focusReleasingCallabck = focusReleasingCallback;
};
/**
* Set parent frame of this frameComponent
* @param frame
*/
CFrameComponent.prototype.setFrame = function(frame) {
var me = this;
me.frame = frame;
me.htmlElement.parentObject = frame;
me.updateAlign();
};
/**
* Place the FrameComponent relative to the parent's frame.
* Relocate relative to parent frame when window resize event occurs
*/
CFrameComponent.prototype.updateAlign = function() {
var me = this;
var frameComponentAlign = me.frameComponentAlign;
var frame = me.frame;
var eleStyle = me.htmlElement.style;
eleStyle.userSelect = 'none';
var x = me.x;
var y = me.y;
var frameWidth = frame.getWidth();
var frameHeight = frame.getHeight();
var eleStyleWidth = eleStyle.width;
var eleStyleHeight = eleStyle.height;
if (CALIGN.LEFT_TOP == frameComponentAlign) {
eleStyle.left = x + 'px';
eleStyle.top = y + 'px';
} else if (CALIGN.HCENTER_TOP == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) / 2 - parseInt(eleStyleWidth) / 2 + x) + 'px';
eleStyle.top = y + 'px';
} else if (CALIGN.RIGHT_TOP == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) - parseInt(eleStyleWidth) + x) + 'px';
eleStyle.top = y + 'px';
} else if (CALIGN.LEFT_VCENTER == frameComponentAlign) {
eleStyle.left = x + 'px';
eleStyle.top = (parseInt(frameHeight) / 2 - parseInt(eleStyleHeight) / 2 + y) + 'px';
} else if (CALIGN.HCENTER_VCENTER == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) / 2 - parseInt(eleStyleWidth) / 2 + x) + 'px';
eleStyle.top = (parseInt(frameHeight) / 2 - parseInt(eleStyleHeight) / 2 + y) + 'px';
} else if (CALIGN.RIGHT_VCENTER == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) - parseInt(eleStyleWidth) + x) + 'px';
eleStyle.top = (parseInt(frameHeight) / 2 - parseInt(eleStyleHeight) / 2 + y) + 'px';
} else if (CALIGN.LEFT_BOTTOM == frameComponentAlign) {
eleStyle.left = x + 'px';
eleStyle.top = (parseInt(frameHeight) - parseInt(eleStyleHeight) + y) + 'px';
} else if (CALIGN.HCENTER_BOTTOM == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) / 2 - parseInt(eleStyleWidth) / 2 + x) + 'px';
eleStyle.top = (parseInt(frameHeight) - parseInt(eleStyleHeight) + y) + 'px';
} else if (CALIGN.RIGHT_BOTTOM == frameComponentAlign) {
eleStyle.left = (parseInt(frameWidth) - parseInt(eleStyleWidth) + x) + 'px';
eleStyle.top = (parseInt(frameHeight) - parseInt(eleStyleHeight) + y) + 'px';
}
};
CFrameComponent.prototype.handleTakingFocus = function() {
var me = this;
if (me._focusTakingCallabck) {
me._focusTakingCallabck();
}
};
CFrameComponent.prototype.handleReleasingFocus = function() {
var me = this;
if (me._focusReleasingCallabck) {
me._focusReleasingCallabck();
}
};
/**
* end of CFrameComponent class
*/
module.exports = CFrameComponent;
================================================
FILE: src/appearance/CImageButtonAppearance.js
================================================
var inherit = require('../utils/Inherit.js')
var CTextButtonAppearance = require('./CButtonAppearance.js');
inherit(CImageButtonAppearance, CTextButtonAppearance);
function CImageButtonAppearance() {
this.imageDefault = null;
this.imageHovered = null;
this.imagePressed = null;
this.imageFocused = null;
this.imageStore = {};
}
CImageButtonAppearance.prototype._setImage = function(src, width, height) {
var me = this;
var storedImgEle = me.imageStore[src];
if (storedImgEle) {
return storedImgEle;
} else {
var imgEle = document.createElement('img');
imgEle.src = src;
if (width && height) {
var imgWidth = width;
var imgHeight = height;
var imgStyle = 'margin:0px;padding:0px;width:' + imgWidth + 'px;height:' + imgHeight + 'px';
imgEle.setAttribute('style', imgStyle);
}
me.imageStore[src] = imgEle;
return imgEle;
}
}
CImageButtonAppearance.prototype.setSrc = function(model) {
var me = this;
if (model.default) {
me.imageDefault = me._setImage(model.default, model.width, model.height);
}
if (model.hovered) {
me.imageHovered = me._setImage(model.hovered, model.width, model.height);
}
if (model.pressed) {
me.imagePressed = me._setImage(model.pressed, model.width, model.height);
}
if (model.focused) {
me.imageFocused = me._setImage(model.focused, model.width, model.height);
}
}
module.exports = CImageButtonAppearance;
================================================
FILE: src/index.js
================================================
//export { default as JSFrame } from './JSFrame.js';
module.exports = {
JSFrame: require('./JSFrame')
}
================================================
FILE: src/presets/appearance/PresetStyleMaterial.css
================================================
.jsframe-preset-style-material-default {
background: black;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.jsframe-preset-style-material-focused {
background: black;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
}
================================================
FILE: src/presets/appearance/PresetStyleMaterial.js
================================================
require('./PresetStyleMaterial.css');
var ObjectAssigner = require('../../utils/ObjectAssigner.js');
function getStyle(fApr, userParam) {
var srcParam = {
border: {
color: 'transparent',
width: 0,
radius: 6,
},
control: {
maximizeWithoutTitleBar: false,
restoreKey: 'Escape',
},
titleBar: {
color: 'white',
background: 'black',
leftMargin: 20,
height: 30,
fontSize: 12,
buttonWidth: 36,
buttonHeight: 16,
buttonColor: 'white',
buttons: [
{
fa: 'fas fa-times',
name: 'closeButton',
visible: true
},
{
fa: 'far fa-window-maximize',
name: 'maximizeButton',
visible: true
},
{
fa: 'far fa-window-restore',
name: 'restoreButton',
visible: false
},
{
fa: 'far fa-window-minimize',
name: 'minimizeButton',
visible: true
},
{
fa: 'fas fa-caret-up',
name: 'deminimizeButton',
visible: false
}
],
buttonsOnLeft: [],
},
};
var param = srcParam;
if (userParam) {
//param=Object.assign({},srcParam, userParam);
ObjectAssigner.objectAssign(srcParam, userParam);
}
fApr.showTitleBar = true;
fApr.showCloseButton = true;
fApr.titleBarCaptionFontSize = param.titleBar.fontSize + 'px';//'12px';
fApr.titleBarCaptionFontWeight = 'normal';
fApr.titleBarCaptionLeftMargin = param.titleBar.leftMargin + 'px';
fApr.titleBarCaptionColorDefault = param.titleBar.color;
fApr.titleBarCaptionColorFocused = param.titleBar.color;
fApr.titleBarCaptionTextShadow = null;
fApr.titleBarCaptionTextAlign = 'left';
fApr.titleBarHeight = param.titleBar.height + 'px';// '50px';
fApr.titleBarColorDefault = param.titleBar.background;
fApr.titleBarColorFocused = param.titleBar.background;
fApr.titleBarBorderBottomDefault = 'solid 0px #aaaaaa';
fApr.titleBarBorderBottomFocused = 'solid 0px #1883d7';
fApr.frameBorderRadius = param.border.radius + 'px';// '6px';
//border width
fApr.frameBorderWidthDefault = param.border.width + 'px';
fApr.frameBorderWidthFocused = param.border.width + 'px';
//border color
fApr.frameBorderColorDefault = param.border.color;
fApr.frameBorderColorFocused = param.border.color;
fApr.frameBorderStyle = 'solid';
//window shadow
fApr.frameBoxShadow = param.border.shadow;//'2px 2px 10px rgba(0, 0, 0, 0.5)';
fApr.frameBackgroundColor = 'transparent';
fApr.frameComponents = new Array();
fApr.frameHeightAdjust = 0;//default is 1
fApr.getTitleBarStyle = function () {
if (fApr.focusedFrameOnly) {
return {
titleBarClassNameDefault: ' ',
titleBarClassNameFocused: ' '
};
} else {
return {
titleBarClassNameDefault: ' ',
titleBarClassNameFocused: ' '
};
}
};
fApr.onInitialize = function () {
alignButtons(fApr, param, false);
alignButtons(fApr, param, true);
};
//
return fApr;
}
function alignButtons(fApr, param, fromLeft) {
var partsBuilder = fApr.getPartsBuilder();
var rbtX = 0;
var buttons;
if (fromLeft) {
buttons = param.titleBar.buttonsOnLeft;
} else {
buttons = param.titleBar.buttons;
}
for (var rbtIdx in buttons) {
var rbtSrc = buttons[rbtIdx];
var rbt = partsBuilder.buildTextButtonAppearance();
//caption
rbt.fa = rbtSrc.fa;
rbt.width = param.titleBar.buttonWidth;
rbt.height = param.titleBar.buttonHeight;
rbt.borderRadius = 0;
rbt.borderWidth = 0;
rbt.borderColorDefault = '#c6c6c6';
rbt.borderColorFocused = '#fc615c';
rbt.borderColorHovered = rbt.borderColorFocused;
rbt.borderColorPressed = '#e64842';
rbt.borderStyleDefault = 'solid';
rbt.borderStyleFocused = rbt.borderStyleDefault;
rbt.borderStyleHovered = rbt.borderStyleDefault;
rbt.borderStylePressed = rbt.borderStyleDefault;
//background
rbt.backgroundColorDefault = 'transparent';
rbt.backgroundColorFocused = 'transparent';
rbt.backgroundColorHovered = 'transparent';
rbt.backgroundColorPressed = 'transparent';
var colors = getSubColor(param.titleBar.buttonColor);
rbt.captionColorDefault = param.titleBar.buttonColor;
rbt.captionColorFocused = param.titleBar.buttonColor;
rbt.captionColorHovered = colors.hovered;
rbt.captionColorPressed = colors.pressed;
rbt.captionShiftYpx = 0;
rbt.captionFontRatio = 1;
var rbtEle = partsBuilder.buildTextButton(rbt);
if (rbtSrc.visible) {
rbtEle.style.display = 'flex';
} else {
if (fromLeft) {
rbtX -= param.titleBar.buttonWidth;
} else {
rbtX += param.titleBar.buttonWidth;
}
rbtEle.style.display = 'none';
}
var titleBarHeight = parseInt(fApr.titleBarHeight);
var rbtEleLeft = rbtX;
//compute vertical center
var rbtEleTop = -titleBarHeight + (titleBarHeight - rbt.height) / 2;
var rbtEleAlign;
if (fromLeft) {
rbtEleAlign = 'LEFT_TOP';
} else {
rbtEleAlign = 'RIGHT_TOP';
}
var ndiv;
if (rbtSrc.childMenuHTML) {
ndiv = document.createElement('div');
ndiv.id = rbtSrc.name + '_child_menu';
ndiv.innerHTML = rbtSrc.childMenuHTML;
ndiv.style.position = 'absolute';
ndiv.style.width = (rbtSrc.childMenuWidth ? rbtSrc.childMenuWidth : 200) + 'px';
ndiv.style.top = (parseInt(rbtEle.style.top, 10) + parseInt(rbtEle.style.height, 10) / 2 + titleBarHeight / 2) + 'px';
ndiv.style.left = rbtEle.style.left;
ndiv.style.display = 'none';
rbtEle.appendChild(ndiv);
}
fApr.addFrameComponent(rbtSrc.name, rbtEle, rbtEleLeft, rbtEleTop, rbtEleAlign, {childMenu: ndiv});
if (fromLeft) {
rbtX += param.titleBar.buttonWidth;
} else {
rbtX += -param.titleBar.buttonWidth;
}
}
}
function getSubColor(color) {
var canvas = document.createElement('canvas');
canvas.height = 1;
canvas.width = 1;
try {
var ctx = canvas.getContext('2d');
if (ctx) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
var colorData = ctx.getImageData(0, 0, 1, 1).data;
var r = colorData[0];
var g = colorData[1];
var b = colorData[2];
var alpha = colorData[3] / 255;
var alpha2 = alpha * 0.85;
var alpha3 = alpha * 0.75;
var ret = 'rgb(' + r + ',' + g + ',' + b + ',' + alpha2 + ')';
var ret2 = 'rgb(' + r + ',' + g + ',' + b + ',' + alpha2 + ')';
var ret3 = 'rgb(' + r + ',' + g + ',' + b + ',' + alpha3 + ')';
return {src: ret, hovered: ret2, pressed: ret3};
} else {
return {src: 'rgb(255,255,255,0.85)', hovered: 'rgb(255,255,255,0.85)', pressed: 'rgb(255,255,255,0.75)'};
}
} catch (e) {
return {src: 'rgb(255,255,255,0.85)', hovered: 'rgb(255,255,255,0.85)', pressed: 'rgb(255,255,255,0.75)'};
}
}
module.exports.getStyle = getStyle;
================================================
FILE: src/presets/appearance/PresetStylePopup.css
================================================
.jsframe-preset-style-popup-default {
background: white;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.jsframe-preset-style-popup-focused {
background: white;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
================================================
FILE: src/presets/appearance/PresetStylePopup.js
================================================
require('./PresetStylePopup.css');
function getStyle(fApr) {
fApr.showTitleBar = false;
fApr.showCloseButton = true;
fApr.titleBarCaptionFontSize = '12px';
fApr.titleBarCaptionFontWeight = 'normal';
fApr.titleBarCaptionLeftMargin = '10px';
fApr.titleBarCaptionColorDefault = '#4d494d';
fApr.titleBarCaptionColorFocused = '#4d494d';
fApr.titleBarHeight = '5px';
fApr.titleBarColorDefault = 'white';
fApr.titleBarColorFocused = 'white';
fApr.titleBarBorderBottomDefault = null;
fApr.titleBarBorderBottomFocused = null;
fApr.frameBorderRadius = '6px';
//border width
fApr.frameBorderWidthDefault = '1px';
fApr.frameBorderWidthFocused = '1px';
//border color
fApr.frameBorderColorDefault = '#aaaaaa';
fApr.frameBorderColorFocused = '#aaaaaa';
fApr.frameBorderStyle = 'solid';
//window shadow
fApr.frameBoxShadow = '2px 2px 5px rgba(0, 0, 0, 0.5)';
fApr.frameBackgroundColor = 'white';
fApr.frameComponents = new Array();
//adjustment value
fApr.frameHeightAdjust = 2;//default is 1
fApr.getTitleBarStyle = function() {
if (fApr.focusedFrameOnly) {
return {
titleBarClassNameDefault: 'jsframe-preset-style-popup-focused',
titleBarClassNameFocused: 'jsframe-preset-style-popup-focused'
};
} else {
return {
titleBarClassNameDefault: 'jsframe-preset-style-popup-default',
titleBarClassNameFocused: 'jsframe-preset-style-popup-focused'
};
}
};
fApr.onInitialize = function() {
var partsBuilder = fApr.getPartsBuilder();
//configure close button appearance[begin]//////////////
var crossMark0 = '\u274c';
var crossMark1 = '\u2716';
var crossMark2 = '\u274e';
var CROSS_MARK = crossMark1;
var cbApr = partsBuilder.buildTextButtonAppearance();
cbApr.width = 20;
cbApr.height = 20;
cbApr.borderRadius = 10;
cbApr.borderWidth = 1;
cbApr.borderColorDefault = '#cccccc';
cbApr.borderColorFocused = '#cccccc';
cbApr.borderColorHovered = '#dddddd';
cbApr.borderColorPressed = '#eeeeee';
cbApr.borderStyleDefault = 'solid';
cbApr.borderStyleFocused = cbApr.borderStyleDefault;
cbApr.borderStyleHovered = cbApr.borderStyleDefault;
cbApr.borderStylePressed = cbApr.borderStyleDefault;
//background
cbApr.backgroundColorDefault = 'white';
cbApr.backgroundColorFocused = 'white';
cbApr.backgroundColorHovered = '#eeeeee';
cbApr.backgroundColorPressed = '#dddddd';
cbApr.backgroundBoxShadow = '2px 2px 5px rgba(0, 0, 0, 0.5)';
//caption
cbApr.caption = CROSS_MARK;
cbApr.captionColorDefault = 'black';
cbApr.captionColorFocused = 'black';
cbApr.captionColorHovered = 'white';
cbApr.captionColorPressed = 'white';
cbApr.captionShiftYpx = 1;
cbApr.captionFontRatio = 0.6;
var closeBtnEle = partsBuilder.buildTextButton(cbApr);
var eleLeft = 10;
var eleTop = -6 - parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent('closeButton', closeBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
};
//
return fApr;
}
module.exports.getStyle = getStyle;
================================================
FILE: src/presets/appearance/PresetStyleRedstone.css
================================================
.jsframe-preset-style-redstone-default {
background: white;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.jsframe-preset-style-redstone-focused {
background: white;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
================================================
FILE: src/presets/appearance/PresetStyleRedstone.js
================================================
require('./PresetStyleRedstone.css');
function getStyle(fApr) {
fApr.showTitleBar = true;
fApr.showCloseButton = true;
fApr.titleBarCaptionFontSize = '12px';
fApr.titleBarCaptionFontWeight = 'normal';
fApr.titleBarCaptionLeftMargin = '10px';
fApr.titleBarCaptionColorDefault = '#9b9a9b';
fApr.titleBarCaptionColorFocused = '#4d494d';
fApr.titleBarHeight = '30px';
fApr.titleBarColorDefault = null;
fApr.titleBarColorFocused = null;
fApr.titleBarBorderBottomDefault = 'solid 1px #aaaaaa';
fApr.titleBarBorderBottomFocused = 'solid 1px #1883d7';
fApr.frameBorderRadius = '0px';
//border width
fApr.frameBorderWidthDefault = '1px';
fApr.frameBorderWidthFocused = '1px';
//border color
fApr.frameBorderColorDefault = '#aaaaaa';
fApr.frameBorderColorFocused = '#1883d7';
fApr.frameBorderStyle = 'solid';
//window shadow
fApr.frameBoxShadow = null;
fApr.frameBackgroundColor = 'transparent';
fApr.frameComponents = new Array();
//adjustment value
fApr.frameHeightAdjust = 0;//default is 1
fApr.getTitleBarStyle = function() {
if (fApr.focusedFrameOnly) {
return {
titleBarClassNameDefault: 'jsframe-preset-style-redstone-focused',
titleBarClassNameFocused: 'jsframe-preset-style-redstone-focused'
};
} else {
return {
titleBarClassNameDefault: 'jsframe-preset-style-redstone-default',
titleBarClassNameFocused: 'jsframe-preset-style-redstone-focused'
};
}
};
fApr.onInitialize = function() {
var partsBuilder = fApr.getPartsBuilder();
{
//configure close button appearance[begin]//////////////
var CROSS_MARK = '\u2573';
var cbApr = partsBuilder.buildTextButtonAppearance();
cbApr.width = 45;
cbApr.height = 28;
cbApr.borderRadius = 0;
cbApr.borderWidth = 0;
cbApr.borderColorDefault = '#c6c6c6';
cbApr.borderColorFocused = '#fc615c';
cbApr.borderColorHovered = cbApr.borderColorFocused;
cbApr.borderColorPressed = '#e64842';
cbApr.borderStyleDefault = 'solid';
cbApr.borderStyleFocused = cbApr.borderStyleDefault;
cbApr.borderStyleHovered = cbApr.borderStyleDefault;
cbApr.borderStylePressed = cbApr.borderStyleDefault;
//background
cbApr.backgroundColorDefault = 'white';
cbApr.backgroundColorFocused = 'white';
cbApr.backgroundColorHovered = '#e81123';
cbApr.backgroundColorPressed = '#f1707a';
//caption
cbApr.caption = CROSS_MARK;
cbApr.captionColorDefault = '#9b9a9b';
cbApr.captionColorFocused = 'black';
cbApr.captionColorHovered = 'white';
cbApr.captionColorPressed = 'white';
cbApr.captionShiftYpx = 1;
cbApr.captionFontRatio = 0.6;
var closeBtnEle = partsBuilder.buildTextButton(cbApr);
var eleLeft = 0;
var eleTop = -parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent('closeButton', closeBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
}
{
//configure close button appearance[begin]//////////////
var MAXIMIZE_MARK = '\u2610';
var maxApr = partsBuilder.buildTextButtonAppearance();
maxApr.width = 45;
maxApr.height = 28;
maxApr.borderRadius = 0;
maxApr.borderWidth = 0;
maxApr.borderColorDefault = '#c6c6c6';
maxApr.borderColorFocused = '#fc615c';
maxApr.borderColorHovered = maxApr.borderColorFocused;
maxApr.borderColorPressed = '#e64842';
maxApr.borderStyleDefault = 'solid';
maxApr.borderStyleFocused = maxApr.borderStyleDefault;
maxApr.borderStyleHovered = maxApr.borderStyleDefault;
maxApr.borderStylePressed = maxApr.borderStyleDefault;
//background
maxApr.backgroundColorDefault = 'white';
maxApr.backgroundColorFocused = 'white';
maxApr.backgroundColorHovered = '#e5e5e5';
maxApr.backgroundColorPressed = '#cccccc';
//caption
maxApr.caption = MAXIMIZE_MARK;
maxApr.captionColorDefault = '#9b9a9b';
maxApr.captionColorFocused = 'black';
maxApr.captionColorHovered = 'black';
maxApr.captionColorPressed = 'black';
maxApr.captionShiftYpx = 1;
maxApr.captionFontRatio = 0.55;
var maxBtnEle = partsBuilder.buildTextButton(maxApr);
var eleLeft = -46;
var eleTop = -parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent('maximizeButton', maxBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
}
{
//configure close button appearance[begin]//////////////
var MINIMIZE_MARK = '\uff3f';
var minApr = partsBuilder.buildTextButtonAppearance();
minApr.width = 45;
minApr.height = 28;
minApr.borderRadius = 0;
minApr.borderWidth = 0;
minApr.borderColorDefault = '#c6c6c6';
minApr.borderColorFocused = '#fc615c';
minApr.borderColorHovered = minApr.borderColorFocused;
minApr.borderColorPressed = '#e64842';
minApr.borderStyleDefault = 'solid';
minApr.borderStyleFocused = minApr.borderStyleDefault;
minApr.borderStyleHovered = minApr.borderStyleDefault;
minApr.borderStylePressed = minApr.borderStyleDefault;
//background
minApr.backgroundColorDefault = 'white';
minApr.backgroundColorFocused = 'white';
minApr.backgroundColorHovered = '#e5e5e5';
minApr.backgroundColorPressed = '#cccccc';
//caption
minApr.caption = MINIMIZE_MARK;
minApr.captionColorDefault = '#9b9a9b';
minApr.captionColorFocused = 'black';
minApr.captionColorHovered = 'black';
minApr.captionColorPressed = 'black';
minApr.captionShiftYpx = -2;
minApr.captionFontRatio = 0.3;
var minBtnEle = partsBuilder.buildTextButton(minApr);
var eleLeft = -92;
var eleTop = -parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent('minimizeButton', minBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
}
{
//configure close button appearance[begin]//////////////
var deminApr = partsBuilder.buildTextButtonAppearance();
deminApr.width = 45;
deminApr.height = 28;
deminApr.borderRadius = 0;
deminApr.borderWidth = 0;
deminApr.borderColorDefault = '#c6c6c6';
deminApr.borderColorFocused = '#fc615c';
deminApr.borderColorHovered = deminApr.borderColorFocused;
deminApr.borderColorPressed = '#e64842';
deminApr.borderStyleDefault = 'solid';
deminApr.borderStyleFocused = deminApr.borderStyleDefault;
deminApr.borderStyleHovered = deminApr.borderStyleDefault;
deminApr.borderStylePressed = deminApr.borderStyleDefault;
//background
deminApr.backgroundColorDefault = 'white';
deminApr.backgroundColorFocused = 'white';
deminApr.backgroundColorHovered = '#e5e5e5';
deminApr.backgroundColorPressed = '#cccccc';
//caption
deminApr.caption = '\u25A3';
deminApr.captionColorDefault = '#9b9a9b';
deminApr.captionColorFocused = 'black';
deminApr.captionColorHovered = 'black';
deminApr.captionColorPressed = 'black';
deminApr.captionShiftYpx = 1;
deminApr.captionFontRatio = 0.6;
var deminBtnEle = partsBuilder.buildTextButton(deminApr);
var eleLeft = -92;
var eleTop = -parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
deminBtnEle.style.display = 'none';
// 'closeButton' is a special name
fApr.addFrameComponent('deminimizeButton', deminBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
}
{
//configure close button appearance[begin]//////////////
var RESTORE_MARK = '\u274F';
var rbApr = partsBuilder.buildTextButtonAppearance();
rbApr.width = 45;
rbApr.height = 28;
rbApr.borderRadius = 0;
rbApr.borderWidth = 0;
rbApr.borderColorDefault = '#c6c6c6';
rbApr.borderColorFocused = '#fc615c';
rbApr.borderColorHovered = rbApr.borderColorFocused;
rbApr.borderColorPressed = '#e64842';
rbApr.borderStyleDefault = 'solid';
rbApr.borderStyleFocused = rbApr.borderStyleDefault;
rbApr.borderStyleHovered = rbApr.borderStyleDefault;
rbApr.borderStylePressed = rbApr.borderStyleDefault;
//background
rbApr.backgroundColorDefault = 'white';
rbApr.backgroundColorFocused = 'white';
rbApr.backgroundColorHovered = '#e5e5e5';
rbApr.backgroundColorPressed = '#cccccc';
//caption
rbApr.caption = RESTORE_MARK;
rbApr.captionColorDefault = '#9b9a9b';
rbApr.captionColorFocused = 'black';
rbApr.captionColorHovered = 'black';
rbApr.captionColorPressed = 'black';
rbApr.captionShiftYpx = 1;
rbApr.captionFontRatio = 0.55;
var restoreBtnEle = partsBuilder.buildTextButton(rbApr);
var eleLeft = -46;
var eleTop = -parseInt(fApr.titleBarHeight);
var eleAlign = 'RIGHT_TOP';
restoreBtnEle.style.display = 'none';
// 'closeButton' is a special name
fApr.addFrameComponent('restoreButton', restoreBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
}
};
//
return fApr;
}
module.exports.getStyle = getStyle;
================================================
FILE: src/presets/appearance/PresetStyleToast.js
================================================
function getStyle(fApr) {
fApr.showTitleBar = false;
fApr.showCloseButton = true;
fApr.titleBarCaptionFontSize = '0px';
fApr.titleBarCaptionFontWeight = 'normal';
fApr.titleBarCaptionLeftMargin = '0px';
fApr.titleBarCaptionColorDefault = 'transparent';
fApr.titleBarCaptionColorFocused = 'transparent';
fApr.titleBarHeight = '0px';
fApr.titleBarColorDefault = 'transparent';
fApr.titleBarColorFocused = 'transparent';
fApr.titleBarBorderBottomDefault = null;
fApr.titleBarBorderBottomFocused = null;
fApr.frameBorderRadius = '10px';
//border width
fApr.frameBorderWidthDefault = '0px';
fApr.frameBorderWidthFocused = '0px';
//border color
fApr.frameBorderColorDefault = 'transparent';
fApr.frameBorderColorFocused = 'transparent';
fApr.frameBorderStyle = 'solid';
fApr.frameBoxShadow = '2px 2px 15px rgba(0, 0, 0, 0.5)';
fApr.frameBackgroundColor = 'transparent';
fApr.frameComponents = [];
fApr.frameHeightAdjust = 1;//default is 1
fApr.captionClor = 'darkgray';
fApr.pullUpDisabled = false;
fApr.getTitleBarStyle = function() {
if (fApr.focusedFrameOnly) {
return {
titleBarClassNameDefault: ' ',
titleBarClassNameFocused: ' '
};
} else {
return {
titleBarClassNameDefault: ' ',
titleBarClassNameFocused: ' '
};
}
};
fApr.onInitialize = function() {
var partsBuilder = fApr.getPartsBuilder();
//configure close button appearance[begin]//////////////
var crossMark0 = '\u274c';
var crossMark1 = '\u2716';
var crossMark2 = '\u274e';
var CROSS_MARK = crossMark1;
var cbApr = partsBuilder.buildTextButtonAppearance();
cbApr.width = 20;
cbApr.height = 20;
cbApr.borderRadius = 10;
cbApr.borderWidth = 0;
cbApr.borderColorDefault = '#cccccc';
cbApr.borderColorFocused = '#cccccc';
cbApr.borderColorHovered = '#dddddd';
cbApr.borderColorPressed = '#eeeeee';
cbApr.borderStyleDefault = 'solid';
cbApr.borderStyleFocused = cbApr.borderStyleDefault;
cbApr.borderStyleHovered = cbApr.borderStyleDefault;
cbApr.borderStylePressed = cbApr.borderStyleDefault;
//background
cbApr.backgroundColorDefault = 'transparent';
cbApr.backgroundColorFocused = 'transparent';
cbApr.backgroundColorHovered = 'transparent';
cbApr.backgroundColorPressed = 'transparent';
cbApr.backgroundBoxShadow = null;// '2px 2px 5px rgba(0, 0, 0, 0.5)';
//caption
cbApr.caption = CROSS_MARK;
cbApr.captionColorDefault = fApr.captionClor;
cbApr.captionColorFocused = fApr.captionClor;
cbApr.captionColorHovered = fApr.captionClor;
cbApr.captionColorPressed = fApr.captionClor;
cbApr.captionShiftYpx = 1;
cbApr.captionFontRatio = 0.6;
var closeBtnEle = partsBuilder.buildTextButton(cbApr);
var eleLeft = -6;
var eleTop = 3;
var eleAlign = 'RIGHT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent('closeButton', closeBtnEle, eleLeft, eleTop, eleAlign);
//configure close button appearance[end]//////////////
};
//
return fApr;
}
module.exports.getStyle = getStyle;
================================================
FILE: src/presets/appearance/PresetStyleYosemite.css
================================================
.jsframe-preset-style-yosemite-default {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #f5f5f5, color-stop(1.0, #f8f7f2)));
background: -webkit-linear-gradient(top, #f5f5f5, #f8f7f2);
background: -moz-linear-gradient(top, #f5f5f5, #f8f7f2);
background: linear-gradient(top, #f5f5f5, #f8f7f2);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.jsframe-preset-style-yosemite-focused {
/* (c)2015 Johannes Jakob
Made with <3 in Germany */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ebebeb, color-stop(1.0, #d5d5d5)));
background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
background: -moz-linear-gradient(top, #ebebeb, #d5d5d5);
background: linear-gradient(top, #ebebeb, #d5d5d5);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
================================================
FILE: src/presets/appearance/PresetStyleYosemite.js
================================================
require('./PresetStyleYosemite.css');
var ObjectAssigner = require('../../utils/ObjectAssigner.js');
function getStyle(fApr, userParam) {
var srcParam = {
titleBar: {
greenButton: 'maximize',//'maximize' or 'fullscreen'
}
};
var param = srcParam;
if (userParam) {
//param=Object.assign({},srcParam, userParam);
ObjectAssigner.objectAssign(srcParam, userParam);
}
fApr.showTitleBar = true;
fApr.showCloseButton = true;
fApr.titleBarCaptionFontSize = '11px';
fApr.titleBarCaptionFontWeight = 'normal';
fApr.titleBarCaptionLeftMargin = null;
fApr.titleBarCaptionColorDefault = '#4d494d';
fApr.titleBarCaptionColorFocused = '#4d494d';
fApr.titleBarHeight = '26px';
fApr.titleBarColorDefault = null;
fApr.titleBarColorFocused = null;
fApr.titleBarBorderBottomDefault = '1px solid #b1aeb1';
fApr.titleBarBorderBottomFocused = fApr.titleBarBorderBottomDefault;
fApr.frameBorderRadius = '6px';
//border width
fApr.frameBorderWidthDefault = '1px';
fApr.frameBorderWidthFocused = '1px';
//border color
fApr.frameBorderColorDefault = '#acacac';
fApr.frameBorderColorFocused = '#acacac';
fApr.frameBorderStyle = 'solid';
//window shadow
fApr.frameBoxShadow = '0px 0px 20px rgba(0, 0, 0, 0.3)';
fApr.frameBackgroundColor = 'transparent';
fApr.frameComponents = new Array();
fApr.getTitleBarStyle = function() {
if (fApr.focusedFrameOnly) {
return {
titleBarClassNameDefault: 'jsframe-preset-style-yosemite-focused',
titleBarClassNameFocused: 'jsframe-preset-style-yosemite-focused'
};
} else {
return {
titleBarClassNameDefault: 'jsframe-preset-style-yosemite-default',
titleBarClassNameFocused: 'jsframe-preset-style-yosemite-focused'
};
}
};
fApr.onInitialize = function() {
var partsBuilder = fApr.getPartsBuilder();
var img_data_close_hovered = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWElEQVQoU2NkIBIwEqmOAa6wgZWlH6Sp4fefQjCNxkdRyMjAUPCf4f8CkEJGBsaE/wwME2AaUaxuYGWeD1IAUgjS0PD7byLMaaQrBLmJKKuJ9gyhYCI6HAGlFDALf9s7eQAAAABJRU5ErkJggg==';
var img_data_maximize_hovered = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVQoU2NkIBIwoqvjixFoAIl9WvIBTMMAhkLeGP79IMnPSz46kq8QZN1/hv/2IBMYGRgMQPR/BoYLED7jQZAzwFYTrRDZLdRxI7KJRAcPrvAHAATYKgvLH0fAAAAAAElFTkSuQmCC';
if (param.titleBar.greenButton === 'fullscreen') {
img_data_maximize_hovered = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAZElEQVQoU2NkIBIwEqmOAUWhQIKAwL8///czMDAYwAz4tOQjWA1cIUjRhwUfPqArxlDIF8N/nomF0RFdMTaF/xkYGC6gK/605KMhitV8MfwghSCAohhkAy6FKIphniIvePCFKQDzGzsLS+7n2AAAAABJRU5ErkJggg==';
}
var img_data_demaximize_hovered = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAiUlEQVQoU2NkwAIEogQMPiz7cAFZihGbQt4Y/v0MjIwLPy/+sAAmj1MhIwODw39GxkSYYrwKQabBFGNVyBfL1///P6MBzFrmf4yFjCCH/2X63w93C+P/C58WfypEdzvYRN5YgQTG///ng61iYDjweclHR6wKkRUTVAhTzPD/fzxeE2FWYQtskBwAKwQ7tVjAL4MAAAAASUVORK5CYII=';
var img_data_minimize_hovered = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMUlEQVQoU2NkIBIwEqmOgUYKa7w4Ghj+M9hjdQYjw8GWbT8awFYTrZAYD9HIM8RYDQBsEAwLkq4IAgAAAABJRU5ErkJggg==';
var img_data_1dot_transparent = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=';
var img_width = 10;
var img_height = 10;
var img_style = 'margin:0px;padding:0px;width:' + img_width + 'px;height:' + img_height + 'px';
var imageMaximize = document.createElement('img');
imageMaximize.src = img_data_maximize_hovered;
imageMaximize.setAttribute('style', img_style);
var imageDemaximize = document.createElement('img');
imageDemaximize.src = img_data_demaximize_hovered;
imageDemaximize.setAttribute('style', img_style);
// var imageFullScreen = document.createElement('img');
// imageFullScreen.src = img_data_maximize_hovered;
// imageFullScreen.setAttribute('style', img_style);
var imageMinimize = document.createElement('img');
imageMinimize.src = img_data_minimize_hovered;
imageMinimize.setAttribute('style', img_style);
var imageClose = document.createElement('img');
imageClose.src = img_data_close_hovered;
imageClose.setAttribute('style', img_style);
var imgTransparent = document.createElement('img');
imgTransparent.src = img_data_1dot_transparent;
imgTransparent.setAttribute('style', 'margin:0px;padding:0px;width:6px;height:6px');
{
//configure close button appearance[begin]//////////////
var cbApr = partsBuilder.buildImageButtonAppearance();
cbApr.imageDefault = imgTransparent;
cbApr.imageHovered = imageClose;
cbApr.imagePressed = imageClose;
cbApr.imageFocused = imgTransparent;
cbApr.size = 10;
cbApr.borderRadius = 5;
cbApr.borderWidth = 1;
cbApr.borderColorDefault = '#c6c6c6';
cbApr.borderColorFocused = '#d3524e';
cbApr.borderColorHovered = cbApr.borderColorFocused;
cbApr.borderColorPressed = '#e64842';
cbApr.borderStyleDefault = 'solid';
cbApr.borderStyleFocused = cbApr.borderStyleDefault;
cbApr.borderStyleHovered = cbApr.borderStyleDefault;
cbApr.borderStylePressed = cbApr.borderStyleDefault;
//background
cbApr.backgroundColorDefault = '#d0d0d0';
cbApr.backgroundColorFocused = '#fc615c';
cbApr.backgroundColorHovered = cbApr.backgroundColorFocused;
cbApr.backgroundColorPressed = cbApr.backgroundColorDefault;
cbApr.setSrc({
default: img_data_1dot_transparent,
focused: img_data_1dot_transparent,
hovered: img_data_close_hovered,
pressed: img_data_close_hovered,
});
var closeBtnEle = partsBuilder.buildButton(cbApr);
var eleLeft = 8;
var eleTop = -19;
var eleAlign = 'LEFT_TOP';
// 'closeButton' is a special name
fApr.addFrameComponent(param.closeButtonName || 'closeButton', closeBtnEle, eleLeft, eleTop, eleAlign);
//prepare [minimize button]
var minBtnApr = partsBuilder.buildImageButtonAppearance(cbApr);
minBtnApr.borderColorDefault = '#c6c6c6';
minBtnApr.borderColorFocused = '#e6b347';
minBtnApr.borderColorHovered = minBtnApr.borderColorFocused;
minBtnApr.borderColorPressed = '#e1a12d';
minBtnApr.backgroundColorDefault = '#d0d0d0';
minBtnApr.backgroundColorFocused = '#fdbe40';
minBtnApr.backgroundColorHovered = minBtnApr.backgroundColorFocused;
minBtnApr.backgroundColorPressed = minBtnApr.backgroundColorDefault;
minBtnApr.imageDefault = imgTransparent;
minBtnApr.imageHovered = imageMinimize;
minBtnApr.imagePressed = imageMinimize;
minBtnApr.imageFocused = imgTransparent;
var minBtnEle = partsBuilder.buildButton(minBtnApr);
var deminimizeBtnEle = partsBuilder.buildButton(minBtnApr);
deminimizeBtnEle.style.display = 'none';
var eleLeft = 28;
var eleTop = -19;
var eleAlign = 'LEFT_TOP';
fApr.addFrameComponent('minimizeButton', minBtnEle, eleLeft, eleTop, eleAlign);
fApr.addFrameComponent('deminimizeButton', deminimizeBtnEle, eleLeft, eleTop, eleAlign);
// prepare [maximize button]
//configure zoom button appearance[begin]//////////////
var maxBtnApr = partsBuilder.buildImageButtonAppearance(cbApr);
maxBtnApr.borderColorDefault = '#c6c6c6';
maxBtnApr.borderColorFocused = '#67b657';
maxBtnApr.borderColorHovered = maxBtnApr.borderColorFocused;
maxBtnApr.borderColorPressed = '#00af38';
maxBtnApr.backgroundColorDefault = '#d0d0d0';
maxBtnApr.backgroundColorFocused = '#34ca49';
maxBtnApr.backgroundColorHovered = maxBtnApr.backgroundColorFocused;
maxBtnApr.backgroundColorPressed = maxBtnApr.backgroundColorDefault;
maxBtnApr.imageDefault = imgTransparent;
maxBtnApr.imageHovered = imageMaximize;
maxBtnApr.imagePressed = imageMaximize;
maxBtnApr.imageFocused = imgTransparent;
var zoomBtnEle = partsBuilder.buildButton(maxBtnApr);
var demaxBtnApr = partsBuilder.buildImageButtonAppearance(cbApr);
demaxBtnApr.borderColorDefault = '#c6c6c6';
demaxBtnApr.borderColorFocused = '#67b657';
demaxBtnApr.borderColorHovered = demaxBtnApr.borderColorFocused;
demaxBtnApr.borderColorPressed = '#00af38';
demaxBtnApr.backgroundColorDefault = '#d0d0d0';
demaxBtnApr.backgroundColorFocused = '#34ca49';
demaxBtnApr.backgroundColorHovered = demaxBtnApr.backgroundColorFocused;
demaxBtnApr.backgroundColorPressed = demaxBtnApr.backgroundColorDefault;
demaxBtnApr.imageDefault = imgTransparent;
demaxBtnApr.imageHovered = imageDemaximize;
demaxBtnApr.imagePressed = imageDemaximize;
demaxBtnApr.imageFocused = imgTransparent;
var demaxBtnEle = partsBuilder.buildButton(demaxBtnApr);
demaxBtnEle.style.display = 'none';
var eleLeft = 48;
var eleTop = -19;
var eleAlign = 'LEFT_TOP';
fApr.addFrameComponent('dezoomButton', demaxBtnEle, eleLeft, eleTop, eleAlign);
fApr.addFrameComponent('zoomButton', zoomBtnEle, eleLeft, eleTop, eleAlign);
//configure zoom button appearance[end]//////////////
}
//
};
//
return fApr;
}
module.exports.getStyle = getStyle;
================================================
FILE: src/presets/window/PresetWindowYosemite.js
================================================
var mergeDeeply = require('merge-deeply');
function getPreset(param) {
var result = {};
result.appearanceName = 'yosemite';
result.appearanceParam = {};
var presetParam = {};
if (param) {
presetParam = param;
}
var isFullScreen = presetParam.maximizeButtonBehavior === 'fullscreen';
var minimizeButton = presetParam.minimizeButtonBehavior === 'minimize' ? 'minimizeButton' : null;
var hideButton1 = presetParam.minimizeButtonBehavior === 'hide' ? 'minimizeButton' : null;
var hideButton2 = presetParam.closeButtonBehavior === 'hide' ? 'custom-close-button' : null;
var windowControlParam = presetParam.control;
var closeButtonNameByCloseButtonBehavior = hideButton2;
var closeButtonName = presetParam.closeButtonName;
if (isFullScreen) {
result.appearanceParam.titleBar = {
greenButton: 'fullscreen',//'maximize' icon or 'fullscreen' icon
};
}
// Set this to 'closeButton' to automatically close when clicking
result.appearanceParam.closeButtonName = closeButtonNameByCloseButtonBehavior || closeButtonName || 'closeButton';
result.setupPresetWindow = function(frame) {
var defaultWindowControlParam = {
maximizeButton: 'zoomButton',
maximizeParam: {
fullScreen: isFullScreen,// true:maximized without title bar,false:maximized with title bar
restoreKey: 'Escape',//Set key code from https://www.w3.org/TR/uievents-code/#keyboard-key-codes
},
demaximizeButton: 'dezoomButton',
deminimizeButton: 'deminimizeButton',
minimizeButton: minimizeButton,
hideButtons: [hideButton1, hideButton2],
hideParam: {
align: 'CENTER_CENTER',//ABSOLUTE:If you want the window to disappear after transitioning to the position you specified
duration: 300
},
dehideParam: {
duration: 300
},
styleDisplay: 'inline',
animation: true,
animationDuration: 100,//The whole animation duration(millisec)
};
if (windowControlParam) {
mergeDeeply({ op: 'overwrite-merge', object1: defaultWindowControlParam, object2: windowControlParam });
}
frame.setControl(defaultWindowControlParam);
};
return result;
}
module.exports.getPresetWindow = getPreset;
================================================
FILE: src/utils/CSimpleLayoutAnimator.js
================================================
var CTimer = require('./CTimer.js');
/**
* CSimpleLayoutAnimator class
* Class for moving animation · scaling animation of frame.
*
* @constructor
*/
function CSimpleLayoutAnimator() {
this.fps = 30;
this.durationMillis = 200;
this.targetFrame = null;
this._crrAlpha = 1.0;
this._toAlpha = 1.0;
//current width/height
this._crrWidth = 0;
this._crrHeight = 0;
this._toWidth = 0;
this._toHeight = 0;
//current position(x,y)
//this._crrX = 0;
//this._crrY = 0;
this._toX = 0;
this._toY = 0;
this.pinnedAnimationEnabled = false;
this._pinX = 0;
this._pinY = 0;
this._pinAnchor = null;
}
/**
* Set CIFrame object to be resized
* @param ciframe
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.set = function(ciframe) {
var me = this;
me.targetFrame = ciframe;
me.fromWidth(ciframe.getWidth());
me.fromHeight(ciframe.getHeight());
me.toWidth(ciframe.getWidth());
me.toHeight(ciframe.getHeight());
var crrPos = ciframe.getPosition();
me.fromPosition(crrPos.x, crrPos.y, crrPos.anchor);
return me;
};
/**
* Get CIFrame object
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.get = function() {
var me = this;
return me.targetFrame;
};
/**
* Set animation duration time millis
* @param durationMillis
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.setDuration = function(durationMillis) {
var me = this;
me.durationMillis = durationMillis;
return me;
};
/**
* Set expected FPS
* @param fps
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.setFPS = function(fps) {
var me = this;
me.fps = fps;
return me;
};
/**
* Set PIN position
* @param x
* @param y
* @param anchor Position where animation starts from.Expected parameters as follows.
'LEFT_TOP':Default.Specify the position starting from the upper left.
'CENTER_TOP'
'RIGHT_TOP'
'LEFT_CENTER'
'CENTER_CENTER'
'RIGHT_CENTER'
'LEFT_BOTTOM'
'CENTER_BOTTOM'
'RIGHT_BOTTOM'
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.fromPosition = function(x, y, anchor) {
var me = this;
me.pinnedAnimationEnabled = true;
me._pinX = x;
me._pinY = y;
me.toPosition(x, y);
if (anchor) {
me._pinAnchor = anchor;
}
return me;
};
/**
* Set resizeFrom width
* @param fromWidth
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.fromWidth = function(fromWidth) {
var me = this;
me._crrWidth = fromWidth;
return me;
};
/**
* Set resizeFrom height
* @param fromHeight
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.fromHeight = function(fromHeight) {
var me = this;
me._crrHeight = fromHeight;
return me;
};
/**
* Set resizeTo width
* @param toWidth
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toWidth = function(toWidth) {
var me = this;
me._toWidth = toWidth;
return me;
};
/**
* Set resizeTo height
* @param toHeight
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toHeight = function(toHeight) {
var me = this;
me._toHeight = toHeight;
return me;
};
/**
* Set from alpha
* @param fromAlpha
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.fromAlpha = function(fromAlpha) {
var me = this;
me._crrAlpha = fromAlpha;
return me;
};
/**
* Set to alpha
* @param toAlpha
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toAlpha = function(toAlpha) {
var me = this;
me._toAlpha = toAlpha;
return me;
};
/**
* Get CIFrame object
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.ease = function(ease) {
var me = this;
me._ease=ease;
return me;
};
/**
* Set move to position
* @param x
* @param y
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toPosition = function(x, y) {
var me = this;
me._toX = x;
me._toY = y;
return me;
};
/**
* Set move to x
* @param x
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toX = function(x) {
var me = this;
me._toX = x;
return me;
};
/**
* Set move to y
* @param t
* @returns {*}
*/
CSimpleLayoutAnimator.prototype.toY = function(t) {
var me = this;
me._toY = t;
return me;
};
CSimpleLayoutAnimator.prototype.start = function(waitMillis, requestFocusEnabled) {
var me = this;
var fromWidth = me._crrWidth;
var fromHeight = me._crrHeight;
var fromX = me._pinX;
var fromY = me._pinY;
var fromAlpha = me._crrAlpha;
return new Promise(function(resolve, reject) {
var numOfSteps = parseInt(me.fps * (me.durationMillis / 1000));
if (numOfSteps == 0) {
numOfSteps = 1;
}
var deltaWidth = (me._toWidth - fromWidth) / numOfSteps;
var deltaHeight = (me._toHeight - fromHeight) / numOfSteps;
var deltaX = (me._toX - fromX) / numOfSteps;
var deltaY = (me._toY - fromY) / numOfSteps;
var deltaAlpha = (me._toAlpha - fromAlpha) / numOfSteps;
if(me._ease){
deltaAlpha=deltaAlpha/1.24;
}
var unitMillis = me.durationMillis / numOfSteps;
var idx = 0;
function loop() {
var timer = new CTimer();
timer.setIntervalMillis(unitMillis);
timer.setCallback(function(timer) {
if (idx == numOfSteps) {
var _width = me._toWidth;
var _height = me._toHeight;
var _x = fromX + deltaX * idx;
var _y = fromY + deltaY * idx;
var _alpha = me._toAlpha;
if (me.pinnedAnimationEnabled) {
//me.targetFrame._setPositionInternally(me._pinX, me._pinY, me._pinAnchor, _width, _height);
me.targetFrame._setPositionInternally(_x, _y, me._pinAnchor, _width, _height);
}
if (me.targetFrame.htmlElement.style) {
me.targetFrame.htmlElement.style.opacity = _alpha;
}
//me.targetFrame.resizeDirect(_width, _height,false);
me.targetFrame.setSize(_width, _height, true);
me._crrWidth = _width;
me._crrHeight = _height;
me._pinX = _x;
me._pinY = _y;
}
if (idx == (numOfSteps + 1)) {
//Stop timer after last draw update.
timer.stopTimer();
if (me.targetFrame.htmlElement.style) {
me.targetFrame.htmlElement.style.opacity = me._toAlpha;
}
resolve(me);
return;
}
var _width = fromWidth + deltaWidth * idx;
var _height = fromHeight + deltaHeight * idx;
var _x = fromX + deltaX * idx;
var _y = fromY + deltaY * idx;
var _alpha = fromAlpha + deltaAlpha * idx;
if (me.pinnedAnimationEnabled) {
//me.targetFrame._setPositionInternally(me._pinX, me._pinY, me._pinAnchor, _width, _height);
me.targetFrame._setPositionInternally(_x, _y, me._pinAnchor, _width, _height);
}
if (me.targetFrame.htmlElement.style) {
me.targetFrame.htmlElement.style.opacity = _alpha;
}
//me.targetFrame.resizeDirect(_width, _height,false);
me.targetFrame.setSize(_width, _height, true);
if (idx == 0) {
//check window existence
var wmgr = me.targetFrame.parentCanvas;
if (wmgr) {
var _targetFrame = wmgr.getWindow(me.targetFrame.id);
if (_targetFrame) {
me.targetFrame.show({ requestFocus: requestFocusEnabled });
} else {
//the target window must be deleted.
}
}
}
idx++;
});
timer.startTimer();
}
if (waitMillis) {
var waiter = new CTimer();
waiter.setIntervalMillis(waitMillis);
waiter.setCallback(function(_timer) {
_timer.stopTimer();
loop();
});
waiter.startTimer();
} else {
loop();
}
});
};//start
/**
* end of CSimpleLayoutAnimator class
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
module.exports = CSimpleLayoutAnimator;
================================================
FILE: src/utils/CTimer.js
================================================
/**
* CTimer class
*
* How to use:
* var timer = new CTimer();
* var value = 0;
*
* timer.setCallback(function (timerObj) {
* value++;
* console.log(value);
* if (value == 100) {
* timerObj.stopTimer();
* }
* });
* timer.setIntervalMillis(100);
* timer.startTimer();
*
* @author Tom Misawa (riversun.org@gmail.com)
*/
var CTimer =
(function() {
function CTimer() {
var me = this;
me._timerId = null;
me._isRunning = false;
me._timerInterval = 0;
me._internalCallback = _internalCallback;
me._timerMethod = null;
function _internalCallback() {
if (me._timerMethod) {
me._timerMethod(me);
}
if (me._isRunning) {
clearTimeout(me._timerId);
me._timerId = setTimeout(me._internalCallback, me._timerInterval);
}
}
}
CTimer.prototype.setCallback = function(callback_func) {
var me = this;
me._timerMethod = callback_func;
return me;
};
CTimer.prototype.setIntervalMillis = function(interval) {
var me = this;
me._timerInterval = interval;
return me;
};
CTimer.prototype.stopTimer = function() {
var me = this;
me._isRunning = false;
return me;
};
CTimer.prototype.startTimer = function() {
var me = this;
if (me._timerInterval > 0) {
me._timerId = setTimeout(me._internalCallback, me._timerInterval);
me._isRunning = true;
}
return me;
};
return CTimer;
})();
/**
* end of CTimer class
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
module.exports = CTimer;
================================================
FILE: src/utils/Inherit.js
================================================
/**
* Inheritance function
*
* @param subClass
* @param baseClass
*/
function inherit(subClass, baseClass) {
function clazz() {
}
clazz.prototype = baseClass.prototype;
subClass.prototype = new clazz();
subClass.prototype.constructor = subClass;
subClass.superConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}
/**
* End of inheritance function
*/
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
module.exports = inherit;
================================================
FILE: src/utils/ObjectAssigner.js
================================================
var _typeof =
typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
? function (obj) {
return typeof obj;
}
: function (obj) {
return obj &&
typeof Symbol === "function" &&
obj.constructor === Symbol &&
obj !== Symbol.prototype
? "symbol"
: typeof obj;
};
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function isObject(item) {
return (
item &&
(typeof item === "undefined" ? "undefined" : _typeof(item)) === "object" &&
!Array.isArray(item)
);
}
function objectAssign(target) {
for (
var _len = arguments.length,
sources = Array(_len > 1 ? _len - 1 : 0),
_key = 1;
_key < _len;
_key++
) {
sources[_key - 1] = arguments[_key];
}
if (!sources.length) return target;
var source = sources.shift();
if (isObject(target) && isObject(source)) {
for (var key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, _defineProperty({}, key, {}));
objectAssign(target[key], source[key]);
} else {
Object.assign(target, _defineProperty({}, key, source[key]));
}
}
}
return objectAssign.apply(undefined, [target].concat(sources));
}
module.exports.objectAssign = objectAssign;
================================================
FILE: src/utils/WindowEventHelper.js
================================================
'use strict';
var CSimpleLayoutAnimator = require('./CSimpleLayoutAnimator.js');
var CALIGN = require('../CCommon.js');
var mergeDeeply = require('merge-deeply');
var EventListenerHelper = require('event-listener-helper');
function WindowEventHelper(model) {
this.eventListenerHelper = new EventListenerHelper();
this.windowMode = 'default';
this.styleDisplay = 'flex';
this.horizontalAlign = 'left';
this.verticalAlign = 'top';
this.keyListener = null;
this.minimizeButton = null;
this.maximizeButton = null;
this.demaximizeButton = null;
this.deminimizeButton = null;
this.opts = model;
this.isWindowManagerFixed = model.frame.jsFrame.isWindowManagerFixed;
if (model.styleDisplay) {
this.styleDisplay = model.styleDisplay;
}
if (model.minimizeButton) {
this.minimizeButton = model.minimizeButton;
}
if (model.deminimizeButton) {
this.deminimizeButton = model.deminimizeButton;
}
if (model.maximizeButton) {
this.maximizeButton = model.maximizeButton;
}
if (model.demaximizeButton) {
this.demaximizeButton = model.demaximizeButton;
}
if (model.hideButton) {
this.hideButton = model.hideButton;
}
if (model.hideButtons) {
this.hideButtons = model.hideButtons;
}
this.maximizeParam = model.maximizeParam;
this.demaximizeParam = model.demaximizeParam;
this.minimizeParam = model.minimizeParam;
this.deminimizeParam = model.deminimizeParam;
this.hideParam = model.hideParam;
this.dehideParam = model.dehideParam;
if (model.horizontalAlign) {
this.horizontalAlign = model.horizontalAlign;
}
if (model.verticalAlign) {
this.verticalAlign = model.verticalAlign;
}
this.animationEnabled = false;
this.animationDuration = 100;
this.frame = model.frame;
this.hideFrameBorder = true;
this.hideTitleBar = true;
this.restoreKey = null;
this.restoreDuration = null;
this.restoreCallback = null;
this.statsStore = {};
if (model.animation) {
this.animationEnabled = model.animation;
}
if (model.animationDuration) {
this.animationDuration = model.animationDuration;
}
this.eventListeners = {};
//If the user changes the window size when the window is maximized state,
// adjust the size so that window looks maximized.
this.resizeListener = this.handleOnResize.bind(this);
if (this.maximizeParam && this.maximizeParam.matchParent) {
this.resizeListener = this.handleOnVirtualResize.bind(this);
}
}
WindowEventHelper.MATCH_PARENT_CHANGE_MARKER_ATTR = '__jsframe-mp-marker';
WindowEventHelper.prototype.on = function(eventType, callback) {
var me = this;
me.eventListeners[eventType] = callback;
};
//---------------------------------------------------------------------------------------------------------------------
WindowEventHelper.prototype.doMaximize = function(model) {
var me = this;
if (me.windowMode === 'hid') {
throw Error('[JSrame] It is not possible to change directly from the hid state to the maximized state');
return;
}
if (me.windowMode === 'maximized' || me.windowMode === 'maximizing') {
// If it's already 'maximized' status, it doesn't do anything.
return;
}
me.windowMode = 'maximizing';
var frame = me.frame;
if (model && model.matchParent) {
// The div element does not issue the resize event. Furthermore,
// div is specified as 100%, so style.width is always 100%.
// So I want to get the clientWidth but I can't get it with mutationObserver.
// Therefore, we adopt a mechanism to catch the parent window
// resize event and change the attribute of the parent window content
// by differentiation to catch it.
var windowManager = frame.getWindowManager();
var parentElement = windowManager.getParentElement();
if (!me.matchParentResizeObserver) {
var matchParentResizeObserver = new MutationObserver(function() {
// console.log("on virtual resize");
me.resizeListener();
});
matchParentResizeObserver.observe(parentElement, {
attributeFilter: [WindowEventHelper.MATCH_PARENT_CHANGE_MARKER_ATTR],
attributes: true
});
me.matchParentResizeObserver = matchParentResizeObserver;
}
}
//set onresize listener
//window.addEventListener('resize', me.resizeListener);
else if (!me.eventListenerHelper.hasEventListener(window, 'resize', 'window-resize-listener')) {
me.eventListenerHelper.addEventListener(window, 'resize', me.resizeListener,
{ listenerName: 'window-resize-listener' });
}
//Remember the status of the window before maximizing the window size
me.saveCurrentWindowStats('maximize_mode');
me.hideTitleBar = model ? model.fullScreen : false;
if (me.hideTitleBar) {
//Hide only the currently visible FrameComponent
//ウィンドウのモードを変更する前の今の状態で可視状態にあるフレームコンポーネント（閉じるボタン類）を不可視にする
//(タイトルバー非表示の場合には最大化するときのアニメーションでフレームコンポーネントを見せないようにする)
frame.hideAllVisibleFrameComponents();
//またhideAllVisibleFrameComponentを実施するときに、個別のhideFrameComponentやshowFrameComponentを実行すると
//管理ステートが破綻するため、タイトルバー非表示の場合はどうせ操作できないということもあり
//hideFrameComponent や showFrameComponentは実行しない
} else {
//Process required for maximization
if (me.maximizeButton) {
frame.hideFrameComponent(me.maximizeButton);
}
if (me.demaximizeButton) {
frame.showFrameComponent(me.demaximizeButton, me.styleDisplay);
}
}
frame.setMovable(false);
frame.setResizable(false);
if (model && model.restoreKey) {
me.restoreKey = model.restoreKey;
}
if (model && model.restoreDuration) {
me.restoreDuration = model.restoreDuration;
}
if (model && model.restoreCallback) {
me.restoreCallback = model.restoreCallback;
}
//Render maximization itself
me.renderMaximizedMode({
animation: me.animationEnabled,
callback: (model && model.callback) ? model.callback : null, //set maximized finished callback
duration: (model && model.duration) ? model.duration : null,
matchParent: (model && model.matchParent) ? model.matchParent : false,
});
};
/**
* Render window as a maximized mode( full screen )
*/
WindowEventHelper.prototype.renderMaximizedMode = function(model) {
var me = this;
var frame = me.frame;
var from = me.loadWindowStats('maximize_mode');
var _toX = 0;
var _toY = 0;
var _toWidth = 0;
var _toHeight = 0;
//compute position and size[begin]
if (me.hideTitleBar) {
_toX = 0;
_toY = -from.titleBarHeight;
}
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
if (model.matchParent) {
// If matchParent is specified
// When maximizing, use the size of parentElement specified at initialization
// ParentlElement is often used only for adjusting the display order.
// Therefore, only if matchParent is specified, match the size of parentElement
var windowManager = frame.getWindowManager();
var parentElement = windowManager.getParentElement();
parentWidth = parentElement.clientWidth;
parentHeight = parentElement.clientHeight;
}
if (me.hideFrameBorder) {
_toWidth = parentWidth;
_toHeight = parentHeight + (me.hideTitleBar ? from.titleBarHeight : 0);
} else {
_toWidth = parentWidth - from.frameBorderWidthDefault * 2;
_toHeight = parentHeight - from.frameBorderWidthDefault * 2 + (me.hideTitleBar ? from.titleBarHeight : 0);
}
//compute position and size[end]
if (me.horizontalAlign == 'right') {
_toX = -_toWidth;
}
if (me.verticalAlign == 'bottom') {
_toY = -_toHeight;
}
//render position and size[begin]
var funcDoRender = function(opt) {
var disableCallback = opt && opt.disableCallback;
frame.setPosition(_toX, _toY);
if (me.hideFrameBorder) {
frame.frameBorderWidthDefault = 0;
frame.frameBorderWidthFocused = 0;
frame.htmlElement.style.borderWidth = '0px';
}
frame.setSize(_toWidth, _toHeight, true);
if (disableCallback) {
return;
}
if (me.hideTitleBar) {
// when full screen mode(means hidden title bar)
if (me.restoreKey) {
me.keyListener = function(event) {
if (event.code === me.restoreKey) {
me.doCommand('restore');
}
};
}
window.addEventListener('keydown', me.keyListener);
//add keylistener for inside the iframe
if (frame.iframe) {
frame.iframe.contentWindow.addEventListener('keydown', me.keyListener);
}
}
me.windowMode = 'maximized';
if (model && model.callback) {
model.callback(me.frame, { eventType: 'maximized' });
}
if (me.eventListeners['maximized']) {
me.eventListeners['maximized'](me.frame, { eventType: 'maximized' });
}
};// end of funcDoRender
if (model && model.animation) {
me.animateFrame({
frame: frame,
from: from,
to: {
left: _toX,
top: _toY,
width: _toWidth,
height: _toHeight
},
duration: model.duration ? model.duration : me.animationDuration,
callback: funcDoRender
});
} else {
if (model && model.caller === 'handleOnResize') {
funcDoRender({ disableCallback: true });
} else {
funcDoRender();
}
}
//render position and size[end]
};
WindowEventHelper.prototype.getWindowMode = function() {
return this.windowMode;
};
/**
* Restore window from maximized mode
*/
WindowEventHelper.prototype.doDemaximize = function(model) {
var me = this;
var frame = me.frame;
if (me.windowMode === 'hid') {
//console.error('demaximize(=recovery from maximized) cannot be performed in hid state.');
throw Error('[JSFrame] demaximize(=recovery from maximized) cannot be performed in hid state.');
return;
}
if (!me.hasWindowStats('maximize_mode')) {
return;
}
if (me.hideTitleBar) {
} else {
if (me.maximizeButton) {
frame.showFrameComponent(me.maximizeButton, me.styleDisplay);
}
if (me.demaximizeButton) {
frame.hideFrameComponent(me.demaximizeButton);
}
}
me.restoreWindow({
restorePosition: true,
restoreMode: 'maximize_mode',
animation: me.animationEnabled,
callback: (model && model.callback) ? model.callback : null,
forceShowFrameComponents: (me.animationEnabled && me.hideTitleBar),
duration: (model && model.duration) ? model.duration : null,
eventType: 'demaximized'
});
};
/**
* Called when changing the window size by user operation in maximized mode
*/
WindowEventHelper.prototype.handleOnResize = function() {
var me = this;
me.renderMaximizedMode({
caller: 'handleOnResize',
//matchParent: true
});
};
WindowEventHelper.prototype.handleOnVirtualResize = function() {
var me = this;
me.renderMaximizedMode({
caller: 'handleOnResize',
matchParent: true
});
};
//---------------------------------------------------------------------------------------------------------------------
/**
* Make window minimized mode
*/
WindowEventHelper.prototype.doMinimize = function(model) {
var me = this;
if (me.windowMode === 'minimized' || me.windowMode === 'minimizing') {
// If it's already 'minimized' status, it doesn't do anything.
return;
}
me.windowMode = 'minimizing';
var frame = me.frame;
//Remember the stats of the window before maximizing the window
me.saveCurrentWindowStats('minimize_mode');
frame.setResizable(false);
me.renderMinimizedMode({
animation: me.animationEnabled,
callback: (model && model.callback) ? model.callback : null,
duration: (model && model.duration) ? model.duration : null,
toWidth: (model && model.toWidth) ? model.toWidth : null,
});
};
/**
* Render window as minimized mode
*/
WindowEventHelper.prototype.renderMinimizedMode = function(model) {
var me = this;
var frame = me.frame;
var ri = me.loadWindowStats('minimize_mode');
var from = me.getCurrentWindowStats();
var to = me.getCurrentWindowStats();
to.height = ri.titleBarHeight;
if (model && model.toWidth) {
to.width = model.toWidth
}
var funcDoRender = function() {
var forceSetSize = true;
frame.setSize(to.width, to.height, forceSetSize);
me.windowMode = 'minimized';
if (me.minimizeButton) {
frame.hideFrameComponent(me.minimizeButton);
}
if (me.deminimizeButton) {
frame.showFrameComponent(me.deminimizeButton, me.styleDisplay);
}
if (model.callback) {
model.callback(me.frame, { eventType: 'minimized' });
}
if (me.eventListeners['minimized']) {
me.eventListeners['minimized'](me.frame, { eventType: 'minimized' });
}
};
if (model && model.animation) {
me.animateFrame({
toAlpha: 1.0,
duration: model.duration ? model.duration : me.animationDuration,
frame: frame,
from: from,
to: to,
callback: funcDoRender
});
} else {
funcDoRender();
}
};
/**
* Restore window from minimized mode
*/
WindowEventHelper.prototype.doDeminimize = function(model) {
var me = this;
var frame = me.frame;
if (!me.hasWindowStats('minimize_mode')) {
return;
}
if (me.minimizeButton) {
frame.showFrameComponent(me.minimizeButton, me.styleDisplay);
}
if (me.deminimizeButton) {
frame.hideFrameComponent(me.deminimizeButton);
}
me.restoreWindow(
{
restorePosition: false,
restoreMode: 'minimize_mode',
animation: me.animationEnabled,
duration: (model && model.duration) ? model.duration : null,
callback: (model && model.callback) ? model.callback : null,
eventType: 'deminimized'
});
};
//---------------------------------------------------------------------------------------------------------------------
/**
* Make window hidden mode
*/
WindowEventHelper.prototype.doHide = function(model) {
var me = this;
if (me.windowMode === 'hid' || me.windowMode === 'hiding') {
// If it's already 'hid' status, it doesn't do anything.
return;
}
me.windowMode = 'hiding';
var frame = me.frame;
//Remember the stats of the window before maximizing the window
me.saveCurrentWindowStats('hide_mode');
frame.setResizable(false);
var arg = {
// silent: model.silent,
animation: me.animationEnabled,
// duration: (model && model.duration) ? model.duration : null,
// callback: (model && model.callback) ? model.callback : null,
// align: (model && model.align) ? model.align : null,
// offset: (model && model.align) ? model.offset : null,
};
if (model) {
mergeDeeply({ op: 'overwrite-merge', object1: arg, object2: model });
}
me.renderHideMode(arg);
};
/**
* Render window as hidden mode
*/
WindowEventHelper.prototype.renderHideMode = function(model) {
var me = this;
var frame = me.frame;
var ri = me.loadWindowStats('hide_mode');
var from = me.getCurrentWindowStats();
var offset = { x: 0, y: 0 };
var toElement = model.toElement;
if (model.offset) {
offset = model.offset;
}
var left = 0;
var top = 0;
{
var align = (model && model.align) ? model.align : 'LEFT_TOP';
if (!align || CALIGN.LEFT_TOP == align) {
left = from.left;
top = from.top;
} else if (CALIGN.HCENTER_TOP == align) {
left = from.left + from.width / 2;
top = from.top;
} else if (CALIGN.RIGHT_TOP == align) {
left = from.left + from.width;
top = from.top;
} else if (CALIGN.LEFT_VCENTER == align) {
left = from.left;
top = from.top + from.height / 2;
} else if (CALIGN.HCENTER_VCENTER == align) {
left = from.left + from.width / 2;
top = from.top + from.height / 2;
} else if (CALIGN.RIGHT_VCENTER == align) {
left = from.left + from.width;
top = from.top + from.height / 2;
} else if (CALIGN.LEFT_BOTTOM == align) {
left = from.left;
top = from.top + from.height;
} else if (CALIGN.HCENTER_BOTTOM == align) {
left = from.left + from.width / 2;
top = from.top + from.height;
} else if (CALIGN.RIGHT_BOTTOM == align) {
left = from.left + from.width;
top = from.top + from.height;
} else if ('ABSOLUTE' == align) {
if (toElement) {
var elementRect = toElement.getBoundingClientRect();
if (me.isWindowManagerFixed) {
left = elementRect.left;
top = elementRect.top;
} else {
left = elementRect.left + window.pageXOffset;
top = elementRect.top + window.pageYOffset;
}
} else {
left = offset.x;
top = offset.y;
}
}
}
var to = {
left: left,
top: top,
width: 0,
//minimum height must be titleBarHeight
height: ri.titleBarHeight
};
var funcDoRender = function() {
var forceSetSize = true;
frame.setSize(to.width, to.height, forceSetSize);
//frame.hide();
me.windowMode = 'hid';
if (model && model.callback) {
model.callback(me.frame, { eventType: 'hid' });
}
if (me.eventListeners['hid']) {
me.eventListeners['hid'](me.frame, { eventType: 'hid' });
}
};
//Hide only the currently visible FrameComponent
frame.hideAllVisibleFrameComponents();
if (model && model.animation) {
me.animateFrame({
fromAlpha: model.silent ? 0 : 1.0,
toAlpha: 0,
ease: true,
duration: model.duration ? model.duration : me.animationDuration,
frame: frame,
from: from,
to: to,
callback: funcDoRender
});
} else {
funcDoRender();
}
};
/**
* Restore window from hided mode
*/
WindowEventHelper.prototype.doDehide = function(model) {
var me = this;
var frame = me.frame;
if (!me.hasWindowStats('hide_mode')) {
return;
}
me.restoreWindow(
{
duration: (model && model.duration) ? model.duration : null,
restorePosition: true,
restoreMode: 'hide_mode',
animation: me.animationEnabled,
forceShowFrameComponents: true,
callback: (model && model.callback) ? model.callback : null,
eventType: 'dehided'
});
};
//---------------------------------------------------------------------------------------------------------------------
WindowEventHelper.prototype.loadWindowStats = function(storeKeyName) {
var me = this;
return me.statsStore[storeKeyName];
};
/**
* Remember the status of the window before maximizing or minimizing the window size
* @param storeKeyName
* @returns {boolean} Returns true if the status of the window has been updated or is a new status.
* Returns false if the status has not been updated.
*/
WindowEventHelper.prototype.saveCurrentWindowStats = function(storeKeyName) {
var me = this;
var crrWindowStats = me.getCurrentWindowStats();
if (me.hasWindowStats(storeKeyName)) {
var storedStats = me.loadWindowStats(storeKeyName);
var isWindowStatsUpdated = !me.windowStatsEquals(crrWindowStats, storedStats);
if (isWindowStatsUpdated) {
me.statsStore[storeKeyName] = crrWindowStats;
}
return isWindowStatsUpdated;
} else {
me.statsStore[storeKeyName] = crrWindowStats;
return true;
}
};
WindowEventHelper.prototype.windowStatsEquals = function(windowStats1, windowStats2) {
if (windowStats1 && windowStats2) {
var result = JSON.stringify(windowStats1) === JSON.stringify(windowStats2);
return result;
} else {
return false;
}
};
WindowEventHelper.prototype.clearWindowStats = function(storeKeyName) {
var me = this;
me.statsStore[storeKeyName] = null;
};
WindowEventHelper.prototype.hasWindowStats = function(storeKeyName) {
var me = this;
return me.statsStore[storeKeyName];
};
WindowEventHelper.prototype.getCurrentWindowStats = function() {
var me = this;
var frame = me.frame;
//Acquire window's stats
var __titleBarHeight = parseInt(frame.titleBar.style.height, 10);
var __frameBorderWidthDefault = frame.frameBorderWidthDefault;// parseInt(frame.htmlElement.style.borderWidth, 10);
var __frameBorderWidthFocused = frame.frameBorderWidthFocused;
var __left = frame.getLeft();
var __top = frame.getTop();
var __width = frame.getWidth();
var __height = frame.getHeight();
var __resizable = frame.resizable;
var __movable = frame.movable;
return {
left: __left,
top: __top,
width: __width,
height: __height,
titleBarHeight: __titleBarHeight,
frameBorderWidthDefault: __frameBorderWidthDefault,
frameBorderWidthFocused: __frameBorderWidthFocused,
resizable: __resizable,
movable: __movable,
};
};
/**
* Restore the state of the window
* @param model
*/
WindowEventHelper.prototype.restoreWindow = function(model) {
var me = this;
var frame = me.frame;
var to = me.loadWindowStats(model.restoreMode);
//現在の状態を一時保存する
//me.saveCurrentWindowStats('temp');
var crr = me.getCurrentWindowStats();//loadWindowStats('temp');
//以下の3つは、ボーダーを太さを変更するためのものだが
// funcDoRender内で処理してしまうとアニメーション中にはボーダーが描かれなくなる
//アニメーション中にはボーダーは復活していたほうが自然なのでfuncDoRender外で実行する
frame.frameBorderWidthDefault = to.frameBorderWidthDefault;
frame.frameBorderWidthFocused = to.frameBorderWidthFocused;
frame.htmlElement.style.borderWidth = frame.frameBorderWidthFocused;
var funcDoRender = function() {
if (model && model.restorePosition == false) {
//位置の移動を伴わない場合（最小化から戻すときなど)
to.left = crr.left;
to.top = crr.top;
}
frame.setPosition(to.left, to.top);
var force = true;
frame.setSize(to.width, to.height, force);
frame.setResizable(to.resizable);
frame.setMovable(to.movable);
me.clearWindowStats(model.restoreMode);
if (me.keyListener) {
//タイトルバー無し最大化状態から戻すためのキーリスナーは削除する
window.removeEventListener('keydown', me.keyListener);
if (frame.iframe) {
frame.iframe.contentWindow.removeEventListener('keydown', me.keyListener);
}
me.keyListener = null;
}
me.windowMode = 'default';
if (model && model.forceShowFrameComponents) {
//ウィンドウのモード変更前に可視状態にあったフレームコンポーネント（閉じるボタン類）を可視状態にする
frame.showAllVisibleFrameComponents();
}
frame.show();
var eventType = 'restored';
if (model && model.eventType) {
eventType = model.eventType;
}
if (model && model.callback) {
model.callback(
me.frame, { eventType: eventType });
}
if (me.eventListeners[eventType]) {
me.eventListeners[eventType](me.frame, { eventType: eventType });
}
};
if (model && model.animation) {
me.animateFrame({
duration: model.duration ? model.duration : me.animationDuration,
frame: frame,
fromAlpha: 0,
toAlpha: 1,
from: crr,
to: to,
callback: funcDoRender
});
} else {
funcDoRender();
}
//window.removeEventListener('resize', me.resizeListener);
me.eventListenerHelper.removeEventListener(window, 'resize', me.resizeListener);
if (me.matchParentResizeObserver) {
me.matchParentResizeObserver.disconnect();
me.matchParentResizeObserver = null;
}
};
WindowEventHelper.prototype.animateFrame = function(model) {
var me = this;
var needRequestFocusAfterAnimation = false;
var fromAlpha = !isNaN(model.fromAlpha) ? model.fromAlpha : 1.0;
var from = model.from;
var to = model.to;
var animator = new CSimpleLayoutAnimator();
animator.set(model.frame)
.setDuration(model.duration ? model.duration : me.animationDuration)
.fromPosition(from.left, from.top, 'LEFT_TOP')
.toPosition(to.left, to.top, 'LEFT_TOP')
.fromWidth(from.width)
.fromHeight(from.height)
.toWidth(to.width)
.toHeight(to.height)
.fromAlpha(fromAlpha)
.toAlpha((model.toAlpha == 0) ? 0 : 1.0)
.ease(model.ease)
.start(0, needRequestFocusAfterAnimation)
.then(function(animatorObj) {
model['callback']();
});
};
/**
* Perform complex windowing with simple commands
* @param cmd
* @param opt
*/
WindowEventHelper.prototype.doCommand = function(cmd, opt) {
var me = this;
if (cmd === 'maximize') {
me._defaultFunctionMaximize(me.frame);
}
if (cmd === 'demaximize') {
me._defaultFunctionDemaximize(me.frame);
}
if (cmd === 'restore') {
me._defaultFunctionRestoreFromFullscreen(me.frame)
}
if (cmd === 'minimize') {
me._defaultFunctionMinimize(me.frame);
}
if (cmd === 'deminimize') {
me._defaultFunctionDeminimize(me.frame);
}
if (cmd === 'hide') {
me._defaultFunctionHide(me.frame);
}
if (cmd === 'dehide') {
me._defaultFunctionDehide(me.frame);
}
}
WindowEventHelper.prototype._defaultFunctionMaximize = function(_frame, evt) {
var me = this;
var model = me.opts;
var param = {
// DEPRECATED: maximizeWithoutTitleBar is deprecated
// USE maximizeParam.fullScreen
fullScreen: (model.maximizeWithoutTitleBar === true) ? true : false,
// DEPRECATED: model.restoreKey is deprecated
// USE maximizeParam.restoreKey
// If you want to use the key input instead of the title bar,
// you can specify the key because it is not possible
// to recover with the button when hiding the title bar.
restoreKey: model.restoreKey ? model.restoreKey : 'Escape',
// DEPRECATED: model.restoreDuration is deprecated
// USE maximizeParam.restoreDuration
restoreDuration: model.restoreDuration,
};
if (this.maximizeParam) {
// write maximizeParam into param
mergeDeeply({ op: 'overwrite-merge', object1: param, object2: this.maximizeParam });
}
//ウィンドウを最大化する
_frame.control.doMaximize(param);
};
WindowEventHelper.prototype._defaultFunctionDemaximize = function(_frame, evt) {
_frame.control.doDemaximize(
{});
};
WindowEventHelper.prototype._defaultFunctionRestoreFromFullscreen = function(_frame, evt) {
var me = this;
_frame.control.doDemaximize({
duration: me.restoreDuration ? me.restoreDuration : null,
callback: me.restoreCallback ? me.restoreCallback : null
});
};
WindowEventHelper.prototype._defaultFunctionMinimize = function(_frame, evt) {
//'minimizeButton'が押されたときに、最小化したい場合
_frame.control.doMinimize(this.minimizeParam);
};
WindowEventHelper.prototype._defaultFunctionDeminimize = function(_frame, evt) {
_frame.control.doDeminimize(this.deminimizeParam);
};
WindowEventHelper.prototype._defaultFunctionHide = function(_frame, evt) {
var param = {
align: 'CENTER_BOTTOM'
};
if (this.hideParam) {
param = this.hideParam;
}
_frame.control.doHide(param);
};
WindowEventHelper.prototype._defaultFunctionDehide = function(_frame, evt) {
var me = this;
_frame.control.doDehide(me.dehideParam);
};
WindowEventHelper.prototype.setupDefaultEvents = function() {
var me = this;
if (me.maximizeButton) {
//イベントはオーバーライドされる
me.frame.on(me.maximizeButton, 'click', me._defaultFunctionMaximize.bind(me));
}
if (me.demaximizeButton) {
me.frame.on(me.demaximizeButton, 'click', me._defaultFunctionDemaximize.bind(me));
}
if (me.minimizeButton) {
me.frame.on(me.minimizeButton, 'click', me._defaultFunctionMinimize.bind(me));
}
if (me.deminimizeButton) {
me.frame.on(me.deminimizeButton, 'click', me._defaultFunctionDeminimize.bind(me));
}
if (me.hideButton) {
me.frame.on(me.hideButton, 'click', me._defaultFunctionHide.bind(me));
}
if (me.hideButtons) {
for (var key in me.hideButtons) {
var hideButton = me.hideButtons[key];
if (hideButton) {
me.frame.on(hideButton, 'click', me._defaultFunctionHide.bind(me));
}
}
}
};
module.exports = WindowEventHelper;
================================================
FILE: webpack.config.js
================================================
const packageJson = require('./package.json');
const version = packageJson.version;
const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
module.exports = (env, argv) => {
const conf = {
mode: 'development',//production,development
devServer: {
port: 8080,
open: {
target: ["index.html"],
},
allowedHosts: "all",
static:
[
{
directory: path.join(__dirname, `public`),
publicPath: "/",
serveIndex: false,
watch: true,
},
],
},
entry: {
jsframe: './src/index.js',
},
output: {
path: path.join(__dirname, "lib"),
filename: argv.mode === 'production' ? `[name].min.js` : `[name].js`,
libraryTarget: 'umd'
},
optimization: {
minimizer: [new TerserPlugin({
//extractComments: true,
//cache: true,
//parallel: true,
//sourceMap: true,
terserOptions: {
compress: {
drop_console: true,
},
}
})],
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
},
],
},
plugins: [
new webpack.BannerPlugin(`[name] v${version} Copyright (c) 2007-2020 Tom Misawa`)
]
};
if (argv.mode !== 'production') {
conf.devtool = 'inline-source-map';
}
return conf;
};