Cleaning and refactoring

app/locales/cn.yml

@@ -38,6 +38,7 @@ gist:
         download: '下载'
         clone: '克隆'
         embed: '引用'
+        embed_copy: '复制'
         add: '新建'
 
 date:

app/locales/de.yml

@@ -38,6 +38,7 @@ gist:
         download: 'Herunterladen'
         clone: 'Klonen'
         embed: 'Einfügen'
+        embed_copy: 'Kopieren'
         add: 'Hinzufügen'
 
 date:

app/locales/en.yml

@@ -39,6 +39,7 @@ gist:
         download: 'Download'
         clone: 'Clone'
         embed: 'Embed'
+        embed_copy: 'Copy'
         add: 'New'
 
 date:

app/locales/es.yml

@@ -38,6 +38,7 @@ gist:
         download: 'Descargar'
         clone: 'Clonar'
         embed: 'Insertar'
+        embed_copy: 'Dupdo'
         add: 'Añadir'
 
 date:

app/locales/fr.yml

@@ -38,6 +38,7 @@ gist:
         download: 'Télécharger'
         clone: 'Clôner'
         embed: 'Insérer'
+        embed_copy: 'Copier'
         add: 'Ajouter'
 
 date:

bower.json

@@ -16,7 +16,6 @@
     "bootstrap": "3.3.4",
     "flag-icon-css": "0.7.1",
     "iframe-resizer": "2.8.6",
-    "jsdiff": "~2.2.2",
+    "jsdiff": "~2.2.2"
-    "Prism": "~1.8.1"
   }
 }

src/Gist/Resources/views/View/embed.html.twig

@@ -3,14 +3,6 @@
 {% block css %}
     {{ parent() }}
 
