Finished the prefix editor for the Live Loop tool.

msporny · Jan 8, 2011 · 3411920 · 3411920
1 parent af2aa49
commit 3411920
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 22 deletions.
diff --git a/close.png b/close.png
diff --git a/css/layout.css b/css/layout.css
@@ -25,6 +25,11 @@ font-size: 16px;
 font-size: 12px;
 }
 
+.icon {
+margin-bottom: 0px;
+vertical-align: middle;
+}
+
 .titlebar {
 height: 100px;
 background: #e9922a;
@@ -244,6 +249,34 @@ transform: rotate(-3deg) scale(1.3) translate(-40px, -40px);
 -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
 }
 
+#prefix-editor-hotspot:hover {
+color: #e20000;
+cursor: pointer;
+}
+
+#simplemodal-overlay {
+background-color:#000;
+}
+
+#simplemodal-container {
+background-color: #333; 
+color: #ddd; 
+border: 8px solid #444; 
+padding: 12px;
+}
+
+#prefix-editor a.modalCloseImg {
+	background:url(close.png) no-repeat; /* adjust url as required */
+	width:25px;
+	height:29px;
+	display:inline;
+	z-index:3200;
+	position:absolute;
+	top:-15px;
+	right:-18px;
+	cursor:pointer;
+}
+
 /* Layout for mobile version */
 
 @media handheld, only screen and (max-width: 767px) {

diff --git a/css/typeimg.css b/css/typeimg.css
@@ -1,9 +1,5 @@
 /* Type & image presets */
 
-img, object, embed {
-margin-bottom: 20px;
-}
-
 body {
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 14px;
@@ -38,7 +34,6 @@ img {
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
-margin-bottom: 20px;
 }
 
 p, ul, ol, blockquote {

diff --git a/index.html b/index.html
@@ -19,6 +19,7 @@
   <link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)" />
   <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+  <script src="jquery.simplemodal.1.4.1.min.js"></script>
   <script src="live-loop.js"></script>
 </head>
 <body onload="liveloop.setupUi();">
@@ -42,6 +43,15 @@ <h1>The RDFa markup playground.
     </div>
   </div>
   <pre id="code-prologue">&lt;html&gt;</pre>
+  <div id="prefix-editor" class="simple-modal-container" style="display: none;">
+     <h1 class="largebutton">Prefix Editor</h1>
+     <p>The prefix editor allows you to add and remove prefixes from the current
+     document. To add a prefix, just type the short name, such as "dc" or "foaf"
+     into the box below and the prefix URL will be automatically filled out for
+     you if it is known. Press the 'Esc' key to close this editor.</p>
+     <div id="prefix-list"></div>
+     <div id="prefix-list-editor"></div>
+  </div>
   <div class="row">
     <form class="twelvecol last">
       <textarea id="code-body" name="rdfa" rows="15">&lt;p property=&quot;dc:creator&quot;&gt;Alice&lt;/p&gt;</textarea>
@@ -50,7 +60,8 @@ <h1>The RDFa markup playground.
   <pre id="code-epilogue">&lt;/html&gt;</pre>
 </div>
 
-<img id="loading" style="margin: 2px 2px; float: left; display: none;" src="loading.gif" />
+<img id="triples-loading" style="margin: 2px 2px; float: left; display: none;" 
+   src="loading.gif" />
 
 <div class="container onblack">
   <div class="row">

diff --git a/jquery.simplemodal.1.4.1.min.js b/jquery.simplemodal.1.4.1.min.js