Messagebar Svelte（メッセージバー・Svelte）コンポーネント

Messagebar Svelteコンポーネントは、Framework7のMessagebarコンポーネントを表しています。

Messagebar コンポーネント

以下のコンポーネントが含まれています。

Messagebar - メインのメッセージバー要素
MessagebarSheet - メッセージバーのシート要素
MessagebarSheetImage - メッセージバーのシートイメージアイテム
MessagebarSheetItem - メサゲバーシートのアイテム
MessagebarAttachments - メッセージバーの添付ファイルの要素
MessagebarAttachment - 単独のメッセージバーの添付ファイル要素

Messagebar のプロパティ

Prop	Type	Default	Description
<Messagebar> properties
init	boolean	true	メッセージバーの初期化
name	string		テキストエリアの "name "属性
textareaId	string number		テキストエリアの "id "属性
placeholder	string	Message	テキストエリアのプレースホルダーテキスト
value	string number		テキストエリアの値
readonly	boolean	false	readonly "テキストエリア属性の設定
disabled	boolean	false	テキストエリアの "disbled "属性の設定
sendLink	string		送信リンクを有効にし、そのテキストを指定します。このプロパティは、`send-link`スロットを使用した場合には無視されます。
maxHeight	number		サイズ変更可能なテキストエリアの最大高さを定義する
resizable	boolean	true	サイズ変更可能なテキストエリアを有効にします。
sheetVisible	boolean	false	メッセージバーのシートの表示/非表示を切り替えます。
attachmentsVisible	boolean	false	メッセージバーの添付ファイルの表示/非表示を切り替えます。
resizePage	boolean	true	有効にすると、メッセージバーのテキストエリアのサイズが変更されたときに、メッセージページのサイズを変更します。
<MessagebarSheetImage> properties
image	string		シート画像のURL
checked	boolean	false	このシート画像アイテムがチェックされているかどうかを示します。
<MessagebarAttachment> properties
image	string		添付ファイル画像のURL
deletable	boolean	true	添付ファイルが削除可能かどうかを指定します。削除可能な場合には、追加の削除ボタンが表示されます。

メッセージバーのイベント

Event	Arguments	Description
<Messagebar> events
change	(event)	messagebar の textarea 要素で「change」イベントが発生すると、イベントが発生します。
input	(event)	イベントは、messagebar textarea要素で「input」イベントが発生すると発生します。
focus	(event)	messagebar textarea要素で「focus」イベントが発生するとイベントが発生します。
blur	(event)	イベントは、messagebar textarea 要素で「blur」イベントが発生したときにトリガーされます。
submit send	(value, clear)	ユーザがメッセージバーの「送信リンク」をクリックするとイベントが発生する
<MessagebarSheetImage> events
change	(event)	シートアイテムのチェックボックスの変更でイベントが発生する
<MessagebarAttachment> events
attachmentClick	(event)	添付ファイルをクリックするとイベントが発生する
attachmentDelete	(event)	添付ファイルの削除ボタンをクリックするとイベントが発生する

Messagebar Slots

Messagebar Svelte コンポーネントには、カスタムエレメント用の追加スロットがあります。

default - 要素は <div class="toolbar-inner"> の最後に挿入されます。
buffer-area - 要素はtextareaの直前に挿入されます。メッセージバーの添付ファイルはこちら
after-area - 要素はテキストエリアの直後に挿入されます。
send-link - 要素は、送信リンクの内側に挿入されます。
before-inner - 要素が <div class="toolbar-inner"> の直前に挿入されます。
after-inner -
`.要素の直後に要素が挿入されます。メッセージバーシートはこちら
inner-start -
`. elementの最初に挿入されます。
inner-end -
. elementの最後に挿入されます。default スロットと同じです。

<Messagebar placeholder="Message">
  <div slot="before-inner">Before inner</div>
  <div slot="after-inner">After inner</div>
  <div slot="before-area">Before textarea</div>
  <div slot="after-area">After textarea</div>
  <i class="f7-icons" slot="send-link">arrow_up_fill</i>
  <div>Default slot</div>
