Вопросы Теги

Как передать переменные в этот результат div в другой функции

Если вы не хотите включать JQuery, я бы попробовал несколько облегченных библиотек AJAX.

Мой любимый reqwest. Это всего лишь 3.4kb и очень хорошо построено: https://github.com/ded/Reqwest

Вот пример запроса GET с reqwest: 

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

Теперь, если вы хотите что-то еще более легкое, я бы попробовал microAjax всего на 0,4kb: https://code.google.com/p/microajax/

Это все код прямо здесь: 

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

И вот пример вызова: 

microAjax(url, onSuccess);

1
задан Daniel 18 January 2019 в 22:26
поделиться

1 ответ

Я думаю, что проблема связана с тем, что вы не передаете параметры в конструктор модала. то есть: 

var pbModal = new Modal({
        content: pbContent,
        buttonAmount: buttonAmount,
        amountType: amountType,
        toAddress: toAddress,
        successField: successField,
        successMsg: successMsg,
        successCallback: successCallback,
        bchAmount: bchAmount
});

pbModal.open();

Вы можете попробовать приведенный выше код, как показано в примере ниже.

Кроме того, вы можете по-другому взглянуть на расчеты коэффициента / конверсии ... мне они показались неправильными, но я не уверен, какой должна быть правильная формула, поэтому я не пытался это исправить:) [119 ] 

