編集履歴

質問編集履歴

jsファイル部分追加

2018/01/01 11:53

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -114,8 +114,6 @@
           <form id="image-form" action="#">
-            <input id="mediaCapture" type="file" accept="image/*,capture=camera">
             <button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
               <i class="material-icons">image</i>
@@ -154,15 +152,15 @@
   var config = {
-      apiKey: "XXXX",
+      apiKey: "XX",
-      authDomain: "XXXX.com",
+      authDomain: "XX.com",
-      databaseURL: "https://XXXX.firebaseio.com",
+      databaseURL: "https://XXX.firebaseio.com",
-      projectId: "XXYY",
+      projectId: "XYZ",
-      storageBucket: "XXXXYYYY.appspot.com",
+      storageBucket: "XXYY.appspot.com",
       messagingSenderId: "1234"
@@ -186,6 +184,380 @@
+main.js
+```
+'use strict';
+function FriendlyChat() {
+  this.checkSetup();
+  this.messageList = document.getElementById('messages');
+  this.messageForm = document.getElementById('message-form');
+  this.messageInput = document.getElementById('message');
+  this.submitButton = document.getElementById('submit');
+  this.submitImageButton = document.getElementById('submitImage');
+  this.imageForm = document.getElementById('image-form');
+  this.userPic = document.getElementById('user-pic');
+  this.userName = document.getElementById('user-name');
+  this.signInButton = document.getElementById('sign-in');
+  this.signOutButton = document.getElementById('sign-out');
+  this.signInSnackbar = document.getElementById('must-signin-snackbar');
+  this.messageForm.addEventListener('submit', this.saveMessage.bind(this));
+  this.signOutButton.addEventListener('click', this.signOut.bind(this));
+  this.signInButton.addEventListener('click', this.signIn.bind(this));
+  var buttonTogglingHandler = this.toggleButton.bind(this);
+  this.messageInput.addEventListener('keyup', buttonTogglingHandler);
+  this.messageInput.addEventListener('change', buttonTogglingHandler);
+  this.submitImageButton.addEventListener('click', function(e) {
+    e.preventDefault();
+  }.bind(this));
+  this.initFirebase();
+}
+FriendlyChat.prototype.initFirebase = function() {
+  this.auth = firebase.auth();
+  this.database = firebase.database();
+  this.store = firebase.storage();
+  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
+};
+FriendlyChat.prototype.loadMessages = function() {
+  this.messagesRef = this.database.ref('messages');
+  this.messagesRef.off();
+  var setMessage = function(data) {
+    var val = data.val();
+    this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
+  }.bind(this);
+  this.messagesRef.limitToLast(12).on('child_added', setMessage);
+  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
+};
+FriendlyChat.prototype.saveMessage = function(e) {
+  e.preventDefault();
+  if (this.messageInput.value && this.checkSignedInWithMessage()) {
+    var currentUser = this.auth.currentUser;
+    this.messagesRef.push({
+      name: currentUser.displayName,
+      text: this.messageInput.value,
+      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
+    }).then(function() {
+      FriendlyChat.resetMaterialTextfield(this.messageInput);
+      this.toggleButton();
+    }.bind(this)).catch(function(error) {
+      console.error('Error writing new message to Firebase Database', error);
+    });
+  }
+};
+FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
+  imgElement.src = imageUri;
+};
+FriendlyChat.prototype.signIn = function() {
+  var provider = new firebase.auth.GoogleAuthProvider();
+  firebase.auth().signInWithPopup(provider).then(function(result) {
+    var token = result.credential.accessToken;
+    var user = result.user;
+  }).catch(function(error) {
+  });
+};
+FriendlyChat.prototype.signOut = function() {
+  this.auth.signOut();
+};
+FriendlyChat.prototype.onAuthStateChanged = function(user) {
+  if (user) { // User is signed in!
+    var profilePicUrl = user.photoURL;
+    var userName = user.displayName;
+    this.userPic.style.backgroundImage = 'url(' + profilePicUrl + ')';
+    this.userName.textContent = userName;
+    this.userName.removeAttribute('hidden');
+    this.userPic.removeAttribute('hidden');
+    this.signOutButton.removeAttribute('hidden');
+    this.signInButton.setAttribute('hidden', 'true');
+    this.loadMessages();
+    this.saveMessagingDeviceToken();
+  } else {
+    this.userName.setAttribute('hidden', 'true');
+    this.userPic.setAttribute('hidden', 'true');
+    this.signOutButton.setAttribute('hidden', 'true');
+    this.signInButton.removeAttribute('hidden');
+  }
+};
+FriendlyChat.prototype.checkSignedInWithMessage = function() {
+  if (this.auth.currentUser) {
+    return true;
+  }
+  var data = {
+    message: 'You must sign-in first',
+    timeout: 2000
+  };
+  this.signInSnackbar.MaterialSnackbar.showSnackbar(data);
+  return false;
+};
+FriendlyChat.resetMaterialTextfield = function(element) {
+  element.value = '';
+  element.parentNode.MaterialTextfield.boundUpdateClassesHandler();
+};
+FriendlyChat.MESSAGE_TEMPLATE =
+    '<div class="message-container">' +
+    (省略)
+    '</div>';
+FriendlyChat.prototype.displayMessage = function(key, name, text, picUrl, imageUri) {
+  var div = document.getElementById(key);
+  if (!div) {
+    var container = document.createElement('div');
+    container.innerHTML = FriendlyChat.MESSAGE_TEMPLATE;
+    div = container.firstChild;
+    div.setAttribute('id', key);
+    this.messageList.appendChild(div);
+  }
+  if (picUrl) {
+    div.querySelector('.pic').style.backgroundImage = 'url(' + picUrl + ')';
+  }
+  div.querySelector('.name').textContent = name;
+  var messageElement = div.querySelector('.message');
+  if (text) {
+    messageElement.textContent = text;
+    messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
+  } else if (imageUri) {
+    var image = document.createElement('img');
+    image.addEventListener('load', function() {
+      this.messageList.scrollTop = this.messageList.scrollHeight;
+    }.bind(this));
+    this.setImageUrl(imageUri, image);
+    messageElement.innerHTML = '';
+    messageElement.appendChild(image);
+  }
+  setTimeout(function() {div.classList.add('visible')}, 1);
+  this.messageList.scrollTop = this.messageList.scrollHeight;
+  this.messageInput.focus();
+};
+FriendlyChat.prototype.toggleButton = function() {
+  if (this.messageInput.value) {
+    this.submitButton.removeAttribute('disabled');
+  } else {
+    this.submitButton.setAttribute('disabled', 'true');
+  }
+};
+FriendlyChat.prototype.checkSetup = function() {
+  if (!window.firebase || !(firebase.app instanceof Function) || !firebase.app().options) {
+    window.alert('You have not configured and imported the Firebase SDK.');
+  }
+};
+window.onload = function() {
+  window.friendlyChat = new FriendlyChat();
+};
+```
 足りない情報等ありましたら、ご指摘お願いします。