-    <link rel="stylesheet" href="{{ web_path }}components/Prism/themes/prism.css">
-
-    {% if theme_settings.name == 'dark' %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-okaidia.css">
-    {% else %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-solarizedlight.css">
-    {% endif %}
-
     <style type="text/css">
         .panel-body {
             padding: 0;
@@ -20,6 +12,10 @@
             margin-bottom: 0;
         }
 
+        #viewer {
+            min-height: 120px;
+        }
+
         .container-fluid {
             padding: 0;
         }
@@ -101,7 +97,7 @@
                     <div class="tab-content">
                         <div id="view" class="tab-pane active in">
                             <div id="viewer">
-                                <pre><code {% if gist.cipher %}data-cipher{% endif %} class="language-{{ gist.highlightType }}">{{ raw_content }}</code></pre>
+                                <pre class="line-numbers"><code {% if gist.cipher %}data-cipher{% endif %} class="language-{{ gist.highlightType }}">{{ raw_content }}</code></pre>
                             </div>
                         </div>
                     </div>
@@ -116,6 +112,5 @@
 {% block js %}
     {{ parent() }}
 
-    <script type="text/javascript" src="{{ web_path }}components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
+    <script src="{{ web_path }}components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
-    <script src="{{ web_path }}app/js/prism.js" {% if gist.cipher %}data-manual{% endif %}></script>
 {% endblock %}

src/Gist/Resources/views/View/revisions.html.twig

@@ -1,17 +1,5 @@
 {% extends 'base.html.twig' %}
 
-{% block css %}
-    {{ parent() }}
-
-    <link rel="stylesheet" href="{{ web_path }}app/css/prism.css">
-
-    {% if theme_settings.name == 'dark' %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-okaidia.css">
-    {% else %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-solarizedlight.css">
-    {% endif %}
-{% endblock %}
-
 {% block title %}{{ gist.title ? gist.title : 'gist.untitled'|trans }} - {{ 'gist.action.history'|trans }}{% endblock %}
 
 {% block body %}
@@ -79,8 +67,6 @@
 {% block js %}
     {{ parent() }}
 
-    <script src="{{ web_path }}app/js/prism.js" {% if gist.cipher %}data-manual{% endif %}></script>
-
     {% if gist.cipher %}
         <script src="{{ web_path }}components/jsdiff/diff.min.js"></script>
 

src/Gist/Resources/views/View/view.html.twig

@@ -1,17 +1,5 @@
 {% extends 'base.html.twig' %}
 
-{% block css %}
-    {{ parent() }}
-
-    <link rel="stylesheet" href="{{ web_path }}app/css/prism.css">
-
-    {% if theme_settings.name == 'dark' %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-okaidia.css">
-    {% else %}
-        <link rel="stylesheet" href="{{ web_path }}app/css/prism-solarizedlight.css">
-    {% endif %}
-{% endblock %}
-
 {% block title %}{{ gist.title ? gist.title : 'gist.untitled'|trans }} - {{ commit|slice(0, 10) }}{% endblock %}
 
 {% block body %}
@@ -101,7 +89,7 @@
                     <div class="tab-content">
                         <div id="view" class="tab-pane active in">
                             <div id="viewer">
-                                <pre><code {% if gist.cipher %}data-cipher{% endif %} class="language-{{ gist.highlightType }}">{{ raw_content }}</code></pre>
+                                <pre class="line-numbers"><code {% if gist.cipher %}data-cipher{% endif %} class="language-{{ gist.highlightType }}">{{ raw_content }}</code></pre>
                             </div>
                         </div>
                     </div>
@@ -116,6 +104,12 @@
                         <div class="tab-pane active in">
                             <pre><code class="language-html">{{ '<div%key%id="gist-' ~ gist.file ~ '-' ~ commit ~ '" class="gist-container"></div>
 <script src="' ~ app.request.getSchemeAndHttpHost() ~ path('embedjs', app.request.attributes.get('_route_params')) ~ '" async></script>' }}</code></pre>
+                            <p>
+                                <button id="embed-copy" class="btn btn-primary">
+                                    <span class="glyphicon glyphicon-floppy-saved"></span>
+                                    {{ 'gist.action.embed_copy'|trans }}
+                                </button>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -123,9 +117,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block js %}
-    {{ parent() }}
-
-    <script src="{{ web_path }}app/js/prism.js" {% if gist.cipher %}data-manual{% endif %}></script>
-{% endblock %}

src/Gist/Resources/views/base.html.twig

@@ -13,6 +13,14 @@
                 <link rel="stylesheet" href="{{ web_path }}components/bootstrap/dist/css/bootstrap-theme.min.css">
             {% endif %}
 
+            <link rel="stylesheet" href="{{ web_path }}components/Prism/themes/prism.css">
+            {% if theme_settings.name == 'dark' %}
+                <link rel="stylesheet" href="{{ web_path }}app/css/prism-okaidia.css">
+            {% else %}
+                <link rel="stylesheet" href="{{ web_path }}app/css/prism-solarizedlight.css">
+            {% endif %}
+
+            <link rel="stylesheet" href="{{ web_path }}app/css/app.css">
             <link rel="stylesheet" href="{{ web_path }}app/css/themes/{{ theme_settings.name }}.css">
         {% endblock %}
 
@@ -120,6 +128,7 @@
             <script src="{{ web_path }}components/jquery/dist/jquery.min.js"></script>
             <script src="{{ web_path }}components/bootstrap/dist/js/bootstrap.min.js"></script>
             <script src="{{ web_path }}app/js/cipher.js"></script>
+            <script src="{{ web_path }}app/js/prism.js" {% if gist.cipher %}data-manual{% endif %}></script>
             <script src="{{ web_path }}app/js/app.js"></script>
         {% endblock %}
     </body>

web/app/css/app.css

@@ -0,0 +1,56 @@
+.navbar {
+	border-radius: 0;
+}
+
+#form_content {
+	display: block;
+	width: 100%;
+	padding: 10px;
+}
+
+#languages {
+	padding-bottom: 5px;
+}
+
+#languages .btn-group:first-child {
+	margin-right: 4px;
+}
+
+.panel-heading .actions {
+	margin-top: -5px;
+}
+
+.diff {
+	display: none;
+}
+
+#options {
+	margin-bottom: 17px;
+}
+
+.btn-delete {
+    background: #DE3336;
+    color: #fff;
+}
+
+.btn-error:active, .btn-error:hover, .btn-error:focus {
+    color: #000;
+}
+
+#embed .line-numbers-rows, #viewer .line-numbers-rows {
+    top: -2px;
+}
+
+#embed .line-numbers, #viewer .line-numbers {
+    padding-left: 50px;
+}
+
+#viewer pre, #viewer code, #revisions pre, #revisions code, #embed pre, #embed code {
+    background: none !important;
+	white-space: pre-wrap !important;
+	white-space: -moz-pre-wrap !important;
+	white-space: -pre-wrap !important;
+	white-space: -o-pre-wrap !important;
+	word-wrap: break-word !important;
+    border: 0 !important;
+}

