Flexible Schaltflächengestaltung

[MathiasWeisheit]

Ich habe das bestehende Script so angepasst, dass es auch selbst gestaltete Schaltflächen verwendet, anstatt seine eigenen zu generieren. Dadurch ist das Script dann kompatibel zu jQueryUI, Bootstrap, etc.... Ggf könnt hier die Änderung bei euch einbauen.

I have the existing script adapted so that it also uses self-designed buttons, instead of generating its own. This script is then compatible with jQueryUI, bootstrap, etc .... If necessary, you can install here with you the change.

P.S. da ich kein browserify und node.js verwenden wollte, musste ich bei meinem Script etwas mehr anpassen. https://website-dev.cetima.de/ https://website-dev.cetima.de/static/cetima/design/extlibs/shariff-1.17.1/shariff-cetima-mod.js

[andrelohmann]

Genau wonach ich und bestimmt auch viele andere gesucht haben. @heise, bitte nehmt den code in den master branch mit auf.

[MathiasWeisheit]

• Hier kann es sich angeschaut werden: \ https://website-dev.cetima.de/design/prototypes/shariff/

• Meine Änderungen zum einbauen: * Zeile 13 auskommentieren: $(element).empty(); * Function _addButtonList: anpassen: _addButtonList: function() { var self = this;

  var $socialshareElement = this.$socialshareElement();
  
  var themeClass = 'theme-' + this.options.theme;
  var orientationClass = 'orientation-' + this.options.orientation;
  var serviceCountClass = 'col-' + this.options.services.length;
  
  var $buttonList = $socialshareElement.find('ul'); //Cetima Mod
  
  if (!$buttonList.length){
    $buttonList = $('<ul>').addClass(themeClass).addClass(orientationClass).addClass(serviceCountClass);
  }
  
  // add html for service-links
  this.services.forEach(function(service) {
    var $li;
    var $shareLink =  null;
  
    $li = $buttonList.find('li.'+service.name); //Cetima Mod
    $shareLink = $buttonList.find('a.'+service.name); //Cetima Mod
  
    if (!$li.length && !$shareLink.length){
         $li = $('<li class="shariff-button">').addClass(service.name);
    }
    if (!$shareLink.length){
         $shareLink = $li.find('a'); //Cetima Mod
    }
  
    if (!$shareLink.length){
        var $shareText = '<span class="share_text">' + self.getLocalized(service, 'shareText');
        $shareLink = $('<a>').append($shareText);
        if (typeof service.faName !== 'undefined') {
            $shareLink.prepend('<span class="fa ' +  service.faName + '">');
        }
        $shareLink.attr('title', self.getLocalized(service, 'title'));
        // add attributes for screen readers
        $shareLink.attr('role', 'button');
        $shareLink.attr('aria-label', self.getLocalized(service, 'title'));
    }
    $shareLink.attr('href', service.shareUrl);
    if (service.popup) {
        $shareLink.attr('rel', 'popup');
    } else if (service.blank) {
        $shareLink.attr('target', '_blank');
    }
  
    if ($li.length && $buttonList.length){
        $li.append($shareLink);
        $buttonList.append($li);
    }
  
  });

• TODO: \ UpdateCounts muss noch angepasst werden // add value of shares for each service _updateCounts: function(data) { var self = this; $.each(data, function(key, value) { if(value >= 1000) { value = Math.round(value / 1000) + 'k'; } $(self.element).find('.' + key + ' a').append('' + value); }); },

[MathiasWeisheit]

Ich mit dem oben erwähnten Code nur versucht, einen Ansatzpunkt für eine Erweiterung zu liefern. Ich kenn mich in dem Projekt nicht aus und will mich nicht zu tief einmischen. Ich habe keine Erfahrungen mit den verwendeten Bibliotheken und mit Git! @heise: Ich will damit niemanden zu nahe treten und wünsche mir nur die Berücksichtigung bei einer Weiterentwicklung.

[craiq]

Die Idee ist ja gut, aber die Umsetzung ist reicht noch nicht zum einpflegen. Du kannst gerne weiter dafür entwickeln. Vor shariff hatte ich damit auch keine Erfahrung. Nichtmal mit nodejs. Jeder Entwickler wünscht sich hier, dass sein Code berücksichtigt wird. Also Füße still halten und hoffen, dass heise dein Code übernimmt. Da die Entwickler von heise offensichtlich momentan nicht viel Zeit für das Projekt aufbringen können, heißt es also Geduld haben.

[osworx]

Da die Entwickler von heise offensichtlich momentan nicht viel Zeit für das Projekt aufbringen können, heißt es also Geduld haben. Das ist ja das Gute an dieser Art von Software und Lizenz sowie GitHub: jeder kann es weiter betreiben, wenn der Originalautor nicht mag oder keine Zeit hat, dann eben andere. Nennt sich dann Fork

[MathiasWeisheit]

Könntest du mir beim Verständnis für die Entwicklungsumgebung helfen. Ich entwickle momentan nur clientseitig javascript. Doch in diesem Projekt sind anscheinend node.js Bibliotheken, borserify, grunt, etc.. eingebettet. Ich würde mir gerne das Projekt auschecken und die Änderungen daran vornehmen.

[craiq]

Wie osworx schon sagt, ist der erste Schritt einen eigenen Fork von shariff zu erstellen. Den dann mit https://desktop.github.com/ auf den Desktop clonen. Mit den ganzen Bibliotheken musst du dich erstmal gar nicht beschäftigen. Wenn du nodejs installiert hast, kannst du mit der Console zu deinem Ordner navigieren und alle Abhängigkeiten mit einem Befehl installieren.

cd shariff npm install // installiert alle Abhängigkeiten npm install -g grunt-cli

Der letzte Befehl ist noch notwendig um dann direkt auf die grunt Befehle zugreifen zu können. Jetzt kannst du schon mal mit folgendem Befehl versuchen, ob alles funktioniert hat.

grunt build

Der Rest ist jetzt fast nur noch objektbasiertes Javascript mit JQuery und less. Was noch von NodeJs kommt: var ... = require(...); Damit werden Module eingebunden, wie zB die einzelnen Services. Wenn du eins von den externen verwenden willst, einfach danach googlen "npm modul" module.exports gibt den Inhalt für require weiter

mehr ist es gar nicht. Du musst dich nur in das große shariff - Objekt rein arbeiten. Und bedenke, die Entwickler von Heise haben echt guten Code geschrieben, also hat jede Zeile einen Grund (weil du Zeile 13 auskommentierst)

Wenn dein Code dann soweit fertig ist, kannst du den mit Github auch wieder auf den Server synchronisieren und einen Pullrequest starten.

[MathiasWeisheit]

Probiere ich heute aus! Danke!

[MathiasWeisheit]

@craiq Deine Umsetzung der Counts in den runden Schaltflächen würde bei mir auch gut passen.

[craiq]

Die kannst du gerne adaptieren. Direkt übernehmen geht leider nicht da ich ganz anderes CSS verwende.

[MathiasWeisheit]

beim np install // gibt es Probleme. Ich verwende einen Windows-Rechner. Hoffe das ist kein Problem. npm ERR! addLocal Could not install D:\ npm ERR! Windows_NT 6.1.7601 npm ERR! argv "D:\Dev\nodejs\node.exe" "D:\Dev\nodejs\node_modules\npm\b in\npm-cli.js" "install" "//" npm ERR! node v4.1.1 npm ERR! npm v2.14.4 npm ERR! code EISDIR npm ERR! errno -4068 npm ERR! syscall read

npm ERR! eisdir EISDIR: illegal operation on a directory, read npm ERR! eisdir This is most likely not a problem with npm itself npm ERR! eisdir and is related to npm not being able to find a package.json in npm ERR! eisdir a package you are trying to install.

npm ERR! Please include the following file with any support request: npm ERR! D:\Dev\MyEclipse2015\Workspace\shariff\npm-debug.log

[craiq]

Das war ein Fehler in meiner package.json. Da musste ich noch eine Version eintragen. Hab die Datei auch schon neu hochgeladen - musst du also nochmal synchronisieren. Werde mal schauen, dass ich das irgendwie testen kann.

Edit: bei mir gings jetzt. Sag bitte bescheid, ob es auch bei dir funktioniert

[MathiasWeisheit]

m branch gh-pages oder im master?

[craiq]

gh-pages ist die demo seite das wichtige ist der master

[compeak]

Wir haben uns entschieden, dieses Feature nicht einzubauen. Shariff soll von Webseiten-Besuchern einfach wiedererkannt, und als die Privatsphäre schützendes Element eingestuft werden können. Eine komplett freie Gestaltung der Buttons ist daher nicht Ziel des Projekts.