Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από philos » 23 Ιαν 2015 23:39

Λοιπόν, έχουμε τον εξής κώδικα που αφορά το Copy κειμένου στο clipboard μέσω HTML (χρησιμοποιείται το Zeroclipboard). Η ερώτησή μου είναι κάτι απλό και γενικό και δεν αφορά το Zeroclipboard σαν λειτουργία που θέλω να τροποποιήσω:

Κώδικας: Επιλογή όλων

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script>
        var client = new ZeroClipboard&#40; document.getElementById&#40;"copy-button"&#41; &#41;;
    </script>
  </body>
</html>
- Για να λειτουργήσει το button πρέπει να έχει τρέξει από κάτω του ο ορισμός μιας μεταβλητής σαν την client με getelementbyid το id του button.

- Ωστόσο εγώ φορτώνω τα buttons δυναμικά με javascript όταν τρέχει επαναλαμβανόμενα κάποιο function (δλδ δεν προυπάρχουν μέσα στη φρεσκο-φορτωμένη σελίδα). Κάνω αυτό μέσα σε μια javascript function που επιστρέφει αποτελέσματα σε ένα div:

Κώδικας: Επιλογή όλων

var output = document.getElementById&#40;"output"&#41;;
output.innerHTML = output.innerHTML + "<input type=\"button\" id=" + dlink + " data-clipboard-text=\"&#91;img&#93;" + dlink + "&#91;/IMG&#93;\" title=\"Click to copy me.\" value=\"Copy to Clipboard\" /><script>var client = new ZeroClipboard&#40; document.getElementById&#40;'" + dlink + "'&#41; &#41;;<\/script>";
... όμως δεν δουλεύει.

Το output.innerHTML μπορεί να γεμίζει συνεχώς νέα περιεχόμενα-κουμπιά και κάθε κουμπί θα πρέπει να κάνει copy to clipboard, το δικό του κείμενο. Το dlink είναι το url μιας εικόνας και το χρησιμοποίησα και ως id καθώς δεν μπορώ να σκεφτώ τι άλλο να βάλω ως id.

Δοκίμασα να βάλω και το:

Κώδικας: Επιλογή όλων

var client = new ZeroClipboard&#40; document.getElementById&#40;dlink&#41; &#41;;
..πριν ή μετά το var output (δλδ το τοποθέτησα μέσα στη κανονική javascript), αλλά και πάλι δεν δουλεύει.
Πως μπορώ να πετύχω αυτό που θέλω;

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από giannis17 » 24 Ιαν 2015 02:58

θα φτιάξεις μια function για το listener και κάθε φορά που δημιουργείς καινούριο κουμπί θα τρέχεις και την function.
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από philos » 24 Ιαν 2015 14:42

Λοιπόν, έκανα τα παρακάτω:

Κώδικας: Επιλογή όλων

function sc_build_button&#40;scid&#41;
&#123;
  return new ZeroClipboard&#40; document.getElementById&#40;scid&#41; &#41;;
&#125;

function getRandomInt&#40;min, max&#41;
&#123;
  return Math.floor&#40;Math.random&#40;&#41; * &#40;max - min&#41;&#41; + min;
&#125;
και:

Κώδικας: Επιλογή όλων

function upload&#40;file&#41;
&#123;
//&#91;...&#93;
                        var randomnum = getRandomInt&#40;1,10000&#41;;
                        output.innerHTML = output.innerHTML + "<input type=\"button\" id=" + randomnum + " data-clipboard-text=\"&#91;img&#93;" + link + "&#91;/IMG&#93;\" title=\"Click to copy me.\" value=\"Copy to Clipboard\" />";

                        sc_build_button&#40;randomnum&#41;; 
//&#91;...&#93;
&#125;
Η upload() τρέχει κάθε φορά που ανεβαίνει ένα αρχείο.
Τα κουμπιά λειτουργούν ως εξής με το παραπάνω:
α) Όταν ανεβάζω την πρώτη εικόνα, λειτουργεί κανονικά
β) Όταν ανεβάζω τη 2η εικόνα και γεμίζει κι άλλο το output.innerHTML, λειτουργεί το κουμπί της 2ης αυτής εικόνας, αλλά παύει να λειτουργεί το κουμπί της πρώτης εικόνας.

