Change tag style

inc/Parsedown.php

@@ -17,7 +17,7 @@ class Parsedown
 {
     # ~
 
-    const version = '1.5.3';
+    const version = '1.6.0';
 
     # ~
 
@@ -107,12 +107,6 @@ class Parsedown
 
     # ~
 
-    protected $DefinitionTypes = array(
-        '[' => array('Reference'),
-    );
-
-    # ~
-
     protected $unmarkedBlockTypes = array(
         'Code',
     );
@@ -121,7 +115,7 @@ class Parsedown
     # Blocks
     #
 
-    private function lines(array $lines)
+    protected function lines(array $lines)
     {
         $CurrentBlock = null;
 
@@ -169,7 +163,7 @@ class Parsedown
 
             # ~
 
-            if (isset($CurrentBlock['incomplete']))
+            if (isset($CurrentBlock['continuable']))
             {
                 $Block = $this->{'block'.$CurrentBlock['type'].'Continue'}($Line, $CurrentBlock);
 
@@ -181,12 +175,10 @@ class Parsedown
                 }
                 else
                 {
-                    if (method_exists($this, 'block'.$CurrentBlock['type'].'Complete'))
+                    if ($this->isBlockCompletable($CurrentBlock['type']))
                     {
                         $CurrentBlock = $this->{'block'.$CurrentBlock['type'].'Complete'}($CurrentBlock);
                     }
-
-                    unset($CurrentBlock['incomplete']);
                 }
             }
 
@@ -224,9 +216,9 @@ class Parsedown
                         $Block['identified'] = true;
                     }
 
-                    if (method_exists($this, 'block'.$blockType.'Continue'))
+                    if ($this->isBlockContinuable($blockType))
                     {
-                        $Block['incomplete'] = true;
+                        $Block['continuable'] = true;
                     }
 
                     $CurrentBlock = $Block;
@@ -253,7 +245,7 @@ class Parsedown
 
         # ~
 
-        if (isset($CurrentBlock['incomplete']) and method_exists($this, 'block'.$CurrentBlock['type'].'Complete'))
+        if (isset($CurrentBlock['continuable']) and $this->isBlockCompletable($CurrentBlock['type']))
         {
             $CurrentBlock = $this->{'block'.$CurrentBlock['type'].'Complete'}($CurrentBlock);
         }
@@ -286,6 +278,16 @@ class Parsedown
         return $markup;
     }
 
+    protected function isBlockContinuable($Type)
+    {
+        return method_exists($this, 'block'.$Type.'Continue');
+    }
+
+    protected function isBlockCompletable($Type)
+    {
+        return method_exists($this, 'block'.$Type.'Complete');
+    }
+
     #
     # Code
 