// Create an immediately invoked functional expression to wrap our code
(function() {
  // Define our constructor 
  this.Modal = function(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {

    // Create global element references
    this.closeButton = null;
    this.modal = null;
    this.overlay = null;

    // Determine proper prefix
    this.transitionEnd = transitionSelect();

    // Define option defaults 
    var defaults = {
      autoOpen: false,
      className: 'fade-and-drop',
      closeButton: false,
      content: "",
      maxWidth: 270,
      minWidth: 250,
      overlay: true
    }
    
    // Create options by extending defaults with the passed in arugments
    if (arguments[0] && typeof arguments[0] === "object") {
      this.options = extendDefaults(defaults, arguments[0]);
    }

    if (this.options.autoOpen === true){
      this.open();
    }
  }

  // Public Methods
  Modal.prototype.close = function() {
    var _ = this;
    this.modal.className = this.modal.className.replace(" paybutton-open", "");
    this.overlay.className = this.overlay.className.replace(" paybutton-open",
      "");
    this.modal.addEventListener(this.transitionEnd, function() {
      _.modal.parentNode.removeChild(_.modal);
    });
    this.overlay.addEventListener(this.transitionEnd, function() {
      if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
    });
  }

  Modal.prototype.open = function() {
    buildOut.call(this);
    initializeEvents.call(this);
    window.getComputedStyle(this.modal).height;
    this.modal.className = this.modal.className +
      (this.modal.offsetHeight > window.innerHeight ?
        " paybutton-open paybutton-anchored" : " paybutton-open");
    this.overlay.className = this.overlay.className + " paybutton-open";
  }

  // Private Methods
  function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {

    var content, contentHolder, docFrag, resultHolder, buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount;

    /*
     * If content is an HTML string, append the HTML string.
     * If content is a domNode, append its content.
     */

    if (typeof this.options.content === "string") {
      content = this.options.content;
    } else {
      content = this.options.content.innerHTML;
    }

    // Create a DocumentFragment to build with
    docFrag = document.createDocumentFragment();

    // Create modal element
    this.modal = document.createElement("div");
    this.modal.className = "paybutton-modal " + this.options.className;
    this.modal.style.minWidth = this.options.minWidth + "px";
    this.modal.style.maxWidth = this.options.maxWidth + "px";

    // If closeButton option is true, add a close button
    if (this.options.closeButton === true) {
      this.closeButton = document.createElement("button");
      this.closeButton.className = "paybutton-close close-button";
      this.closeButton.innerHTML = "×";
      this.modal.appendChild(this.closeButton);
    }

    // If overlay is true, add one
    if (this.options.overlay === true) {
      this.overlay = document.createElement("div");
      this.overlay.className = "paybutton-overlay " + this.options.className;
      docFrag.appendChild(this.overlay);
    }

    // Create content area and append to modal
    contentHolder = document.createElement("div");
    contentHolder.className = "paybutton-content";
    contentHolder.innerHTML = content;
    this.modal.appendChild(contentHolder);

    // Create content area and append to modal
    resultHolder = document.createElement("div");
    resultHolder.className = "paybutton-content";
    resultHolder.id = "result";
    resultHolder.innerHTML = (this.options.buttonAmount + " " + this.options.amountType + " = " + this.options.bchAmount / 100000000 + " BCH");
    this.modal.appendChild(resultHolder);

    // Append modal to DocumentFragment
    docFrag.appendChild(this.modal);

    // Append DocumentFragment to body
    document.body.appendChild(docFrag);

  }

  function extendDefaults(source, properties) {
    var property;
    for (property in properties) {
      if (properties.hasOwnProperty(property)) {
        source[property] = properties[property];
      }
    }
    return source;
  }

  function initializeEvents() {

    if (this.closeButton) {
      this.closeButton.addEventListener('click', this.close.bind(this));
    }

    if (this.overlay) {
      this.overlay.addEventListener('click', this.close.bind(this));
    }
  }

  function transitionSelect() {
    var el = document.createElement("div");
    if (el.style.WebkitTransition) return "webkitTransitionEnd";
    if (el.style.OTransition) return "oTransitionEnd";
    return 'transitionend';
  }

  var payButton = document.getElementsByClassName("pay-button");
  for (var i = 0; i < payButton.length; i++) {
    var payButtons = payButton[i];
    // pull in attribute info from button when clicked
    payButtons.addEventListener("click", function(event) {
      var buttonAmount = this.getAttribute("amount");
      var amountType = this.getAttribute("amount-type");
      var toAddress = this.getAttribute("address");
      var successField = this.getAttribute("success-field");
      var successMsg = this.getAttribute("success-msg");
      var successCallback = this.getAttribute("data-success-callback");
      var bchAmount;
      var test = "test message";

      // check if amount type is set to bch or fiat
      if (amountType === "BCH") {
        bchAmount = 100000000 * buttonAmount;
      } else if (amountType === "Satoshi") {
        bchAmount = buttonAmount;
      }

      var qr = new QRious({
        element: document.getElementById('qr'),
        value: toAddress + "?amount=" + bchAmount,
        background: 'white', // background color
        foreground: 'black', // foreground color
        backgroundAlpha: 1,
        foregroundAlpha: 1,
        level: 'M', 
        mime: 'image/png', 
        size: 250, 
        padding: null 
      });

      var qrdecoded = qr.toDataURL();
      var pbContent =
        '<div>' + '<div>' +'<div>' +
        '<div><img src="' + qrdecoded + '"></div>' +
        '</div>' +
        '<div>' +
        '<div class="addressdiv"><span>Click QR code to Copy Address</span></div>' +
        '</div>' +
        '<div>' +
        '<div class="amountdiv"><span>Amount = ' + bchAmount + ' BCH</span></div>' +
        '</div>' +
        '<div>' +
        '<div><a href="' + toAddress + '?amount=' + buttonAmount + '"><button class="pbmodal-button"><span>Open in BitcoinCash Wallet</span></button></a>' +
        '</div>' +
        '<div>' +
        '<div><button class="pbmodal-button"><span>Send BCH with Badger Wallet</span></button></div>' +
        '</div>' +
        '<div>' +
        '<div><button class="pbmodal-button"><span>Send BCH with Telecope Wallet</span></button></div>' +
        '</div>' +
        '<div>' +
        '<div id = "result"></div>' +
        '</div>' +
        '</div>' +
        '</div>';

      var pbModal = new Modal({
        content: pbContent,
        buttonAmount: buttonAmount,
        amountType: amountType,
        toAddress: toAddress,
        successField: successField,
        successMsg: successMsg,
        successCallback: successCallback,
        bchAmount: bchAmount
      });

      pbModal.open();
    });
  }
}());
body {
  font-family: Helvetica, Arial, san-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.pay-button {
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid orangeRed;
  background: transparent;
  position: relative;
  padding: 0px;
  min-width: 150px;
  margin: 5px;
  color: #fff;
  /*For IE*/
}

.pay-button>span {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pay-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
  z-index: -1;
}

.pay-button>span,
.pay-button:after {
  background-size: 300%;
  background-position: 100%;
  transition: .6s, font-size 0.2s;
}

.pay-button:hover>span,
.pay-button:hover:after {
  background-position: 0;
  font-size: 1.1em;
  color: orangeRed;
  /*For IE*/
}

.pbmodal-button {
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid orangeRed;
  background: transparent;
  position: relative;
  padding: 0px;
  width: 240px;
  margin: 0px 0px 10px 0px;
  color: #fff;
  /*For IE*/
}

.pbmodal-button>span {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pbmodal-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
  z-index: -1;
}
.pbmodal-button>span,
.pbmodal-button:after {
  background-size: 300%;
  background-position: 100%;
  transition: .6s, font-size .2s;
}
.pbmodal-button:hover>span,
.pbmodal-button:hover:after {
  background-position: 0;
  font-size: 1.08em;
  color: orangeRed;
  /*For IE*/
}

/* Modal Base CSS */
.paybutton-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  background: rgba(0, 0, 0, .6);
}

.addressdiv {
  word-wrap: break-word;
  font-size: 14px;
  margin: 0px 0px 10px 0px;
}

.amountdiv {
  word-wrap: break-word;
  font-size: 16px;
  margin: 0px 0px 10px 0px;
}

.paybutton-modal {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  text-align: center;
  opacity: 0;
  overflow: auto;
  width: 100%;
  padding: 10px 10px 15px 10px;
  /*padding: 24px 20px;*/
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
}

.paybutton-modal.paybutton-open.paybutton-anchored {
  top: 20px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.paybutton-modal.paybutton-open {
  opacity: 1;
}

.paybutton-overlay.paybutton-open {
  opacity: 1;
}

/* Default Animation */
.paybutton-overlay.fade-and-drop {
  display: block;
  opacity: 0;
}
.paybutton-modal.fade-and-drop {
  top: -300%;
  opacity: 1;
  display: block;
}
.paybutton-modal.fade-and-drop.paybutton-open {
  top: 50%;
  -webkit-transition: 300ms top 300ms ease;
  -moz-transition: 300ms top 300ms ease;
  -ms-transition: 300ms top 300ms ease;
  -o-transition: 300ms top 300ms ease;
  transition: 300ms top 300ms ease;
}
.paybutton-modal.fade-and-drop.paybutton-open.paybutton-anchored {
  -webkit-transition: 300ms top 300ms ease;
  -moz-transition: 300ms top 300ms ease;
  -ms-transition: 300ms top 300ms ease;
  -o-transition: 300ms top 300ms ease;
  transition: 300ms top 300ms ease;
}
.paybutton-overlay.fade-and-drop.paybutton-open {
  top: 0;
  -webkit-transition: 300ms opacity ease;
  -moz-transition: 300ms opacity ease;
  -ms-transition: 300ms opacity ease;
  -o-transition: 300ms opacity ease;
  transition: 300ms opacity ease;
  opacity: 1;
}
.paybutton-modal.fade-and-drop {
  -webkit-transition: 300ms top ease;
  -moz-transition: 300ms top ease;
  -ms-transition: 300ms top ease;
  -o-transition: 300ms top ease;
  transition: 300ms top ease;
}
.paybutton-overlay.fade-and-drop {
  -webkit-transition: 300ms opacity 300ms ease;
  -moz-transition: 300ms opacity 300ms ease;
  -ms-transition: 300ms opacity 300ms ease;
  -o-transition: 300ms opacity 300ms ease;
  transition: 300ms opacity 300ms ease;
}

/* Close Button */
   .paybutton-close {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 12px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 7px 7px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: #e74c3c;
}

.paybutton-close:hover {
  background: #c0392b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<button class="pay-button" amount="0.038" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.038 BCH</span>
</button>
<button class="pay-button" amount="0.1" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.1 BCH</span>
</button>
<button class="pay-button" amount="10000" amount-type="Satoshi" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>10,000 Satoshi</span>
</button>

ОБНОВЛЕНО Я добавил вторую версию, которая улучшает необходимо генерировать код для всех элементов в модале (div, кнопки и т. д.) каждый раз, когда нажимаются кнопки.

Вместо этого у нас может быть скрытый div, и его содержимое обновляется при нажатии кнопки и добавлении / удалении класса, который скрывает / показывает его по мере необходимости.

Для OP: Я работал над повторным использованием этого div, но не обращал внимания на эффекты перехода на существующий код.

Несколько небольших настроек все еще необходимы для непрозрачности и модального размера и т. Д., Но у меня не хватило времени, чтобы продолжить работу над этой частью :)

ОБНОВЛЕНИЕ 2 [ 1120]

Удален второй подход, так как OP не сочтет его полезным (иные требования, чем я ожидал)

0
ответ дан ochi 18 January 2019 в 22:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: