]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
Hook up inliner and preview
authorEric Morris <eric@zurb.com>
Tue, 5 Nov 2013 23:34:23 +0000 (15:34 -0800)
committerEric Morris <eric@zurb.com>
Tue, 5 Nov 2013 23:34:23 +0000 (15:34 -0800)
includes/_footer.php
includes/_offcanvas-menu.php
inliner.php
sass/app.scss
skate-proxy.php
stylesheets/app.css

index 9344745222757c89834e6aca38b0fa4e92a96101..7d986daddd4156cc0dc32ffd001feb038938894e 100644 (file)
         }.bind(this), Math.floor((Math.random()*10)+1)*500);
     });
 
+    var original = '';
+
+    $('#appendQuery').on('click', function(){
+      $('#linkAppend').toggleClass('inactive', !$(this).is(':checked'));
+    });
+
+    $(document).on('click', '#previewModal .close-btn', function(e) {
+      e.preventDefault();
+      $('#previewModal').delay(100).removeClass('active');
+      $('html, body').css('max-height', 'none').css('overflow', 'scroll');
+    });
+
+    $(document).on('click', '#showPreview', function(e) {
+      e.preventDefault();
+      $('html, body').animate({
+        scrollTop : 0
+      }, 700);
+      $('#previewModal').delay(100).addClass('active');
+      $('html, body').css('max-height', $(window).height()).css('overflow', 'hidden');
+      $('iframe').height($(window).height() - 40)
+    });
+
+    $(document).on('click', '#inlinerReset', function(e) {
+      e.preventDefault();
+      $('.show-on-submit').fadeOut(700);
+      $('.hide-on-submit').fadeIn(700);
+      $('#emailSource').removeClass('result').val(original);
+    });
+
+    $('#skateForm').on('submit', function(e){
+      e.preventDefault();
+      original = $('#emailSource').val()
+      var data = {
+        source: original,
+      };
+
+      $('#emailSource').val('Loading...')
+      $('html, body').animate({
+        scrollTop : $('.top-headlines').offset().top
+      }, 700);
+      $('#emailSource').addClass('result');
+      $('.hide-on-submit').fadeOut(700);
+      
+      if ($('#linkAppend').val() && $('#appendQuery').is(':checked')) {
+        data.linkAppend = $('#linkAppend').val()
+      }  
+
+      $.post("skate-proxy.php", data, function(resp){
+        $('.show-on-submit').fadeIn(700);
+        $(document).foundation('reveal');
+        $('#emailSource').val(resp.html);
+        $('#previewModal iframe').contents().find('html').html(resp.html);
+      }, "json");
+    });
+
   </script>
 <?php include 'includes/_offcanvas-menu.php' ?>
 
index 7a579508ded44d8412750689c8051e51f54fe7e5..352e7d08dc6797821c413f79e681b8bd4b259585 100644 (file)
   </div>
        
 </section>
