Gemfury

marcdupain / insync deb

Repository URL to install this package:
Details
insync / usr / lib / insync / ideskui / html / share.html
<!doctype html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/typeahead.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/share.css">
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/handlebars.min.js"></script>
    <script type="text/javascript" src="js/typeahead.min.js"></script>
    <script type="text/javascript" src="js/common-old.js"></script>
    <script type="text/javascript" src="js/drag.js"></script>
    <script type="text/javascript">
      /*
       * Share
       */

      var memberRoleLabels = {
        'organizer': 'can edit',
        'writer': 'can edit',
        'reader': 'can view',
        'commenter': 'can comment'
      }

      var Share = function() {
        var self = this;

        self.$node = $('#share');
        self.$addSharees = self.$node.find('#add-sharees');
        self.$shareeInput = self.$node.find('#sharee-input');
        self.$messageOption = self.$node.find('#message-option');
        self.$messageInput = self.$node.find('#message-input');
        self.$messageToggled = false;
        self.$shareCommit = self.$node.find('#share-commit');
        self.$shareOption = self.$node.find('#share-option');

        self.$permissions = self.$node.find('#permissions');
        self.$permissionsUl = self.$node.find('#permissions > ul');

        self.$memberListItem = $('#member-list-item');
        self.$memberNumber = self.$memberListItem.find('.number');
        self.$memberListArrow = self.$memberListItem.find('.arrow')
        self.$membersShown = false;

        self.$advancedOpen = self.$node.find('#advanced-open');

        self.$advanced = $('#advanced');
        self.$url = self.$advanced.find('#url').hide();
        self.$editorSharePermission = self.$advanced.find('#editor-share-permission');
        self.$access = self.$advanced.find('#access').hide();

        self.$advancedOpen.on('click', function(e) {
          e.preventDefault();
          self.toggleAdvanced(true);
        });

        self.$advanced.on('click', function(e) {
          if (e.target.id == 'advanced') {
            self.toggleAdvanced(false);
          }
        });

        $('#visibility input[type=radio]').change(function(e) {
          var isPrivate = $(this).val() == 'private';
          if (isPrivate) {
            self.$url.hide();
            self.$access.hide();
          } else {
            self.$url.show();
            self.$access.show();
          }
        });
      };

      Share.prototype.toggleMembers = function() {
        this.$membersShown = !this.$membersShown;
        if (this.$membersShown) {
          this.$permissions.addClass('show-members');
          this.$memberListArrow.addClass('up');
        } else {
          this.$permissions.removeClass('show-members');
          this.$memberListArrow.removeClass('up');
        }
      }

      Share.prototype.toggleAdvanced = function(toggled) {
        var self = this,
            $panel = self.$advanced.find('.panel').addClass('start');
        self.$advanced.toggle(toggled);
        if (toggled) {
          setTimeout(function() {
            $panel.removeClass('start');
          }, 1);
          $('#close').hide();
        } else {
          $('#close').show();
        }
      }

      Share.prototype.toggleMessageInput = function(toggled) {
        if (toggled) {
          this.$messageInput.val('');
          this.$messageInput.hide();
          this.$messageOption.text("Remove message");
          this.$permissions.height("230px");
          this.$addSharees.css({top: "274px"});
    		}
        else {
          this.$messageOption.text("Add message");
          this.$permissions.height("315px");
          this.$addSharees.css({top: "360px"});
        }
        this.$messageToggled = toggled;
        this.$messageInput.toggle(toggled);
      };

      Share.prototype.getTeamDriveItemScope = function() {
        var linkSharingOn = this.$linkSharing.prop('checked');
        var allowExternal = this.$allowExternal.prop('checked');
        var findLink = this.$findLink.prop('checked');
        if (!linkSharingOn) {
          scope = 'private';
        } else {
          scope = 'domain';
          if (allowExternal) {
            scope = 'anyone';
          }
          if (!findLink) {
            scope += '-link';
          }
        }
        scopeRole = this._teamDriveScopeRole;
        return [scope, scopeRole];
      };

      Share.prototype.toggleShareOptions = function() {
        var buttonText = "";
        // Check for any new sharee
        if (!jQuery.isEmptyObject(this.inserted)) {
          buttonText = "Share";
        }
        else { // Check for deleted/updated sharee and share properties of the file
          var writersCanShare = this.$editorSharePermission.prop('checked'),
              scope = $('input[name=scope]:checked').val(),
              scopeRole = $('input[name=scope-role]:checked').val() || 'reader';

          if (this.isTeamDriveItem) {
            var scopeInfo = this.getTeamDriveItemScope();
            scope = scopeInfo[0];
            scopeRole = scopeInfo[1];
          }

          if (!(this.deleted.length == 0 && jQuery.isEmptyObject(this.updated) // Check for deleted and updates sharees
              && scope == this._origScope && (writersCanShare == this._origWritersCanShare)) // check for change in scope or writers permissions to share
              || (scopeRole != this._origScopeRole && scope!= 'private')) { // consider the change in scope role only is scope is not private
            buttonText = "Save changes";
            this.toggleMessageInput(false);
          }
        }
        if (buttonText != "") {
          this.$shareOption.text(buttonText);
          this.$shareCommit.show();
        }
        else {
          this.$shareCommit.hide();
          this.toggleMessageInput(false);
        }
      };

      Share.prototype.init = function(title, userRole, writersCanShare, owner,
                                      sharees, scope, scopeRole, hasComments,
                                      domain, contacts, link,
                                      itemType, teamDriveName) {
        var self = this;

        self.deleted = [];
        self.updated = {};
        self.inserted = {};
        self._origScope = scope;
        self._origScopeRole = self._teamDriveScopeRole = scopeRole;
        self._origWritersCanShare = writersCanShare? true: false;
        self.canEditPermissions = userRole == 'owner' || (userRole == 'writer' && writersCanShare) || userRole == 'organizer';

        var maxLength = 40;
        if (title.length > maxLength) {
          title = title.substr(0, maxLength / 2) + '...' + title.substr(-(maxLength / 2 - 3));
        }
        $('#title').text(title);
        $('#url > input').val(link);
        $('#' + scope).prop('checked', true);
        if (scope == 'private') {
          self.$url.hide();
          self.$access.hide();
        } else {
          self.$url.show();
          self.$access.show();
          $('#scope-' + scopeRole).prop('checked', true);
        }
        if (!self.canEditPermissions) {
          $('#sharee-input').prop('disabled', true);
          $('.commit button').text("No permission").prop('disabled', true);
        }

        self.isTeamDrive = itemType == 'team-drive'
        self.isTeamDriveItem = itemType == 'team-drive-item'

        self.$teamDriveLinkSharing = $('#team-drive-item-link-sharing');
        if (self.isTeamDrive) {
          self.$advanced.hide();
          $('#advanced-open').hide();
        }

        if (self.isTeamDriveItem) {
          self.$teamDriveLinkSharing.show();
          self.$memberListItem.toggle(true);
          self.$memberListItem.find('.name').text(teamDriveName);
          var members = [];
          members = sharees.filter(function(s) {
            return s.type == 'member';
          });
          self.$memberNumber.text(members.length)
          members.forEach(function(member) {
            self.addMember(member);
          });

          sharees = sharees.filter(function(s) {
            return s.type == 'file';
          });

          self.$advancedOpen.text('Show link sharing');
          self.$advanced.find('h3').first().hide();
          self.$linkSharingHeader = $('#link-sharing-header');
          self.$linkSharingStatus = self.$linkSharingHeader.find('.status');
          $('#visibility').hide();
          self.$access.hide();
          $('#editor-sharing').hide();

          self.$allowExternal = $('#allow-external');
          self.$findLink = $('#find-link');
          self.$linkSharing = $('#link-sharing');
          self.$linkSharingDetails = $('#link-sharing-details');
          self.$privateMessage = $('#private-message');
          self.$teamDriveRole = $('#team-drive-role');
          self.$teamDriveRoleText = self.$teamDriveRole.find('#role-text');
          self.$teamDriveRoles = $('#team-drive-roles');
          self.$teamDriveRole.mouseenter(function() {
            self.$teamDriveRoles.show();
          });
          self.$teamDriveRole.mouseleave(function() {
            self.$teamDriveRoles.hide();
          });

          var allowExternal = false;
          var findLink = false;
          var linkSharingOn = true;
          if (self._origScope === 'private') {
            linkSharingOn = false;
          } else if (self._origScope === 'domain') {
            findLink = true;
          } else if (self._origScope === 'anyone') {
            allowExternal = true;
            findLink = true;
          } else if (self._origScope === 'anyone-link') {
            allowExternal = true;
          }
          self.$allowExternal.prop('checked', allowExternal);
          self.$findLink.prop('checked', findLink);
          self.$linkSharing.prop('checked', linkSharingOn);

          var updateLinkSharing = function() {
            var linkSharingOn = self.$linkSharing.prop('checked');

            if (linkSharingOn) {
              self.$linkSharingDetails.show();
              self.$linkSharingStatus.text('ON');
              self.$privateMessage.hide();
            } else {
              self.$linkSharingDetails.hide();
              self.$linkSharingStatus.text('OFF');
              self.$privateMessage.show();
            }

            var allowExternal = self.$allowExternal.prop('checked');

            if (allowExternal) {
              $('#who > .who').text('Anyone ');
              $('#who > .domain-name').hide();
            } else {
              $('#who > .who').text('People at ');
              $('#who > .domain-name').show();
            }

            var findLink = self.$findLink.prop('checked');
            if (findLink) {
              $('#who > .with-link').hide();
            } else {
              $('#who > .with-link').show();
            }

            self.$teamDriveRoleText.text(memberRoleLabels[self._teamDriveScopeRole] || 'can edit');
          }
          updateLinkSharing();

          self.$linkSharing.change(updateLinkSharing);
          self.$allowExternal.change(updateLinkSharing);
          self.$findLink.change(updateLinkSharing);
          self.$url.show();

          self.$teamDriveRoles.find('span').on('click', function(e) {
            self._teamDriveScopeRole = e.target.id;
            self.$teamDriveRoles.hide();
            updateLinkSharing();
          });
        } else {
          self.$teamDriveLinkSharing.hide();
          self.$editorSharePermission.prop('checked', writersCanShare);
          self.$editorSharePermission.prop('disabled', userRole != 'owner');

        }

        hasComments = hasComments || self.isTeamDrive || self.isTeamDriveItem
        if (!hasComments) {
          $('#share').addClass('no-comments');
          $('#advanced').addClass('no-comments');
        }
        if (domain) {
          $('.domain-name').text(domain);
        } else {
          $('.domain-option').remove();
        }

        if (!self.$shareeInput.data('typeahead')) {
          self.$shareeInput.typeahead({
            name: 'contacts',
            local: contacts.map(function(contact) {
              var email = contact[0],
                  name = contact[1];
              tokens = [email];
              if (name) {
                tokens = tokens.concat(name.toLowerCase().split(' '));
              }
              return {
                name: name,
                value: email,
                tokens: tokens
              }
            }),
            template: "<p>{{name}} &lt;{{value}}&gt;</p>",
            engine: new (function() {
              this.compile = function(str) {
                return new (function() {
                  this.render = Handlebars.compile(str);
                })();
              };
            })()
          });

          var typeahead = self.$shareeInput.data('typeahead');

          var clearInput = function() {
            typeahead.dropdownView.hide();
            typeahead.dropdownView.clearSuggestions();
            typeahead.inputView.setInputValue('');
            typeahead.inputView.setHintValue('');
            self.$shareeInput.val('');
          }

          var handleSelect = function(e) {
            var suggestionData = e.type === "select" ? e.data : this.dropdownView.getSuggestionUnderCursor()
            var email = suggestionData ? suggestionData.value : self.$shareeInput.val()

            if (/.+@.+\..+/.test(email)) {
              var values = {
                id: null,
                name: email,
                role: 'writer',
                email: email
              };
              self.add(values, true);
              self.inserted[email] = 'writer';
              clearInput();
              self.toggleShareOptions();
            }
          }

          $('#add').on('click', $.proxy(handleSelect, typeahead))

          typeahead.inputView
            .on('enter', $.proxy(handleSelect, typeahead))
            .on('esc', clearInput);
          typeahead.dropdownView.on('select', $.proxy(handleSelect, typeahead));
        }

        if (itemType === 'normal') {
          self.add({
            id: null,
            name: owner,
            role: 'owner',
            email: null
          });
        }

        sharees.forEach(function(sharee) {
          self.add(sharee);
        });

        self.toggleShareOptions();
        hideOverlay();
      };

      Share.prototype.add = function(values, prepend) {
        var sharee = new Sharee(values);
        sharee.parent = this; // Reference back to share instance
        if (prepend) {
          var $el;
          if (self.isTeamDriveItem) {
            $el = this.$permissionsUl.find('> li.member').last();
          } else {
            $el = this.$permissionsUl.find('> li:first-child');
          }
          var $added = $el.after(sharee.render());
          $added[0] && $added[0].scrollIntoView();
        } else {
          this.$permissionsUl.append(sharee.render());
        }
      };

      Share.prototype.addMember = function(values) {
        var html = $.trim(Share.memberTemplate(values));
        var $node = $(html);
        $node.find('.subtext').text(memberRoleLabels[values.role]);
        this.$permissionsUl.append($node);
      };

      Share.prototype.setURL = function(url) {
        this.$url.find('input[type=text]').val(url);
      }

      Share.prototype.copyLink = function() {
        callPy('copy_to_clipboard', this.$url.find('input[type=text]').val());
        this.$url.find('button > span').text('Copied!');
      }

      Share.prototype.save = function() {
        var writersCanShare = this.$editorSharePermission.prop('checked'),
            scope = $('input[name=scope]:checked').val(),
            scopeRole = $('input[name=scope-role]:checked').val() || 'reader';
            message = this.$messageInput.val();

        if (this.isTeamDriveItem) {
          var scopeInfo = this.getTeamDriveItemScope();
          scope = scopeInfo[0];
          scopeRole = scopeInfo[1];
        }

        callPy('save', this.deleted, this.updated, this.inserted,
               writersCanShare, scope, scopeRole, message);

        showOverlay('loading', 'Saving&hellip;', []);
      };

      /*
       * Sharee
       */

      var Sharee = function(values) {
        this.id = values.id;
        this.name = values.name;
        this.role = values.role;
        this.email = values.email;
        this.owner = values.role == 'owner';
        this._origValues = values;
      };

      Sharee.prototype.render = function() {
        var self = this,
            html = $.trim(Sharee.template(self)),
            $node = self.$node = $(html);

        $node.find('.roles > .' + self.role).addClass('role');

        if (self.parent.canEditPermissions || self.role === 'organizer') {
          // Remove event

          $node.find('.remove.button').on('click', function (e){
            if (self.id) {
                self.parent.deleted.push(self.id);
            } else {
                delete self.parent.inserted[self.email];
            }
            self.parent.toggleShareOptions();
            $node.remove();
          });

          // Update role event

          var $roles = $node.find('.roles li');

          $roles.on('click', function(e) {
            $roles.removeClass('role');

            var $el = $(this),
                newRole = $el.attr('class');

            self.role = newRole;
            $el.addClass('role');

            if (!self.id && self.email) { // new
              self.parent.inserted[self.email] = newRole;
            } else if (self._origValues.role == newRole) { // no change
              delete self.parent.updated[self.id];
            } else { // updated
              self.parent.updated[self.id] = newRole;
            }
            self.parent.toggleShareOptions();
          });
        }

        return $node;
      };

      function init() {
        showOverlay('loading', 'Loading&hellip;', [
           {
            html: 'Cancel',
            onClick: function (e) {
              closeWindow();
            }
          },
        ]);
        callPy('init_values');
      }

      function errorLoading() {
        showOverlay('error', 'There was an error loading.', [
          {
            html: 'Retry',
            onClick: function(e) {
              init();
            }
          },
          {
            html: 'Close',
            onClick: function(e) {
              closeWindow();
            }
          }
        ]);
      }

      function errorSaving() {
        showOverlay('error', 'There was an error saving your changes.', [
          {
            html: 'OK',
            onClick: function(e) {
              init();
            }
          }
        ]);
      }

    </script>
  </head>
  <body>
    <div class="app-bar window-drag-handle">
      <span class="window-drag-handle">Share</span>
      <div class="close" onclick=closeWindow()></div>
    </div>
    <div id="share" class="stretch">
      <h1 id="title"></h1>
      <span id="shared-to">shared to</span>
      <a id="advanced-open" href="#">Show advanced options</a>

      <div id="permissions">
        <ul>
          <li id="member-list-item" class="simple-item" onclick="share.toggleMembers()">
            <span class="name"></span><span class="arrow"></span>
            <span class="subtext">Team Drive (<span class="number"></span> members)</span>
          </li>
        </ul>
      </div><!-- #permissions -->

      <div id="add-sharees">
        <input id="sharee-input" type="text" placeholder="Add sharees by entering their email addresses">
        <button id="add"></button>
        <button id="message-option" class="button" onClick="share.toggleMessageInput(!share.$messageToggled);">Add message</button>
        <textarea id="message-input" placeholder="Enter message for the new sharees..."></textarea>
      </div>
      <div class="commit" id="share-commit">
        <button class="button" id="share-option" onclick="share.save()">Save changes</button>
        <button class="button" onclick="closeWindow()">Cancel</button>
      </div>

    </div><!-- #share -->

    <div id="advanced">

      <div class="panel">

      <h3>Visibility</h3>
      <ul id="visibility">
        <li><label for="private"><input type="radio" name="scope" id="private" value="private">
          Private</label></li>
        <li class="domain-option"><label for="domain-link"><input type="radio" name="scope" id="domain-link" value="domain-link">
          People at <span class="domain-name"></span> with the link</label></li>
        <li class="domain-option"><label for="domain"><input type="radio" name="scope" id="domain" value="domain">
          People at <span class="domain-name"></span></label></li>
        <li><label for="anyone-link"><input type="radio" name="scope" id="anyone-link" value="anyone-link">
          Anyone with the link</label></li>
        <li><label for="anyone"><input type="radio" name="scope" id="anyone" value="anyone">
          Public on the Web</label></li>
      </ul>

      <!-- Team Drive items -->
      <div id="team-drive-item-link-sharing">
        <h3 id="link-sharing-header">
          Link sharing <span class="status"></span>
        </h3>
        <label for="link-sharing">
          <input type="checkbox" id="link-sharing">
          OFF <span></span> ON
        </label>
        <span id="private-message">Accessible only to specific people</span>
        <div id="link-sharing-details">
          <div>
            <span id="who">
              <span class="who"></span>
              <span class="domain-name"></span>
              <span class="with-link">with the link</span>
            </span>
            <span id="team-drive-role">
              <span id="role-text">
              </span>
              <span id="role-arrow">
              </span>
              <ul id="team-drive-roles">
                <span id="writer">can edit</span>
                <span id="commenter">can comment</span>
                <span id="reader">can view</span>
              </ul>
            </span>
          </div>
          <label for="allow-external"><input type="checkbox" id="allow-external">
            Links can be shared outside of <span class="domain-name"></span>
          </label>
          <label for="find-link"><input type="checkbox" id="find-link">
            People can find the link in search results
          </label>
        </div>
      </div>

      <p id="url">
        <input type="text" value="https://docs.google.com/" disabled><button class="button" onClick="share.copyLink()"><span>Copy</span></button>
      </p>

      <div id="access">
        <h3>Access</h3>
        <ul>
          <li class="writer"><label for="scope-writer"><input type="radio" name="scope-role" id="scope-writer" value="writer"> Can edit</label></li>
          <li class="commenter"><label for="scope-commenter"><input type="radio" name="scope-role" id="scope-commenter" value="commenter"> Can comment</label></li>
          <li class="reader"><label for="scope-reader"><input type="radio" name="scope-role" id="scope-reader" value="reader" checked> Can view</label></li>
        </ul>
      </div>

      <div id="editor-sharing">
        <h3>Sharing</h3>
        <p>
          <label for="editor-share-permission"><input type="checkbox" id="editor-share-permission">
            Editors are allowed to add people and change visibility.
          </label>
        </p>
      </div>

      <div class="commit">
        <button class="button" onclick="share.toggleAdvanced(false); share.toggleShareOptions();">Done</button>
      </div>

      </div><!-- .panel -->

    </div><!-- #advanced -->

    <div id="watermark">
      <img src="images/watermark.png" width="96">
    </div>

    <div id="overlay"></div>

    <script id="sharee-template" type="text/x-handlebars-template">
      <li class="cf">
        <span class="name">{{name}}</span>
        {{#unless owner}}
          <button class="remove button"></button>
        {{/unless}}
        <ul class="roles">
        {{#if owner}}
          <li class="owner">owner</li>
        {{else}}
          {{#if parent.isTeamDrive}}
            <li class="organizer">manager</li>
            <li class="fileOrganizer">content manager</li>
            <li class="writer">contributor</li>
            <li class="commenter">commenter</li>
            <li class="reader">viewer</li>
          {{else}}
            <li class="writer">edit</li>
            <li class="commenter">comment</li>
            <li class="reader">view</li>
          {{/if}}
        {{/if}}
        </ul>
      </li>
    </script>

    <script id="name-with-subtext" type="text/x-handlebars-template">
      <li class="simple-item member">
        <span class="name">{{name}}</span>
        <span class="subtext"></span>
      </li>
    </script>

    <script type="text/javascript">
      var share = new Share();
      // Setup templates
      Sharee.template = Handlebars.compile($('#sharee-template').remove().html());
      Share.memberTemplate = Handlebars.compile($('#name-with-subtext').remove().html());
      init();
    </script>
    <script src="js/debug.js"></script>
  </body>
</html>
marcdupain / insync deb

Products

About

Resources

Contact Gemfury
