Загрузка grist static - Загрузка исходного кода grist static

grist static

Другие категории

1.0.0

Скачать

grist-static: Grist на статических сайтах без встраивания

Это способ просмотра файлов .grist (таблиц Grist) и взаимодействия с ними на обычных веб-сайтах без необходимости специальной внутренней поддержки. Идея здесь заключается в том, что для создания отчетов было бы здорово, если бы мы могли размещать электронные таблицы на веб-сайте, как мы делаем PDF-файлы, с хорошими вариантами форматирования и навигации и без особых хлопот.

Если у вас есть специальный серверный интерфейс, Grist-Core — наиболее проверенный способ размещения электронных таблиц Grist. И для многих целей встраивание Grist может быть достаточным, когда вы встраиваете электронную таблицу Grist из внешней установки Grist (например, размещенной службы, предлагаемой Grist Labs). Но если вы не можете разместить свои данные на внешнем сервере и не хотите, чтобы вам приходилось устанавливать собственную установку Grist, grist-static дает вам возможность легко отображать электронные таблицы Grist на обычных веб-сайтах. Как и в случае с PDF-файлом, люди смогут просматривать электронную таблицу, перемещаться по ней и выполнять поиск в ней. Лучше, чем PDF-файл, они смогут изменять выбор и экспериментировать с изменением чисел, чтобы увидеть, что произойдет. У каждого зрителя есть своя копия, и их изменения не будут видны другим и не сохранены. Это также будет масштабируемый способ показать документ Grist миллионам одновременных пользователей.

Посмотреть пример

https://gristlabs.github.io/grist-static показывает пару примеров документов Grist, размещенных на страницах GitHub:

примеры.mp4

Обслуживание документа Grist на статическом веб-сайте

В наши дни PDF-файлы можно разместить на веб-сайте и дать на них ссылку, ожидая, что браузеры отобразят их хорошо. Браузеры не имеют встроенной поддержки Grist [пока :-)], но вы можете создать небольшую страницу-обертку, например:

 <!doctype html >
< html >
  < head >
    < meta charset =" utf8 " >
    < script src =" https://grist-static.com/latest.js " > </ script >
  </ head >
  < body >
    < script >
      bootstrapGrist ( {
        initialFile : 'investment-research.grist' ,
        name : 'Investment Research' ,
      } ) ;
    </ script >
  </ body >
</ html >

Код в этом репозитории доступен по адресу https://grist-static.com/ в виде CDN; вы можете создать все это самостоятельно, используя этот репозиторий.
После этого достаточно разместить файл .grist на вашем сервере рядом с этим файлом .html и указать параметры для bootstrapGrist .
Вы также можете передать initialData: 'path/to/data.csv' чтобы импортировать файл CSV в новую таблицу. В этом случае initialFile является необязательным.
Существует также опция initialContent . Вы можете использовать его для передачи содержимого файла CSV.
Вы также можете передать elementId: 'element-id , чтобы открыть Grist внутри элемента на вашей странице.
- В этом случае вы можете включить небольшую страницу-оболочку для своего документа, как указано выше, и самостоятельно встроить ее как iframe.
Вы можете установить singlePage: true для менее загруженного одностраничного макета.

Средство просмотра CSV-файлов Grist

Grist может обрабатывать данные в нескольких форматах, включая CSV. Поскольку CSV является очень распространенным форматом, и взаимодействие с ним в Интернете остается рутинной задачей, мы упаковали grist-static в упрощенную утилиту csv-viewer.js специально для просмотра, сортировки, фильтрации, любого копирования/вставки из CSV непосредственно в веб-страница.

Просто добавьте средство просмотра в head веб-страницы:

 < head >
  < script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >

Затем вы можете создать кнопку для открытия CSV по URL-адресу:

 < button data-grist-csv-open =" transactions.csv " > View CSV </ button >

CSV может быть файлом или URL-адресом данных CSV, который ваш сайт генерирует для пользователя динамически.

Если вы работаете со ссылками, а не с кнопками, работает тот же подход:

 < a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >

Конечно, вы можете оформить кнопки и ссылки по своему усмотрению.

Grist CSV Viewer как веб-компонент

Средство просмотра CSV также можно использовать как веб-компонент под названием csv-viewer :

 < html >
  < head >
    < script src =" https://grist-static.com/csv-viewer.js " > </ script >
  </ head >
  < body >
    < csv-viewer initial-data =" path/to/data.csv " style =" height: 500px; border: 1px solid green " >
    </ csv-viewer >
  </ body >
</ html >

