Come delegare parte del guadagno di un singolo post e scalare la percentuale SBD/SP senza estensioni o app. (+ video IPFS)

in #ita7 years ago (edited)

In futuro si presenterà la necessità di dover postare senza la possibilità di poter utilizzare steemit o busy.org per sovraccarichi, o per delegare la percentuale di guadagno di un post ad uno o più collaboratori, sono presenti in rete estensioni per browser e alcune app con questa funzionalità, ma non ispirano molta fiducia per il semplice fatto che sono realizzati da tanti utenti diversi, a volte conosciuti e a volte meno.

Per evitare brutte sorprese ti consiglio questo semplice codice da aprire con qualsiasi browser ( testato su Chrome/Chromium e Firefox.)

Compilare il codice sul tuo device ti permette di avere più controllo sui tuoi dati, inoltre puoi utilizzare semplicemente la tua posting key per pubblicare post con questo codice, le altre app/siti ti chiedono troppo spesso chiavi che potrebbero compromettere la sicurezza del tuo account.

Per creare questa piccola "app" ho unito il form per postare di steemwhales, per il markdown con anteprima ho utilizzato showdownjs:

https://steemwhales.com/post/
https://github.com/showdownjs/showdown

Librerie

Per far funzionare il codice servono queste librerie standard:

CSS

Per lo stile scarica questi file css e salvali nella cartella /js

Il codice

Ora crea un file di testo vuoto con qualsiasi app di testo, inserisci il codice riportato qui sotto e seleziona l'opzione per salvare: salva con nome - nomina il file "steempost.html"