web/app/css/prism.css

@@ -1,4 +1,4 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+actionscript+c+aspnet+bash+cpp+csharp+css-extras+diff+perl+php+php-extras+python+sql+yaml&plugins=line-highlight+line-numbers+autolinker+previewer-base+previewer-color+previewer-gradient+previewer-easing+previewer-time+previewer-angle */
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+actionscript+apacheconf+c+aspnet+bash+batch+cpp+csharp+ruby+css-extras+diff+docker+git+go+http+java+json+latex+less+lua+makefile+markdown+nginx+perl+php+php-extras+powershell+python+sass+sql+twig+vim+yaml&plugins=line-highlight+line-numbers+show-invisibles+autolinker+previewer-base+previewer-color+previewer-gradient+previewer-easing+previewer-time+previewer-angle+autoloader */
 /**
  * prism.js default theme for JavaScript, CSS and HTML
  * Based on dabblet (http://dabblet.com)
@@ -223,6 +223,39 @@ pre.line-numbers > code {
 			padding-right: 0.8em;
 			text-align: right;
 		}
+.token.tab:not(:empty),
+.token.cr,
+.token.lf,
+.token.space {
+	position: relative;
+}
+
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before,
+.token.space:before {
+	color: hsl(24, 20%, 85%);
+	position: absolute;
+}
+
+.token.tab:not(:empty):before {
+    content: '\21E5';
+}
+
+.token.cr:before {
+    content: '\240D';
+}
+
+.token.crlf:before {
+    content: '\240D\240A';
+}
+.token.lf:before {
+    content: '\240A';
+}
+
+.token.space:before {
+	content: '\00B7';
+}
 .token a {
 	color: inherit;
 }

web/app/css/themes/dark.css

@@ -2,57 +2,8 @@ body {
 	background: #333;
 }
 
-.navbar {
-	border-radius: 0;
-}
-
 .form-control {
 	color: #fff;
 	background: #2D2D2D;
 	border: #333;
 }
-
-#form_content {
-	display: block;
-	width: 100%;
-	padding: 10px;
-}
-
-#languages {
-	padding-bottom: 5px;
-}
-
-#languages .btn-group:first-child {
-	margin-right: 4px;
-}
-
-#viewer pre, #viewer code, #revisions pre, #revisions code, #embed pre, #embed code {
-    background: none !important;
-	white-space: pre-wrap;
-	white-space: -moz-pre-wrap;
-	white-space: -pre-wrap;
-	white-space: -o-pre-wrap;
-	word-wrap: break-word;
-    border: 0;
-}
-
-.panel-heading .actions {
-	margin-top: -5px;
-}
-
-.diff {
-	display: none;
-}
-
-#options {
-	margin-bottom: 17px;
-}
-
-.btn-delete {
-    background: #DE3336;
-    color: #fff;
-}
-
-.btn-error:active, .btn-error:hover, .btn-error:focus {
-    color: #000;
-}

web/app/css/themes/light.css

@@ -1,21 +1,3 @@
-.navbar {
-	border-radius: 0;
-}
-
-#form_content {
-	display: block;
-	width: 100%;
-	padding: 10px;
-}
-
-#languages {
-	padding-bottom: 5px;
-}
-
-#languages .btn-group:first-child {
-	margin-right: 4px;
-}
-
 pre, code {
     background: none !important;
 	white-space: pre-wrap !important;
@@ -25,24 +7,3 @@ pre, code {
 	word-wrap: break-word !important;
     border: 0;
 }
-
-.panel-heading .actions {
-	margin-top: -5px;
-}
-
-.diff {
-	display: none;
-}
-
-#options {
-	margin-bottom: 17px;
-}
-
-.btn-delete {
-    background: #DE3336;
-    color: #fff;
-}
-
-.btn-error:active, .btn-error:hover, .btn-error:focus {
-    color: #000;
-}

web/app/js/app.js

@@ -141,6 +141,16 @@ var viewerEvents = function() {
     var $render = $('#viewer code[data-cipher]');
 
     $(document).ready(function() {
+        $('#embed-copy').click(function() {
+            var code = $('#viewer code').html();
+            code = code.replace(/<[^>]+>/g, '')
+            var $temp = $('<input>');
+            $('body').append($temp);
+            $temp.val(code).select();
+            document.execCommand('copy');
+            $temp.remove();
+        });
+
         var key = getKey();
 
         var $cipherEditor = $('.cipher-editor');