summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCyrille Bagard <nocbos@gmail.com>2016-02-21 21:37:58 (GMT)
committerCyrille Bagard <nocbos@gmail.com>2016-02-21 21:37:58 (GMT)
commit0a9dac98c33279ec7ad03a40492e630091326757 (patch)
treed166a46d493b2fe1fd0370f0d67c427521b75ac7
First commit.
-rw-r--r--Ribbon_body.php79
-rw-r--r--extension.json34
-rw-r--r--ribbon.css63
3 files changed, 176 insertions, 0 deletions
diff --git a/Ribbon_body.php b/Ribbon_body.php
new file mode 100644
index 0000000..e687495
--- /dev/null
+++ b/Ribbon_body.php
@@ -0,0 +1,79 @@
+<?php
+
+class Ribbon {
+
+ static $content;
+
+ function onParserInit( Parser $parser ) {
+
+ $parser->setHook( 'ribbon', array( __CLASS__, 'renderRibbon' ) );
+ return true;
+
+ }
+
+ static function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
+
+ $out->addModuleStyles( array (
+ 'ext.ribbon'
+ ) );
+
+ }
+
+ static function renderRibbon( $input, array $args, Parser $parser, PPFrame $frame ) {
+
+ $text = str_replace( "\n", '<br>', htmlspecialchars( $input ));
+
+ if (array_key_exists( 'square', $args ))
+ $square = intval($args['']);
+ else
+ $square = 369;
+
+ if (array_key_exists( 'height', $args ))
+ $height = intval($args['height']);
+ else
+ $height = 35;
+
+ if (array_key_exists( 'fsize', $args ))
+ $fsize = intval($args['fsize']);
+ else
+ $fsize = 15;
+
+ $sign = '';
+
+ $middle = $square / 2;
+ $top = $middle - intval($middle * sin(deg2rad(45)));
+ $right = intval($middle * cos(deg2rad(45))) - $middle - $height;
+
+ $html = ''
+ . '<div class="corner-ribbon-wrapper right" style="'
+ . 'width: ' . $square . 'px; '
+ . 'height: ' . $square . 'px;">'
+ . '<div class="corner-ribbon" style="'
+ . 'top: ' . $top . 'px; '
+ . 'right: ' . $right . 'px; '
+ . '-webkit-transform: rotate(' . $sign . '45deg);'
+ . '-moz-transform: rotate(' . $sign . '45deg);'
+ . '-ms-transform: rotate(' . $sign . '45deg);'
+ . '-o-transform: rotate(' . $sign . '45deg);'
+ . 'transform: rotate(' . $sign . '45deg);'
+ . 'font-size: ' . $fsize . 'px;">'
+ . '<a class="ribbon-link" style="'
+ . 'width: ' . $square . 'px; '
+ . 'line-height: ' . $height . 'px;"'
+ . 'href="#">' . $text
+ . '</a></div></div>';
+
+ $javascript = ''
+ . '<script type="text/javascript">'
+ . '(function () {'
+ . 'document.body.insertAdjacentHTML( "afterbegin", \'' . $html . '\' );'
+ . '}());'
+ . '</script>';
+
+ return array( $javascript, "markerType" => 'nowiki' );
+
+ }
+
+}
+
+?>
diff --git a/extension.json b/extension.json
new file mode 100644
index 0000000..972617b
--- /dev/null
+++ b/extension.json
@@ -0,0 +1,34 @@
+{
+ "name": "Ribbon",
+ "author": [
+ "Cyrille Bagard"
+ ],
+ "url": "https://www.mediawiki.org/wiki/Extension:Example",
+ "description": "This extension adds a ribbon on top of a pages.",
+ "version": "1.0",
+ "license-name": "GPL-2.0+",
+ "type": "other",
+ "AutoloadClasses": {
+ "Ribbon": "Ribbon_body.php"
+ },
+ "Hooks": {
+ "ParserFirstCallInit": [
+ "Ribbon::onParserInit"
+ ],
+ "BeforePageDisplay": [
+ "Ribbon::onBeforePageDisplay"
+ ]
+ },
+ "ResourceModules": {
+ "ext.ribbon": {
+ "styles": {
+ "ribbon.css": {
+ "media": "screen"
+ }
+ }
+ }
+ },
+ "ResourceFileModulePaths": {
+ "localBasePath": ""
+ }
+}
diff --git a/ribbon.css b/ribbon.css
new file mode 100644
index 0000000..1ee066e
--- /dev/null
+++ b/ribbon.css
@@ -0,0 +1,63 @@
+
+.corner-ribbon-wrapper {
+
+ position: fixed;
+ overflow: hidden;
+ top: 0;
+ z-index: 9999;
+ pointer-events: none;
+
+}
+
+.corner-ribbon {
+
+ position: absolute;
+
+ padding: 2px 0px;
+
+ background-color: #a00;
+
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 700;
+
+ z-index: 9999;
+ pointer-events: auto;
+
+ /* Dégradé : transparent en haut, un peu moins en bas */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+ /* Ombre portée */
+ -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+
+}
+
+.corner-ribbon a {
+
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-align: center;
+
+ display: inline-block;
+ padding: 2px 0;
+
+ /* Effet en bordure */
+ border-width: 1px 0;
+ border-style: dotted;
+ border-color: #fff;
+ border-color: rgba(255, 255, 255, 0.7);
+
+}
+
+.corner-ribbon-wrapper.right {
+
+ right: 0;
+
+}