-
+<div id="inlinerReportModal" class="reveal-modal">
+  <h2>Oh Noes!</h2>
+  <p class="lead">Found a problem with our inliner?  Here's what to do.</p>
+  <ol>
+    <li>Send us an email at <a href="mailto:skate@zurb.com">skate@zurb.com</a>.</li>
+    <li>Attach (don't copy and paste) a copy of your original code.</li>
+    <li>Tell us the <kbd>Skate Build Version #</kbd>, located in an HTML comment at the top of the code the inliner output (or send us the full code as an attachment).</li>
+  </ol>
+  <p>
+    Sorry you're having problems. :(  We'll try and get you squared away as soon as possible.
+  </p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
 </body>
 </html>
index fa6c0325e90bcb3bb56541a502d88f4ae2d47c81..27cb1f52e113ddebf9db311ee655a43b67af3d7f 100644 (file)
 
 <div class="row">
   <div class="large-7 columns">
-    <form class="inky-inliner">
+    <form id="skateForm" class="inky-inliner">
       <h4 class="normal">Email content &amp; options</h4>
       
       <div class="inliner-form">      
         <label>Paste your email content here. Styles should be included. Links should be full URLs.</label>
-        <textarea placeholder="Paste your HTML here"></textarea>
+        <textarea id="emailSource" placeholder="Paste your HTML here"></textarea>
       </div>
       
       
-      <div class="inliner-form options">   
+      <div class="inliner-form options hide-on-submit">   
         <label for="appendQuery">
           <input type="checkbox" id="appendQuery"> Append query string to links
         </label>
-        <input type="text" placeholder="Enter the URL where your email lives" class="inactive">
+        <input id="linkAppend" type="text" placeholder="Enter the URL where your email lives" class="inactive">
         <label for="removeComments">
           <input type="checkbox" id="removeComments"> Remove Comments
         </label>
       
       <br>
       
-      <div class="inliner-form">      
-        <label>Enter your email and we'll send you a note once we add new features to Ink!</label>
+      <div class="inliner-form hide-on-submit">      
+        <label>Enter your email and we'll send you a note once we add new features to Ink! <small>OPTIONAL</small></label>
         <input type="email" placeholder="e.g. you@yourdomain.com">
       </div>
       
       <br>
+     
+      <a id="inlinerReset" href="#" class="button show-on-submit secondary">Convert Another Email</a>
+      <a id="showPreview" href="#" class="button show-on-submit">Preview</a>
       
-      <button type="submit" class="button">Convert Email</button>
+      <button type="submit" class="button hide-on-submit">Convert Email</button>
     </form>
   </div>
   <div class="large-4 columns">
     </ul>
   </div>
 </div>
+<div id="previewModal">
+  <div class="control-bar">
+    <a class="close-btn" href="#">&larr; Return</a>
+    <a class="button small secondary report-btn" href="#" data-reveal-id="inlinerReportModal">Report Broken</a>
+  </div>
+  <iframe src="process.php"></iframe>
+</div>
 
 <?php include 'includes/_subscribe.php' ?>     
 <div class="show-for-small">
index 78b86e9db4f97adaa4f41013436f0533f646a366..93ea167bdf3fe3f4f677e8592fd4edaee3055e27 100644 (file)
@@ -517,18 +517,78 @@ ul.mobile-nav { display: block; margin-bottom: 0;
 /* inliner */
 .inliner-form { 
   .inactive { display: none; }
-  textarea { min-height: 600px; }
+  textarea { 
+    min-height: 500px; 
+    font-family: "Lucida Console", Monaco, monospace; 
+    font-size: 11px; 
+    transition: all 0.7s ease-out;
+    -webkit-transition: all 0.7s ease-out;
+    -moz-transition: all 0.7s ease-out;
+    -ms-transition: all 0.7s ease-out;
+    -o-transition: all 0.7s ease-out;
+  }
   label { margin-bottom: 8px; line-height: 1.4; }
   &.options label { margin-bottom: 0; }
 }
 .inky-inliner { margin-bottom: 50px; 
   h4 { margin-bottom: 5px; }
   p { margin-bottom: 10px; }
-  .button { background: #004454; color: #FFF;
+  .button:not(.secondary) { background: #004454; color: #FFF;
     &:hover { background: #002B36; }
   }
+  textarea.result {
+    min-height: 300px;
+  }
+  .show-on-submit {
+    display: none;
+  }
 }
 .inline-advantages { margin-left: 25px; }
+#previewModal {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fff;
+  z-index: 45;
+  display: none;
+
+  .control-bar {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #f7f7f7;
+    box-shadow: 0 0 3px 5px rgba(0,0,0,0.25);
+
+    .close-btn {
+      margin: 14px 10px;
+      display: inline-block;
+    }
+
+    .report-btn {
+      margin: 5px 10px;
+      float: right;
+    }
+  }
+
+  iframe {
+    margin-top: 40px;
+    border: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.active {
+    display: block;
+  }
+}
+#inlinerReportModal {
+  ol {
+    margin-left: 2em;
+  }
+}
 
 /* compatibility */
 table {
index 6ef1309e06421c5b871a7f53b8bda7465bfdad73..91e8e489453fe5e682aa25ebb189806d8fb3f9de 100644 (file)
-<?php
+<?php 
 
-/**
- * AJAX Cross Domain (PHP) Proxy 0.7
- *    by Iacovos Constantinou (http://www.iacons.net)
- * 
- * Released under CC-GNU GPL
- */
+$url = "http://skate.zurb.com/api/v1/raw";
 
-/**
- * Enables or disables filtering for cross domain requests.
- * Recommended value: true
- */
-define( 'CSAJAX_FILTERS', true );
 
-/**
- * If set to true, $valid_requests should hold only domains i.e. a.example.com, b.example.com, usethisdomain.com
- * If set to false, $valid_requests should hold the whole URL ( without the parameters ) i.e. http://example.com/this/is/long/url/
- * Recommended value: false (for security reasons - do not forget that anyone can access your proxy)
- */
-define( 'CSAJAX_FILTER_DOMAIN', false );
+ini_set("allow_url_fopen", 1);
+$ch = curl_init();
+curl_setopt($ch,CURLOPT_URL, $url);
+curl_setopt($ch,CURLOPT_POST, true);
+curl_setopt($ch,CURLOPT_POSTFIELDS, file_get_contents("php://input"));
+curl_exec($ch);
+curl_close($ch);
 
-/**
- * Set debugging to true to receive additional messages - really helpful on development
- */
-define( 'CSAJAX_DEBUG', true );
-
-/**
- * A set of valid cross domain requests
- */
-$valid_requests = array(
-  'http://skate.zurb.com/api/v1/raw'
-);
-
-/* * * STOP EDITING HERE UNLESS YOU KNOW WHAT YOU ARE DOING * * */
-
-// identify request headers
-$request_headers = array( );
-foreach ( $_SERVER as $key => $value ) {
-  if ( substr( $key, 0, 5 ) == 'HTTP_' ) {
-    $headername = str_replace( '_', ' ', substr( $key, 5 ) );
-    $headername = str_replace( ' ', '-', ucwords( strtolower( $headername ) ) );
-    if ( !in_array( $headername, array( 'Host', 'X-Proxy-Url' ) ) ) {
-      $request_headers[] = "$headername: $value";
-    }
-  }
-}
-
-// identify request method, url and params
-$request_method = $_SERVER['REQUEST_METHOD'];
-$request_params = ( $request_method == 'GET' ) ? $_GET : $_POST;
-// Get URL from `csurl` in GET or POST data, before falling back to X-Proxy-URL header.
-$request_url = urldecode( isset( $_REQUEST['csurl'] ) ? $_REQUEST['csurl'] : $_SERVER['HTTP_X_PROXY_URL'] );
-$p_request_url = parse_url( $request_url );
-unset( $request_params['csurl'] );
-
-// ignore requests for proxy :)
-if ( preg_match( '!' . $_SERVER['SCRIPT_NAME'] . '!', $request_url ) || empty( $request_url ) || count( $p_request_url ) == 1 ) {
-  csajax_debug_message( 'Invalid request - make sure that csurl variable is not empty' );
-  exit;
-}
-
-// check against valid requests
-if ( CSAJAX_FILTERS ) {
-  $parsed = $p_request_url;
-  if ( CSAJAX_FILTER_DOMAIN ) {
-    if ( !in_array( $parsed['host'], $valid_requests ) ) {
-      csajax_debug_message( 'Invalid domain - ' . $parsed['host'] . ' does not included in valid requests' );
-      exit;
-    }
-  } else {
-    $check_url = isset( $parsed['scheme'] ) ? $parsed['scheme'] . '://' : '';
-    $check_url .= isset( $parsed['user'] ) ? $parsed['user'] . ($parsed['pass'] ? ':' . $parsed['pass'] : '') . '@' : '';
-    $check_url .= isset( $parsed['host'] ) ? $parsed['host'] : '';
-    $check_url .= isset( $parsed['port'] ) ? ':' . $parsed['port'] : '';
-    $check_url .= isset( $parsed['path'] ) ? $parsed['path'] : '';
-    if ( !in_array( $check_url, $valid_requests ) ) {
-      csajax_debug_message( 'Invalid domain - ' . $request_url . ' does not included in valid requests' );
-      exit;
-    }
-  }
-}
-
-// append query string for GET requests
-if ( $request_method == 'GET' && count( $request_params ) > 0 && (!array_key_exists( 'query', $p_request_url ) || empty( $p_request_url['query'] ) ) ) {
-  $request_url .= '?' . http_build_query( $request_params );
-}
-
-// let the request begin
-$ch = curl_init( $request_url );
-curl_setopt( $ch, CURLOPT_HTTPHEADER, $request_headers );   // (re-)send headers
-curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );  // return response
-curl_setopt( $ch, CURLOPT_HEADER, true );    // enabled response headers
-// add post data for POST requests
-if ( $request_method == 'POST' ) {
-  curl_setopt( $ch, CURLOPT_POST, true );
-  curl_setopt( $ch, CURLOPT_POSTFIELDS, http_build_query( $request_params ) );
-}
-
-// retrieve response (headers and content)
-$response = curl_exec( $ch );
-curl_close( $ch );
-
-// split response to header and content
-list($response_headers, $response_content) = preg_split( '/(\r\n){2}/', $response, 2 );
-
-// (re-)send the headers
-$response_headers = preg_split( '/(\r\n){1}/', $response_headers );
-foreach ( $response_headers as $key => $response_header ) {
-  // Rewrite the `Location` header, so clients will also use the proxy for redirects.
-  if ( preg_match( '/^Location:/', $response_header ) ) {
-    list($header, $value) = preg_split( '/: /', $response_header, 2 );
-    $response_header = 'Location: ' . $_SERVER['REQUEST_URI'] . '?csurl=' . $value;
-  }
-  if ( !preg_match( '/^(Transfer-Encoding):/', $response_header ) ) {
-    header( $response_header );
-  }
-}
-
-// finally, output the content
-print($response_content );
-
-function csajax_debug_message( $message )
-{
-  if ( true == CSAJAX_DEBUG ) {
-    print $message . PHP_EOL;
-  }
-}
\ No newline at end of file
+?>
\ No newline at end of file
index 5e71a00356664ee71fb35446986819de95e59e4d..fd7b8d743b7b7cb5689a480980a0737483565d06 100644 (file)
@@ -12631,56 +12631,118 @@ ul.mobile-nav a.current {
 }
 /* line 520, ../sass/app.scss */
 .inliner-form textarea {
-  min-height: 600px;
-}
-/* line 521, ../sass/app.scss */
+  min-height: 500px;
+  font-family: "Lucida Console", Monaco, monospace;
+  font-size: 11px;
+  transition: all 0.7s ease-out;
+  -webkit-transition: all 0.7s ease-out;
+  -moz-transition: all 0.7s ease-out;
+  -ms-transition: all 0.7s ease-out;
+  -o-transition: all 0.7s ease-out;
+}
+/* line 530, ../sass/app.scss */
 .inliner-form label {
   margin-bottom: 8px;
   line-height: 1.4;
 }
-/* line 522, ../sass/app.scss */
+/* line 531, ../sass/app.scss */
 .inliner-form.options label {
   margin-bottom: 0;
 }
 
-/* line 524, ../sass/app.scss */
+/* line 533, ../sass/app.scss */
 .inky-inliner {
   margin-bottom: 50px;
 }
-/* line 525, ../sass/app.scss */
+/* line 534, ../sass/app.scss */
 .inky-inliner h4 {
   margin-bottom: 5px;
 }
-/* line 526, ../sass/app.scss */
+/* line 535, ../sass/app.scss */
 .inky-inliner p {
   margin-bottom: 10px;
 }
-/* line 527, ../sass/app.scss */
-.inky-inliner .button {
+/* line 536, ../sass/app.scss */
+.inky-inliner .button:not(.secondary) {
   background: #004454;
   color: #FFF;
 }
-/* line 528, ../sass/app.scss */
-.inky-inliner .button:hover {
+/* line 537, ../sass/app.scss */
+.inky-inliner .button:not(.secondary):hover {
   background: #002B36;
 }
+/* line 539, ../sass/app.scss */
+.inky-inliner textarea.result {
+  min-height: 300px;
+}
+/* line 542, ../sass/app.scss */
+.inky-inliner .show-on-submit {
+  display: none;
+}
 
-/* line 531, ../sass/app.scss */
+/* line 546, ../sass/app.scss */
 .inline-advantages {
   margin-left: 25px;
 }
 
+/* line 547, ../sass/app.scss */
+#previewModal {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fff;
+  z-index: 45;
+  display: none;
+}
+/* line 557, ../sass/app.scss */
+#previewModal .control-bar {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #f7f7f7;
+  box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.25);
+}
+/* line 565, ../sass/app.scss */
+#previewModal .control-bar .close-btn {
+  margin: 14px 10px;
+  display: inline-block;
+}
+/* line 570, ../sass/app.scss */
+#previewModal .control-bar .report-btn {
+  margin: 5px 10px;
+  float: right;
+}
+/* line 576, ../sass/app.scss */
+#previewModal iframe {
+  margin-top: 40px;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+/* line 583, ../sass/app.scss */
+#previewModal.active {
+  display: block;
+}
+
+/* line 588, ../sass/app.scss */
+#inlinerReportModal ol {
+  margin-left: 2em;
+}
+
 /* compatibility */
-/* line 535, ../sass/app.scss */
+/* line 595, ../sass/app.scss */
 table span {
   display: block;
   text-align: center;
 }
-/* line 536, ../sass/app.scss */
+/* line 596, ../sass/app.scss */
 table .check {
   color: green;
 }
-/* line 537, ../sass/app.scss */
+/* line 597, ../sass/app.scss */
 table .x {
   color: red;
 }