Просмотр архива Акул сайт


<?php defined('_VALID') or die('Restricted Access!'); ?>
    <div id="view" data-role="content" class="ui-content">
        <?php echo $this->fetch('user_menu'); ?>
        <br>
        <ul data-role="listview">
              <li data-role="list-divider">Avatar</li>
        </ul>
        <?php if ($_SESSION['avatar'] != ''): ?>
        <br /><br />
        <label for="current">Current Avatar:</label>
        <img src="<?php echo MEDIA_URL; ?>/users/<?php if ($_SESSION['avatar'] != ''): echo $_SESSION['user_id'],'.',$_SESSION['avatar'],'?',rand(0,100); else: echo 'nopic-',$_SESSION['gender'],'.gif'; endif; ?>" class="profile-picture" alt="Profile Picture" />
        <?php endif; ?>
        <br /><br />
        <?php if ($this->step == 'upload'): ?>
    <script type="text/javascript">
    function fileSelected() {
        var count = document.getElementById('fileToUpload').files.length;
        document.getElementById('details').innerHTML = "";
        for (var index = 0; index < count; index ++)
        {
              var file = document.getElementById('fileToUpload').files[index];
            var fileSize = 0;
            if (file.size > 1024 * 1024)
                  fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            
            document.getElementById('details').innerHTML += 'Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
            document.getElementById('details').innerHTML += '<p>';
            
            $("input[name='mime']").val(file.type);
        }
    }
 
    function uploadFile() {
        var fd = new FormData();
        var count = document.getElementById('fileToUpload').files.length;
        for (var index = 0; index < count; index ++)
        {
              var file = document.getElementById('fileToUpload').files[index];
            fd.append('myFile', file);
        }
 
        var xhr = new XMLHttpRequest()
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "<?php echo MOBILE_REL; ?>/ajax.php?s=avatar&d=mobile&unique=<?php echo $this->unique; ?>");
        xhr.send(fd);
    }
 
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          $("#progress").show();
          $("#slider").val(percentComplete.toString());
          $("#slider").slider('refresh');
        } else {
          document.getElementById('progress').innerHTML = 'unable to compute';
        }
    }

    function uploadComplete(evt) {
          $("#avatar-form").submit();
    }
 
    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }
 
    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }
    </script>
        <form id="avatar-form" enctype="multipart/form-data" method="post" action="<?php echo MOBILE_REL; ?>/user/avatar/">
            <input name="submit-avatar" type="hidden">
            <input name="unique" type="hidden" value="<?php echo $this->unique; ?>">
            <input name="mime" type="hidden" value="">
            <label for="fileToUpload">Take or select photo(s)</label>
            <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
              <div id="details"></div>
              <div id="progress" style="display: none;">
                  <input type="range" name="slider" id="slider" data-highlight="true" min="0" max="100" value="0">
              </div>
            <input type="button" onclick="uploadFile();" value="Upload" /> 
        </form>
        <?php else: ?>
        <link rel="stylesheet" href="<?php echo TPL_REL; ?>/css/jquery.cropbox.css">
        <script type="text/javascript" src="<?php echo TPL_REL; ?>/js/hammer.js"></script>
        <script type="text/javascript" src="<?php echo TPL_REL; ?>/js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="<?php echo TPL_REL; ?>/js/jquery.cropbox.js"></script>
        <script type="text/javascript">
        $(function () {
              var r = $('#results'),
                  x = $('.cropX', r),
                  y = $('.cropY', r),
                  w = $('.cropW', r),
                  h = $('.cropH', r);
                  input = $("input[name='crop']");
              
              $('#cropimage').cropbox({
                  width: 200,
                  height: 220,
                  showControls: 'always'
              }).on('cropbox', function (event, results, img) {
                  x.text(results.cropX);
                  y.text(results.cropY);
                  w.text(results.cropW);
                  h.text(results.cropH);
                  input.attr('value', img.getDataURL());
              });
        });
        </script>
        <img id="cropimage" alt="" src="<?php echo $this->url; ?>" cropwidth="<?php echo $this->width; ?>" cropheight="<?php echo $this->height; ?>"/>
        <div id="results">
              <b>X</b>: <span class="cropX"></span>
              <b>Y</b>: <span class="cropY"></span>
              <b>W</b>: <span class="cropW"></span>
              <b>H</b>: <span class="cropH"></span>
        </div>
        <form id="avatar-crop-form" enctype="multipart/form-data" method="post" action="<?php echo MOBILE_REL; ?>/user/avatar/">
            <input name="crop" type="hidden" id="download" value="">
            <input name="submit-crop" type="submit" id="submit-crop" value="Crop" /> 
        </form>
        <?php endif; ?>
    </div>