Τι μπορώ να κάνω για να λειτουργούν όλα τα κουμπιά;

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από giannis17 » 24 Ιαν 2015 15:13

Αυτό γίνεται επειδή παίζεις με id και όλα τα element που δημιουργούνται παίρνουν το ίδιο id, είτε θα παίξεις με names πχ name="copy" και μετά τα βρίσκεις με getElementsByName("copy") και τα βάζεις σε μια loop

ή θα αρχίσεις να δουλεύεις με jquery και θα βάλεις μια ψευδοκλάση αντί για id και μετά απλά κάνεις $('.copythis').on('click', function(){ copyfunction($(this)); }); όπου copyfunction είναι η function που θα τρέχει κάθε φορά και της δίνεις σαν παράμετρο το element που πατήθηκε για να μη το ψάχνεις. Σημείωση κάθε φορά που δημιουργείς ένα element θα πρέπει πάλι να τρέχει ο listener (on click).
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από philos » 24 Ιαν 2015 16:59

Thanks!! Το κατάφερα με τη συνάρτηση:

Κώδικας: Επιλογή όλων

            function sc_build_buttons&#40;&#41;
            &#123;
                  var scitems = document.getElementsByName&#40;'copybutton'&#41;;
                  for&#40;var x=0; x < scitems.length; x++&#41;
                  &#123;
                      client = new ZeroClipboard&#40;scitems&#91;x&#93;&#41;;
                  &#125;                  
            &#125;
... που τρέχει κάθε φορά. :D

Μένει κάτι τελευταίο: θα ήθελα να εμφανίζεται ένα loading bar (gif) όταν το script στέλνει δεδομένα.
Με HTML:

Κώδικας: Επιλογή όλων

<div id="loadingbar" style="display&#58;none;"><img src="loading_bar.gif" border="0" style="width&#58;180px;" /></div>
..έχω κάνει το παρακάτω:

Κώδικας: Επιλογή όλων

function upload&#40;file&#41; &#123;
&#91;...&#93;
document.getElementById&#40;"loadingbar"&#41;.style.display = 'block';

                xhr.onload = function&#40;&#41; &#123;
                    if&#40;this.status==400&#41;&#123;
                       document.getElementById&#40;"error"&#41;.innerHTML = JSON.parse&#40;xhr.responseText&#41;.data.error;
                    &#125; else &#123;
&#91;...&#93;

                        sc_build_buttons&#40;&#41;;
                        document.getElementById&#40;"loadingbar"&#41;.style.display = 'none';
                    &#125;
&#91;...&#93;
&#125;
Το οποίο όμως δουλεύει μόνο για το πρώτο request. Αν δώσω στο script να ανεβάσει πολλά αρχεία το πράγμα χαλάει.
1. Δηλαδή ξεκινάει η αποστολή της εικόνας - ξεκινάει και το loading bar μαζί
2. Ολοκληρώνεται η αποστολή του πρώτου αρχείου, εξαφανίζεται η loading bar
3. Το script ξεκινάει αυτόματα να στέλνει το 2ο etc... αρχείο, όμως το loading bar δεν ξανά εμφανίζεται - έχει εξαφανιστεί με το τέλος της πρώτης αποστολής. :-?

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Copy to Clipboard και φόρτωμα κουμπιών γι' αυτή τη δουλειά

Δημοσίευση από giannis17 » 24 Ιαν 2015 17:13

αν κάπου κρατάς τον αριθμό των item βάλε μια loop που να ξεκινάει από αυτόν for(var ticker = items;ticker=0;ticker--)
και απ'εξω ένα if(ticker == 0) document.getElementById("loadingbar").style.display = 'none';

έτσι θα κρύβει το loader αφού τελειώσουν όλα τα αρχεία
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης