indentlabs/notebook

<div id="share-modal" class="modal">
  <div class="modal-content">
    <h4>
      <i class="material-icons <%= shared_content.class.text_color %> right"><%= shared_content.class.icon %></i>
      Share <%= shared_content.name %>
    </h4>

    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="share_url" readonly onclick="this.focus();this.select()" value="<%= polymorphic_url(shared_content) %>">
        <label for="share_url">Shareable URL</label>
      </div>
    </div>

    <% if current_user && shared_content.user == current_user %>
      <div class="row">
        <div class="col s12 center">
          To be shared, content must either be public <strong>or</strong> in a public Universe.

          <%= link_to 'https://medium.com/indent-labs/privacy-on-notebook-ai-how-it-works-c23a59faeae2', class: 'blue-text lighten-1', target: '_new' do %>
            Learn more about sharing on Notebook.ai.
          <% end %>
        </div>
        <div class="col s12 center grey-text">
          Changes are saved automatically and can be changed at any time.
        </div>
      </div>

      <div class="row">
        <% if ((shared_content.respond_to? :universe) && shared_content.universe.present?) %>
          <div class="col s12 m12 l6">
            <div class="hoverable card <%= Universe.color %> lighten-4">
              <div class="card-content">
                <div class="card-title">Universe-wide sharing</div>
                <%= 
                  react_component("PrivacyToggle", {
                    content:       shared_content.universe.attributes.slice('id', 'name', 'page_type', 'privacy'),
                    content_icon:  Universe.icon,
                    content_color: Universe.color,
                    submit_path:   polymorphic_path(shared_content.universe),
                    csrf_token:    form_authenticity_token
                  })
                %>
              </div>
            </div>
          </div>
        <% end %>

        <% if shared_content.respond_to? :privacy %>
          <div class="col s12 m12 l6">
            <div class="hoverable card <%= shared_content.class.color %> lighten-4">
              <div class="card-content">
                <div class="card-title">Page-specific sharing</div>
                <%=
                  # Big oof here.
                  content_obj = if shared_content.is_a?(Document)
                    {
                      id:        shared_content.id,
                      name:      shared_content.title,
                      page_type: 'Document',
                      privacy:   shared_content.privacy
                    }
                  else
                     shared_content.attributes.slice('id', 'name', 'page_type', 'privacy')
                  end

                  react_component("PrivacyToggle", {
                    content:       content_obj,
                    content_icon:  shared_content.class.icon,
                    content_color: shared_content.class.color,
                    submit_path:   polymorphic_path(shared_content),
                    csrf_token:    form_authenticity_token
                  })
                %>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <% if shared_content.is_a?(Universe) %>
        <div class="row">
          <p class="col s12">
            Sharing this universe will allow all pages within it to also be viewed.
            If you'd like to share specific pages, you should share those pages directly instead.
          </p>
        </div>
      <% end %>


      <div class="col s12 m6">
        <%= link_to [
          'http://twitter.com/share?',
          'url=' + CGI.escape(send("#{shared_content.class.name.downcase}_url", shared_content)),
          '&text=' + CGI.escape("I'm using Notebook.ai to create fictional worlds! You can see my #{shared_content.class.name.downcase} #{shared_content.name} at this link:")
        ].join, target: '_new' do %>
          <div class="hoverable card-panel white-text" style="background: #1DA1F2">
            <i class="left fa fa-twitter" style="font-size: 150%"></i>
            Share to Twitter
          </div>
        <% end %>
      </div>
      <div class="col s12 m6">
        <a 
            href="https://www.facebook.com/sharer/sharer.php?app_id=1523926344336934&u=<%= CGI.escape(send("#{shared_content.class.name.downcase}_url", shared_content)) %>&display=popup&ref=plugin&src=share_button" 
            onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">

          <div class="hoverable card-panel white-text" style="background: #4267B2">
            <i class="left fa fa-facebook" style="font-size: 150%"></i>
            Share to Facebook
          </div>
        </a>
      </div>

    <% else %>

      <div class="row">
        <p class="col s12">
          This <%= shared_content.class.to_s.downcase %> is being shared on Notebook.ai by <%= link_to shared_content.user.name, shared_content.user %>.
        </p>
      </div>

    <% end %>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">close</a>
  </div>
</div>