<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
  
  <title>Posta e delega parte del tuo guadagno ad uno o più steemians</title>
 <link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">
  <link href="./js/css" rel="stylesheet" type="text/css">
  <link href="./js/css(1)" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="./js/foundation.min.css">
  <link rel="stylesheet" type="text/css" href="./js/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="./js/style.css">

  <style>
  .lateral-menu {
      z-index: 9999;
      }
      </style>
  <meta name="theme-color" content="#ffffff">

  (html comment removed:  per visualizzare l'anteprima del post )
 <script type="text/javascript" src="./js/showdown.min.js"></script>

</head>
<body ng-controller="editorCtrl" squeeze="" class="ng-scope squeezed-body" style="position: absolute; transition-duration: 0.5s; transition-property: top, bottom, left, right; left: 300px;">

  (html comment removed:  avvisi e stato della pubblicazione, in caso di errore vi apparirà un log dettagliato  )
<div id="successalert" class="alert alert-success" style="display:none">
        <strong>Pubblicato!</strong> Il tuo post ora è presente su Steem-Blockchain.
      </div>

      <div id="infoalert" class="alert alert-info" style="display:none">
        <strong>Trasferimento dati su blockchain in corso...</strong> Attendere...
      </div>

      <div id="erroralert" class="alert alert-danger" style="display:none">
        <strong>Errore! Comunica in chat il problema. <a href="https://discord.gg/QDKPzSp"> https://discord.gg/QDKPzSp </a></strong> <span id="errormessage"></span>
      </div>
    </div>
    
  <div id="editor-wrapper" class="container">

    <textarea id="editor" data-ng-model="text"  class="ng-pristine ng-untouched ng-valid"></textarea>
    <div id="preview" sd-model-to-html="text" class="ng-isolate-scope"></div>
  </div>
  

  (html comment removed:  modal )
  <div ng-hide="!showModal" class="modal-wrapper ng-hide" style="">
    <div class="modal-inner" aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
      <div class="modal-topbar">
        <span><i>&nbsp;&nbsp;Limited to 1000 characters</i></span><a class="modal-close-btn" aria-label="Close" ng-click="showModal = false"><i class="fa fa-lg fa-close"></i></a>
      </div>
      <div class="link-area">
        <textarea id="dlnk" style="resize: none;" disabled class="ng-binding"></textarea>
      </div>
    </div>
  </div>
  (html comment removed:  end modal )

  
  <script src="./js/angular.js"></script>
  <script src="./js/angular-sanitize.js"></script>
  <script src="./js/angular-animate.js"></script>
  <script src="./js/angular-route.js"></script>
  <script src="./js/angular-cookies.js"></script>
  <script src="./js/angular-pageslide-directive.js"></script>

  <script src="./js/editor.js"></script>


<div style=" position: fixed; width: 300px; height: 100%; overflow: hidden; transition-duration: 0.5s; transition-property: width, height; top: 0px; bottom: 0px; left: 0px;">
    <div class="lateral-menu-content" style="display: block;">
      <div class="title">Steem Post Delegator</div>
      <div class="lateral-menu-content-inner">
 <form class="form-horizontal" id="post">
        <fieldset>

       
        
        (html comment removed:  Titolo )
        <div class="form-group">
          <label class="col-md-4 control-label" for="title">Titolo</label>  
          <div class="col-md-4">
          <input id="title" name="title" type="text" placeholder="" class="form-control input-md" required="">
          </div>
        </div>

        (html comment removed:  link permanente )
        <div class="form-group">
          <label class="col-md-4 control-label" for="permlink">Permlink</label>  
          <div class="col-md-4">
          <input id="permlink" name="permlink" type="text" placeholder="" class="form-control input-md"  required="">
          </div>
        </div>

        
        
       
        
        (html comment removed:  Video IPFS )
        <div class="form-group">
          <label class="col-md-4 control-label" for="ipfshash">Video IPFS</label>  
          <div class="col-md-4">
          <input id="ipfshash" name="ipfshash" type="text" placeholder="" class="form-control input-md"  >
          </div>
        </div>

        (html comment removed:  Tags )
        <div class="form-group">
          <label class="col-md-4 control-label" for="tags">Tags</label>  
          <div class="col-md-4">
          <input id="tags" name="tags" type="text" placeholder="" class="form-control input-md" value="ita" required="">
          <span class="help-block">Usa spazio per separare le tags</span>
          </div>
        </div>

        (html comment removed:  Nome utente )
        <div class="form-group">
          <label class="col-md-4 control-label" for="author">Nome utente Steem</label>  
          <div class="col-md-4">
          <input id="author" name="author" type="text" placeholder="" class="form-control input-md" required="">
          
          </div>
        </div>

        (html comment removed:  Posting Key)
        <div class="form-group">
          <label class="col-md-4 control-label" for="privatekey">Posting Key</label>  
          <div class="col-md-4">
          <input id="privatekey" name="privatekey" type="text" placeholder="" class="form-control input-md" required="">
          
          <span class="help-block">Puoi trovarla in Wallet -&gt; Permessi su steemit.com</span>  
          </div>
        </div>

        
        
        

        (html comment removed:  Text input)
        <div class="form-group">
          <label class="col-md-4 control-label" for="sbdpercent">Steem Dollars %</label>  
          <div class="col-md-4">
          <input id="sbdpercent" name="sbdpercent" type="number" placeholder="" class="form-control input-md" required="" min="0" max="100" value="50" step="1">
          <span class="help-block">Seleziona 0% se vuoi avere 100% power up.</span>  
          </div>
        </div>



        (html comment removed:  Text input)
        <div class="form-group" style="display: none;" >
          <label class="col-md-4 control-label" for="maxpayout">Max SBD Payout</label>  
          <div class="col-md-4">
          <input id="maxpayout" name="maxpayout" type="number" placeholder="" class="form-control input-md" required="" min="0" max="1000000" value="1000000" step="1">
          <span class="help-block">Seleziona 0 se vuoi rifiutare il pagamento.</span>  
          </div>
        </div>
        
        <div class="form-group">
          <label class="col-md-4 control-label" style="font-size: 25px;"  for="privatekey">
            Delega<br>
            <button type="button" id="addbenef" name="addbenef" style="font-size: 16px;" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#benefModal"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Attiva</button>
          </label>
            <div class="col-md-4">
          <ul class="input-md" style="font-size: 18px;" id="beneflist">
          </ul>
         
           
          </div>
        </div>

        (html comment removed:  Button )
        <div class="form-group" >
          <label class="col-md-4 control-label" for="post"></label>
          <div class="col-md-4">
            <button id="post" name="post"  class="btn btn-primary">Pubblica</button>
          </div>
        </div>

        </fieldset>
      </form>

      (html comment removed:  Modal )
      <div class="modal fade" id="benefModal" role="dialog" style=" display: none;">
        <div class="modal-dialog">
        
          (html comment removed:  Modal content)
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">×</button>
              <h4 class="modal-title">Delega</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" id="post">
                <fieldset>


                (html comment removed:  Text input)
                <div class="form-group">
                  <label class="col-md-4 control-label" for="benefusername">Steem username</label>  
                  <div class="col-md-4">
                  <input id="benefusername" name="benefusername" type="text" placeholder="" class="form-control input-md" required=""  value="steempostitalia">
                  <span class="help-block">Inserisci l'username dell'utente a cui vuoi delegare parte del guadagno di questo post.</span>  
                  </div>
                </div>

                (html comment removed:  Text input)
                <div class="form-group">
                  <label class="col-md-4 control-label" for="benefshare">Percentuale</label>  
                  <div class="col-md-4">
                  <input id="benefshare" name="benefshare" type="number" placeholder="" class="form-control input-md" required=""  min="20" max="100" value="20" step="1">
                  <span class="help-block">Scegli la percentuale del guadagno delegato.</span>  
                  </div>
                </div>

                </fieldset>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal" id="benefadd">Delega</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
            </div>
          </div>
        </div>
      </div>
      
        <center>
    
    
  </center>
        
      </div>
    </div>
  </div>
  
  
  <script src="./js/jquery.min.js"></script>
<script src="./js/jquery.query-object.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/Chart.min.js"></script>    <script src="./js/steem.min.js"></script>
(html comment removed:  Modifica questo codice se vuoi inserire voci personalizzate nel json)
    <script type="text/javascript">
      beneficiaries = []
      weightRemaining = 10000
      tags = []

      $('#title').keydown(function() {
        var permlink = $(this).val().toLowerCase()
          .replace(/ /g,'-')
          .replace(/[^\w-]+/g,'')
        $('#permlink').val(permlink)
      })
      
      
       $('#markdown').keydown(function() {
        var anteprima = $(this).val()
         
        $('#anteprima').innerHTML(anteprima)
      })
      

      $('#tags').keydown(function() {
        tags = $(this).val().split(' ')
      })

      $('#benefadd').click(function() {
        for (var i = beneficiaries.length - 1; i >= 0; i--) {
          if (beneficiaries[i].account == $('#benefusername').val()) {
            weightRemaining += beneficiaries[i].weight;
            beneficiaries.splice(i,1);
          }
        };
        beneficiaries.push({
          account: $('#benefusername').val(),
          weight: 100*$('#benefshare').val()
        })
        weightRemaining -= 100*$('#benefshare').val()
        displayBenefs()
      })

      function displayBenefs() {
        $('#beneflist').empty()
        for (var i = beneficiaries.length - 1; i >= 0; i--) {
          var html = 'Attivato: '+beneficiaries[i].account+' ('+beneficiaries[i].weight/100+'%) '
          $('#beneflist').append(html)
          
          
        };
        $('#weightRemaining')[0].innerHTML = weightRemaining/100;
        
        $('.removeBenef').click(function(e) {
          console.log($(this).data('account'))
          for (var i = beneficiaries.length - 1; i >= 0; i--) {
            if (beneficiaries[i].account == $(this).data('account')) {
              weightRemaining += beneficiaries[i].weight;
              beneficiaries.splice(i,1);
              displayBenefs()
            }
          };
        })
      }

      $('#post').submit(function(event) {
        event.preventDefault();
        $('#infoalert').show()
        $('#successalert').hide()
        $('#erroralert').hide()
        var title = $('#title').val();
        var permlink = $('#permlink').val();
        var markdown = $('#editor').val();
        var author = $('#author').val();
        var privatekey = $('#privatekey').val();
        var sbdpercent = 100*$('#sbdpercent').val();
        var maxpayout = parseInt($('#maxpayout').val());
        var ipfshash = $('#ipfshash').val();
        var operations = [
          ['comment',
            {
              parent_author: '',
              parent_permlink: tags[0],
              author: author,
              permlink: permlink,
              title: title,
              body: markdown,
              json_metadata : JSON.stringify({
                video : {
                info : {
                title : title,
                author : author,
                permlink : permlink
                
                },
                content : {
                videohash : ipfshash
                },
                },
                tags: tags,
                app: 'SteemPostDelegator'
              })
            }
          ],
          ['comment_options', {
            author: author,
            permlink: permlink,
            max_accepted_payout: maxpayout+'.000 SBD',
            percent_steem_dollars: sbdpercent,
            allow_votes: true,
            allow_curation_rewards: true,
            extensions: [
              [0, {
                beneficiaries: beneficiaries
              }]
            ]
          }]
        ];

        if (beneficiaries.length == 0) {
          operations[1][1].extensions = []
        }

        console.log(operations)
        steem.broadcast.send(
          { operations: operations, extensions: [] },
          { posting: privatekey },
          function(e, r) {
            $('#infoalert').hide()
            if (e) {
              $('#errormessage').html(e.message)
              $('#erroralert').show()
            } else {
              $('#successalert').show()
            }
            console.log(e,r)
          }
        )
      });
    </script>
  </body></html>

All'interno del codice, nell'ultimo paragrafo sono contenute le impostazioni del post.
Puoi modificare molte impostazioni o aggiungerne altre.

<script type="text/javascript">
      beneficiaries = []
      weightRemaining = 10000
      tags = []

      $('#title').keydown(function() {
        var permlink = $(this).val().toLowerCase()
          .replace(/ /g,'-')
          .replace(/[^\w-]+/g,'')
        $('#permlink').val(permlink)
      })
      
      
       $('#markdown').keydown(function() {
        var anteprima = $(this).val()
         
        $('#anteprima').innerHTML(anteprima)
      })
      

      $('#tags').keydown(function() {
        tags = $(this).val().split(' ')
      })

      $('#benefadd').click(function() {
        for (var i = beneficiaries.length - 1; i >= 0; i--) {
          if (beneficiaries[i].account == $('#benefusername').val()) {
            weightRemaining += beneficiaries[i].weight;
            beneficiaries.splice(i,1);
          }
        };
        beneficiaries.push({
          account: $('#benefusername').val(),
          weight: 100*$('#benefshare').val()
        })
        weightRemaining -= 100*$('#benefshare').val()
        displayBenefs()
      })

      function displayBenefs() {
        $('#beneflist').empty()
        for (var i = beneficiaries.length - 1; i >= 0; i--) {
          var html = 'Attivato: '+beneficiaries[i].account+' ('+beneficiaries[i].weight/100+'%) '
          $('#beneflist').append(html)
          
          
        };
        $('#weightRemaining')[0].innerHTML = weightRemaining/100;
        
        $('.removeBenef').click(function(e) {
          console.log($(this).data('account'))
          for (var i = beneficiaries.length - 1; i >= 0; i--) {
            if (beneficiaries[i].account == $(this).data('account')) {
              weightRemaining += beneficiaries[i].weight;
              beneficiaries.splice(i,1);
              displayBenefs()
            }
          };
        })
      }

      $('#post').submit(function(event) {
        event.preventDefault();
        $('#infoalert').show()
        $('#successalert').hide()
        $('#erroralert').hide()
        var title = $('#title').val();
        var permlink = $('#permlink').val();
        var markdown = $('#editor').val();
        var author = $('#author').val();
        var privatekey = $('#privatekey').val();
        var sbdpercent = 100*$('#sbdpercent').val();
        var maxpayout = parseInt($('#maxpayout').val());
        var ipfshash = $('#ipfshash').val();
        var operations = [
          ['comment',
            {
              parent_author: '',
              parent_permlink: tags[0],
              author: author,
              permlink: permlink,
              title: title,
              body: markdown,
              json_metadata : JSON.stringify({
                video : {
                info : {
                title : title,
                author : author,
                permlink : permlink
                
                },
                content : {
                videohash : ipfshash
                },
                },
                tags: tags,
                app: 'SteemPostDelegator'
              })
            }
          ],
          ['comment_options', {
            author: author,
            permlink: permlink,
            max_accepted_payout: maxpayout+'.000 SBD',
            percent_steem_dollars: sbdpercent,
            allow_votes: true,
            allow_curation_rewards: true,
            extensions: [
              [0, {
                beneficiaries: beneficiaries
              }]
            ]
          }]
        ];

        if (beneficiaries.length == 0) {
          operations[1][1].extensions = []
        }

        console.log(operations)
        steem.broadcast.send(
          { operations: operations, extensions: [] },
          { posting: privatekey },
          function(e, r) {
            $('#infoalert').hide()
            if (e) {
              $('#errormessage').html(e.message)
              $('#erroralert').show()
            } else {
              $('#successalert').show()
            }
            console.log(e,r)
          }
        )
      });
    </script>

In questa parte del codice potete personalizzare ulteriormente il post agganciando informazioni aggiuntive nel json-metadata

var operations = [
          ['comment',
            {
              parent_author: '',
              parent_permlink: tags[0],
              author: author,
              permlink: permlink,
              title: title,
              body: markdown,
              json_metadata : JSON.stringify({
                video : {
                info : {
                title : title,
                author : author,
                permlink : permlink
                
                },
                content : {
                videohash : ipfshash
                },
                },
                tags: tags,
                app: 'SteemPostDelegator'
              })
            }
          ],

Potete smanettare utilizzando l' account prova: @guest123 Posting Key : 5JRaypasxMx1L97ZUX7YuC5Psb5EAbF821kkAGtBj7xCJFQcbLg

Il codice è compatibile con ZeroNet, puoi installare semplicemente il codice creando un nuovo indirizzo vuoto e spostare la cartella /js rinominando "steempost.html" in" index.html"

Per qualsiasi spiegazione o richiesta commentate pure, cercherò di rispondere nel più breve tempo possibile.

Sort:  

Grazie per aver condiviso questa informazione 😊