[feature] user private gitter message iframe

[serapath]

if the user profile card is expanded or flipped, there should be a way to send a private gitter message to the user, by embedding it in a small iframe in the user profile card.

https://gitter.im/{{username}}/~embed

example:
https://gitter.im/serapath/~embed

[serapath]

little example

var css2 = csjs`
  .chatbox {
    height: 400px;
    width: 200px;
    border: 1px dotted black;
  }
  .iframe {
    height: 300px;
    width: 200px;
    transform: scale(0.7);
  }
`
function makeGitterURL (username) {
  return `https://gitter.im/${username}/~embed`
}

function makeGitterChatbox (profile) {
  return bel`
    <div class=${css2.chatbox}>
      <h1> ${profile.name} </h1>
      <iframe class=${css2.iframe} src=${makeGitterURL(profile.username)}></iframe>
    </div>
  `
}

var exampleProfile = {
  name: 'nina',
  username: 'ninabreznik'
}

var x = makeGitterChatbox(exampleProfile)
document.body.appendChild(x)

[kiecoo]

There is gitter message iframe which i already combined some color idea from Lou
https://codepen.io/kiecoo/pen/PQZdOO?editors=1010

[serapath]

sweet. so maybe this needs now another module that would combine it with the profile card or something, but i saw that you want to give the profile card a try.

Do you have an idea how to combine them?
Maybe have a third component that takes the profile card and the chat and combines them by
making the whole thing "flippable" (front side: infos, back side: chat)

Also - there might need to be additional styling in order to make the chat look more usable.
there is one thing that could get you help started .chatbox { transform: scale(0.5); } would just shrink the whole thing, but this will cause problems with positioning.

It's not too important, we can improve this in the end, but yeah, would be sweet if it was a bit smaller so people could read more easily whats going on

[kiecoo]

OK~I could try it

[kiecoo]

I shrank the whole thing by changing the width&height.

( Because I failed to deal with problems with positioning of .chatbox { transform: scale(0.5); } , I tried another way by changing the width&height &found it could work )

---

• 【about : making the whole thing "flippable"】 (front side: infos, back side: chat)

1. would it look like this after combining? (I am not sure if this image is what our project wants to be )

2. when combining,I got stuck with 2 problems

I failed to move items from front side to back side**
(for example: change this-example into this-one)

I also failed to create a area to put in the gitterChatBox
(I guess that maybe the code of items are fixed ,so it could't allow to be changed)

• 【about creating a third component to combine】

(A.) does a third component mean that add a new function to put in the code of profileCard?

function combineProfileAndGitter...................       

or
(B.) a third component means creating a new module to import the module of make-gitter-chat &the profileCard one

var chat = require('make-gitter-chat')...........

[serapath]

Your link doesnt work for me, but the picture with front and back side looks good to me as a first iteration :-)

The code how you use the "new module" could look like this

var chatprofilecard = require('chat-profile-card')
var user = require('./userprofile.json')
var el = chatprofilecard(user)
document.body.appendChild(el)

and you would define it like so:

var bel = require('bel')
var csjs = require('csjs-inject')
var chatbox = require('chatbox')
var profilecard = require('profilecard')

module.export = chatprofilecard

var css = css`
  .chatprofilecard { margin: 0; }
  .frontside { color: red; }
  .backside { color: blue; }
`

function chatprofilecard (json) {
  var frontside = profilecard(json)
  var backside = chatbox(json)
  var isFrontside = true
  var el = bel`
    <div class=${css.chatprofilecard} onclick=${toggle}>
      ${frontside}
    </div>`
  return el
  function toggle (event) {
    isFrontside = !isFrontside
    el.innerHTML = ''
    el.appendChild(isFrontSide ? frontside : backside)
  }
}

[serapath]

...but the above one changes onclick and doesnt have a transition animation .... so this is a very simplified draft to give some kind of inspiration how it could work.

does that make sense?