Make editor design customisable according to the wall it is associate…

…d with
mozilla · Oct 31, 2012 · c7d3512 · c7d3512
1 parent a9a8f76
commit c7d3512
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 14 deletions.
diff --git a/editor/lib/php/editor-util.inc b/editor/lib/php/editor-util.inc
@@ -0,0 +1,47 @@
+<?php
+/* vim: set syn=php: */
+
+require_once(dirname(__FILE__) . "/../../../wall/lib/parapara.inc");
+require_once('designs.inc');
+// require_once("UriUtils.inc");
+// require_once('walls.inc');
+
+function getWall() {
+  $uri = $_SERVER['REQUEST_URI'];
+  if (strlen($uri) < 2)
+    return null;
+  return substr($uri, 1); // Skip initial /
+}
+
+function getStylesheet() {
+  global $config;
+
+  // Get wall name
+  $wall = getWall();
+  if (!$wall)
+    return;
+
+  // Get design name
+  $design = null;
+  try {
+    $design = getDesignForWallPath($wall);
+  } catch (KeyedException $e) {
+    error_log(print_r($e, true));
+  }
+  if (!$design || !isset($design['name']) || strlen($design['name']) == 0)
+    return null;
+
+  // Get stylesheet
+  $stylesheet = getEditorStyleSheetForDesign($design['name']);
+  if (!$stylesheet)
+    return null;
+
+  // Construct URL to stylesheet
+  $server_path = $config['editor']['upload_server'];
+  // Make sure server path ends with a /
+  if (substr($server_path, -1) !== "/")
+    $server_path .= "/";
+  // XXX Rename upload_server to wall_server
+  return $server_path . $stylesheet;
+}
+?>
diff --git a/editor/public/.htaccess b/editor/public/.htaccess
@@ -1,9 +1,9 @@
 Options -Indexes
 <ifModule mod_rewrite.c>
   RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index.html$ index.html.php [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteCond %{REQUEST_URI} !index
-  RewriteBase /
-  RewriteRule ^[^/]+$ index.html [L]
+  RewriteRule ^[^/]+$ index.html.php [L]
 </ifModule>
diff --git a/editor/public/css/editor.css b/editor/public/css/editor.css
@@ -263,9 +263,18 @@ div.canvas-background {
   margin-left: -15px; /* Move left to fill the space around the curved edges of
                        * the tool palette. */
   padding-left: 15px;
-  background: url('../img/jimen.png') left bottom repeat-x,
-              url('../img/space-bg.jpg') black;
-  background-size: auto 9%, cover;
+  background-color: #ddd;
+  background-image: -moz-linear-gradient(transparent 99%, #bbb 99%, #bbb),
+                   -moz-linear-gradient(90deg, transparent 99%, #bbb 99%, #bbb);
+  background-image: -webkit-linear-gradient(transparent 99%, #bbb 99%, #bbb),
+             -webkit-linear-gradient(90deg, transparent 99%, #bbb 99%, #bbb);
+  background-image: -o-linear-gradient(transparent 99%, #bbb 99%, #bbb),
+                    -o-linear-gradient(90deg, transparent 99%, #bbb 99%, #bbb);
+  background-image: linear-gradient(transparent 99%, #bbb 99%, #bbb),
+                    linear-gradient(90deg, transparent 99%, #bbb 99%, #bbb);
+  -webkit-background-size: 50px 50px;
+  -moz-background-size: 50px 50px;
+  background-size: 50px 50px;
 }
 svg#canvas {
   display: block; /* This stops us getting extra space added around the SVG */

diff --git a/editor/public/index.html → editor/public/index.html.php b/editor/public/index.html → editor/public/index.html.php
@@ -5,16 +5,21 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title data-l10n-id="title">パラパラアニメーション</title>
-    <link rel="stylesheet" href="css/editor.css" type="text/css">
+    <title data-l10n-id="title">Parapara Animation</title>
     <link rel="stylesheet" href="css/parapara.css" type="text/css">
+    <link rel="stylesheet" href="css/editor.css" type="text/css">
+<?php
+  require_once("../lib/php/editor-util.inc");
+  $stylesheet = getStylesheet();
+  if ($stylesheet) {
+    echo '    <link rel="stylesheet" href="' .  $stylesheet .
+         '" type="text/css">' . PHP_EOL;
+  }
+?>
     <link rel="resource" type="application/l10n" href="locales.ini">
     <script type="text/javascript" src="js/l10n.js"></script>
     <script type="text/javascript" src="js/parapara.core.js" defer></script>
     <script type="text/javascript" src="js/editor-ui.js" defer></script>
-    <!-- The following QRCode library is only used as a fallback in case the
-         server doesn't send a QR Code. If we know the server will always
-         provide a QR code we can leave the following library out. -->
     <script type="text/javascript" src="js/qrcode.js" async></script>
     <meta name="viewport"
       content="width=device-width, initial-scale=1.0, user-scalable=no">

diff --git a/editor/public/js/editor-ui.js.php b/editor/public/js/editor-ui.js.php
@@ -162,7 +162,6 @@
 
 EditorUI.getWallName = function() {
   var wallName = document.location.pathname.replace(/^\//, '');
-//  var wallName = document.location.pathname.replace(/\//g, '');
   // Test the wall name is at least one char long and has no slashes or dots
   return /^[^\/.]+$/.test(wallName) ? wallName : null;
 }

diff --git a/wall/lib/designs.inc b/wall/lib/designs.inc
@@ -0,0 +1,42 @@
+<?php
+/* vim: set syn=php: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+require_once("parapara.inc");
+require_once("db.inc");
+
+// Get the design for a wall given a path
+// Currently returns an associative array with only the design name ('name')
+function getDesignForWallPath($path) {
+  $conn =& getDbConnection();
+  $res =& $conn->queryRow(
+      'SELECT name FROM designs'
+    . ' INNER JOIN walls ON designs.designId = walls.designId'
+    . ' WHERE walls.urlPath = ' . $conn->quote(rawurlencode($path), 'text')
+    . ' LIMIT 1',
+    null,
+    MDB2_FETCHMODE_ASSOC);
+
+  if (PEAR::isError($res)) {
+    error_log($res->getMessage() . ', ' . $res->getDebugInfo());
+    throw new KeyedException('db-error');
+  }
+  return $res ? $res : null;
+}
+
+function getEditorStyleSheetForDesign($designName) {
+  // Sanitize designName
+  $designName = basename($designName);
+
+  // Work out where the stylesheet *should* be
+  $styleSheetPath = "wall/templates/$designName/editor/editor.css";
+  $baseDir = dirname(__FILE__) . '/../public/';
+  $fsPath = $baseDir . $styleSheetPath;
+
+  // Check if it exists
+  return file_exists($fsPath) ? $styleSheetPath : null;
+}
+
+?>
diff --git a/wall/lib/walls.inc b/wall/lib/walls.inc
@@ -113,7 +113,7 @@ function createWall($params) {
   // Get URLs
   $path      = getPathForTitle($title);
   $wallUrl   = getWallUrlForPath($path);
-  $editorUrl = getWallUrlForPath($path);
+  $editorUrl = getEditorUrlForPath($path);
 
   $shortUrl = shortenUrl($wallUrl);
   if ($shortUrl == $wallUrl)

diff --git a/wall/public/.gitignore b/wall/public/.gitignore
diff --git a/wall/public/wall/templates/space/editor/editor.css b/wall/public/wall/templates/space/editor/editor.css
@@ -0,0 +1,6 @@
+div.canvas-background {
+  background-color: black;
+  background: url('jimen.png') left bottom repeat-x,
+              url('space-bg.jpg') black;
+  background-size: auto 9%, cover;
+}
diff --git a/editor/public/img/jimen.png → ...lic/wall/templates/space/editor/jimen.png b/editor/public/img/jimen.png → ...lic/wall/templates/space/editor/jimen.png
diff --git a/editor/public/img/space-bg.jpg → .../wall/templates/space/editor/space-bg.jpg b/editor/public/img/space-bg.jpg → .../wall/templates/space/editor/space-bg.jpg
diff --git a/wall/public/wall/templates/street/editor/editor.css b/wall/public/wall/templates/street/editor/editor.css
@@ -0,0 +1,7 @@
+div.canvas-background {
+  background-color: white;
+  background: url('tree.png') right -50px bottom no-repeat,
+              url('mountains.jpg') left 10% top repeat-x,
+              white;
+  background-size: auto 70%, auto 60%;
+}
diff --git a/wall/public/wall/templates/street/editor/mountains.jpg b/wall/public/wall/templates/street/editor/mountains.jpg
diff --git a/wall/public/wall/templates/street/editor/tree.png b/wall/public/wall/templates/street/editor/tree.png