</Messagebar>

レンダリングされます。

<div class="toolbar messagebar">
  <div>Before inner</div>
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <div>Before textarea</div>
      <textarea placeholder="Message"></textarea>
      <div>After textarea</div>
    </div>
    <a href="#" class="link">
      <i class="f7-icons" slot="send-link">arrow_up_fill</i>
    </a>
    <div>Default slot</div>
  </div>
  <div>After inner</div>
</div>

メッセージバーインスタンスへのアクセス

自動初期化機能を使ってMessagebarを初期化し（init={true}プロップを使用）、そのメソッドとプロパティを使用する必要がある場合、.instance()コンポーネントのメソッドを呼び出すことで、初期化されたインスタンスにアクセスすることができます。例えば、以下のようになります。

<Messagebar bind:this={component}>...</Messagebar>

<script>
  let component;

  // を使って、あるメソッドでインスタンスを取得することができます。
  component.instance()
</script>

Examples

ここでは、Messagesと一緒に使用できるMessagesページの完全な例を紹介します。

<Page>
  <Navbar title="Messages" />

  <Messagebar
    placeholder={placeholder}
    attachmentsVisible={attachmentsVisible}
    sheetVisible={sheetVisible}
    value={messageText}
    onInput={(e) => messageText = e.target.value}
  >
    <a class="link icon-only" slot="inner-start" on:click={() => sheetVisible = !sheetVisible}>
      <Icon
        ios="f7:camera_fill"
        aurora="f7:camera_fill"
        md="material:camera_alt"
      />
    </a>
    <a class="link icon-only" slot="inner-end" on:click={sendMessage}>
      <Icon
        ios="f7:arrow_up_circle_fill"
        aurora="f7:arrow_up_circle_fill"
        md="material:send"
      />
    </a>
    <MessagebarAttachments>
      {#each attachments as image, index (index)}
        <MessagebarAttachment
          key={index}
          image={image}
          onAttachmentDelete={() => deleteAttachment(image)}
        ></MessagebarAttachment>
      {/each}
    </MessagebarAttachments>
    <MessagebarSheet>
      {#each images as image, index (index)}
        <MessagebarSheetImage
          key={index}
          image={image}
          checked={attachments.indexOf(image) >= 0}
          onChange={handleAttachment}
        ></MessagebarSheetImage>
      {/each}
    </MessagebarSheet>
  </Messagebar>

  <Messages>
    <MessagesTitle><b>Sunday, Feb 9,</b> 12:58</MessagesTitle>
    {#each messagesData as message, index (index)}
      <Message
        type={message.type}
        image={message.image}
        name={message.name}
        avatar={message.avatar}
        first={isFirstMessage(message, index)}
        last={isLastMessage(message, index)}
        tail={isTailMessage(message, index)}
        htmlText={message.text}
      />
    {/each}
    {#if typingMessage}
      <Message
        type="received"
        typing={true}
        first={true}
        last={true}
        tail={true}
        header={`${typingMessage.name} is typing`}
        avatar={typingMessage.avatar}
      ></Message>
    {/if}
  </Messages>
</Page>
  


<script>
  import { onMount } from 'svelte';
  import {
    f7,
    f7ready,
    App,
    View,
    Navbar,
    Page,
    Messages,
    MessagesTitle,
    Message,
    Messagebar,
    Icon,
    MessagebarAttachments,
    MessagebarAttachment,
    MessagebarSheet,
    MessagebarSheetImage,
  } from 'framework7-svelte';

  let messagebarInstance;

  let attachments = [];
  let sheetVisible = false;
  let typingMessage = null;
  let messageText = '';
  let messagesData = [
    {
      type: 'sent',
      text: 'Hi, Kate',
    },
    {
      type: 'sent',
      text: 'How are you?',
    },
    {
      name: 'Kate',
      type: 'received',
      text: 'Hi, I am good!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Blue Ninja',
      type: 'received',
      text: 'Hi there, I am also fine, thanks! And how are you?',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
    {
      type: 'sent',
      text: 'Hey, Blue Ninja! Glad to see you ;)',
    },
    {
      type: 'sent',
      text: 'Hey, look, cutest kitten ever!',
    },
    {
      type: 'sent',
      image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',
    },
    {
      name: 'Kate',
      type: 'received',
      text: 'Nice!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Kate',
      type: 'received',
      text: 'Like it very much!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Blue Ninja',
      type: 'received',
      text: 'Awesome!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
  ];
  const images = [
    'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
    'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
    'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
    'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
    'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
    'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
    'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
    'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
    'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
    'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
  ];
  const people = [
    {
      name: 'Kate Johnson',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Blue Ninja',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
  ];
  const answers = [
    'Yes!',
    'No',
    'Hm...',
    'I am not sure',
    'And what about you?',
    'May be ;)',
    'Lorem ipsum dolor sit amet, consectetur',
    'What?',
    'Are you sure?',
    'Of course',
    'Need to think about it',
    'Amazing!!!',
  ];
  let responseInProgress = false;

  $: attachmentsVisible = attachments.length > 0;
  $: placeholder = attachments.length > 0 ? 'Add comment or Send' : 'Message';

  onMount(() => {
    f7ready(() => {
      messagebarInstance = f7.messagebar.get('.messagebar');
    });
  });

  function isFirstMessage(message, index) {
    const previousMessage = messagesData[index - 1];
    if (message.isTitle) return false;
    if (
      !previousMessage ||
      previousMessage.type !== message.type ||
      previousMessage.name !== message.name
    )
      return true;
    return false;
  }
  function isLastMessage(message, index) {
    const nextMessage = messagesData[index + 1];
    if (message.isTitle) return false;
    if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
      return true;
    return false;
  }
  function isTailMessage(message, index) {
    const nextMessage = messagesData[index + 1];
    if (message.isTitle) return false;
    if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
      return true;
    return false;
  }
  function deleteAttachment(image) {
    const index = attachments.indexOf(image);
    attachments.splice(index, 1);
    attachments = attachments;
  }
  function handleAttachment(e) {
    const index = f7.$(e.target).parents('label.checkbox').index();
    const image = images[index];
    if (e.target.checked) {
      // Add to attachments
      attachments.unshift(image);
    } else {
      // Remove from attachments
      attachments.splice(attachments.indexOf(image), 1);
    }
    attachments = attachments;
  }
  function sendMessage() {
    const text = messageText.replace(/\n/g, '<br>').trim();
    const messagesToSend = [];
    attachments.forEach((attachment) => {
      messagesToSend.push({
        type: 'sent',
        image: attachment,
      });
    });
    if (text.length) {
      messagesToSend.push({
        text,
        type: 'sent',
      });
    }
    if (messagesToSend.length === 0) {
      return;
    }

    // Reset attachments
    attachments = [];
    // Hide sheet
    sheetVisible = false;
    // Send message
    messagesData = [...messagesData, ...messagesToSend];
    // Clear
    messageText = '';
    messagebarInstance.clear();

    // Focus area
    if (text.length) messagebarInstance.focus();

    // Mock response
    if (responseInProgress) return;
    responseInProgress = true;

    setTimeout(() => {
      const answer = answers[Math.floor(Math.random() * answers.length)];
      const person = people[Math.floor(Math.random() * people.length)];
      typingMessage = {
        name: person.name,
        avatar: person.avatar,
      };
      setTimeout(() => {
        messagesData = [
          ...messagesData,
          {
            text: answer,
            type: 'received',
            name: person.name,
            avatar: person.avatar,
          },
        ];
        typingMessage = null;
        responseInProgress = false;
      }, 4000);
    }, 1000);
  }
</script>