modal input

AndrewRayCode · Aug 30, 2011 · d85540a · d85540a
1 parent 969b90a
commit d85540a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/FunForms.css b/FunForms.css
@@ -73,3 +73,28 @@ transform:translateY(.2em);
 }
 
 button:focus { outline:none; color:rgba(254,255,255,0.9) !important; text-shadow:rgba(0,0,0,0.2) 0 1px 2px; }
+
+/* Created by Arian Stolwijk <http://www.aryweb.nl> */
+
+.MooDialog {width:300px; height:30px; position:fixed; margin:-150px 0 0 -150px; top:50%; left:50%; z-index:50000; background:#fff; color:black; padding:10px;
+border-radius:7px;
+-moz-border-radius:7px;
+-webkit-border-radius:7px;
+border-radius:7px;
+-webkit-box-shadow:1px 1px 0 #777,
+2px 2px 0 #999,
+3px 3px 0 #9a9a9a,
+4px 4px 0 #aaa,
+5px 5px 0 #a9a9a9,
+3px 3px 10px #2c2c2c;
+box-shadow:1px 1px 0 #777,
+2px 2px 0 #999,
+3px 3px 0 #9a9a9a,
+4px 4px 0 #aaa,
+5px 5px 0 #a9a9a9,
+3px 3px 10px #2c2c2c;}
+.MooDialogTitle { padding-top:30px; }
+.MooDialog .content input {width:78%;}
+.MooDialog .buttons {float:right; text-align:right; margin:0; padding:0; border:0; background:none; position:relative; top:-6px;}
+.MooDialog .textInput { width:200px; float:left; }
+.MooDialog .MooDialogAlert{padding-left:40px; min-height:40px; }
diff --git a/builder.js b/builder.js
@@ -92,7 +92,7 @@
         document.body.noisify({
             monochrome: false
         }).addClass(Browser.Engine.webkit ? 'webkit' : '');
-        $$('.screen, .form-buttons').noisify();
+        $$('.form-buttons').noisify();
 
         var $built = $('function'),
             lines = $built.get('html').split('\n'),
@@ -113,6 +113,7 @@
         $('select').addEvent('click', function() {
             $('function').selectText();
         });
+        $('link').addEvent('click', popLink);
 
         $('expand').addEvent('click', toggleCodeView);
         $('despand').addEvent('click', toggleCodeView);
@@ -275,6 +276,19 @@
         $noBranchTexts.set('text', this.get('value'));
     }
 
+    function popLink() {
+        var input = new Element('input').set({
+            value: window.location.href.replace(/#.*$|$/, $('options').serialize()),
+            type: 'text'
+        }).addEvent('focus', function() {
+            this.select();
+        });
+        new MooDialog.Alert(input);
+        setTimeout(function() {
+            input.select();
+        }, 500);
+    }
+
 	function deselect() {
 		if (document.selection) {
             document.selection.empty();

diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
         <script src="mootools-more-1.3.2.1.js" type="text/javascript"></script>
         <script src="mootools.noisy.min.js" type="text/javascript"></script>
         <script src="FunForms.js" type="text/javascript"></script>
+        <script src="MooDialog.js" type="text/javascript"></script>
         <link type="text/css" rel="stylesheet" href="FunForms.css" />
         <script src="builder.js" type="text/javascript"></script>
         <link type="text/css" rel="stylesheet" href="builder.css" />