Permalink
Browse files

gallery-2012.06.13-20-30 prachiti gallery-simplenotifier

  • Loading branch information...
YUI Builder
YUI Builder committed Jun 13, 2012
1 parent 118f0d9 commit e19527185b68c1271740dede8f9fc50e79ef8207
@@ -0,0 +1,131 @@
+
+ .yui3-simplenotifier {
+
+ font-size: 12px;
+ position: absolute;
+ z-index: 9999;
+}
+
+ .yui3-simplenotifier.top-left {
+ left: 0px;
+ top: 0px;
+}
+
+ .yui3-simplenotifier.top-right {
+ right: 0px;
+ top: 0px;
+}
+
+ .yui3-simplenotifier.bottom-left {
+ left: 0px;
+ bottom: 0px;
+}
+
+ .yui3-simplenotifier.bottom-right {
+ right: 0px;
+ bottom: 0px;
+}
+
+ .yui3-simplenotifier.center {
+ top: 0px;
+ width: 50%;
+ left: 25%;
+}
+
+
+ .yui3-simplenotifier-content .yui3-simplenotifier-header {
+ font-weight: bold;
+ padding: 12px;
+ width: 92%;
+
+}
+.simplenotifier-header-show {
+ display: block;
+}
+
+.simplenotifier-header-noshow {
+ display: none;
+}
+
+
+.yui3-simplenotifier .yui3-simplenotifier-message {
+ font-size: .95em;
+}
+
+
+/** Hide notifier when printing **/
+@media print {
+ .yui3-simplenotifier {
+ display: none;
+ }
+}
+
+.yui3-simplenotifier-content {
+ overflow: hidden;
+ text-align: center;
+ background-color: #000;
+ color: #fff;
+ opacity: .65;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65 );
+ zoom: 1;
+ width: 300px;
+ margin: 10px;
+
+ font-family: Tahoma, Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ text-align: left;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 7px;
+
+}
+
+.yui3-simplenotifier .yui3-simplenotifier-message {
+ position: static;
+ color: #fffff;
+ padding: 12px;
+ width: 92%;
+ position:static;
+ float:left;
+ font-family: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+
+
+.yui3-simplenotifier:hover {
+
+}
+
+.yui3-simplenotifier-content:hover > .yui3-notify-close {
+ display:block;
+}
+
+
+
+.yui3-simplenotifier a {
+ text-decoration: none;
+}
+
+
+
+.yui3-simplenotifier .yui3-notify-close {
+ position:absolute;
+ border: 2px solid;
+ cursor: pointer;
+ padding-left: 4px;
+ padding-right: 4px;
+ text-decoration: none;
+ font-weight: bold;
+ top:0;
+ right:0;
+ -moz-border-radius: 0.5px;
+ -webkit-border-radius: 0.5px;
+ border-radius: 10px;
+ display:none;
+ margin: 5px;
+ background-color:gray ;
+
+
+}
+
@@ -0,0 +1,30 @@
+# Simple Notifier Module Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget
+component=gallery-simplenotifier
+
+# The list of files which should be concatenated to create the component
+# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead.
+# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js
+component.jsfiles=simplenotifier.js
+
+# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
+component.requires=widget, node, event, substitute, dom, anim, gallery-timer
+
+# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
+#component.supersedes=another.custom.module
+
+# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
+#component.optional=
+# If your module has a skin file, set this flag to "true"
+component.skinnable=true
+#component.skinnable=true
+
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Simple Notifier" default="local">
+ <description>Simple Notifier Build File</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
@@ -0,0 +1,158 @@
+
+
+
+ /* Notifier class constructor */
+ function SimpleNotifier(config) {
+ SimpleNotifier.superclass.constructor.apply(this, arguments);
+ }
+
+ SimpleNotifier.NAME = "SimpleNotifier";
+
+ SimpleNotifier.ATTRS = {
+
+ message : {
+ value: ""
+ },
+
+ header : {
+ value: ""
+ },
+
+ position: {
+ value: "bottom-right"
+ },
+
+ timeout : {
+ value : 4000
+ }
+ };
+
+ SimpleNotifier.MARKUP = '<div class="yui3-notify-close"><a title="close">X</a></div>'+
+ '<div class="yui3-simplenotifier-header {header_show} ">{header}</div>' +
+ '<div class="yui3-simplenotifier-message">{message}</div>';
+
+ /* Notifier extends the base Widget class */
+ Y.extend(SimpleNotifier, Y.Widget, {
+
+ BOUNDING_TEMPLATE : '<div/>',
+
+
+ initializer: function() {
+ this.publish("closeEvent", {
+ defaultFn: this._defCloseEventFn,
+ bubbles:false
+ });
+ },
+
+ destructor : function() {
+
+ },
+
+ renderUI : function() {
+
+ var nmessage = this.get('message');
+ var nheader = this.get('header');
+ var nheader_show;
+ if(nheader) {
+ nheader_show = "simplenotifier-header-show";
+ }else {
+ nheader_show = "simplenotifier-header-noshow";
+ }
+
+ var simplenotifier_content = {
+ message: nmessage,
+ header: nheader,
+ header_show: nheader_show
+ };
+
+ this.get('contentBox').append(Y.Node.create(Y.substitute(SimpleNotifier.MARKUP, simplenotifier_content)));
+ this.get('boundingBox').addClass(this.get('position'));
+
+ Y.one('.yui3-notify-close').on('click',function(e) {
+ this.fire("closeEvent");
+ },this);
+
+ },
+
+ bindUI : function() {
+ this.after("messageChange", this._afterMessageChange);
+ this.after("headerChange", this._afterHeaderChange);
+ this._onHover();
+ },
+
+ hide : function(oArgs) {
+
+ if(this.timer) {
+ this.timer.stop();
+ this.timer = null;
+ }
+
+ var anim = new Y.Anim({
+ node: this.get('boundingBox'),
+ to: {
+ opacity: 0
+ },
+ easing:'easeIn',
+ duration:0.5
+ });
+ anim.run();
+ },
+
+ syncUI : function() {
+ this._uiSetMessage(this.get("message"));
+ this._uiSetHeader(this.get("header"));
+ this.timer = new Y.Timer({
+ length: this.get("timeout"),
+ repeatCount: 1,
+ callback: Y.bind(this.hide, this)
+ });
+ this.timer.start();
+ },
+
+ _onHover : function() {
+
+ var cb = this.get("contentBox");
+ cb.on('mouseenter',Y.bind(function(e) {
+ if(this.timer) {
+ this.timer.pause();
+ }
+ },this));
+
+ cb.on('mouseleave',Y.bind(function(e) {
+ if(this.timer) {
+ this.timer.resume();
+ }
+ },this));
+ },
+
+ /*Listeners, UI update methods */
+ _afterMessageChange : function(e) {
+ /* Listens for changes in state, and asks for a UI update (controller). */
+ this._uiSetMessage(e.newVal);
+ },
+
+ _afterHeaderChange : function(e) {
+ /* Listens for changes in state, and asks for a UI update (controller). */
+ if(e || e.newVal) {
+ this._uiSetHeader(e.newVal);
+ }
+
+ },
+ _uiSetMessage : function(val) {
+ /* Update the state of attrA in the UI (view) */
+ var content = Y.one('.yui3-simplenotifier-message');
+ content.set("innerHTML",val);
+ },
+ _uiSetHeader : function(val) {
+ /* Update the state of attrA in the UI (view) */
+ var header = Y.one('.yui3-simplenotifier-header');
+ header.set("innerHTML",val);
+ },
+ _defCloseEventFn:function(){
+ this.hide();
+ }
+
+ });
+
+ Y.SimpleNotifier = SimpleNotifier;
+
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<link type="text/css" rel="stylesheet"
+ href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
+<link type="text/css" rel="stylesheet"
+ href="/Users/prachiti/yui/yui3-gallery/build/gallery-simplenotifier/assets/simplenotifier.css" />
+
+<script type="text/javascript"
+ src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
+<script type="text/javascript"
+ src="/Users/prachiti/yui/yui3-gallery/build/gallery-simplenotifier/gallery-simplenotifier.js"></script>
+<style>
+#booga {
+ height: 200px;
+ line-height: 200px;
+ width: 450px;
+ border: 2px solid #000;
+ text-align: center;
+ margin-bottom: 10px;
+ border: solid;
+}
+
+</style>
+
+</head>
+<body>
+ <div id="booga" class=""></div>
+ <script>
+ YUI().use("gallery-simplenotifier", function(Y) {
+ var t = new Y.SimpleNotifier({timeout:12000, position:"bottom-left"});
+ t.set("message","message in here....");
+ t.render();
+ });
+ </script>
+</body>
+</html>

0 comments on commit e195271

Please sign in to comment.