Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

249
LINES

< > BotCompany Repo | #1032289 // outfront.js - show js console on mobile browser [fixed 3]

Document

1  
let consoleLog = console.log
2  
let consoleError = console.error
3  
let consoleWarn = console.warn
4  
5  
const containerStyles = {
6  
  position: 'fixed',
7  
  overflow: 'scroll',
8  
  width: '300px',
9  
  height: '450px',
10  
  display: 'none',
11  
  bottom: '85px',
12  
  zIndex: 100000,
13  
  wordWrap: 'break-word',
14  
  overflowWrap: 'break-word',
15  
  right: '20px',
16  
  marginLeft: '15px',
17  
  backgroundColor: '#fff',
18  
  borderRadius: '8px',
19  
  boxShadow: '2px 4px 5px 3px rgba(224, 224, 224, 0.8)'
20  
}
21  
22  
const floatButtonStyles = {
23  
  opacity: 0.8,
24  
  position: 'fixed',
25  
  width: '70px',
26  
  border: 'none',
27  
  height: '35px',
28  
  bottom: '40px',
29  
  zIndex: 100000,
30  
  right: '15px',
31  
  backgroundColor: '#d4ebf2',
32  
  color: '#fff',
33  
  borderRadius: '50px',
34  
  textAlign: 'center',
35  
  cursor: 'pointer'
36  
}
37  
38  
const buttonDefaultOpacity = {
39  
  opacity: 1
40  
}
41  
42  
const listItemStyles = {
43  
  fontFamily: 'Arial',
44  
  fontSize: '13px',
45  
  paddingTop: '5px',
46  
  paddingBottom: '5px',
47  
  paddingLeft: '15px',
48  
  paddingRight: '15px'
49  
}
50  
51  
const clearBtnStyles = {
52  
  cursor: 'pointer',
53  
  float: 'right',
54  
  paddingRight: '10px',
55  
  paddingTop: '3px',
56  
  opacity: 0.5,
57  
  fontSize: '15px',
58  
  backgroundColor: 'transparent',
59  
  border: 'none'
60  
}
61  
62  
const logoTextStyles = {
63  
  fontFamily: 'Arial',
64  
  fontSize: '16px',
65  
  fontWeight: 'bold',
66  
  paddingLeft: '15px',
67  
  paddingTop: '3px',
68  
  fontStyle: 'italic',
69  
  color: '#525EF9'
70  
}
71  
72  
const notificationBadgeStyles = {
73  
  position: 'absolute',
74  
  display: 'none',
75  
  top: '-3px',
76  
  right: '6px',
77  
  width: '12px',
78  
  height: '12px',
79  
  borderRadius: '50%',
80  
  backgroundColor: 'red'
81  
}
82  
83  
let outfrontLogUl = document.createElement('UL') // Memory leak alert
84  
const notificationBadge = document.createElement('SPAN') // Memory leak alert
85  
86  
const createButtonAndContainer = () => {
87  
  try {
88  
    // Create container start
89  
    const container = document.createElement('DIV')
90  
    container.id = 'outfront-container'
91  
    for (let property in containerStyles) {
92  
      container.style[property] = containerStyles[property]
93  
    }
94  
    // Create container end
95  
96  
    // Create clear console button start
97  
    const clearBtn = document.createElement('BUTTON') // button
98  
    clearBtn.id = 'outfront-clear-btn'
99  
    clearBtn.innerText = String.fromCharCode(55357, 56350) // bug symbol
100  
    for (let property in clearBtnStyles) {
101  
      clearBtn.style[property] = clearBtnStyles[property]
102  
    }
103  
    clearBtn.addEventListener('click', () => (outfrontLogUl.innerHTML = ''))
104  
    container.appendChild(clearBtn)
105  
    // Create clear console button end
106  
107  
    //Create logo text start
108  
    let logo = document.createElement('DIV')
109  
    logo.id = 'outfront-container'
110  
    logo.innerText = 'Console'
111  
    for (let property in logoTextStyles) {
112  
      logo.style[property] = logoTextStyles[property]
113  
    }
114  
    container.appendChild(logo)
115  
    // Create logo text end
116  
117  
    // hr start
118  
    let hr = document.createElement('HR')
119  
    hr.style.marginTop = '1px'
120  
    hr.style.marginBottom = 0
121  
    hr.style.border = 0
122  
    hr.style.borderTop = '1px solid #eaeaea'
123  
    container.appendChild(hr)
124  
    // hr end
125  
126  
    //create ul start
127  
    outfrontLogUl.id = 'outfront-log'
128  
    outfrontLogUl.style.marginTop = '0px'
129  
    container.appendChild(outfrontLogUl)
130  
    //create ul end
131  
132  
    // Create float button start
133  
    const toggleBtn = document.createElement('BUTTON')
134  
    toggleBtn.id = 'outfront-float'
135  
    toggleBtn.innerText = String.fromCharCode(55357, 56350) // bug symbol
136  
    for (let property in floatButtonStyles) {
137  
      toggleBtn.style[property] = floatButtonStyles[property]
138  
    }
139  
    toggleBtn.addEventListener(
140  
      'mouseenter',
141  
      () => (toggleBtn.style.opacity = buttonDefaultOpacity.opacity)
142  
    )
143  
    toggleBtn.addEventListener(
144  
      'mouseout',
145  
      () =>
146  
        (toggleBtn.style.opacity =
147  
          container.style.display === 'none'
148  
            ? floatButtonStyles.opacity
149  
            : buttonDefaultOpacity.opacity)
150  
    )
151  
152  
    toggleBtn.addEventListener('click', () => {
153  
      if (container.style.display === 'none') {
154  
        container.style.display = 'block'
155  
        toggleBtn.style.opacity = buttonDefaultOpacity.opacity
156  
        notificationBadge.style.display = 'none'
157  
      } else {
158  
        container.style.display = 'none'
159  
        toggleBtn.style.opacity = floatButtonStyles.opacity
160  
      }
161  
    })
162  
    // Create float button end
163  
164  
    // Create notification badge start
165  
    // const notificationBadge = document.createElement('SPAN') // initialized in global scope
166  
    notificationBadge.id = 'outfront-badge'
167  
    // notificationBadge.innerText = 'b'
168  
    for (let property in notificationBadgeStyles) {
169  
      notificationBadge.style[property] = notificationBadgeStyles[property]
170  
    }
171  
    toggleBtn.append(notificationBadge)
172  
    // Create notification badge start
173  
174  
    document.body.appendChild(container)
175  
    document.body.appendChild(toggleBtn)
176  
  } catch (error) {
177  
    console.log(error)
178  
  }
179  
}
180  
181  
const toggleNotoficationBadge = color => {
182  
  // toggle notification badge only if container is closed
183  
  if (document.getElementById('outfront-container').style.display !== 'block') {
184  
    notificationBadge.style.display = 'block'
185  
    notificationBadge.style.backgroundColor = color
186  
  }
187  
}
188  
189  
const appendToContainer = (msg, type) => {
190  
  // Create li start
191  
  const logLi = document.createElement('LI')
192  
  logLi.id = 'outfront-log-li'
193  
  for (let property in listItemStyles) {
194  
    logLi.style[property] = listItemStyles[property]
195  
  }
196  
  // Create li end
197  
198  
  if (type === 'log') {
199  
    logLi.style.color = 'black'
200  
    logLi.style.backgroundColor = 'white'
201  
    toggleNotoficationBadge('cyan')
202  
  } else if (type === 'warn') {
203  
    logLi.style.color = 'orange'
204  
    logLi.style.backgroundColor = '#fff3e7'
205  
    toggleNotoficationBadge('orange')
206  
    // logLi.style.borderTop = '0.2px solid orange'
207  
    // logLi.style.borderBottom = '0.1px solid orange'
208  
  } else if (type === 'error') {
209  
    logLi.style.color = 'red'
210  
    logLi.style.backgroundColor = '#ffeaea'
211  
    toggleNotoficationBadge('red')
212  
    // logLi.style.borderTop = '0.2px solid red'
213  
    // logLi.style.borderBottom = '0.1px solid red'
214  
  }
215  
  let textNode = document.createTextNode(msg)
216  
  logLi.appendChild(textNode)
217  
  // const outfrontLogUl = document.getElementById('outfront-log')
218  
  outfrontLogUl.style.listStyleType = 'none'
219  
  outfrontLogUl.style.padding = 0
220  
221  
  outfrontLogUl.appendChild(logLi)
222  
}
223  
224  
console.log = msg => {
225  
  consoleLog(msg) // do the usual logging as well
226  
  appendToContainer(msg, 'log')
227  
}
228  
229  
console.error = msg => {
230  
  consoleError(msg) // do the usual logging as well
231  
  appendToContainer(msg, 'error')
232  
}
233  
234  
console.warn = msg => {
235  
  consoleWarn(msg) // do the usual logging as well
236  
  appendToContainer(msg, 'warn')
237  
}
238  
239  
window.onerror = (message, source, lineno, colno, error) => {
240  
  appendToContainer(message + '::' + source.split('/')[3] + ':' + lineno, 'error')
241  
}
242  
243  
const outfront = () => {
244  
  createButtonAndContainer()
245  
}
246  
247  
window.onload = () => outfront()
248  
249  
//export default outfront

Author comment

Began life as a copy of #2000600

download  show line numbers   

Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx

No comments. add comment

Snippet ID: #1032289
Snippet name: outfront.js - show js console on mobile browser [fixed 3]
Eternal ID of this version: #1032289/1
Text MD5: 77ac03205bf6f326945e81226817d9cf
Author: stefan
Category: js
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-08-26 17:03:39
Source code size: 7102 bytes / 249 lines
Pitched / IR pitched: No / No
Views / Downloads: 159 / 62
Referenced in: [show references]