@@ -394,16 +396,16 @@ class Parsedown
 
     protected function blockFencedCode($Line)
     {
-        if (preg_match('/^(['.$Line['text'][0].']{3,})[ ]*([\w-]+)?[ ]*$/', $Line['text'], $matches))
+        if (preg_match('/^['.$Line['text'][0].']{3,}[ ]*([\w-]+)?[ ]*$/', $Line['text'], $matches))
         {
             $Element = array(
                 'name' => 'code',
                 'text' => '',
             );
 
-            if (isset($matches[2]))
+            if (isset($matches[1]))
             {
-                $class = 'language-'.$matches[2];
+                $class = 'language-'.$matches[1];
 
                 $Element['attributes'] = array(
                     'class' => $class,
@@ -673,7 +675,9 @@ class Parsedown
 
         if (preg_match('/^<(\w*)(?:[ ]*'.$this->regexHtmlAttribute.')*[ ]*(\/)?>/', $Line['text'], $matches))
         {
-            if (in_array($matches[1], $this->textLevelElements))
+            $element = strtolower($matches[1]);
+
+            if (in_array($element, $this->textLevelElements))
             {
                 return;
             }
@@ -987,15 +991,13 @@ class Parsedown
     {
         $markup = '';
 
-        $unexaminedText = $text;
+        # $excerpt is based on the first occurrence of a marker
 
-        $markerPosition = 0;
-
-        while ($excerpt = strpbrk($unexaminedText, $this->inlineMarkerList))
+        while ($excerpt = strpbrk($text, $this->inlineMarkerList))
         {
             $marker = $excerpt[0];
 
-            $markerPosition += strpos($unexaminedText, $marker);
+            $markerPosition = strpos($text, $marker);
 
             $Excerpt = array('text' => $excerpt, 'context' => $text);
 
@@ -1008,34 +1010,42 @@ class Parsedown
                     continue;
                 }
 
-                if (isset($Inline['position']) and $Inline['position'] > $markerPosition) # position is ahead of marker
+                # makes sure that the inline belongs to "our" marker
+
+                if (isset($Inline['position']) and $Inline['position'] > $markerPosition)
                 {
                     continue;
                 }
 
+                # sets a default inline position
+
                 if ( ! isset($Inline['position']))
                 {
                     $Inline['position'] = $markerPosition;
                 }
 
+                # the text that comes before the inline
                 $unmarkedText = substr($text, 0, $Inline['position']);
 
+                # compile the unmarked text
                 $markup .= $this->unmarkedText($unmarkedText);
 
+                # compile the inline
                 $markup .= isset($Inline['markup']) ? $Inline['markup'] : $this->element($Inline['element']);
 
+                # remove the examined text
                 $text = substr($text, $Inline['position'] + $Inline['extent']);
 
-                $unexaminedText = $text;
-
-                $markerPosition = 0;
-
                 continue 2;
             }
 
-            $unexaminedText = substr($excerpt, 1);
+            # the marker does not belong to an inline
 
-            $markerPosition ++;
+            $unmarkedText = substr($text, 0, $markerPosition + 1);
+
+            $markup .= $this->unmarkedText($unmarkedText);
+
+            $text = substr($text, $markerPosition + 1);
         }
 
         $markup .= $this->unmarkedText($text);
@@ -1476,7 +1486,7 @@ class Parsedown
             return self::$instances[$name];
         }
 
-        $instance = new self();
+        $instance = new static();
 
         self::$instances[$name] = $instance;
 

tpl/myShaarli/linklist.html

@@ -90,8 +90,8 @@
               onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code" alt="qrcode logo"></a></span> - <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span>
             <br>
             {if="$value.tags"}
-            <div class="linktaglist">
-              {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
+            <div class="tags">
+              {loop="value.taglist"}<a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a> {/loop}
             </div>
             {/if}
           </div>

tpl/myShaarli/myShaarli.css

@@ -621,33 +621,51 @@ a, .linkdescription a {
   text-decoration: none;
 }
 
-.linktaglist {
-  line-height: 200%;
-  padding-top: 0.3em;
+.tags a {
+	float: left;
+	background: #777;
+	color: #fff;
+	text-decoration: none;
+	margin: 0 0 10px 18px;
+	padding: 2px 10px 1px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	position: relative;
+	transition: all .25s linear;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+	white-space: nowrap;
+	line-height: 21px;
 }
 
-.linktag {
-  background: linear-gradient(#F2F2F2,#ffffff);
-  background-color: #ffffff;
-  background-image: url(../../images/tag_blue.png);
-  background-position: 3px center;
-  background-repeat: no-repeat;
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0 0 2px rgba(0,0,0,0.5);
-  cursor: pointer;
-  font-size: 9pt;
-  height: 20px;
-  padding: 3px 3px 3px 20px;
+.tags a:before {
+	content: "";
+	border-style: solid;
+	border-color: transparent #777 transparent transparent;
+	border-width: 12px 13px 12px 0;
+	position: absolute;
+	left: -13px;
+	top: 0;
+	transition: all .25s linear;
 }
 
-.linktag:hover {
-  border-color: #555573;
-  color: #000;
+.tags a:after {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-radius: 50% 50% 50% 50%;
+    box-shadow: 0 1px 1px #737373 inset;
+    content: "";
+    height: 5px;
+    left: -1px;
+    position: absolute;
+    top: 10px;
+    width: 5px;
 }
 
-.linktag a {
-  color: #777;
-  text-decoration: none;
+.tags a:hover {
+	background-color: #333;
+  color: #a2dd42;
+}
+.tags a:hover:before {
+	 border-color: transparent #333 transparent transparent;
 }
 
 .linkshort a {

tpl/myShaarli_Columns/columns.css

@@ -633,36 +633,52 @@ a, .linkdescription a {
   color: #3465A4;
   text-decoration: none;
 }
-
-.linktaglist {
-  line-height: 200%;
-  padding-top: 0.3em;
+.tags a {
+	float: left;
+	background: #777;
+	color: #fff;
+	text-decoration: none;
+	margin: 0 0 10px 18px;
+	padding: 2px 10px 1px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	position: relative;
+	transition: all .25s linear;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+	white-space: nowrap;
+	line-height: 21px;
 }
 
-.linktag {
-  background: linear-gradient(#F2F2F2,#ffffff);
-  background-color: #ffffff;
-  background-image: url(../../images/tag_blue.png);
-  background-position: 3px center;
-  background-repeat: no-repeat;
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0 0 2px rgba(0,0,0,0.5);
-  cursor: pointer;
-  font-size: 9pt;
-  height: 20px;
-  padding: 3px 3px 3px 20px;
+.tags a:before {
+	content: "";
+	border-style: solid;
+	border-color: transparent #777 transparent transparent;
+	border-width: 12px 13px 12px 0;
+	position: absolute;
+	left: -13px;
+	top: 0;
+	transition: all .25s linear;
 }
 
-.linktag:hover {
-  border-color: #555573;
-  color: #000;
+.tags a:after {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-radius: 50% 50% 50% 50%;
+    box-shadow: 0 1px 1px #737373 inset;
+    content: "";
+    height: 5px;
+    left: -1px;
+    position: absolute;
+    top: 10px;
+    width: 5px;
 }
 
-.linktag a {
-  color: #777;
-  text-decoration: none;
+.tags a:hover {
+	background-color: #333;
+  color: #a2dd42;
+}
+.tags a:hover:before {
+	 border-color: transparent #333 transparent transparent;
 }
-
 .linkshort a {
   color: #393964;
   text-decoration: none;

tpl/myShaarli_Columns/linklist.html

@@ -90,8 +90,8 @@
               onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code" alt="qrcode logo"></a></span> - <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span>
             <br>
             {if="$value.tags"}
-            <div class="linktaglist">
-              {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
+            <div class="tags">
+              {loop="value.taglist"}<a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a> {/loop}
             </div>
             {/if}
           </div>