Фактически компонент принимает тот же набор параметров, что и функция bootstrapGrist , поэтому вы можете настроить его для отображения либо файла CSV, либо (несмотря на название) документа Grist по вашему выбору. Полный список доступных опций:

initial-file : Исходный документ Grist для загрузки.
initial-data : CSV-файл для импорта.
initial-content : содержимое CSV-файла для импорта.
name : Имя используемого документа Grist.
single-page : логический атрибут, который, если он присутствует, отображает документ в менее загруженном одностраничном макете.
loader : логический атрибут, который, если он присутствует, отображает индикатор загрузки во время загрузки документа.

Дополнительные возможности просмотра

Мы видели, что с помощью csv-viewer.js любой элемент можно преобразовать в ссылку, которая открывает всплывающее окно с файлом CSV. Все, что вам нужно сделать, это добавить к нему атрибут data-grist-csv-open .

Есть и другие варианты.

Установка data-grist-doc-open позволяет открывать документ Grist, а не CSV (несмотря на название утилиты).
Установите data-single-page значение true для одностраничного макета или false для многостраничного макета.
Используйте data-name , чтобы переопределить имя документа по умолчанию, отображаемое в многостраничном макете.
Используйте data-loader , чтобы отобразить индикатор загрузки во время загрузки документа. Это включено по умолчанию, передайте data-loader="false" чтобы отключить его.

Есть также несколько предопределенных классов кнопок, в частности, grist и grist-large , которые предлагают стиль Grist по умолчанию.

Для более точного управления существует глобальная функция previewInGrist с тем же API, что и bootstrapGrist , но вместо встроенного рендеринга она открывает предварительный просмотр во всплывающем окне. Это может быть полезно для любого динамически создаваемого контента или файлов, которые недоступны во время загрузки страницы.

Отличия от обычного Grist

Изменения не сохраняются.
Изменения не передаются другим зрителям.
Никакого специального контроля доступа.
Очень незрелый вариант, некоторые функции еще не портированы, например:
- Вложения
  - Должно быть выполнимо (например, через сервисного работника)
- Импорт и экспорт
  - Опять же, выполнимо, просто «по-другому»
- Измерение размера данных
  - Необходимый параметр конфигурации при компиляции SQLite.

Советы по работе с небольшими файлами .grist

Таблицы Grist по умолчанию хранят большую часть истории в файле .grist . Вы можете сократить эту историю, создав grist-core , а затем в каталоге grist-core выполнив:

 yarn run cli history prune PATH/TO/YOUR/doc.grist

Извините, это неловко.

Сборка из исходников

 git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/

В приведенной выше последовательности в каталоге page размещается множество ссылок для удобства во время разработки. Чтобы собрать файлы для загрузки, используйте вместо этого:

 make package
# everything you need is in dist/

Обслуживание всех файлов с вашего сайта или CDN

Все примеры HTML до сих пор использовали https://grist-static.com/ , домен, управляемый Grist Labs, который обслуживает только статические файлы. Этот домен регистрирует трафик для измерения использования, но не устанавливает и не отслеживает файлы cookie. Вы можете скопировать все необходимые файлы на свой веб-сайт или CDN, чтобы обеспечить полную конфиденциальность вашего трафика.

Вы можете получить необходимые файлы:

Сборка из исходников.
Или запустите npm pack grist-static чтобы получить последний архив из реестра NPM.
Или посетите https://registry.npmjs.org/grist-static/latest и найдите ссылку на последний архив, а затем загрузите его.

Тарболы (файлы .tgz ) — это распространенный формат архивов, для его распаковки доступно множество бесплатных инструментов. Как бы вы туда ни дошли, в конце концов у вас будет каталог dist/ содержащий csv-viewer.js , latest.js и многие другие файлы, составляющие Grist. Разместите этот материал там, где хотите, и соответствующим образом обновите свои URL-адреса.

CDN jsdelivr автоматически зеркалирует пакеты, размещенные в NPM, поэтому давайте использовать его в качестве примера. Мы могли бы заменить:

 < script src =" https://grist-static.com/csv-viewer.js " > </ script >

с:

 < script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script >

Конечно, это конкретное изменение просто переместит информацию об использовании на jsdelivr.net а не на grist-static.com , но суть вы поняли. Просто используйте тот же шаблон для того места, где вы решите разместить файлы.

Дорожная карта

Было бы неплохо сохранить изменения пользователей в их браузере — OPFS может быть хорошим вариантом для этого, поскольку у него есть широкая поддержка браузера. Другие шаги: